@motiadev/workbench 0.2.2 → 0.3.0-beta.79

package/dist/src/components/ui/scroll-area.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+declare const ScrollArea: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ScrollBar: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { ScrollArea, ScrollBar };

package/dist/src/components/ui/scroll-area.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import { cn } from '@/lib/utils';
+const ScrollArea = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(ScrollAreaPrimitive.Root, { ref: ref, className: cn('relative overflow-hidden', className), ...props, children: [_jsx(ScrollAreaPrimitive.Viewport, { className: "h-full w-full rounded-[inherit]", children: children }), _jsx(ScrollBar, {}), _jsx(ScrollAreaPrimitive.Corner, {})] })));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+const ScrollBar = React.forwardRef(({ className, orientation = 'vertical', ...props }, ref) => (_jsx(ScrollAreaPrimitive.ScrollAreaScrollbar, { ref: ref, orientation: orientation, className: cn('flex touch-none select-none transition-colors', orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent p-[1px]', orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent p-[1px]', className), ...props, children: _jsx(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" }) })));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+export { ScrollArea, ScrollBar };

package/dist/src/components/ui/sheet.d.ts

@@ -7,7 +7,7 @@ declare const SheetClose: React.ForwardRefExoticComponent<SheetPrimitive.DialogC
 declare const SheetPortal: React.FC<SheetPrimitive.DialogPortalProps>;
 declare const SheetOverlay: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const sheetVariants: (props?: ({
-    side?: "left" | "right" | "top" | "bottom" | null | undefined;
+    side?: "bottom" | "left" | "right" | "top" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>, VariantProps<typeof sheetVariants> {
 }

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from 'react';
 import { cn } from '@/lib/utils';
 import { PanelLeftClose, PanelLeftOpen } from 'lucide-react';
-import { Button } from './button';
+import { Button } from '@motiadev/ui';
 const SIDEBAR_COLLAPSED_KEY = 'sidebar-collapsed';
 export const Sidebar = ({ children }) => {
     const [isCollapsed, setIsCollapsed] = useState(() => {

package/dist/src/components/ui/tabs.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+declare const Tabs: React.ForwardRefExoticComponent<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>>;
+declare const TabsList: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const TabsContent: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Tabs, TabsList, TabsTrigger, TabsContent };

package/dist/src/components/ui/tabs.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { cn } from '@/lib/utils';
+const Tabs = TabsPrimitive.Root;
+const TabsList = React.forwardRef(({ className, ...props }, ref) => (_jsx(TabsPrimitive.List, { ref: ref, className: cn('inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground', className), ...props })));
+TabsList.displayName = TabsPrimitive.List.displayName;
+const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => (_jsx(TabsPrimitive.Trigger, { ref: ref, className: cn('inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm', className), ...props })));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+const TabsContent = React.forwardRef(({ className, ...props }, ref) => (_jsx(TabsPrimitive.Content, { ref: ref, className: cn('mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', className), ...props })));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+export { Tabs, TabsList, TabsTrigger, TabsContent };

package/dist/src/hooks/use-fetch-flows.d.ts

@@ -0,0 +1,5 @@
+import { FlowConfigResponse, FlowResponse } from '@/views/flow/hooks/use-get-flow-state';
+export declare const useFetchFlows: (flowId: string) => {
+    flow: FlowResponse | null;
+    flowConfig: FlowConfigResponse | null;
+};

package/dist/src/hooks/use-fetch-flows.js

@@ -0,0 +1,17 @@
+import { useStreamItem } from '@motiadev/stream-client-react';
+export const useFetchFlows = (flowId) => {
+    const { data: flow } = useStreamItem({
+        streamName: '__motia.flows',
+        groupId: 'default',
+        id: flowId,
+    });
+    const { data: flowConfig } = useStreamItem({
+        streamName: '__motia.flowsConfig',
+        groupId: 'default',
+        id: flowId,
+    });
+    return {
+        flow,
+        flowConfig,
+    };
+};

package/dist/src/hooks/use-list-flows.d.ts

@@ -1,8 +1,9 @@
-type Flow = {
+import { FlowResponse } from '@/views/flow/hooks/use-get-flow-state';
+export type Flow = {
     id: string;
     name: string;
+    data?: FlowResponse;
 };
 export declare const useListFlows: () => {
     flows: Flow[];
 };
-export {};

package/dist/src/index.css

@@ -1,157 +1,13 @@
-@import 'tailwindcss';
+@import '@motiadev/ui/globals.css';
 @import 'tw-animate-css';
 @config "../tailwind.config.js";
 
-@custom-variant dark (&:is(.dark *));
-
-:root {
-  line-height: 1.5;
-  font-size: 16px;
-
-  color-scheme: light dark;
-  font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"), serif;
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  width: 100%;
-  font-optical-sizing: auto;
-
-  --radius: 0.625rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(0.98 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --header: oklch(0.985 0 0);
-  --header-foreground: oklch(0.145 0 0);
-  --header-primary: oklch(0.205 0 0);
-  --header-primary-foreground: oklch(0.985 0 0);
-  --header-accent: oklch(0.97 0 0);
-  --header-accent-foreground: oklch(0.205 0 0);
-  --header-border: oklch(0.922 0 0);
-  --header-ring: oklch(0.708 0 0);
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
-}
-
-.dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --header: oklch(0.205 0 0);
-  --header-foreground: oklch(0.985 0 0);
-  --header-primary: oklch(0.488 0.243 264.376);
-  --header-primary-foreground: oklch(0.985 0 0);
-  --header-accent: oklch(0.269 0 0);
-  --header-accent-foreground: oklch(0.985 0 0);
-  --header-border: oklch(1 0 0 / 10%);
-  --header-ring: oklch(0.556 0 0);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
-}
-
-@theme inline {
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --color-header: var(--header);
-  --color-header-foreground: var(--header-foreground);
-  --color-header-primary: var(--header-primary);
-  --color-header-primary-foreground: var(--header-primary-foreground);
-  --color-header-accent: var(--header-accent);
-  --color-header-accent-foreground: var(--header-accent-foreground);
-  --color-header-border: var(--header-border);
-  --color-header-ring: var(--header-ring);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-}
-
 body {
   margin: 0;
   place-items: center;
   min-height: 100dvh;
   width: 100%;
+  font-family: 'DM Sans', sans-serif;
 }
 
 body,
@@ -168,15 +24,6 @@ strong {
   display: none;
 }
 
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
-
 @keyframes flowDash {
   0% {
     stroke-dashoffset: 0;

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

@@ -1,2 +1,3 @@
 import { type ClassValue } from 'clsx';
 export declare function cn(...inputs: ClassValue[]): string;
+export declare const formatDuration: (duration?: number) => string;

package/dist/src/lib/utils.js

@@ -3,3 +3,10 @@ import { twMerge } from 'tailwind-merge';
 export function cn(...inputs) {
     return twMerge(clsx(inputs));
 }
+export const formatDuration = (duration) => {
+    if (!duration)
+        return 'N/A';
+    if (duration < 1000)
+        return `${duration}ms`;
+    return `${(duration / 1000).toFixed(1)}s`;
+};

package/dist/src/main.js

@@ -11,10 +11,11 @@ import { EndpointsPage } from './routes/endpoints-page';
 import { Flow } from './routes/flow';
 import { LogsPage } from './routes/logs-page';
 import { StatesPage } from './routes/states-page';
+import { TracesPage } from './routes/traces-page';
 // Render the app
 const rootElement = document.getElementById('root');
 if (!rootElement.innerHTML) {
     const root = createRoot(rootElement);
     const address = window.location.origin.replace('http', 'ws');
-    root.render(_jsx(StrictMode, { children: _jsx(MotiaStreamProvider, { address: address, children: _jsx(BrowserRouter, { children: _jsx(RootMotia, { children: _jsx(RouteWrapper, { children: _jsxs(Routes, { children: [_jsx(Route, { path: "/", element: _jsx(Index, {}) }), _jsx(Route, { path: "/flow/:id", element: _jsx(Flow, {}) }), _jsx(Route, { path: "/logs", element: _jsx(LogsPage, {}) }), _jsx(Route, { path: "/states", element: _jsx(StatesPage, {}) }), _jsx(Route, { path: "/endpoints", element: _jsx(EndpointsPage, {}) })] }) }) }) }) }) }));
+    root.render(_jsx(StrictMode, { children: _jsx(MotiaStreamProvider, { address: address, children: _jsx(BrowserRouter, { children: _jsx(RootMotia, { children: _jsx(RouteWrapper, { children: _jsxs(Routes, { children: [_jsx(Route, { path: "/", element: _jsx(Index, {}) }), _jsx(Route, { path: "/flow/:id", element: _jsx(Flow, {}) }), _jsx(Route, { path: "/logs", element: _jsx(LogsPage, {}) }), _jsx(Route, { path: "/states", element: _jsx(StatesPage, {}) }), _jsx(Route, { path: "/endpoints", element: _jsx(EndpointsPage, {}) }), _jsx(Route, { path: "/traces", element: _jsx(TracesPage, {}) })] }) }) }) }) }) }));
 }

package/dist/src/routes/flow.js

@@ -1,21 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { FlowView } from '@/views/flow/flow-view';
-import { useCallback, useEffect, useState } from 'react';
 import { useParams } from 'react-router';
+import { useFetchFlows } from '@/hooks/use-fetch-flows';
 export const Flow = () => {
     const { id } = useParams();
-    const flowId = id;
-    const [flow, setFlow] = useState(null);
-    const [flowConfig, setFlowConfig] = useState(null);
-    const fetchFlow = useCallback(() => {
-        Promise.all([fetch(`/flows/${flowId}`), fetch(`/flows/${flowId}/config`)])
-            .then(([flowRes, configRes]) => Promise.all([flowRes.json(), configRes.json()]))
-            .then(([flow, config]) => {
-            setFlow(flow);
-            setFlowConfig(config);
-        });
-    }, [flowId]);
-    useEffect(fetchFlow, [fetchFlow]);
+    const { flow, flowConfig } = useFetchFlows(id);
     if (!flow || flow.error)
         return (_jsx("div", { className: "w-full h-full bg-background flex flex-col items-center justify-center", children: _jsx("p", { children: flow?.error }) }));
     return (_jsx("div", { className: "w-full h-full bg-background", children: _jsx(FlowView, { flow: flow, flowConfig: flowConfig }) }));

package/dist/src/routes/index.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button } from '@/components/ui/button';
+import { Button } from '@motiadev/ui';
 export const Index = () => {
-    return (_jsxs("div", { className: "flex flex-col items-center justify-center w-full h-full gap-10 bg-gradient-to-r from-background via-background to-muted", children: [_jsx("h1", { className: "text-5xl font-extrabold max-w-[600px] text-center text-foreground", children: "Code-first framework for intelligent workflows" }), _jsx("div", { className: "max-w-[600px] text-center text-xl font-medium text-muted-foreground", children: "Write in any language. Automate anything. From AI agents to backend automation, Motia runs event-driven workflows with zero overhead." }), _jsx("div", { className: "p-[1px] min-w-[600px] rounded-lg shadow-lg border border-border", children: _jsx("div", { className: "rounded-lg bg-card p-8 font-semibold text-xl min-h-[100px] flex items-center", children: _jsxs("div", { className: "flex items-center gap-2 font-mono", children: [_jsx("span", { className: "text-primary", children: "$" }), _jsx("span", { className: "text-card-foreground", children: "npx motia generate step" })] }) }) }), _jsxs("div", { className: "flex flex-col gap-8 items-center", children: [_jsx("span", { className: "text-muted-foreground text-xl", children: "or" }), _jsx("a", { href: "https://motia.dev/docs", target: "_blank", children: _jsx(Button, { size: "lg", className: "text-xl py-6 px-8", children: "Read developer docs" }) })] })] }));
+    return (_jsxs("div", { className: "flex flex-col items-center justify-center w-full h-full gap-10 bg-gradient-to-r from-background via-background to-muted", children: [_jsx("h1", { className: "text-5xl font-extrabold max-w-[600px] text-center text-foreground", children: "Unified Backend Framework for APIs, Events and AI Agents" }), _jsx("div", { className: "max-w-[600px] text-center text-xl font-medium text-muted-foreground", children: "Write in any language. Automate anything. From AI agents to backend automation, Motia runs event-driven workflows with zero overhead." }), _jsx("div", { className: "p-[1px] min-w-[600px] rounded-lg shadow-lg border border-border", children: _jsx("div", { className: "rounded-lg bg-card p-8 font-semibold text-xl min-h-[100px] flex items-center", children: _jsxs("div", { className: "flex items-center gap-2 font-mono", children: [_jsx("span", { className: "text-primary", children: "$" }), _jsx("span", { className: "text-card-foreground", children: "npx motia generate step" })] }) }) }), _jsxs("div", { className: "flex flex-col gap-8 items-center", children: [_jsx("span", { className: "text-muted-foreground text-xl", children: "or" }), _jsx("a", { href: "https://motia.dev/docs", target: "_blank", children: _jsx(Button, { size: "lg", className: "text-xl py-6 px-8", children: "Read developer docs" }) })] })] }));
 };

package/dist/src/routes/traces-page.d.ts

@@ -0,0 +1 @@
+export declare const TracesPage: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/routes/traces-page.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ObservabilityStats } from '@/components/observability/observability-stats';
+import { TraceTimeline } from '@/components/observability/trace-timeline';
+import { useStreamGroup } from '@motiadev/stream-client-react';
+import { useState } from 'react';
+import { TracesGroups } from '../components/observability/traces-groups';
+export const TracesPage = () => {
+    const [selectedGroupId, setSelectedGroupId] = useState(null);
+    const { data } = useStreamGroup({ streamName: 'motia-trace-group', groupId: 'default' });
+    const handleGroupSelect = (group) => {
+        setSelectedGroupId(group.id);
+    };
+    return (_jsxs("div", { className: "flex flex-col h-screen", children: [_jsx("div", { className: "border-b border-border p-4", children: _jsx(ObservabilityStats, { groups: data }) }), _jsxs("div", { className: "flex flex-1 overflow-hidden", children: [_jsx("div", { className: "w-1/3 border-r border-border overflow-auto", "data-testid": "traces-container", children: _jsx(TracesGroups, { groups: data, selectedGroupId: selectedGroupId, onGroupSelect: handleGroupSelect }) }), _jsxs("div", { className: "flex-1 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/types/observability.d.ts

@@ -0,0 +1,78 @@
+export interface TraceGroup {
+    id: string;
+    correlationId: string | undefined;
+    name: string;
+    status: 'running' | 'completed' | 'failed';
+    startTime: number;
+    endTime?: number;
+    lastActivity: number;
+    metadata: {
+        completedSteps: number;
+        activeSteps: number;
+        totalSteps: number;
+    };
+}
+export interface Trace {
+    id: string;
+    name: string;
+    correlationId?: string;
+    parentTraceId?: string;
+    status: 'running' | 'completed' | 'failed';
+    startTime: number;
+    endTime?: number;
+    entryPoint: {
+        type: 'api' | 'event' | 'cron';
+        stepName: string;
+    };
+    events: TraceEvent[];
+    error?: TraceError;
+}
+export type TraceError = {
+    message: string;
+    code?: string | number;
+    stack?: string;
+};
+export type TraceEvent = StateEvent | EmitEvent | StreamEvent | LogEntry;
+export type StateOperation = 'get' | 'getGroup' | 'set' | 'delete' | 'clear';
+export type StreamOperation = 'get' | 'getGroup' | 'set' | 'delete' | 'clear' | 'send';
+export interface StateEvent {
+    type: 'state';
+    timestamp: number;
+    operation: 'get' | 'getGroup' | 'set' | 'delete' | 'clear';
+    key?: string;
+    duration?: number;
+    data: any;
+}
+export interface EmitEvent {
+    type: 'emit';
+    timestamp: number;
+    topic: string;
+    success: boolean;
+    data: unknown;
+}
+export interface StreamEvent {
+    type: 'stream';
+    timestamp: number;
+    operation: StreamOperation;
+    streamName: string;
+    duration?: number;
+    data: {
+        groupId: string;
+        id: string;
+        data?: unknown;
+    };
+    calls: number;
+}
+export interface LogEntry {
+    type: 'log';
+    timestamp: number;
+    level: string;
+    message: string;
+    metadata?: unknown;
+}
+export interface ObservabilityStats {
+    total: number;
+    running: number;
+    completed: number;
+    failed: number;
+}

package/dist/src/types/observability.js

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

package/dist/src/views/flow/flow-view.js

@@ -1,15 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { LogConsole } from '@/components/logs/log-console';
-import { Background, BackgroundVariant, ReactFlow, useReactFlow } from '@xyflow/react';
+import { Background, BackgroundVariant, ReactFlow } from '@xyflow/react';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { ArrowHead } from './arrow-head';
 import { BaseEdge } from './base-edge';
 import { FlowLoader } from './flow-loader';
 import { useGetFlowState } from './hooks/use-get-flow-state';
 import { Legend } from './legend';
-import { useSaveWorkflowConfig } from './hooks/use-save-workflow-config';
 import { NodeOrganizer } from './node-organizer';
-import { useDebounced } from '@/hooks/use-debounced';
 import '@xyflow/react/dist/style.css';
 const edgeTypes = {
     base: BaseEdge,
@@ -17,8 +15,6 @@ const edgeTypes = {
 export const FlowView = ({ flow, flowConfig }) => {
     const { nodes, edges, onNodesChange, onEdgesChange, nodeTypes } = useGetFlowState(flow, flowConfig);
     const [initialized, setInitialized] = useState(false);
-    const { getNodes } = useReactFlow();
-    const { saveConfig } = useSaveWorkflowConfig(flow.id);
     const [hoveredType, setHoveredType] = useState(null);
     useEffect(() => setInitialized(false), [flow]);
     const onInitialized = useCallback(() => {
@@ -43,20 +39,9 @@ export const FlowView = ({ flow, flowConfig }) => {
         ...edge,
         className: getClassName(), // No argument means it's an edge
     })), [edges, getClassName]);
-    const saveFlowConfig = useCallback(() => {
-        const steps = getNodes().reduce((acc, node) => {
-            if (node.data.filePath) {
-                acc[node.data.filePath] = node.position;
-            }
-            return acc;
-        }, {});
-        return saveConfig(steps);
-    }, [saveConfig, getNodes]);
-    const debouncedSaveConfig = useDebounced(saveFlowConfig);
     const onNodesChangeHandler = useCallback((changes) => {
         onNodesChange(changes);
-        debouncedSaveConfig();
-    }, [onNodesChange, debouncedSaveConfig]);
+    }, [onNodesChange]);
     if (!nodeTypes) {
         return null;
     }

package/dist/src/views/flow/hooks/use-get-flow-state.d.ts

@@ -27,7 +27,10 @@ export type FlowResponse = {
     error?: string;
 };
 export type FlowConfigResponse = {
-    [key: string]: Position;
+    id: string;
+    config: {
+        [stepName: string]: Position;
+    };
 };
 type FlowEdge = {
     id: string;
@@ -44,6 +47,6 @@ export declare const useGetFlowState: (flow: FlowResponse, flowConfig: FlowConfi
     edges: Edge<EdgeData>[];
     onNodesChange: import("@xyflow/react").OnNodesChange<Node<NodeData>>;
     onEdgesChange: import("@xyflow/react").OnEdgesChange<Edge<EdgeData>>;
-    nodeTypes: Record<string, React.ComponentType<any>> | undefined;
+    nodeTypes: Record<string, React.ComponentType<any>>;
 };
 export {};