@motiadev/plugin-logs 0.13.0-beta.162-158257 → 0.13.0-beta.162-945354

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/index.js +58 -245
  2. package/dist/index.js.map +1 -1
  3. package/dist/plugin.js.map +1 -1
  4. package/package.json +5 -7
package/dist/index.js CHANGED
@@ -1,25 +1,14 @@
1
1
  import { Stream } from "@motiadev/stream-client-browser";
2
2
  import { create } from "zustand";
3
- import { useMemo, useState } from "react";
4
3
  import { Button, Input, LevelDot, Sidebar, Table, TableBody, TableCell, TableRow, cn } from "@motiadev/ui";
5
4
  import { Search, Trash, X } from "lucide-react";
5
+ import { useMemo, useState } from "react";
6
6
  import ReactJson from "react18-json-view";
7
7
  import "react18-json-view/src/dark.css";
8
8
  import "react18-json-view/src/style.css";
9
9
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
10
10
 
11
11
  import './index.css';
12
- //#region rolldown:runtime
13
- var __getOwnPropNames = Object.getOwnPropertyNames;
14
- var __commonJS = (cb, mod) => function() {
15
- return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
16
- };
17
- var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, { get: (a, b) => (typeof require !== "undefined" ? require : a)[b] }) : x)(function(x) {
18
- if (typeof require !== "undefined") return require.apply(this, arguments);
19
- throw Error("Calling `require` for \"" + x + "\" in an environment that doesn't expose the `require` function.");
20
- });
21
-
22
- //#endregion
23
12
  //#region src/stores/use-logs-store.ts
24
13
  const useLogsStore = create()((set) => ({
25
14
  logs: [],
@@ -49,62 +38,8 @@ const initLogListener = () => {
49
38
  subscription.onEvent(type, store.addLog);
50
39
  };
51
40
 
52
- //#endregion
53
- //#region ../../node_modules/.pnpm/react@19.2.0/node_modules/react/cjs/react-compiler-runtime.production.js
54
- /**
55
- * @license React
56
- * react-compiler-runtime.production.js
57
- *
58
- * Copyright (c) Meta Platforms, Inc. and affiliates.
59
- *
60
- * This source code is licensed under the MIT license found in the
61
- * LICENSE file in the root directory of this source tree.
62
- */
63
- var require_react_compiler_runtime_production = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/react@19.2.0/node_modules/react/cjs/react-compiler-runtime.production.js": ((exports) => {
64
- var ReactSharedInternals = __require("react").__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
65
- exports.c = function(size) {
66
- return ReactSharedInternals.H.useMemoCache(size);
67
- };
68
- }) });
69
-
70
- //#endregion
71
- //#region ../../node_modules/.pnpm/react@19.2.0/node_modules/react/cjs/react-compiler-runtime.development.js
72
- /**
73
- * @license React
74
- * react-compiler-runtime.development.js
75
- *
76
- * Copyright (c) Meta Platforms, Inc. and affiliates.
77
- *
78
- * This source code is licensed under the MIT license found in the
79
- * LICENSE file in the root directory of this source tree.
80
- */
81
- var require_react_compiler_runtime_development = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/react@19.2.0/node_modules/react/cjs/react-compiler-runtime.development.js": ((exports) => {
82
- "production" !== process.env.NODE_ENV && function() {
83
- var ReactSharedInternals$1 = __require("react").__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
84
- exports.c = function(size) {
85
- var dispatcher = ReactSharedInternals$1.H;
86
- null === dispatcher && console.error("Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:\n1. You might have mismatching versions of React and the renderer (such as React DOM)\n2. You might be breaking the Rules of Hooks\n3. You might have more than one copy of React in the same app\nSee https://react.dev/link/invalid-hook-call for tips about how to debug and fix this problem.");
87
- return dispatcher.useMemoCache(size);
88
- };
89
- }();
90
- }) });
91
-
92
- //#endregion
93
- //#region ../../node_modules/.pnpm/react@19.2.0/node_modules/react/compiler-runtime.js
94
- /**
95
- * Copyright (c) Meta Platforms, Inc. and affiliates.
96
- *
97
- * This source code is licensed under the MIT license found in the
98
- * LICENSE file in the root directory of this source tree.
99
- */
100
- var require_compiler_runtime = /* @__PURE__ */ __commonJS({ "../../node_modules/.pnpm/react@19.2.0/node_modules/react/compiler-runtime.js": ((exports, module) => {
101
- if (process.env.NODE_ENV === "production") module.exports = require_react_compiler_runtime_production();
102
- else module.exports = require_react_compiler_runtime_development();
103
- }) });
104
-
105
41
  //#endregion
106
42
  //#region src/utils/format-timestamp.ts
107
- var import_compiler_runtime = require_compiler_runtime();
108
43
  const formatTimestamp = (time) => {
109
44
  const date = new Date(Number(time));
110
45
  return `${date.toLocaleDateString("en-US", {
@@ -136,8 +71,8 @@ const LogDetail = ({ log, onClose }) => {
136
71
  if (!log) return null;
137
72
  const otherProps = Object.keys(log ?? {}).filter((key) => !defaultProps.includes(key));
138
73
  setHasOtherProps(otherProps.length > 0);
139
- return otherProps.reduce((acc, key_0) => {
140
- acc[key_0] = log[key_0];
74
+ return otherProps.reduce((acc, key) => {
75
+ acc[key] = log[key];
141
76
  return acc;
142
77
  }, {});
143
78
  }, [log]);
@@ -190,208 +125,86 @@ const LogDetail = ({ log, onClose }) => {
190
125
  //#endregion
191
126
  //#region src/components/logs-page.tsx
192
127
  const LogsPage = () => {
193
- const $ = (0, import_compiler_runtime.c)(41);
194
- const logs = useLogsStore(_temp);
195
- const resetLogs = useLogsStore(_temp2);
196
- const selectedLogId = useLogsStore(_temp3);
197
- const selectLogId = useLogsStore(_temp4);
198
- let t0;
199
- if ($[0] !== logs || $[1] !== selectedLogId) {
200
- t0 = selectedLogId ? logs.find((log) => log.id === selectedLogId) : void 0;
201
- $[0] = logs;
202
- $[1] = selectedLogId;
203
- $[2] = t0;
204
- } else t0 = $[2];
205
- const selectedLog = t0;
128
+ const logs = useLogsStore((state) => state.logs);
129
+ const resetLogs = useLogsStore((state) => state.resetLogs);
130
+ const selectedLogId = useLogsStore((state) => state.selectedLogId);
131
+ const selectLogId = useLogsStore((state) => state.selectLogId);
132
+ const selectedLog = useMemo(() => selectedLogId ? logs.find((log) => log.id === selectedLogId) : void 0, [logs, selectedLogId]);
206
133
  const [search, setSearch] = useState("");
207
- let t1;
208
- if ($[3] !== logs || $[4] !== search) {
209
- let t2$1;
210
- if ($[6] !== search) {
211
- t2$1 = (log_0) => log_0.msg.toLowerCase().includes(search.toLowerCase()) || log_0.traceId.toLowerCase().includes(search.toLowerCase()) || log_0.step.toLowerCase().includes(search.toLowerCase());
212
- $[6] = search;
213
- $[7] = t2$1;
214
- } else t2$1 = $[7];
215
- t1 = logs.filter(t2$1);
216
- $[3] = logs;
217
- $[4] = search;
218
- $[5] = t1;
219
- } else t1 = $[5];
220
- const filteredLogs = t1;
221
- let t2;
222
- if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
223
- t2 = (e) => setSearch(e.target.value);
224
- $[8] = t2;
225
- } else t2 = $[8];
226
- let t3;
227
- if ($[9] !== search) {
228
- t3 = /* @__PURE__ */ jsx(Input, {
229
- variant: "shade",
230
- value: search,
231
- onChange: t2,
232
- className: "px-9! font-medium",
233
- placeholder: "Search by Trace ID or Message"
234
- });
235
- $[9] = search;
236
- $[10] = t3;
237
- } else t3 = $[10];
238
- let t4;
239
- if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
240
- t4 = /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground/50" });
241
- $[11] = t4;
242
- } else t4 = $[11];
243
- let t5;
244
- if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
245
- t5 = /* @__PURE__ */ jsx(X, {
246
- className: "cursor-pointer absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground/50 hover:text-muted-foreground",
247
- onClick: () => setSearch("")
134
+ const filteredLogs = useMemo(() => {
135
+ return logs.filter((log) => {
136
+ return log.msg.toLowerCase().includes(search.toLowerCase()) || log.traceId.toLowerCase().includes(search.toLowerCase()) || log.step.toLowerCase().includes(search.toLowerCase());
248
137
  });
249
- $[12] = t5;
250
- } else t5 = $[12];
251
- let t6;
252
- if ($[13] !== t3) {
253
- t6 = /* @__PURE__ */ jsxs("div", {
254
- className: "flex-1 relative",
255
- children: [
256
- t3,
257
- t4,
258
- t5
259
- ]
260
- });
261
- $[13] = t3;
262
- $[14] = t6;
263
- } else t6 = $[14];
264
- let t7;
265
- if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
266
- t7 = /* @__PURE__ */ jsx(Trash, {});
267
- $[15] = t7;
268
- } else t7 = $[15];
269
- let t8;
270
- if ($[16] !== resetLogs) {
271
- t8 = /* @__PURE__ */ jsxs(Button, {
272
- variant: "default",
273
- onClick: resetLogs,
274
- className: "h-[34px]",
275
- children: [t7, " Clear"]
276
- });
277
- $[16] = resetLogs;
278
- $[17] = t8;
279
- } else t8 = $[17];
280
- let t9;
281
- if ($[18] !== t6 || $[19] !== t8) {
282
- t9 = /* @__PURE__ */ jsxs("div", {
138
+ }, [logs, search]);
139
+ return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
140
+ className: "grid grid-rows-[auto_1fr] h-full",
141
+ "data-testid": "logs-container",
142
+ children: [/* @__PURE__ */ jsxs("div", {
283
143
  className: "flex p-2 border-b gap-2",
284
144
  "data-testid": "logs-search-container",
285
- children: [t6, t8]
286
- });
287
- $[18] = t6;
288
- $[19] = t8;
289
- $[20] = t9;
290
- } else t9 = $[20];
291
- let t10;
292
- if ($[21] !== filteredLogs || $[22] !== selectLogId || $[23] !== selectedLogId) {
293
- let t11$1;
294
- if ($[25] !== selectLogId || $[26] !== selectedLogId) {
295
- t11$1 = (log_1, index) => /* @__PURE__ */ jsxs(TableRow, {
145
+ children: [/* @__PURE__ */ jsxs("div", {
146
+ className: "flex-1 relative",
147
+ children: [
148
+ /* @__PURE__ */ jsx(Input, {
149
+ variant: "shade",
150
+ value: search,
151
+ onChange: (e) => setSearch(e.target.value),
152
+ className: "px-9! font-medium",
153
+ placeholder: "Search by Trace ID or Message"
154
+ }),
155
+ /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground/50" }),
156
+ /* @__PURE__ */ jsx(X, {
157
+ className: "cursor-pointer absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground/50 hover:text-muted-foreground",
158
+ onClick: () => setSearch("")
159
+ })
160
+ ]
161
+ }), /* @__PURE__ */ jsxs(Button, {
162
+ variant: "default",
163
+ onClick: resetLogs,
164
+ className: "h-[34px]",
165
+ children: [/* @__PURE__ */ jsx(Trash, {}), " Clear"]
166
+ })]
167
+ }), /* @__PURE__ */ jsx(Table, { children: /* @__PURE__ */ jsx(TableBody, {
168
+ className: "font-mono font-medium",
169
+ children: filteredLogs.map((log, index) => /* @__PURE__ */ jsxs(TableRow, {
296
170
  "data-testid": "log-row",
297
171
  className: cn("font-mono font-semibold cursor-pointer border-0", {
298
- "bg-muted-foreground/10 hover:bg-muted-foreground/20": selectedLogId === log_1.id,
299
- "hover:bg-muted-foreground/10": selectedLogId !== log_1.id
172
+ "bg-muted-foreground/10 hover:bg-muted-foreground/20": selectedLogId === log.id,
173
+ "hover:bg-muted-foreground/10": selectedLogId !== log.id
300
174
  }),
301
- onClick: () => selectLogId(log_1.id),
175
+ onClick: () => selectLogId(log.id),
302
176
  children: [
303
177
  /* @__PURE__ */ jsxs(TableCell, {
304
178
  "data-testid": `time-${index}`,
305
179
  className: "whitespace-nowrap flex items-center gap-2 text-muted-foreground",
306
- children: [/* @__PURE__ */ jsx(LevelDot, { level: log_1.level }), formatTimestamp(log_1.time)]
180
+ children: [/* @__PURE__ */ jsx(LevelDot, { level: log.level }), formatTimestamp(log.time)]
307
181
  }),
308
182
  /* @__PURE__ */ jsx(TableCell, {
309
- "data-testid": `trace-${log_1.traceId}`,
183
+ "data-testid": `trace-${log.traceId}`,
310
184
  className: "whitespace-nowrap cursor-pointer hover:text-primary text-muted-foreground",
311
- onClick: () => setSearch(log_1.traceId),
312
- children: log_1.traceId
185
+ onClick: () => setSearch(log.traceId),
186
+ children: log.traceId
313
187
  }),
314
188
  /* @__PURE__ */ jsx(TableCell, {
315
189
  "data-testid": `step-${index}`,
316
- "aria-label": log_1.step,
190
+ "aria-label": log.step,
317
191
  className: "whitespace-nowrap",
318
- children: log_1.step
192
+ children: log.step
319
193
  }),
320
194
  /* @__PURE__ */ jsx(TableCell, {
321
195
  "data-testid": `msg-${index}`,
322
- "aria-label": log_1.msg,
196
+ "aria-label": log.msg,
323
197
  className: "whitespace-nowrap max-w-[500px] truncate w-full",
324
- children: log_1.msg
198
+ children: log.msg
325
199
  })
326
200
  ]
327
- }, index);
328
- $[25] = selectLogId;
329
- $[26] = selectedLogId;
330
- $[27] = t11$1;
331
- } else t11$1 = $[27];
332
- t10 = filteredLogs.map(t11$1);
333
- $[21] = filteredLogs;
334
- $[22] = selectLogId;
335
- $[23] = selectedLogId;
336
- $[24] = t10;
337
- } else t10 = $[24];
338
- let t11;
339
- if ($[28] !== t10) {
340
- t11 = /* @__PURE__ */ jsx(Table, { children: /* @__PURE__ */ jsx(TableBody, {
341
- className: "font-mono font-medium",
342
- children: t10
343
- }) });
344
- $[28] = t10;
345
- $[29] = t11;
346
- } else t11 = $[29];
347
- let t12;
348
- if ($[30] !== t11 || $[31] !== t9) {
349
- t12 = /* @__PURE__ */ jsxs("div", {
350
- className: "grid grid-rows-[auto_1fr] h-full",
351
- "data-testid": "logs-container",
352
- children: [t9, t11]
353
- });
354
- $[30] = t11;
355
- $[31] = t9;
356
- $[32] = t12;
357
- } else t12 = $[32];
358
- let t13;
359
- if ($[33] !== selectLogId) {
360
- t13 = () => selectLogId(void 0);
361
- $[33] = selectLogId;
362
- $[34] = t13;
363
- } else t13 = $[34];
364
- let t14;
365
- if ($[35] !== selectedLog || $[36] !== t13) {
366
- t14 = /* @__PURE__ */ jsx(LogDetail, {
367
- log: selectedLog,
368
- onClose: t13
369
- });
370
- $[35] = selectedLog;
371
- $[36] = t13;
372
- $[37] = t14;
373
- } else t14 = $[37];
374
- let t15;
375
- if ($[38] !== t12 || $[39] !== t14) {
376
- t15 = /* @__PURE__ */ jsxs(Fragment, { children: [t12, t14] });
377
- $[38] = t12;
378
- $[39] = t14;
379
- $[40] = t15;
380
- } else t15 = $[40];
381
- return t15;
201
+ }, index))
202
+ }) })]
203
+ }), /* @__PURE__ */ jsx(LogDetail, {
204
+ log: selectedLog,
205
+ onClose: () => selectLogId(void 0)
206
+ })] });
382
207
  };
383
- function _temp(state) {
384
- return state.logs;
385
- }
386
- function _temp2(state_0) {
387
- return state_0.resetLogs;
388
- }
389
- function _temp3(state_1) {
390
- return state_1.selectedLogId;
391
- }
392
- function _temp4(state_2) {
393
- return state_2.selectLogId;
394
- }
395
208
 
396
209
  //#endregion
397
210
  //#region src/index.ts
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["create","Log","LogsState","logs","selectedLogId","addLog","log","setLogs","resetLogs","selectLogId","logId","useLogsStore","set","undefined","state","find","l","id","reverse","Stream","useLogsStore","Log","streamName","groupId","type","initLogListener","stream","window","location","origin","replace","subscription","subscribeGroup","store","getState","addChangeListener","logs","setLogs","onEvent","addLog","ReactSharedInternals","require","__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE","exports","c","size","H","useMemoCache","process","env","NODE_ENV","ReactSharedInternals","require","__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE","exports","c","size","dispatcher","H","console","error","useMemoCache","process","env","NODE_ENV","module","exports","require","formatTimestamp","time","date","Date","Number","toLocaleDateString","year","undefined","month","day","toLocaleTimeString","hour","minute","second","hourCycle","getMilliseconds","toString","padStart","LevelDot","Sidebar","X","React","useMemo","useState","ReactJson","Log","formatTimestamp","Props","log","onClose","defaultProps","LogDetail","FC","hasOtherProps","setHasOtherProps","otherPropsObject","otherProps","Object","keys","filter","key","includes","length","reduce","acc","Record","icon","onClick","label","value","level","time","step","flows","join","traceId","Button","cn","Input","LevelDot","Table","TableBody","TableCell","TableRow","Search","Trash","X","useMemo","useState","useLogsStore","formatTimestamp","LogDetail","LogsPage","$","_c","logs","_temp","resetLogs","_temp2","selectedLogId","_temp3","selectLogId","_temp4","t0","find","log","id","undefined","selectedLog","search","setSearch","t1","t2","log_0","msg","toLowerCase","includes","traceId","step","filter","filteredLogs","Symbol","for","e","target","value","t3","t4","t5","t6","t7","t8","t9","t10","t11","log_1","index","level","time","map","t12","t13","t14","t15","state","state_0","state_1","state_2","initLogListener","LogsPage","Log"],"sources":["../src/stores/use-logs-store.ts","../src/utils/init-log-listener.ts","../../../node_modules/.pnpm/react@19.2.0/node_modules/react/cjs/react-compiler-runtime.production.js","../../../node_modules/.pnpm/react@19.2.0/node_modules/react/cjs/react-compiler-runtime.development.js","../../../node_modules/.pnpm/react@19.2.0/node_modules/react/compiler-runtime.js","../src/utils/format-timestamp.ts","../src/components/log-detail.tsx","../src/components/logs-page.tsx","../src/index.ts"],"sourcesContent":["import { create } from 'zustand'\nimport type { Log } from '../types/log'\n\nexport type LogsState = {\n logs: Log[]\n selectedLogId?: string\n addLog: (log: Log) => void\n setLogs: (logs: Log[]) => void\n resetLogs: () => void\n selectLogId: (logId?: string) => void\n}\n\nexport const useLogsStore = create<LogsState>()((set) => ({\n logs: [],\n selectedLogId: undefined,\n addLog: (log) =>\n set((state) => {\n if (state.logs.find((l) => l.id === log.id)) {\n return state\n }\n return {\n logs: [log, ...state.logs],\n }\n }),\n setLogs: (logs) =>\n set({\n logs: [...logs].reverse(),\n }),\n resetLogs: () => {\n set({ logs: [] })\n },\n selectLogId: (logId) => set({ selectedLogId: logId }),\n}))\n","import { Stream } from '@motiadev/stream-client-browser'\nimport { useLogsStore } from '../stores/use-logs-store'\nimport type { Log } from '../types/log'\n\nconst streamName = '__motia.logs'\nconst groupId = 'default'\nconst type = 'log'\n\nexport const initLogListener = () => {\n const stream = new Stream(window.location.origin.replace('http', 'ws'))\n const subscription = stream.subscribeGroup<Log>(streamName, groupId)\n const store = useLogsStore.getState()\n\n subscription.addChangeListener((logs) => {\n if (logs) {\n store.setLogs(logs)\n }\n })\n\n subscription.onEvent(type, store.addLog)\n}\n","/**\n * @license React\n * react-compiler-runtime.production.js\n *\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n\"use strict\";\nvar ReactSharedInternals =\n require(\"react\").__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;\nexports.c = function (size) {\n return ReactSharedInternals.H.useMemoCache(size);\n};\n","/**\n * @license React\n * react-compiler-runtime.development.js\n *\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n\"use strict\";\n\"production\" !== process.env.NODE_ENV &&\n (function () {\n var ReactSharedInternals =\n require(\"react\").__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;\n exports.c = function (size) {\n var dispatcher = ReactSharedInternals.H;\n null === dispatcher &&\n console.error(\n \"Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:\\n1. You might have mismatching versions of React and the renderer (such as React DOM)\\n2. You might be breaking the Rules of Hooks\\n3. You might have more than one copy of React in the same app\\nSee https://react.dev/link/invalid-hook-call for tips about how to debug and fix this problem.\"\n );\n return dispatcher.useMemoCache(size);\n };\n })();\n","/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n'use strict';\n\nif (process.env.NODE_ENV === 'production') {\n module.exports = require('./cjs/react-compiler-runtime.production.js');\n} else {\n module.exports = require('./cjs/react-compiler-runtime.development.js');\n}\n","export const formatTimestamp = (time: number) => {\n const date = new Date(Number(time))\n return `${date.toLocaleDateString('en-US', { year: undefined, month: 'short', day: '2-digit' })}, ${date.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', second: '2-digit', hourCycle: 'h24' })}.${date.getMilliseconds().toString().padStart(3, '0')}`\n}\n","import { LevelDot, Sidebar } from '@motiadev/ui'\nimport { X } from 'lucide-react'\nimport type React from 'react'\nimport { useMemo, useState } from 'react'\nimport ReactJson from 'react18-json-view'\nimport 'react18-json-view/src/dark.css'\nimport 'react18-json-view/src/style.css'\nimport type { Log } from '../types/log'\nimport { formatTimestamp } from '../utils/format-timestamp'\n\ntype Props = {\n log?: Log\n onClose: () => void\n}\n\nconst defaultProps = ['id', 'msg', 'time', 'level', 'step', 'flows', 'traceId']\n\nexport const LogDetail: React.FC<Props> = ({ log, onClose }) => {\n const [hasOtherProps, setHasOtherProps] = useState(false)\n\n const otherPropsObject = useMemo(() => {\n if (!log) {\n return null\n }\n\n const otherProps = Object.keys(log ?? {}).filter((key) => !defaultProps.includes(key))\n setHasOtherProps(otherProps.length > 0)\n\n return otherProps.reduce(\n (acc, key) => {\n acc[key] = log[key]\n return acc\n },\n {} as Record<string, unknown>,\n )\n }, [log])\n\n if (!log) {\n return null\n }\n\n return (\n <Sidebar\n onClose={onClose}\n title=\"Logs Details\"\n subtitle=\"Details including custom properties\"\n actions={[{ icon: <X />, onClick: onClose, label: 'Close' }]}\n details={[\n {\n label: 'Level',\n value: (\n <div className=\"flex items-center gap-2\">\n <LevelDot level={log.level} />\n <div className=\"capitalize\">{log.level}</div>\n </div>\n ),\n },\n { label: 'Time', value: formatTimestamp(log.time) },\n { label: 'Step', value: log.step },\n { label: 'Flows', value: log.flows.join(', ') },\n { label: 'Trace ID', value: log.traceId },\n ]}\n >\n {hasOtherProps && <ReactJson src={otherPropsObject} theme=\"default\" enableClipboard />}\n </Sidebar>\n )\n}\n","import { Button, cn, Input, LevelDot, Table, TableBody, TableCell, TableRow } from '@motiadev/ui'\nimport { Search, Trash, X } from 'lucide-react'\nimport { useMemo, useState } from 'react'\nimport { useLogsStore } from '../stores/use-logs-store'\nimport { formatTimestamp } from '../utils/format-timestamp'\nimport { LogDetail } from './log-detail'\n\nexport const LogsPage = () => {\n const logs = useLogsStore((state) => state.logs)\n const resetLogs = useLogsStore((state) => state.resetLogs)\n const selectedLogId = useLogsStore((state) => state.selectedLogId)\n const selectLogId = useLogsStore((state) => state.selectLogId)\n const selectedLog = useMemo(\n () => (selectedLogId ? logs.find((log) => log.id === selectedLogId) : undefined),\n [logs, selectedLogId],\n )\n\n const [search, setSearch] = useState('')\n const filteredLogs = useMemo(() => {\n return logs.filter((log) => {\n return (\n log.msg.toLowerCase().includes(search.toLowerCase()) ||\n log.traceId.toLowerCase().includes(search.toLowerCase()) ||\n log.step.toLowerCase().includes(search.toLowerCase())\n )\n })\n }, [logs, search])\n\n return (\n <>\n <div className=\"grid grid-rows-[auto_1fr] h-full\" data-testid=\"logs-container\">\n <div className=\"flex p-2 border-b gap-2\" data-testid=\"logs-search-container\">\n <div className=\"flex-1 relative\">\n <Input\n variant=\"shade\"\n value={search}\n onChange={(e) => setSearch(e.target.value)}\n className=\"px-9! font-medium\"\n placeholder=\"Search by Trace ID or Message\"\n />\n <Search className=\"absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground/50\" />\n <X\n className=\"cursor-pointer absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground/50 hover:text-muted-foreground\"\n onClick={() => setSearch('')}\n />\n </div>\n <Button variant=\"default\" onClick={resetLogs} className=\"h-[34px]\">\n <Trash /> Clear\n </Button>\n </div>\n <Table>\n <TableBody className=\"font-mono font-medium\">\n {filteredLogs.map((log, index) => (\n <TableRow\n data-testid=\"log-row\"\n className={cn('font-mono font-semibold cursor-pointer border-0', {\n 'bg-muted-foreground/10 hover:bg-muted-foreground/20': selectedLogId === log.id,\n 'hover:bg-muted-foreground/10': selectedLogId !== log.id,\n })}\n key={index}\n onClick={() => selectLogId(log.id)}\n >\n <TableCell\n data-testid={`time-${index}`}\n className=\"whitespace-nowrap flex items-center gap-2 text-muted-foreground\"\n >\n <LevelDot level={log.level} />\n {formatTimestamp(log.time)}\n </TableCell>\n <TableCell\n data-testid={`trace-${log.traceId}`}\n className=\"whitespace-nowrap cursor-pointer hover:text-primary text-muted-foreground\"\n onClick={() => setSearch(log.traceId)}\n >\n {log.traceId}\n </TableCell>\n <TableCell data-testid={`step-${index}`} aria-label={log.step} className=\"whitespace-nowrap\">\n {log.step}\n </TableCell>\n <TableCell\n data-testid={`msg-${index}`}\n aria-label={log.msg}\n className=\"whitespace-nowrap max-w-[500px] truncate w-full\"\n >\n {log.msg}\n </TableCell>\n </TableRow>\n ))}\n </TableBody>\n </Table>\n </div>\n <LogDetail log={selectedLog} onClose={() => selectLogId(undefined)} />\n </>\n )\n}\n","import './styles.css'\nimport { initLogListener } from './utils/init-log-listener'\n\nexport { LogsPage } from './components/logs-page'\nexport type { Log } from './types/log'\n\ninitLogListener()\n"],"x_google_ignoreList":[2,3,4],"mappings":"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"}
1
+ {"version":3,"file":"index.js","names":["LogDetail: React.FC<Props>"],"sources":["../src/stores/use-logs-store.ts","../src/utils/init-log-listener.ts","../src/utils/format-timestamp.ts","../src/components/log-detail.tsx","../src/components/logs-page.tsx","../src/index.ts"],"sourcesContent":["import { create } from 'zustand'\nimport type { Log } from '../types/log'\n\nexport type LogsState = {\n logs: Log[]\n selectedLogId?: string\n addLog: (log: Log) => void\n setLogs: (logs: Log[]) => void\n resetLogs: () => void\n selectLogId: (logId?: string) => void\n}\n\nexport const useLogsStore = create<LogsState>()((set) => ({\n logs: [],\n selectedLogId: undefined,\n addLog: (log) =>\n set((state) => {\n if (state.logs.find((l) => l.id === log.id)) {\n return state\n }\n return {\n logs: [log, ...state.logs],\n }\n }),\n setLogs: (logs) =>\n set({\n logs: [...logs].reverse(),\n }),\n resetLogs: () => {\n set({ logs: [] })\n },\n selectLogId: (logId) => set({ selectedLogId: logId }),\n}))\n","import { Stream } from '@motiadev/stream-client-browser'\nimport { useLogsStore } from '../stores/use-logs-store'\nimport type { Log } from '../types/log'\n\nconst streamName = '__motia.logs'\nconst groupId = 'default'\nconst type = 'log'\n\nexport const initLogListener = () => {\n const stream = new Stream(window.location.origin.replace('http', 'ws'))\n const subscription = stream.subscribeGroup<Log>(streamName, groupId)\n const store = useLogsStore.getState()\n\n subscription.addChangeListener((logs) => {\n if (logs) {\n store.setLogs(logs)\n }\n })\n\n subscription.onEvent(type, store.addLog)\n}\n","export const formatTimestamp = (time: number) => {\n const date = new Date(Number(time))\n return `${date.toLocaleDateString('en-US', { year: undefined, month: 'short', day: '2-digit' })}, ${date.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', second: '2-digit', hourCycle: 'h24' })}.${date.getMilliseconds().toString().padStart(3, '0')}`\n}\n","import { LevelDot, Sidebar } from '@motiadev/ui'\nimport { X } from 'lucide-react'\nimport type React from 'react'\nimport { useMemo, useState } from 'react'\nimport ReactJson from 'react18-json-view'\nimport 'react18-json-view/src/dark.css'\nimport 'react18-json-view/src/style.css'\nimport type { Log } from '../types/log'\nimport { formatTimestamp } from '../utils/format-timestamp'\n\ntype Props = {\n log?: Log\n onClose: () => void\n}\n\nconst defaultProps = ['id', 'msg', 'time', 'level', 'step', 'flows', 'traceId']\n\nexport const LogDetail: React.FC<Props> = ({ log, onClose }) => {\n const [hasOtherProps, setHasOtherProps] = useState(false)\n\n const otherPropsObject = useMemo(() => {\n if (!log) {\n return null\n }\n\n const otherProps = Object.keys(log ?? {}).filter((key) => !defaultProps.includes(key))\n setHasOtherProps(otherProps.length > 0)\n\n return otherProps.reduce(\n (acc, key) => {\n acc[key] = log[key]\n return acc\n },\n {} as Record<string, unknown>,\n )\n }, [log])\n\n if (!log) {\n return null\n }\n\n return (\n <Sidebar\n onClose={onClose}\n title=\"Logs Details\"\n subtitle=\"Details including custom properties\"\n actions={[{ icon: <X />, onClick: onClose, label: 'Close' }]}\n details={[\n {\n label: 'Level',\n value: (\n <div className=\"flex items-center gap-2\">\n <LevelDot level={log.level} />\n <div className=\"capitalize\">{log.level}</div>\n </div>\n ),\n },\n { label: 'Time', value: formatTimestamp(log.time) },\n { label: 'Step', value: log.step },\n { label: 'Flows', value: log.flows.join(', ') },\n { label: 'Trace ID', value: log.traceId },\n ]}\n >\n {hasOtherProps && <ReactJson src={otherPropsObject} theme=\"default\" enableClipboard />}\n </Sidebar>\n )\n}\n","import { Button, cn, Input, LevelDot, Table, TableBody, TableCell, TableRow } from '@motiadev/ui'\nimport { Search, Trash, X } from 'lucide-react'\nimport { useMemo, useState } from 'react'\nimport { useLogsStore } from '../stores/use-logs-store'\nimport { formatTimestamp } from '../utils/format-timestamp'\nimport { LogDetail } from './log-detail'\n\nexport const LogsPage = () => {\n const logs = useLogsStore((state) => state.logs)\n const resetLogs = useLogsStore((state) => state.resetLogs)\n const selectedLogId = useLogsStore((state) => state.selectedLogId)\n const selectLogId = useLogsStore((state) => state.selectLogId)\n const selectedLog = useMemo(\n () => (selectedLogId ? logs.find((log) => log.id === selectedLogId) : undefined),\n [logs, selectedLogId],\n )\n\n const [search, setSearch] = useState('')\n const filteredLogs = useMemo(() => {\n return logs.filter((log) => {\n return (\n log.msg.toLowerCase().includes(search.toLowerCase()) ||\n log.traceId.toLowerCase().includes(search.toLowerCase()) ||\n log.step.toLowerCase().includes(search.toLowerCase())\n )\n })\n }, [logs, search])\n\n return (\n <>\n <div className=\"grid grid-rows-[auto_1fr] h-full\" data-testid=\"logs-container\">\n <div className=\"flex p-2 border-b gap-2\" data-testid=\"logs-search-container\">\n <div className=\"flex-1 relative\">\n <Input\n variant=\"shade\"\n value={search}\n onChange={(e) => setSearch(e.target.value)}\n className=\"px-9! font-medium\"\n placeholder=\"Search by Trace ID or Message\"\n />\n <Search className=\"absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground/50\" />\n <X\n className=\"cursor-pointer absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground/50 hover:text-muted-foreground\"\n onClick={() => setSearch('')}\n />\n </div>\n <Button variant=\"default\" onClick={resetLogs} className=\"h-[34px]\">\n <Trash /> Clear\n </Button>\n </div>\n <Table>\n <TableBody className=\"font-mono font-medium\">\n {filteredLogs.map((log, index) => (\n <TableRow\n data-testid=\"log-row\"\n className={cn('font-mono font-semibold cursor-pointer border-0', {\n 'bg-muted-foreground/10 hover:bg-muted-foreground/20': selectedLogId === log.id,\n 'hover:bg-muted-foreground/10': selectedLogId !== log.id,\n })}\n key={index}\n onClick={() => selectLogId(log.id)}\n >\n <TableCell\n data-testid={`time-${index}`}\n className=\"whitespace-nowrap flex items-center gap-2 text-muted-foreground\"\n >\n <LevelDot level={log.level} />\n {formatTimestamp(log.time)}\n </TableCell>\n <TableCell\n data-testid={`trace-${log.traceId}`}\n className=\"whitespace-nowrap cursor-pointer hover:text-primary text-muted-foreground\"\n onClick={() => setSearch(log.traceId)}\n >\n {log.traceId}\n </TableCell>\n <TableCell data-testid={`step-${index}`} aria-label={log.step} className=\"whitespace-nowrap\">\n {log.step}\n </TableCell>\n <TableCell\n data-testid={`msg-${index}`}\n aria-label={log.msg}\n className=\"whitespace-nowrap max-w-[500px] truncate w-full\"\n >\n {log.msg}\n </TableCell>\n </TableRow>\n ))}\n </TableBody>\n </Table>\n </div>\n <LogDetail log={selectedLog} onClose={() => selectLogId(undefined)} />\n </>\n )\n}\n","import './styles.css'\nimport { initLogListener } from './utils/init-log-listener'\n\nexport { LogsPage } from './components/logs-page'\nexport type { Log } from './types/log'\n\ninitLogListener()\n"],"mappings":"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"}
package/dist/plugin.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"plugin.js","names":["MotiaPlugin","MotiaPluginContext","plugin","motia","workbench","packageName","label","position","componentName","labelIcon"],"sources":["../src/plugin.ts"],"sourcesContent":["import type { MotiaPlugin, MotiaPluginContext } from '@motiadev/core'\n\nexport default function plugin(motia: MotiaPluginContext): MotiaPlugin {\n return {\n workbench: [\n {\n packageName: '@motiadev/plugin-logs',\n label: 'Logs',\n position: 'bottom',\n componentName: 'LogsPage',\n labelIcon: 'logs',\n },\n ],\n }\n}\n"],"mappings":";AAEA,SAAwBE,OAAOC,OAAwC;AACrE,QAAO,EACLC,WAAW,CACT;EACEC,aAAa;EACbC,OAAO;EACPC,UAAU;EACVC,eAAe;EACfC,WAAW;EACZ,CAAA,EAEJ"}
1
+ {"version":3,"file":"plugin.js","names":[],"sources":["../src/plugin.ts"],"sourcesContent":["import type { MotiaPlugin, MotiaPluginContext } from '@motiadev/core'\n\nexport default function plugin(motia: MotiaPluginContext): MotiaPlugin {\n return {\n workbench: [\n {\n packageName: '@motiadev/plugin-logs',\n label: 'Logs',\n position: 'bottom',\n componentName: 'LogsPage',\n labelIcon: 'logs',\n },\n ],\n }\n}\n"],"mappings":";AAEA,SAAwB,OAAO,OAAwC;AACrE,QAAO,EACL,WAAW,CACT;EACE,aAAa;EACb,OAAO;EACP,UAAU;EACV,eAAe;EACf,WAAW;EACZ,CACF,EACF"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@motiadev/plugin-logs",
3
- "version": "0.13.0-beta.162-158257",
3
+ "version": "0.13.0-beta.162-945354",
4
4
  "type": "module",
5
5
  "main": "./dist/index.js",
6
6
  "types": "./dist/index.d.ts",
@@ -14,23 +14,21 @@
14
14
  ],
15
15
  "dependencies": {
16
16
  "lucide-react": "^0.554.0",
17
+ "react": "^19.2.0",
17
18
  "react18-json-view": "^0.2.9",
18
19
  "zustand": "^5.0.8"
19
20
  },
20
21
  "peerDependencies": {
21
- "@motiadev/stream-client-browser": "0.13.0-beta.162-158257",
22
- "@motiadev/ui": "0.13.0-beta.162-158257",
23
- "@motiadev/core": "0.13.0-beta.162-158257"
22
+ "@motiadev/stream-client-browser": "0.13.0-beta.162-945354",
23
+ "@motiadev/core": "0.13.0-beta.162-945354",
24
+ "@motiadev/ui": "0.13.0-beta.162-945354"
24
25
  },
25
26
  "devDependencies": {
26
27
  "@bosh-code/tsdown-plugin-inject-css": "^2.0.0",
27
28
  "@bosh-code/tsdown-plugin-tailwindcss": "^1.0.1",
28
- "@rollup/plugin-babel": "^6.1.0",
29
29
  "@tailwindcss/postcss": "^4.1.17",
30
30
  "@types/node": "^24.10.1",
31
31
  "@types/react": "^19.2.7",
32
- "babel-plugin-react-compiler": "^1.0.0",
33
- "react": "^19.2.0",
34
32
  "tailwindcss": "^4.1.17",
35
33
  "tsdown": "^0.16.6",
36
34
  "typescript": "^5.9.3"