@motiadev/workbench 0.8.2-beta.139 → 0.8.2-beta.140-246724

package/dist/src/components/observability/trace-item/trace-item-detail.js

@@ -6,5 +6,5 @@ import { memo } from 'react';
 import { EventIcon } from '../events/event-icon';
 import { TraceEvent } from '../events/trace-event';
 export const TraceItemDetail = memo(({ trace, onClose }) => {
-    return (_jsxs(Sidebar, { onClose: onClose, title: "Trace Details", subtitle: `Viewing details from step ${trace.name}`, actions: [{ icon: _jsx(X, {}), onClick: onClose, label: 'Close' }], children: [_jsxs("div", { className: "px-2 w-[800px] overflow-auto", children: [_jsxs("div", { className: "flex items-center gap-4 text-sm text-muted-foreground mb-4", children: [trace.endTime && _jsxs("span", { children: ["Duration: ", formatDuration(trace.endTime - trace.startTime)] }), _jsx("div", { className: "bg-blue-500 font-bold text-xs px-[4px] py-[2px] rounded-sm text-blue-100", children: trace.entryPoint.type }), trace.correlationId && _jsxs(Badge, { variant: "outline", children: ["Correlated: ", trace.correlationId] })] }), _jsx("div", { className: "pl-6 border-l-1 border-gray-500/40 font-mono text-xs flex flex-col gap-3", children: trace.events.map((event, index) => (_jsxs("div", { className: "relative", children: [_jsx("div", { className: "absolute -left-[26px] top-[8px] w-1 h-1 rounded-full bg-emerald-500 outline outline-2 outline-emerald-500/50" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(EventIcon, { event: event }), _jsxs("span", { className: "text-sm font-mono text-muted-foreground", children: ["+", Math.floor(event.timestamp - trace.startTime), "ms"] }), _jsx(TraceEvent, { event: event })] })] }, index))) })] }), trace.error && (_jsxs("div", { className: "p-4 bg-red-800/10", children: [_jsx("div", { className: "text-sm text-red-800 dark:text-red-400 font-semibold", children: trace.error.message }), _jsx("div", { className: "text-sm text-red-800 dark:text-red-400 pl-4", children: trace.error.stack })] }))] }));
+    return (_jsxs(Sidebar, { onClose: onClose, title: "Trace Details", subtitle: `Viewing details from step ${trace.name}`, actions: [{ icon: _jsx(X, {}), onClick: onClose, label: 'Close' }], children: [_jsxs("div", { className: "px-2 w-[800px] overflow-auto", children: [_jsxs("div", { className: "flex items-center gap-4 text-sm text-muted-foreground mb-4", children: [trace.endTime && _jsxs("span", { children: ["Duration: ", formatDuration(trace.endTime - trace.startTime)] }), _jsx("div", { className: "bg-blue-500 font-bold text-xs px-[4px] py-[2px] rounded-sm text-blue-100", children: trace.entryPoint.type }), trace.correlationId && _jsxs(Badge, { variant: "outline", children: ["Correlated: ", trace.correlationId] })] }), _jsx("div", { className: "pl-6 border-l-1 border-gray-500/40 font-mono text-xs flex flex-col gap-3", children: trace.events.map((event, index) => (_jsxs("div", { className: "relative", children: [_jsx("div", { className: "absolute -left-[26px] top-[8px] w-1 h-1 rounded-full bg-emerald-500 outline outline-2 outline-emerald-500/50" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(EventIcon, { event: event }), _jsxs("span", { className: "text-sm font-mono text-muted-foreground", children: ["+", formatDuration(Math.floor(event.timestamp - trace.startTime))] }), _jsx(TraceEvent, { event: event })] })] }, index))) })] }), trace.error && (_jsxs("div", { className: "p-4 bg-red-800/10", children: [_jsx("div", { className: "text-sm text-red-800 dark:text-red-400 font-semibold", children: trace.error.message }), _jsx("div", { className: "text-sm text-red-800 dark:text-red-400 pl-4", children: trace.error.stack })] }))] }));
 });

package/dist/src/components/observability/trace-timeline.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useGlobalStore } from '@/stores/use-global-store';
+import { formatDuration } from '@/lib/utils';
 import { useStreamGroup, useStreamItem } from '@motiadev/stream-client-react';
 import { Button } from '@motiadev/ui';
 import { Minus, Plus } from 'lucide-react';
@@ -25,5 +26,5 @@ export const TraceTimeline = memo(({ groupId }) => {
     };
     if (!group)
         return null;
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "flex flex-col flex-1 overflow-x-auto h-full relative", children: _jsxs("div", { className: "flex flex-col items-center min-w-full sticky top-0", style: { width: `${zoom * 1000}px` }, children: [_jsxs("div", { className: "flex flex-1 w-full sticky top-0 bg-background z-10", children: [_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: [_jsx(Button, { variant: "icon", size: "sm", className: "px-2", onClick: zoomMinus, children: _jsx(Minus, { className: "w-4 h-4 cursor-pointer" }) }), _jsxs("span", { className: "text-sm font-bold text-muted-foreground", children: [Math.floor(zoom * 100), "%"] }), _jsx(Button, { variant: "icon", size: "sm", className: "px-2", onClick: () => setZoom(zoom + 0.1), children: _jsx(Plus, { className: "w-4 h-4 cursor-pointer" }) })] }), _jsxs("div", { className: "flex justify-between font-mono p-2 w-full text-xs text-muted-foreground bg-card", children: [_jsx("span", { children: "0ms" }), _jsxs("span", { children: [Math.floor((endTime - group.startTime) * 0.25), "ms"] }), _jsxs("span", { children: [Math.floor((endTime - group.startTime) * 0.5), "ms"] }), _jsxs("span", { children: [Math.floor((endTime - group.startTime) * 0.75), "ms"] }), _jsxs("span", { children: [Math.floor(endTime - group.startTime), "ms"] }), _jsxs("div", { className: "absolute bottom-[-4px] w-full flex justify-between", children: [_jsx("span", { className: "w-[1px] h-full bg-blue-500" }), _jsx("span", { className: "w-[1px] h-full bg-blue-500" }), _jsx("span", { className: "w-[1px] h-full bg-blue-500" }), _jsx("span", { className: "w-[1px] h-full bg-blue-500" }), _jsx("span", { className: "w-[1px] h-full bg-blue-500" })] })] })] }), _jsx("div", { className: "flex flex-col w-full h-full", children: data?.map((trace) => (_jsx(TraceItem, { trace: trace, group: group, groupEndTime: endTime, onExpand: selectTraceId }, trace.id))) })] }) }), selectedTrace && _jsx(TraceItemDetail, { trace: selectedTrace, onClose: () => selectTraceId(undefined) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "flex flex-col flex-1 overflow-x-auto h-full relative", children: _jsxs("div", { className: "flex flex-col items-center min-w-full sticky top-0", style: { width: `${zoom * 1000}px` }, children: [_jsxs("div", { className: "flex flex-1 w-full sticky top-0 bg-background z-10", children: [_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: [_jsx(Button, { variant: "icon", size: "sm", className: "px-2", onClick: zoomMinus, children: _jsx(Minus, { className: "w-4 h-4 cursor-pointer" }) }), _jsxs("span", { className: "text-sm font-bold text-muted-foreground", children: [Math.floor(zoom * 100), "%"] }), _jsx(Button, { variant: "icon", size: "sm", className: "px-2", onClick: () => setZoom(zoom + 0.1), children: _jsx(Plus, { className: "w-4 h-4 cursor-pointer" }) })] }), _jsxs("div", { className: "flex justify-between font-mono p-2 w-full text-xs text-muted-foreground bg-card", children: [_jsx("span", { children: formatDuration(0) }), _jsx("span", { children: formatDuration(Math.floor((endTime - group.startTime) * 0.25)) }), _jsx("span", { children: formatDuration(Math.floor((endTime - group.startTime) * 0.5)) }), _jsx("span", { children: formatDuration(Math.floor((endTime - group.startTime) * 0.75)) }), _jsx("span", { children: formatDuration(Math.floor(endTime - group.startTime)) }), _jsxs("div", { className: "absolute bottom-[-4px] w-full flex justify-between", children: [_jsx("span", { className: "w-[1px] h-full bg-blue-500" }), _jsx("span", { className: "w-[1px] h-full bg-blue-500" }), _jsx("span", { className: "w-[1px] h-full bg-blue-500" }), _jsx("span", { className: "w-[1px] h-full bg-blue-500" }), _jsx("span", { className: "w-[1px] h-full bg-blue-500" })] })] })] }), _jsx("div", { className: "flex flex-col w-full h-full", children: data?.map((trace) => (_jsx(TraceItem, { trace: trace, group: group, groupEndTime: endTime, onExpand: selectTraceId }, trace.id))) })] }) }), selectedTrace && _jsx(TraceItemDetail, { trace: selectedTrace, onClose: () => selectTraceId(undefined) })] }));
 });

package/dist/src/components/observability/traces-groups.js

@@ -1,15 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { formatDuration } from '@/lib/utils';
 import { cn } from '@motiadev/ui';
 import { formatDistanceToNow } from 'date-fns';
 import { memo } from 'react';
 import { TraceStatusBadge } from './trace-status';
 export const TracesGroups = memo(({ groups, selectedGroupId, onGroupSelect }) => {
-    const formatDuration = (duration) => {
-        if (!duration)
-            return 'N/A';
-        if (duration < 1000)
-            return `${duration}ms`;
-        return `${(duration / 1000).toFixed(1)}s`;
-    };
     return (_jsx("div", { className: "overflow-auto", children: groups.length > 0 && (_jsx("div", { children: [...groups].reverse().map((group) => (_jsx("div", { "data-testid": `trace-${group.id}`, className: cn('motia-trace-group cursor-pointer transition-colors', selectedGroupId === group.id ? 'bg-muted-foreground/10' : 'hover:bg-muted/70'), onClick: () => onGroupSelect(group), children: _jsxs("div", { className: "p-3 flex flex-col gap-1", children: [_jsxs("div", { className: "flex flex-row justify-between items-center gap-2", children: [_jsx("span", { className: "font-semibold text-lg", children: group.name }), _jsx(TraceStatusBadge, { status: group.status, duration: group.endTime ? formatDuration(group.endTime - group.startTime) : undefined })] }), _jsxs("div", { className: "text-xs text-muted-foreground space-y-1", children: [_jsxs("div", { className: "flex justify-between", children: [_jsx("div", { "data-testid": "trace-id", className: "text-xs text-muted-foreground font-mono tracking-[1px]", children: group.id }), _jsxs("span", { children: [group.metadata.totalSteps, " steps"] })] }), _jsxs("div", { className: "flex justify-between", children: [formatDistanceToNow(group.startTime), " ago"] }), group.metadata.activeSteps > 0 && (_jsxs("div", { className: "text-blue-600", children: [group.metadata.activeSteps, " active"] }))] })] }) }, group.id))) })) }));
 });

package/dist/src/lib/__tests__/utils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/lib/__tests__/utils.test.js

@@ -0,0 +1,94 @@
+import { formatDuration } from '../utils';
+describe('formatDuration', () => {
+    describe('milliseconds', () => {
+        it('should format values under 1 second as milliseconds', () => {
+            expect(formatDuration(0)).toBe('0ms');
+            expect(formatDuration(1)).toBe('1ms');
+            expect(formatDuration(250)).toBe('250ms');
+            expect(formatDuration(500)).toBe('500ms');
+            expect(formatDuration(999)).toBe('999ms');
+        });
+    });
+    describe('seconds', () => {
+        it('should format values between 1 second and 1 minute as seconds with 1 decimal', () => {
+            expect(formatDuration(1000)).toBe('1.0s');
+            expect(formatDuration(1500)).toBe('1.5s');
+            expect(formatDuration(15000)).toBe('15.0s');
+            expect(formatDuration(45500)).toBe('45.5s');
+            expect(formatDuration(59999)).toBe('60.0s');
+        });
+        it('should round to 1 decimal place', () => {
+            expect(formatDuration(1234)).toBe('1.2s');
+            expect(formatDuration(1567)).toBe('1.6s');
+            expect(formatDuration(12345)).toBe('12.3s');
+        });
+    });
+    describe('minutes', () => {
+        it('should format values between 1 minute and 1 hour as minutes with 1 decimal', () => {
+            expect(formatDuration(60000)).toBe('1.0min');
+            expect(formatDuration(90000)).toBe('1.5min');
+            expect(formatDuration(300000)).toBe('5.0min');
+            expect(formatDuration(1800000)).toBe('30.0min');
+            expect(formatDuration(3599999)).toBe('60.0min');
+        });
+        it('should round to 1 decimal place', () => {
+            expect(formatDuration(123456)).toBe('2.1min');
+            expect(formatDuration(567890)).toBe('9.5min');
+        });
+    });
+    describe('hours', () => {
+        it('should format values 1 hour or more as hours with 1 decimal', () => {
+            expect(formatDuration(3600000)).toBe('1.0h');
+            expect(formatDuration(5400000)).toBe('1.5h');
+            expect(formatDuration(7200000)).toBe('2.0h');
+            expect(formatDuration(36000000)).toBe('10.0h');
+        });
+        it('should round to 1 decimal place', () => {
+            expect(formatDuration(3661000)).toBe('1.0h');
+            expect(formatDuration(5432100)).toBe('1.5h');
+            expect(formatDuration(9000000)).toBe('2.5h');
+        });
+    });
+    describe('edge cases', () => {
+        it('should return "N/A" for undefined', () => {
+            expect(formatDuration(undefined)).toBe('N/A');
+        });
+        it('should return "N/A" for null', () => {
+            expect(formatDuration(null)).toBe('N/A');
+        });
+        it('should return "N/A" for 0 when treated as falsy', () => {
+            expect(formatDuration(0)).toBe('0ms');
+        });
+    });
+    describe('boundary values', () => {
+        it('should correctly handle millisecond-second boundary (999ms vs 1.0s)', () => {
+            expect(formatDuration(999)).toBe('999ms');
+            expect(formatDuration(1000)).toBe('1.0s');
+        });
+        it('should correctly handle second-minute boundary (59.9s vs 1.0min)', () => {
+            expect(formatDuration(59999)).toBe('60.0s');
+            expect(formatDuration(60000)).toBe('1.0min');
+        });
+        it('should correctly handle minute-hour boundary (59.9min vs 1.0h)', () => {
+            expect(formatDuration(3599999)).toBe('60.0min');
+            expect(formatDuration(3600000)).toBe('1.0h');
+        });
+    });
+    describe('real-world scenarios', () => {
+        it('should format typical API response times', () => {
+            expect(formatDuration(50)).toBe('50ms');
+            expect(formatDuration(150)).toBe('150ms');
+            expect(formatDuration(2500)).toBe('2.5s');
+        });
+        it('should format typical workflow execution times', () => {
+            expect(formatDuration(5000)).toBe('5.0s');
+            expect(formatDuration(30000)).toBe('30.0s');
+            expect(formatDuration(120000)).toBe('2.0min');
+        });
+        it('should format long-running tasks', () => {
+            expect(formatDuration(600000)).toBe('10.0min');
+            expect(formatDuration(1800000)).toBe('30.0min');
+            expect(formatDuration(7200000)).toBe('2.0h');
+        });
+    });
+});

package/dist/src/lib/utils.js

@@ -1,9 +1,13 @@
 export const formatDuration = (duration) => {
-    if (!duration)
+    if (duration === undefined || duration === null)
         return 'N/A';
     if (duration < 1000)
         return `${duration}ms`;
-    return `${(duration / 1000).toFixed(1)}s`;
+    if (duration < 60000)
+        return `${(duration / 1000).toFixed(1)}s`;
+    if (duration < 3600000)
+        return `${(duration / 60000).toFixed(1)}min`;
+    return `${(duration / 3600000).toFixed(1)}h`;
 };
 export const formatTimestamp = (time) => {
     const date = new Date(Number(time));