@motiadev/workbench 0.3.1-beta.87 → 0.3.1-beta.88-406962

package/dist/src/components/header/header.js

@@ -1,15 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Link, useLocation } from 'react-router';
-import { BadgeCount } from '../ui/BadgeCount';
-import { LogoIcon } from '../ui/logo-icon';
-import { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, } from '../ui/navigation-menu';
+import { useThemeStore } from '@/stores/use-theme-store';
 import { ThemeToggle } from '../ui/theme-toggle';
-import { useListFlows } from '@/hooks/use-list-flows';
-import { NavigationMenuSub } from '@radix-ui/react-navigation-menu';
-import { Workflow } from 'lucide-react';
 export const Header = () => {
-    const { pathname } = useLocation();
-    const { flows } = useListFlows();
-    const isActive = (flowId) => pathname.includes(`/flow/${flowId}`);
-    return (_jsxs("header", { className: "min-h-16 px-4 gap-1 flex items-center bg-header text-header-foreground border-b border-header-border", children: [_jsx(LogoIcon, { className: "h-8 w-8 mr-16" }), _jsx(NavigationMenu, { children: _jsxs(NavigationMenuList, { children: [_jsx(NavigationMenuItem, { children: _jsx(NavigationMenuLink, { asChild: true, children: _jsxs(Link, { "data-testid": "header-logs-link", to: "/logs", className: 'flex flex-row items-center pr-2 relative', children: ["Logs", _jsx(BadgeCount, { className: "absolute top-1 right-0", dotOnly: true })] }) }) }), _jsx(NavigationMenuItem, { children: _jsx(NavigationMenuLink, { asChild: true, children: _jsx(Link, { "data-testid": "header-traces-link", to: "/traces", children: "Traces" }) }) }), _jsx(NavigationMenuItem, { children: _jsx(NavigationMenuLink, { asChild: true, children: _jsx(Link, { "data-testid": "header-states-link", to: "/states", children: "States" }) }) }), _jsx(NavigationMenuItem, { children: _jsx(NavigationMenuLink, { asChild: true, children: _jsx(Link, { "data-testid": "header-endpoints-link", to: "/endpoints", children: "Endpoints" }) }) })] }) }), _jsx(NavigationMenu, { children: _jsxs(NavigationMenuList, { children: [_jsxs(NavigationMenuItem, { children: [_jsx(NavigationMenuTrigger, { className: 'cursor-pointer', "data-testid": "header-flows-link", children: "Flows" }), _jsx(NavigationMenuContent, { children: _jsx(NavigationMenuSub, { children: _jsx(NavigationMenuList, { className: "flex flex-col min-w-[200px]", children: flows.map((flow) => (_jsx(NavigationMenuItem, { className: "w-full", asChild: true, children: _jsx(NavigationMenuLink, { asChild: true, active: isActive(flow.id), children: _jsxs(Link, { "data-testid": `flow-${flow.name}-link`, to: `/flow/${flow.id}`, className: 'flex flex-row gap-2 items-center', children: [_jsx(Workflow, { className: "w-4 h-4" }), " ", flow.name] }) }) }, flow.id))) }) }) })] }), _jsx(NavigationMenuIndicator, {})] }) }), _jsx("div", { className: "ml-auto", children: _jsx(ThemeToggle, {}) })] }));
+    const theme = useThemeStore((state) => state.theme);
+    return (_jsxs("header", { className: "min-h-16 px-4 gap-1 flex items-center bg-default text-default-foreground border-b", children: [_jsx("img", { src: `/motia-${theme}.png`, className: "h-5" }), _jsx("div", { className: "flex-1" }), _jsx(ThemeToggle, {})] }));
 };

package/dist/src/components/logs/log-detail.d.ts

@@ -1,5 +1,7 @@
 import React from 'react';
-import { Log } from '../../stores/use-logs';
+import 'react18-json-view/src/dark.css';
+import 'react18-json-view/src/style.css';
+import { Log } from '@/stores/use-logs-store';
 type Props = {
     log?: Log;
     onClose: () => void;

package/dist/src/components/logs/log-detail.js

@@ -1,15 +1,37 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { LogLevelBadge } from './log-level-badge';
-import { LogField } from './log-field';
-import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '../ui/sheet';
-const defaultProps = ['msg', 'time', 'level', 'step', 'flows', 'traceId'];
+import { formatTimestamp } from '@/lib/utils';
+import { useMemo, useState } from 'react';
+import ReactJson from 'react18-json-view';
+import 'react18-json-view/src/dark.css';
+import 'react18-json-view/src/style.css';
+import { LogLevelDot } from './log-level-dot';
+import { Sidebar } from '@/components/sidebar/sidebar';
+import { X } from 'lucide-react';
+const defaultProps = ['id', 'msg', 'time', 'level', 'step', 'flows', 'traceId'];
 export const LogDetail = ({ log, onClose }) => {
-    const isOpen = !!log;
-    const onOpenChange = (open) => {
-        if (!open) {
-            onClose();
+    const [hasOtherProps, setHasOtherProps] = useState(false);
+    const otherPropsObject = useMemo(() => {
+        if (!log) {
+            return null;
         }
-    };
-    const otherProps = Object.keys(log ?? {}).filter((key) => !defaultProps.includes(key));
-    return (_jsx(Sheet, { open: isOpen, onOpenChange: onOpenChange, children: _jsxs(SheetContent, { className: "flex flex-col h-full", children: [_jsxs(SheetHeader, { children: [_jsx(SheetTitle, { children: "Logs details" }), _jsx(SheetDescription, { children: "Log details and application." })] }), _jsx("div", { className: "font-mono overflow-y-auto", children: log && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex flex-row gap-2", children: [_jsx(LogField, { label: "Level", value: _jsx(LogLevelBadge, { level: log.level }), className: "flex-1" }), _jsx(LogField, { label: "Time", value: new Date(log.time).toLocaleString(), className: "flex-1" })] }), _jsxs("div", { className: "flex flex-row gap-2", children: [_jsx(LogField, { label: "Step", value: log.step, className: "flex-1" }), _jsx(LogField, { label: "Flows", value: log.flows.join(', '), className: "flex-1" })] }), _jsx(LogField, { label: "Trace ID", value: log.traceId }), _jsx(LogField, { label: "Message", value: log.msg }), otherProps.map((key) => (_jsx(LogField, { label: key, value: log[key] }, key)))] })) })] }) }));
+        const otherProps = Object.keys(log ?? {}).filter((key) => !defaultProps.includes(key));
+        setHasOtherProps(otherProps.length > 0);
+        return otherProps.reduce((acc, key) => {
+            acc[key] = log[key];
+            return acc;
+        }, {});
+    }, [log]);
+    if (!log) {
+        return null;
+    }
+    return (_jsx(Sidebar, { onClose: onClose, title: "Logs Details", subtitle: "Details including custom properties", actions: [{ icon: _jsx(X, {}), onClick: onClose, label: 'Close' }], details: [
+            {
+                label: 'Level',
+                value: (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(LogLevelDot, { level: log.level }), _jsx("div", { className: "capitalize", children: log.level })] })),
+            },
+            { label: 'Time', value: formatTimestamp(log.time) },
+            { label: 'Step', value: log.step },
+            { label: 'Flows', value: log.flows.join(', ') },
+            { label: 'Trace ID', value: log.traceId },
+        ], children: hasOtherProps && _jsx(ReactJson, { src: otherPropsObject, theme: "default", enableClipboard: false }) }));
 };

package/dist/src/components/logs/log-level-badge.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Badge } from '../ui/badge';
+const map = {
+    info: 'info',
+    error: 'error',
+    warn: 'warning',
+    debug: 'info',
+};
 export const LogLevelBadge = (props) => {
-    const map = {
-        info: 'info',
-        error: 'error',
-        warn: 'warning',
-        debug: 'info',
-    };
     return (_jsx(Badge, { variant: map[props.level], className: props.className, children: props.level }));
 };

package/dist/src/components/logs/log-level-dot.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cva } from 'class-variance-authority';
-const badgeVariants = cva('text-xs font-medium tracking-wide w-2 h-2 rounded-full mx-1', {
+const badgeVariants = cva('text-xs font-medium tracking-wide rounded-full h-[6px] w-[6px] m-[4px] outline-[2px]', {
     variants: {
         variant: {
-            info: 'bg-sky-500',
-            trace: 'bg-sky-500',
-            debug: 'bg-sky-500',
-            error: 'bg-rose-500',
-            fatal: 'bg-rose-500',
-            warn: 'bg-amber-500',
+            info: 'bg-[#2862FE] outline-[#2862FE]/20',
+            trace: 'bg-sky-500 outline-sky-500',
+            debug: 'bg-sky-500 outline-sky-500',
+            error: 'bg-rose-500 outline-rose-500',
+            fatal: 'bg-rose-500 outline-rose-500',
+            warn: 'bg-amber-500 outline-amber-500',
         },
     },
 });

package/dist/src/components/logs/logs-page.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Table, TableBody, TableCell, TableRow } from '@/components/ui/table';
+import { formatTimestamp } from '@/lib/utils';
+import { useGlobalStore } from '@/stores/use-global-store';
+import { useLogsStore } from '@/stores/use-logs-store';
+import { useMemo, useState } from 'react';
+import { LogDetail } from './log-detail';
+import { LogLevelDot } from './log-level-dot';
+import { Button, Input } from '@motiadev/ui';
+import { CircleX, Trash } from 'lucide-react';
+export const LogsPage = () => {
+    const logs = useLogsStore((state) => state.logs);
+    const resetLogs = useLogsStore((state) => state.resetLogs);
+    const selectedLogId = useGlobalStore((state) => state.selectedLogId);
+    const selectLogId = useGlobalStore((state) => state.selectLogId);
+    const selectedLog = useMemo(() => (selectedLogId ? logs.find((log) => log.id === selectedLogId) : undefined), [logs, selectedLogId]);
+    const [search, setSearch] = useState('');
+    const filteredLogs = useMemo(() => {
+        return logs.filter((log) => {
+            return (log.msg.toLowerCase().includes(search.toLowerCase()) ||
+                log.traceId.toLowerCase().includes(search.toLowerCase()) ||
+                log.step.toLowerCase().includes(search.toLowerCase()));
+        });
+    }, [logs, search]);
+    return (_jsxs("div", { className: "h-full flex flex-row", children: [_jsxs("div", { className: "flex-1 overflow-y-auto overflow-x-auto", children: [_jsxs("div", { className: "flex p-2 border-b gap-4", children: [_jsxs("div", { className: "flex-1 relative", children: [_jsx(Input, { variant: "shade", value: search, onChange: (e) => setSearch(e.target.value), className: "pr-10 font-medium" }), _jsx(CircleX, { 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", onClick: () => setSearch('') })] }), _jsxs(Button, { variant: "outline", onClick: resetLogs, children: [_jsx(Trash, {}), " Clear"] })] }), _jsx(Table, { children: _jsx(TableBody, { className: "font-mono font-medium", children: filteredLogs.map((log, index) => (_jsxs(TableRow, { className: "cursor-pointer border-0", onClick: () => selectLogId(log.id), children: [_jsxs(TableCell, { "data-testid": `time-${index}`, className: "whitespace-nowrap flex items-center gap-2 text-muted-foreground", children: [_jsx(LogLevelDot, { level: log.level }), formatTimestamp(log.time)] }), _jsx(TableCell, { "data-testid": `trace-${log.traceId}`, className: "whitespace-nowrap cursor-pointer hover:text-primary text-muted-foreground", onClick: () => setSearch(log.traceId), children: log.traceId }), _jsx(TableCell, { "data-testid": `step-${index}`, "aria-label": log.step, className: "whitespace-nowrap", children: log.step }), _jsx(TableCell, { "data-testid": `msg-${index}`, "aria-label": log.msg, className: "whitespace-nowrap max-w-[500px] truncate w-full", children: log.msg })] }, index))) }) })] }), _jsx(LogDetail, { log: selectedLog, onClose: () => selectLogId(undefined) })] }));
+};

package/dist/src/components/observability/events/code/function-call.js

@@ -7,7 +7,7 @@ export const Argument = ({ arg }) => {
         return _jsx("span", { className: "font-mono text-blue-100 font-bold bg-blue-500/50 px-2 rounded-md", children: "value" });
     }
     const entries = Object.entries(arg);
-    return (_jsxs(_Fragment, { children: [_jsx("span", { className: "font-mono text-green-500", children: '{ ' }), entries.map(([key, value], index) => (_jsxs("span", { children: [key, ": ", _jsx(Argument, { arg: value }), index < entries.length - 1 && _jsx(_Fragment, { children: ", " })] }, key))), _jsx("span", { className: "font-mono text-green-500", children: ' }' })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("span", { className: "font-mono text-green-500", children: '{ ' }), entries.map(([key, value], index) => (_jsxs("span", { children: [_jsx("span", { className: "font-mono text-green-500", children: key }), _jsx("span", { className: "font-mono text-muted-foreground", children: ":" }), " ", _jsx(Argument, { arg: value }), index < entries.length - 1 && _jsx(_Fragment, { children: ", " })] }, key))), _jsx("span", { className: "font-mono text-green-500", children: ' }' })] }));
 };
 export const FunctionCall = ({ topLevelClassName, objectName, functionName, args, callsQuantity }) => {
     const hasCalls = callsQuantity && callsQuantity > 1;

package/dist/src/components/observability/events/trace-event.d.ts

@@ -1,5 +1,5 @@
+import { TraceEvent as TraceEventType } from '@/types/observability';
 import React from 'react';
-import { TraceEvent as TraceEventType } from '../../../types/observability';
 export declare const TraceEvent: React.FC<{
     event: TraceEventType;
 }>;

package/dist/src/components/observability/events/trace-log-event.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
 import { LogEntry } from '@/types/observability';
+import React from 'react';
 export declare const TraceLogEvent: React.FC<{
     event: LogEntry;
 }>;

package/dist/src/components/observability/events/trace-log-event.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { LogLevelBadge } from '@/components/logs/log-level-badge';
+import { LogLevelDot } from '@/components/logs/log-level-dot';
 export const TraceLogEvent = ({ event }) => {
-    return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(LogLevelBadge, { level: event.level }), " ", event.message] }));
+    return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(LogLevelDot, { level: event.level }), " ", event.message] }));
 };

package/dist/src/components/observability/hooks/use-get-endtime.d.ts

@@ -1,2 +1,2 @@
-import { TraceGroup } from '../../../types/observability';
+import { TraceGroup } from '@/types/observability';
 export declare const useGetEndTime: (group: TraceGroup | undefined | null) => number;

package/dist/src/components/observability/trace-item/trace-item-detail.d.ts

@@ -2,6 +2,7 @@ import { Trace } from '@/types/observability';
 import React from 'react';
 type Props = {
     trace: Trace;
+    onClose: () => void;
 };
 export declare const TraceItemDetail: React.FC<Props>;
 export {};

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

@@ -1,10 +1,11 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Sidebar } from '@/components/sidebar/sidebar';
 import { Badge } from '@/components/ui/badge';
-import { Card, CardContent } from '@/components/ui/card';
-import { cn, formatDuration } from '@/lib/utils';
+import { formatDuration } from '@/lib/utils';
+import { X } from 'lucide-react';
 import { memo } from 'react';
 import { EventIcon } from '../events/event-icon';
 import { TraceEvent } from '../events/trace-event';
-export const TraceItemDetail = memo(({ trace }) => {
-    return (_jsxs(Card, { className: cn('mt-2', trace.error && 'border-red-800/80 border-solid'), children: [_jsxs(CardContent, { className: "p-4", 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 })] }))] }));
+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 })] }))] }));
 });

package/dist/src/components/observability/trace-item/trace-item.d.ts

@@ -4,6 +4,7 @@ type Props = {
     trace: Trace;
     group: TraceGroup;
     groupEndTime: number;
+    onExpand: (traceId: string) => void;
 };
 export declare const TraceItem: React.FC<Props>;
 export {};

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

@@ -1,20 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from '@/lib/utils';
-import { ChevronDown } from 'lucide-react';
-import { useState } from 'react';
-import { TraceItemDetail } from './trace-item-detail';
-export const TraceItem = ({ trace, group, groupEndTime }) => {
-    const [isExpanded, setIsExpanded] = useState(false);
-    return (_jsxs("div", { children: [_jsxs("div", { className: "flex flex-row items-center hover:bg-muted/50 p-1 rounded-md cursor-pointer", onClick: () => setIsExpanded(!isExpanded), children: [_jsxs("div", { className: "flex items-center min-w-[200px] w-[200px] h-[20px]", children: [_jsx(ChevronDown, { className: cn('w-[20px] h-4 mr-2 transition-transform duration-50', {
-                                    'rotate-180': isExpanded,
-                                }) }), _jsx("h2", { className: "text-sm font-medium text-muted-foreground", children: trace.name })] }), _jsx("div", { className: "relative w-full", children: _jsx("div", { className: cn('h-[20px] rounded-[4px] cursor-pointer hover:opacity-80 transition-all duration-200', {
-                                'bg-blue-500': trace.status === 'running',
-                                'bg-green-500': trace.status === 'completed',
-                                'bg-red-500': trace.status === 'failed',
-                            }), onClick: () => setIsExpanded(!isExpanded), style: {
-                                marginLeft: `${((trace.startTime - group.startTime) / (groupEndTime - group.startTime)) * 100}%`,
-                                width: trace.endTime
-                                    ? `${((trace.endTime - trace.startTime) / (groupEndTime - group.startTime)) * 100}%`
-                                    : `${((Date.now() - trace.startTime) / (groupEndTime - group.startTime)) * 100}%`,
-                            } }) })] }), isExpanded && _jsx(TraceItemDetail, { trace: trace })] }));
+export const TraceItem = ({ trace, group, groupEndTime, onExpand }) => {
+    return (_jsxs("div", { className: "flex hover:bg-muted-foreground/10 relative cursor-pointer", onClick: () => onExpand(trace.id), children: [_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 dark:bg-[#121212] bg-[#f1f1f1] z-9", children: trace.name }), _jsx("div", { className: "flex w-full flex-row items-center hover:bg-muted/50 rounded-md", children: _jsx("div", { className: "relative w-full h-[32px] flex items-center", children: _jsx("div", { className: cn('h-[24px] rounded-[4px] hover:opacity-80 transition-all duration-200', {
+                            'bg-[repeating-linear-gradient(140deg,#BEFE29,#BEFE29_8px,#ABE625_8px,#ABE625_16px)]': trace.status === 'running',
+                            'bg-[repeating-linear-gradient(140deg,#2862FE,#2862FE_8px,#2358E5_8px,#2358E5_16px)]': trace.status === 'completed',
+                            'bg-[repeating-linear-gradient(140deg,#EA2069,#EA2069_8px,#D41E60_8px,#D41E60_16px)]': trace.status === 'failed',
+                        }), style: {
+                            marginLeft: `${((trace.startTime - group.startTime) / (groupEndTime - group.startTime)) * 100}%`,
+                            width: trace.endTime
+                                ? `${((trace.endTime - trace.startTime) / (groupEndTime - group.startTime)) * 100}%`
+                                : `${((Date.now() - trace.startTime) / (groupEndTime - group.startTime)) * 100}%`,
+                        } }) }) })] }));
 };

package/dist/src/components/observability/trace-status.d.ts

@@ -1,12 +1,8 @@
+import { TraceGroup } from '@/types/observability';
 import React from 'react';
-import { TraceGroup } from '../../types/observability';
-export declare const LoadingSpinner: React.FC<{
-    className: string;
-}>;
-export declare const TraceStatus: React.FC<{
+type Props = {
     status: TraceGroup['status'];
-    name: string;
-}>;
-export declare const TraceStatusBadge: React.FC<{
-    status: TraceGroup['status'];
-}>;
+    duration?: string;
+};
+export declare const TraceStatusBadge: React.FC<Props>;
+export {};

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

@@ -1,33 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { cva } from 'class-variance-authority';
-import { CheckCircle, Clock, XCircle } from 'lucide-react';
-import { cn } from '../../lib/utils';
-export const LoadingSpinner = ({ className }) => {
-    return (_jsx("svg", { 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", className: cn('animate-spin', className), children: _jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) }));
-};
-const getStatusIcon = (status) => {
-    switch (status) {
-        case 'running':
-        case 'active':
-            return _jsx(LoadingSpinner, { className: "w-4 h-4 text-blue-500" });
-        case 'completed':
-            return _jsx(CheckCircle, { className: "w-4 h-4 text-green-500" });
-        case 'failed':
-            return _jsx(XCircle, { className: "w-4 h-4 text-red-500" });
-        case 'stalled':
-            return _jsx(Clock, { className: "w-4 h-4 text-yellow-500" });
-        default:
-            return _jsx(Clock, { className: "w-4 h-4 text-gray-500" });
-    }
-};
-const statusVariants = cva('inline-flex items-center rounded-lg px-3 py-[2px] uppercase text-[10px] font-bold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2', {
+const statusVariants = cva('inline-flex items-center rounded-full px-4 py-1 text-xs font-bold transition-colors', {
     variants: {
         status: {
-            running: 'dark:bg-blue-800/30 dark:text-blue-500 bg-blue-100 text-blue-700',
-            active: 'dark:bg-blue-800/30 dark:text-blue-500 bg-blue-100 text-blue-700',
-            completed: 'dark:bg-green-800/30 dark:text-green-500 bg-green-100 text-green-700',
-            failed: 'dark:bg-red-800/30 dark:text-red-500 bg-red-100 text-red-700',
-            stalled: 'dark:bg-yellow-800/30 dark:text-yellow-500 bg-yellow-100 text-yellow-700',
+            running: 'dark:bg-accent-100 dark:text-accent-1000 bg-accent-200 text-accent-900 capitalize',
+            completed: 'bg-accent-1000 text-white',
+            failed: 'bg-destructive/10 text-destructive capitalize',
             default: 'dark:bg-gray-800/30 dark:text-gray-500 bg-gray-100 text-gray-800',
         },
     },
@@ -35,9 +13,6 @@ const statusVariants = cva('inline-flex items-center rounded-lg px-3 py-[2px] up
         status: 'default',
     },
 });
-export const TraceStatus = ({ status, name }) => {
-    return (_jsxs("div", { className: "flex items-center gap-2", children: [getStatusIcon(status), _jsx("span", { className: "font-medium text-sm", children: name })] }));
-};
-export const TraceStatusBadge = ({ status }) => {
-    return _jsx("div", { className: statusVariants({ status }), children: status });
+export const TraceStatusBadge = ({ status, duration }) => {
+    return _jsx("div", { className: statusVariants({ status }), children: duration && status !== 'failed' ? duration : status });
 };

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

@@ -1,8 +1,12 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useGlobalStore } from '@/stores/use-global-store';
 import { useStreamGroup, useStreamItem } from '@motiadev/stream-client-react';
-import { TraceItem } from './trace-item/trace-item';
+import { Button } from '@motiadev/ui';
+import { Minus, Plus } from 'lucide-react';
+import { memo, useMemo, useState } from 'react';
 import { useGetEndTime } from './hooks/use-get-endtime';
+import { TraceItem } from './trace-item/trace-item';
+import { TraceItemDetail } from './trace-item/trace-item-detail';
 export const TraceTimeline = memo(({ groupId }) => {
     const { data: group } = useStreamItem({
         streamName: 'motia-trace-group',
@@ -11,7 +15,15 @@ export const TraceTimeline = memo(({ groupId }) => {
     });
     const { data } = useStreamGroup({ streamName: 'motia-trace', groupId });
     const endTime = useGetEndTime(group);
+    const [zoom, setZoom] = useState(1);
+    const selectedTraceId = useGlobalStore((state) => state.selectedTraceId);
+    const selectTraceId = useGlobalStore((state) => state.selectTraceId);
+    const selectedTrace = useMemo(() => data?.find((trace) => trace.id === selectedTraceId), [data, selectedTraceId]);
+    const zoomMinus = () => {
+        if (zoom > 0.5)
+            setZoom(zoom - 0.1);
+    };
     if (!group)
         return null;
-    return (_jsxs("div", { className: "flex flex-col p-2", children: [_jsxs("div", { className: "flex flex-row items-center px-2", children: [_jsx("div", { className: "flex items-center min-w-[200px] w-[200px] h-[20px]" }), _jsx("div", { className: "flex flex-1 relative", children: _jsxs("div", { className: "flex justify-between font-mono pb-2 w-full text-xs text-muted-foreground border-b border-blue-500", 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-2 bg-blue-500" }), _jsx("span", { className: "w-[1px] h-2 bg-blue-500" }), _jsx("span", { className: "w-[1px] h-2 bg-blue-500" }), _jsx("span", { className: "w-[1px] h-2 bg-blue-500" }), _jsx("span", { className: "w-[1px] h-2 bg-blue-500" })] })] }) })] }), _jsx("div", { className: "h-full overflow-auto p-2 space-y-2", children: data?.map((trace) => _jsx(TraceItem, { trace: trace, group: group, groupEndTime: endTime }, trace.id)) })] }));
+    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 dark:bg-[#121212] bg-[#f1f1f1]", 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 dark:bg-[#131313] bg-[#f1f1f1]", 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) })] }));
 });

package/dist/src/components/observability/traces-groups.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
 import { TraceGroup } from '@/types/observability';
+import React from 'react';
 interface Props {
     groups: TraceGroup[];
-    selectedGroupId: string | null;
+    selectedGroupId?: string;
     onGroupSelect: (group: TraceGroup) => void;
 }
 export declare const TracesGroups: React.FC<Props>;

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

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo } from 'react';
-import { Card, CardContent } from '@/components/ui/card';
+import { cn } from '@/lib/utils';
 import { formatDistanceToNow } from 'date-fns';
-import { TraceStatus, TraceStatusBadge } from './trace-status';
+import { memo } from 'react';
+import { TraceStatusBadge } from './trace-status';
 export const TracesGroups = memo(({ groups, selectedGroupId, onGroupSelect }) => {
     const formatDuration = (duration) => {
         if (!duration)
@@ -11,5 +11,5 @@ export const TracesGroups = memo(({ groups, selectedGroupId, onGroupSelect }) =>
             return `${duration}ms`;
         return `${(duration / 1000).toFixed(1)}s`;
     };
-    return (_jsxs("div", { className: "overflow-auto p-4 space-y-4 ", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h2", { className: "text-lg font-semibold", children: "Traces" }), _jsxs("div", { className: "text-xs text-muted-foreground", children: [groups.length, " total"] })] }), groups.length > 0 && (_jsx("div", { className: "space-y-2", children: [...groups].reverse().map((group) => (_jsx(Card, { "data-testid": `trace-${group.id}`, className: `cursor-pointer transition-colors hover:bg-muted/50 ${selectedGroupId === group.id ? 'ring-2 ring-primary' : ''}`, onClick: () => onGroupSelect(group), children: _jsxs(CardContent, { className: "p-3", children: [_jsxs("div", { className: "flex flex-row justify-between mb-2", children: [_jsx(TraceStatus, { status: group.status, name: group.name }), _jsx(TraceStatusBadge, { status: group.status })] }), _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-semibold font-mono tracking-[1px]", children: group.id }), _jsxs("span", { children: [group.metadata.totalSteps, " steps"] })] }), _jsxs("div", { className: "flex justify-between", children: [group.endTime && _jsxs("span", { children: ["Duration: ", formatDuration(group.endTime - group.startTime)] }), _jsxs("span", { children: [formatDistanceToNow(group.startTime), " ago"] })] }), group.metadata.activeSteps > 0 && (_jsxs("div", { className: "text-blue-600", children: [group.metadata.activeSteps, " active"] }))] })] }) }, group.id))) }))] }));
+    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('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: [group.endTime && _jsxs("span", { children: ["Duration: ", formatDuration(group.endTime - group.startTime)] }), _jsxs("span", { 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/components/observability/traces-page.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TraceTimeline } from '@/components/observability/trace-timeline';
+import { useStreamGroup } from '@motiadev/stream-client-react';
+import { TracesGroups } from '@/components/observability/traces-groups';
+import { useGlobalStore } from '../../stores/use-global-store';
+export const TracesPage = () => {
+    const selectedGroupId = useGlobalStore((state) => state.selectedTraceGroupId);
+    const selectTraceGroupId = useGlobalStore((state) => state.selectTraceGroupId);
+    const { data } = useStreamGroup({ streamName: 'motia-trace-group', groupId: 'default' });
+    const handleGroupSelect = (group) => selectTraceGroupId(group.id);
+    return (_jsxs("div", { className: "flex flex-1 overflow-hidden h-full", children: [_jsx("div", { className: "max-w-1/3 border-r border-border overflow-auto h-full", "data-testid": "traces-container", children: _jsx(TracesGroups, { groups: data, selectedGroupId: selectedGroupId, onGroupSelect: handleGroupSelect }) }), _jsxs("div", { className: "flex-2 overflow-auto", "data-testid": "trace-details", children: [selectedGroupId && _jsx(TraceTimeline, { groupId: selectedGroupId }), !selectedGroupId && (_jsx("div", { className: "flex items-center justify-center h-full text-muted-foreground", children: "Select a trace or trace group to view the timeline" }))] })] }));
+};

package/dist/src/components/sidebar/sidebar.d.ts

@@ -0,0 +1,8 @@
+import { type PanelProps } from '@motiadev/ui';
+import { FC } from 'react';
+export declare const APP_SIDEBAR_CONTAINER_ID = "app-sidebar-container";
+export type SidebarProps = PanelProps & {
+    onClose: () => void;
+    initialWidth?: number;
+};
+export declare const Sidebar: FC<SidebarProps>;

package/dist/src/components/sidebar/sidebar.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Panel } from '@motiadev/ui';
+import { createPortal } from 'react-dom';
+import { useEffect, useMemo } from 'react';
+import { useResizable } from 'react-use-resizable';
+import { Equal } from 'lucide-react';
+export const APP_SIDEBAR_CONTAINER_ID = 'app-sidebar-container';
+const CLOSE_PREVIOUS_SIDEBAR_EVENT = 'close-previous-sidebar';
+export const Sidebar = ({ initialWidth, onClose, ...props }) => {
+    const sidebarId = useMemo(() => Symbol(), []);
+    const { getRootProps, getHandleProps } = useResizable({
+        lockVertical: true,
+        initialWidth: initialWidth ?? 400,
+        initialHeight: '100%',
+        onDragStart: () => {
+            document.body.style.userSelect = 'none';
+        },
+        onDragEnd: () => {
+            document.body.style.userSelect = '';
+        },
+    });
+    useEffect(() => {
+        const event = new CustomEvent(CLOSE_PREVIOUS_SIDEBAR_EVENT, { detail: { sidebarId } });
+        window.dispatchEvent(event);
+        const handleClose = (e) => {
+            const customEvent = e;
+            if (customEvent.detail.sidebarId !== sidebarId) {
+                onClose();
+            }
+        };
+        window.addEventListener(CLOSE_PREVIOUS_SIDEBAR_EVENT, handleClose);
+        return () => {
+            window.removeEventListener(CLOSE_PREVIOUS_SIDEBAR_EVENT, handleClose);
+        };
+    }, [sidebarId, onClose]);
+    return createPortal(_jsxs("div", { ...getRootProps(), className: "pr-2 py-2 relative", children: [_jsx("div", { ...getHandleProps({
+                    reverse: true,
+                }), className: "flex h-6 w-6 items-center justify-center rounded-full bg-background border border-border absolute top-1/2 -translate-y-1/2 -left-4 z-20", children: _jsx(Equal, { className: "rotate-90 w-4 h-4 text-muted-foreground" }) }), _jsx(Panel, { ...props, className: "max-h-[calc(100vh-80px)] h-full" })] }), document.querySelector(`#${APP_SIDEBAR_CONTAINER_ID}`));
+};

package/dist/src/components/states/hooks/states-hooks.d.ts

@@ -1,3 +1,7 @@
-export declare const useGetTraces: () => string[];
-export declare const useGetFields: (traceId: string | undefined) => string[];
-export declare const useGetValues: (traceId: string | undefined, field: string | undefined) => any;
+export interface StateItem {
+    groupId: string;
+    key: string;
+    type: 'string' | 'number' | 'boolean' | 'object' | 'array' | 'null';
+    value: string | number | boolean | object | unknown[] | null;
+}
+export declare const useGetStateItems: () => StateItem[];

package/dist/src/components/states/hooks/states-hooks.js

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
-export const useGetTraces = () => {
-    const [traces, setTraces] = useState([]);
+export const useGetStateItems = () => {
+    const [items, setItems] = useState([]);
     useEffect(() => {
         fetch('/motia/state')
             .then(async (res) => {
@@ -11,36 +11,8 @@ export const useGetTraces = () => {
                 throw await res.json();
             }
         })
-            .then(setTraces)
-            .catch((err) => {
-            console.error(err);
-        });
+            .then(setItems)
+            .catch((err) => console.error(err));
     }, []);
-    return traces;
-};
-export const useGetFields = (traceId) => {
-    const [fields, setFields] = useState([]);
-    useEffect(() => {
-        if (!traceId) {
-            setFields([]);
-        }
-        else {
-            fetch(`/motia/state/${traceId}`)
-                .then((res) => res.json())
-                .then((data) => setFields(data));
-        }
-    }, [traceId]);
-    return fields;
-};
-export const useGetValues = (traceId, field) => {
-    const [values, setValues] = useState();
-    useEffect(() => {
-        setValues(undefined);
-        if (traceId && field) {
-            fetch(`/motia/state/${traceId}/${field}`)
-                .then((res) => res.json())
-                .then((data) => setValues(data));
-        }
-    }, [traceId, field]);
-    return values;
+    return items;
 };

package/dist/src/components/states/state-detail.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
+import { StateItem } from './hooks/states-hooks';
 type Props = {
-    state?: any;
+    state: StateItem;
     onClose: () => void;
 };
 export declare const StateDetail: React.FC<Props>;

package/dist/src/components/states/state-detail.js

@@ -1,12 +1,18 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Sidebar } from '@/components/sidebar/sidebar';
+import { Braces, X } from 'lucide-react';
+import { useState } from 'react';
+import JsonView from 'react18-json-view';
 import { StateValue } from './state-value';
-import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '../ui/sheet';
 export const StateDetail = ({ state, onClose }) => {
-    const isOpen = !!state;
-    const onOpenChange = (open) => {
-        if (!open) {
-            onClose();
-        }
-    };
-    return (_jsx(Sheet, { open: isOpen, onOpenChange: onOpenChange, children: _jsxs(SheetContent, { className: "flex flex-col h-full", children: [_jsxs(SheetHeader, { children: [_jsx(SheetTitle, { children: "State details" }), _jsx(SheetDescription, { children: "State details and application." })] }), _jsx("div", { className: "font-mono overflow-y-auto", children: state && (_jsx("div", { className: "flex flex-col gap-2", children: _jsx(StateValue, { value: state, isRoot: true }) })) })] }) }));
+    const [isCodeEnabled, setIsCodeEnabled] = useState(false);
+    return (_jsx(Sidebar, { onClose: onClose, title: "State details", subtitle: `${state.groupId} ${state.key}`, actions: [
+            {
+                active: isCodeEnabled,
+                icon: _jsx(Braces, {}),
+                onClick: () => setIsCodeEnabled(!isCodeEnabled),
+                label: 'Code',
+            },
+            { icon: _jsx(X, {}), onClick: onClose, label: 'Close' },
+        ], children: _jsx("div", { className: "flex flex-col gap-2", children: isCodeEnabled ? _jsx(JsonView, { src: state.value }) : _jsx(StateValue, { value: state.value, isRoot: true }) }) }));
 };