@motiadev/workbench 0.8.2-beta.140-306759 → 0.8.2-beta.140-131607

package/dist/middleware.d.ts

@@ -1,2 +1,9 @@
 import type { Express } from 'express';
-export declare const applyMiddleware: (app: Express, port: number, workbenchBase?: string) => Promise<void>;
+import { type WorkbenchPlugin } from './vite-plugin-motia-plugins';
+export type ApplyMiddlewareParams = {
+    app: Express;
+    port: number;
+    workbenchBase: string;
+    plugins: WorkbenchPlugin[];
+};
+export declare const applyMiddleware: ({ app, port, workbenchBase, plugins }: ApplyMiddlewareParams) => Promise<void>;

package/dist/middleware.js

@@ -4,10 +4,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.applyMiddleware = void 0;
+const plugin_react_1 = __importDefault(require("@vitejs/plugin-react"));
 const fs_1 = __importDefault(require("fs"));
 const path_1 = __importDefault(require("path"));
 const vite_1 = require("vite");
-const plugin_react_1 = __importDefault(require("@vitejs/plugin-react"));
+const vite_plugin_motia_plugins_1 = __importDefault(require("./vite-plugin-motia-plugins"));
 const processCwdPlugin = () => {
     return {
         name: 'html-transform',
@@ -35,7 +36,7 @@ const reoPlugin = () => {
         },
     };
 };
-const applyMiddleware = async (app, port, workbenchBase = '') => {
+const applyMiddleware = async ({ app, port, workbenchBase, plugins }) => {
     const vite = await (0, vite_1.createServer)({
         appType: 'spa',
         root: __dirname,
@@ -58,9 +59,10 @@ const applyMiddleware = async (app, port, workbenchBase = '') => {
             alias: {
                 '@': path_1.default.resolve(__dirname, './src'),
                 '@/assets': path_1.default.resolve(__dirname, './src/assets'),
+                // antd: path.join(process.cwd(), './node_modules/antd'),
             },
         },
-        plugins: [(0, plugin_react_1.default)(), processCwdPlugin(), reoPlugin()],
+        plugins: [(0, plugin_react_1.default)(), processCwdPlugin(), reoPlugin(), (0, vite_plugin_motia_plugins_1.default)(plugins)],
         assetsInclude: ['**/*.png', '**/*.jpg', '**/*.jpeg', '**/*.gif', '**/*.svg', '**/*.ico', '**/*.webp', '**/*.avif'],
     });
     app.use(workbenchBase, vite.middlewares);

package/dist/src/App.js

@@ -1,56 +1,56 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { CollapsiblePanel, CollapsiblePanelGroup, Panel, TabsContent, TabsList, TabsTrigger } from '@motiadev/ui';
-import { analytics } from '@/lib/analytics';
-import { ReactFlowProvider } from '@xyflow/react';
-import { File, GanttChart, Link2, LogsIcon } from 'lucide-react';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
 import { FlowPage } from './components/flow/flow-page';
 import { FlowTabMenuItem } from './components/flow/flow-tab-menu-item';
-import { Header } from './components/header/header';
 import { LogsPage } from './components/logs/logs-page';
+import { LogsTabLabel } from './components/logs/logs-tab-label';
+import { TracingTabLabel } from './components/observability/trace-tab-label';
 import { TracesPage } from './components/observability/traces-page';
-import { APP_SIDEBAR_CONTAINER_ID } from '@motiadev/ui';
+import { StatesTabLabel } from './components/states/state-tab-label';
 import { StatesPage } from './components/states/states-page';
-import { useTabsStore } from './stores/use-tabs-store';
-import { EndpointsPage } from '@motiadev/plugin-endpoint';
-var TabLocation;
-(function (TabLocation) {
-    TabLocation["TOP"] = "top";
-    TabLocation["BOTTOM"] = "bottom";
-})(TabLocation || (TabLocation = {}));
+import { registerPluginTabs } from './lib/plugins';
+import { getViewModeFromURL } from './lib/utils';
+import { ProjectViewMode } from './project-view-mode';
+import { setAppTabs, TabLocation } from './stores/use-app-tabs-store';
+import { SystemViewMode } from './system-view-mode';
+const TAB_IDS = {
+    FLOW: 'flow',
+    TRACING: 'tracing',
+    LOGS: 'logs',
+    STATES: 'states',
+};
+const registerDefaultTabs = () => {
+    const topTabs = [
+        {
+            id: TAB_IDS.FLOW,
+            tabLabel: FlowTabMenuItem,
+            content: FlowPage,
+        },
+    ];
+    const bottomTabs = [
+        {
+            id: TAB_IDS.TRACING,
+            tabLabel: TracingTabLabel,
+            content: TracesPage,
+        },
+        {
+            id: TAB_IDS.LOGS,
+            tabLabel: LogsTabLabel,
+            content: LogsPage,
+        },
+        {
+            id: TAB_IDS.STATES,
+            tabLabel: StatesTabLabel,
+            content: StatesPage,
+        },
+    ];
+    setAppTabs(TabLocation.TOP, topTabs);
+    setAppTabs(TabLocation.BOTTOM, bottomTabs);
+};
+registerDefaultTabs();
+registerPluginTabs();
 export const App = () => {
-    const tab = useTabsStore((state) => state.tab);
-    const setTopTab = useTabsStore((state) => state.setTopTab);
-    const setBottomTab = useTabsStore((state) => state.setBottomTab);
-    const [viewMode, setViewMode] = useState('system');
-    const tabChangeCallbacks = useMemo(() => ({
-        [TabLocation.TOP]: setTopTab,
-        [TabLocation.BOTTOM]: setBottomTab,
-    }), [setTopTab, setBottomTab]);
-    const onTabChange = useCallback((location) => (newTab) => {
-        analytics.track(`${location} tab changed`, { [`new.${location}`]: newTab, tab });
-        tabChangeCallbacks[location](newTab);
-    }, [tabChangeCallbacks, tab]);
-    useEffect(() => {
-        const url = new URL(window.location.href);
-        const viewMode = url.searchParams.get('view-mode');
-        if (viewMode) {
-            setViewMode(viewMode);
-        }
-    }, [setViewMode]);
-    if (viewMode === 'project') {
-        return (_jsxs("div", { className: "grid grid-rows-1 grid-cols-[1fr_auto] bg-background text-foreground h-screen", children: [_jsx("main", { className: "m-2 overflow-hidden", role: "main", children: _jsx(Panel, { tabs: [
-                            {
-                                label: 'Flow',
-                                labelComponent: _jsx(FlowTabMenuItem, {}),
-                                content: (_jsx(ReactFlowProvider, { children: _jsx("div", { className: "h-[calc(100vh-100px)] w-full", children: _jsx(FlowPage, {}) }) })),
-                            },
-                            {
-                                label: 'Endpoint',
-                                labelComponent: (_jsxs(_Fragment, { children: [_jsx(Link2, {}), "Endpoint"] })),
-                                content: _jsx(EndpointsPage, {}),
-                            },
-                        ] }) }), _jsx("div", { id: APP_SIDEBAR_CONTAINER_ID })] }));
-    }
-    return (_jsxs("div", { className: "grid grid-rows-[auto_1fr] grid-cols-[1fr_auto] bg-background text-foreground h-screen", children: [_jsx("div", { className: "col-span-2", children: _jsx(Header, {}) }), _jsx("main", { className: "m-2 overflow-hidden", role: "main", children: _jsxs(CollapsiblePanelGroup, { autoSaveId: "app-panel", direction: "vertical", className: "gap-1 h-full", "aria-label": "Workbench panels", children: [_jsxs(CollapsiblePanel, { id: "top-panel", variant: 'tabs', defaultTab: tab.top, onTabChange: onTabChange(TabLocation.TOP), header: _jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "flow", "data-testid": "flows-link", children: _jsx(FlowTabMenuItem, {}) }), _jsxs(TabsTrigger, { value: "endpoint", "data-testid": "endpoints-link", className: "cursor-pointer", children: [_jsx(Link2, {}), "Endpoint"] })] }), children: [_jsx(TabsContent, { value: "flow", className: "h-full", asChild: true, children: _jsx(ReactFlowProvider, { children: _jsx(FlowPage, {}) }) }), _jsx(TabsContent, { value: "endpoint", asChild: true, children: _jsx(EndpointsPage, {}) })] }), _jsxs(CollapsiblePanel, { id: "bottom-panel", variant: 'tabs', defaultTab: tab.bottom, onTabChange: onTabChange(TabLocation.BOTTOM), header: _jsxs(TabsList, { children: [_jsxs(TabsTrigger, { value: "tracing", "data-testid": "traces-link", className: "cursor-pointer", children: [_jsx(GanttChart, {}), " Tracing"] }), _jsxs(TabsTrigger, { value: "logs", "data-testid": "logs-link", className: "cursor-pointer", children: [_jsx(LogsIcon, {}), "Logs"] }), _jsxs(TabsTrigger, { value: "states", "data-testid": "states-link", className: "cursor-pointer", children: [_jsx(File, {}), "States"] })] }), children: [_jsx(TabsContent, { value: "tracing", className: "max-h-fit", asChild: true, children: _jsx(TracesPage, {}) }), _jsx(TabsContent, { value: "logs", asChild: true, children: _jsx(LogsPage, {}) }), _jsx(TabsContent, { value: "states", asChild: true, children: _jsx(StatesPage, {}) })] })] }) }), _jsx("div", { id: APP_SIDEBAR_CONTAINER_ID })] }));
+    const viewMode = useMemo(getViewModeFromURL, []);
+    const ViewComponent = viewMode === 'project' ? ProjectViewMode : SystemViewMode;
+    return _jsx(ViewComponent, {});
 };

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

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useFlowStore } from '@/stores/use-flow-store';
 import { useStreamItem } from '@motiadev/stream-client-react';
 import { FlowView } from './flow-view';
+import { ReactFlowProvider } from '@xyflow/react';
 export const FlowPage = () => {
     const selectedFlowId = useFlowStore((state) => state.selectedFlowId);
     const { data: flow } = useStreamItem({
@@ -16,5 +17,5 @@ export const FlowPage = () => {
     });
     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(FlowView, { flow: flow, flowConfig: flowConfig });
+    return (_jsx(ReactFlowProvider, { children: _jsx(FlowView, { flow: flow, flowConfig: flowConfig }) }));
 };

package/dist/src/components/logs/logs-tab-label.d.ts

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

package/dist/src/components/logs/logs-tab-label.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { LogsIcon } from 'lucide-react';
+import { memo } from 'react';
+export const LogsTabLabel = memo(() => (_jsxs(_Fragment, { children: [_jsx(LogsIcon, { "aria-hidden": "true" }), _jsx("span", { children: "Logs" })] })));
+LogsTabLabel.displayName = 'LogsTabLabel';

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-tab-label.d.ts

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

package/dist/src/components/observability/trace-tab-label.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { GanttChart } from 'lucide-react';
+import { memo } from 'react';
+export const TracingTabLabel = memo(() => (_jsxs(_Fragment, { children: [_jsx(GanttChart, { "aria-hidden": "true" }), _jsx("span", { children: "Tracing" })] })));
+TracingTabLabel.displayName = 'TracingTabLabel';

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/components/states/state-tab-label.d.ts

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

package/dist/src/components/states/state-tab-label.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import { File } from 'lucide-react';
+export const StatesTabLabel = memo(() => (_jsxs(_Fragment, { children: [_jsx(File, { "aria-hidden": "true" }), _jsx("span", { children: "States" })] })));
+StatesTabLabel.displayName = 'StatesTabLabel';

package/dist/src/index.css

@@ -1,4 +1,3 @@
-@import '@motiadev/plugin-endpoint/styles.css';
 @import '@motiadev/ui/styles.css';
 @import '@motiadev/ui/globals.css';
 

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/plugins.d.ts

@@ -0,0 +1 @@
+export declare const registerPluginTabs: () => void;

package/dist/src/lib/plugins.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { addAppTab, TabLocation } from '@/stores/use-app-tabs-store';
+import { DynamicIcon, dynamicIconImports } from 'lucide-react/dynamic';
+import { memo } from 'react';
+import { plugins } from 'virtual:motia-plugins';
+import { isValidTabLocation } from './utils';
+export const registerPluginTabs = () => {
+    if (!Array.isArray(plugins)) {
+        console.warn('[Motia] Invalid plugins configuration: expected array');
+        return;
+    }
+    plugins.forEach((plugin, index) => {
+        try {
+            if (!plugin.label) {
+                console.warn(`[Motia] Plugin at index ${index} missing label, skipping`);
+                return;
+            }
+            if (!plugin.component) {
+                console.warn(`[Motia] Plugin "${plugin.label}" missing component, skipping`);
+                return;
+            }
+            const position = plugin.position || 'top';
+            if (!isValidTabLocation(position)) {
+                console.warn(`[Motia] Plugin "${plugin.label}" has invalid position "${position}", defaulting to "top"`);
+            }
+            const tabLocation = isValidTabLocation(position) ? position : TabLocation.TOP;
+            const PluginTabLabel = memo(() => {
+                const hasIcon = Object.keys(dynamicIconImports).includes(plugin.labelIcon);
+                const iconName = hasIcon ? plugin.labelIcon : 'toy-brick';
+                if (!hasIcon) {
+                    console.warn(`[Motia] Plugin "${plugin.label}" has invalid icon "${plugin.labelIcon}", defaulting to "toy-brick"`);
+                }
+                return (_jsxs(_Fragment, { children: [_jsx(DynamicIcon, { name: iconName }), _jsx("span", { children: plugin.label })] }));
+            });
+            PluginTabLabel.displayName = `${plugin.label}TabLabel`;
+            const PluginContent = memo(() => {
+                const Component = plugin.component;
+                const props = plugin.props || {};
+                if (!Component) {
+                    return _jsx("div", { children: "Error: Plugin component not found" });
+                }
+                return _jsx(Component, { ...props });
+            });
+            PluginContent.displayName = `${plugin.label}Content`;
+            addAppTab(tabLocation, {
+                id: plugin.label,
+                tabLabel: PluginTabLabel,
+                content: PluginContent,
+            });
+        }
+        catch (error) {
+            console.error(`[Motia] Error registering plugin "${plugin.label}":`, error);
+        }
+    });
+};

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

@@ -1,2 +1,7 @@
+import { TabLocation } from '@/stores/use-app-tabs-store';
 export declare const formatDuration: (duration?: number) => string;
 export declare const formatTimestamp: (time: number) => string;
+export type ViewMode = 'project' | 'system';
+export declare const DEFAULT_VIEW_MODE: ViewMode;
+export declare const getViewModeFromURL: () => ViewMode;
+export declare const isValidTabLocation: (position: string) => position is TabLocation;

package/dist/src/lib/utils.js

@@ -1,11 +1,34 @@
+import { TabLocation } from '@/stores/use-app-tabs-store';
 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));
     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')}`;
 };
+export const DEFAULT_VIEW_MODE = 'system';
+export const getViewModeFromURL = () => {
+    try {
+        const url = new URL(window.location.href);
+        const viewMode = url.searchParams.get('view-mode');
+        if (viewMode === 'project' || viewMode === 'system') {
+            return viewMode;
+        }
+        return DEFAULT_VIEW_MODE;
+    }
+    catch (error) {
+        console.error('[Motia] Error parsing URL:', error);
+        return DEFAULT_VIEW_MODE;
+    }
+};
+export const isValidTabLocation = (position) => {
+    return Object.values(TabLocation).includes(position);
+};

package/dist/src/project-view-mode.d.ts

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

package/dist/src/project-view-mode.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TabLocation, useAppTabsStore } from './stores/use-app-tabs-store';
+import { APP_SIDEBAR_CONTAINER_ID, Panel } from '@motiadev/ui';
+import { useShallow } from 'zustand/react/shallow';
+const topTabs = (state) => state.tabs[TabLocation.TOP];
+export const ProjectViewMode = () => {
+    const tabs = useAppTabsStore(useShallow(topTabs));
+    return (_jsxs("div", { className: "grid grid-rows-1 grid-cols-[1fr_auto] bg-background text-foreground h-screen ", children: [_jsx("main", { className: "m-2 overflow-hidden", role: "main", children: _jsx(Panel, { contentClassName: 'p-0', tabs: tabs.map((tab) => {
+                        const Element = tab.content;
+                        const LabelComponent = tab.tabLabel;
+                        return {
+                            label: tab.id,
+                            labelComponent: _jsx(LabelComponent, {}),
+                            content: _jsx(Element, {}),
+                            'data-testid': tab.id,
+                        };
+                    }) }) }), _jsx("div", { id: APP_SIDEBAR_CONTAINER_ID })] }));
+};

package/dist/src/stores/use-app-tabs-store.d.ts

@@ -0,0 +1,18 @@
+export declare enum TabLocation {
+    TOP = "top",
+    BOTTOM = "bottom"
+}
+export type AppTab = {
+    id: string;
+    tabLabel: React.ElementType;
+    content: React.ElementType;
+};
+export interface AppTabsState {
+    tabs: Record<TabLocation, AppTab[]>;
+    addTab: (position: TabLocation, tab: AppTab) => void;
+    setTabs: (position: TabLocation, tabs: AppTab[]) => void;
+    removeTab: (position: TabLocation, id: string) => void;
+}
+export declare const useAppTabsStore: import("zustand").UseBoundStore<import("zustand").StoreApi<AppTabsState>>;
+export declare const setAppTabs: (position: TabLocation, tabs: AppTab[]) => void;
+export declare const addAppTab: (position: TabLocation, tab: AppTab) => void;

package/dist/src/stores/use-app-tabs-store.js

@@ -0,0 +1,37 @@
+import { create } from 'zustand';
+export var TabLocation;
+(function (TabLocation) {
+    TabLocation["TOP"] = "top";
+    TabLocation["BOTTOM"] = "bottom";
+})(TabLocation || (TabLocation = {}));
+const defaultTabs = {
+    [TabLocation.TOP]: [],
+    [TabLocation.BOTTOM]: [],
+};
+export const useAppTabsStore = create((set) => ({
+    tabs: defaultTabs,
+    addTab: (position, tab) => set((state) => ({
+        tabs: {
+            ...state.tabs,
+            [position]: [...state.tabs[position], tab],
+        },
+    })),
+    setTabs: (position, tabs) => set((state) => ({
+        tabs: {
+            ...state.tabs,
+            [position]: tabs,
+        },
+    })),
+    removeTab: (position, id) => set((state) => ({
+        tabs: {
+            ...state.tabs,
+            [position]: state.tabs[position].filter((tab) => tab.id !== id),
+        },
+    })),
+}));
+export const setAppTabs = (position, tabs) => {
+    useAppTabsStore.getState().setTabs(position, tabs);
+};
+export const addAppTab = (position, tab) => {
+    useAppTabsStore.getState().addTab(position, tab);
+};

package/dist/src/stores/use-tabs-store.js

@@ -1,11 +1,13 @@
-import { create } from "zustand";
-import { createJSONStorage, persist } from "zustand/middleware";
+import { create } from 'zustand';
+import { createJSONStorage, persist } from 'zustand/middleware';
 export const useTabsStore = create(persist((set) => ({
     tab: {
-        top: "flow",
-        bottom: "tracing",
+        top: 'flow',
+        bottom: 'tracing',
+    },
+    setTopTab: (tab) => {
+        set((state) => ({ tab: { ...state.tab, top: tab } }));
     },
-    setTopTab: (tab) => set((state) => ({ tab: { ...state.tab, top: tab } })),
     setBottomTab: (tab) => set((state) => ({ tab: { ...state.tab, bottom: tab } })),
 }), {
     name: 'motia-tabs-storage',

package/dist/src/system-view-mode.d.ts

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

package/dist/src/system-view-mode.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { APP_SIDEBAR_CONTAINER_ID, CollapsiblePanel, CollapsiblePanelGroup, TabsContent, TabsList, TabsTrigger, } from '@motiadev/ui';
+import { useCallback, useMemo } from 'react';
+import { useShallow } from 'zustand/react/shallow';
+import { Header } from './components/header/header';
+import { analytics } from './lib/analytics';
+import { TabLocation, useAppTabsStore } from './stores/use-app-tabs-store';
+import { useTabsStore } from './stores/use-tabs-store';
+const topTabs = (state) => state.tabs;
+export const SystemViewMode = () => {
+    const tab = useTabsStore((state) => state.tab);
+    const setTopTab = useTabsStore((state) => state.setTopTab);
+    const setBottomTab = useTabsStore((state) => state.setBottomTab);
+    const tabs = useAppTabsStore(useShallow(topTabs));
+    const tabChangeCallbacks = useMemo(() => ({
+        [TabLocation.TOP]: setTopTab,
+        [TabLocation.BOTTOM]: setBottomTab,
+    }), [setTopTab, setBottomTab]);
+    const onTabChange = useCallback((location) => (newTab) => {
+        analytics.track(`${location} tab changed`, { [`new.${location}`]: newTab, tab });
+        tabChangeCallbacks[location](newTab);
+    }, [tabChangeCallbacks, tab]);
+    return (_jsxs("div", { className: "grid grid-rows-[auto_1fr] grid-cols-[1fr_auto] bg-background text-foreground h-screen", children: [_jsx("div", { className: "col-span-2", children: _jsx(Header, {}) }), _jsx("main", { className: "m-2 overflow-hidden", role: "main", children: _jsxs(CollapsiblePanelGroup, { autoSaveId: "app-panel", direction: "vertical", className: "gap-1 h-full", "aria-label": "Workbench panels", children: [_jsx(CollapsiblePanel, { id: "top-panel", variant: 'tabs', defaultTab: tab.top, onTabChange: onTabChange(TabLocation.TOP), header: _jsx(TabsList, { children: tabs[TabLocation.TOP].map((tab) => {
+                                    const LabelComponent = tab.tabLabel;
+                                    return (_jsx(TabsTrigger, { value: tab.id, "data-testid": `${tab.id.toLowerCase()}-link`, className: "cursor-pointer", children: _jsx(LabelComponent, {}) }, tab.id));
+                                }) }), children: tabs[TabLocation.TOP].map((tab) => {
+                                const Element = tab.content;
+                                return (_jsx(TabsContent, { value: tab.id, className: "h-full", children: _jsx(Element, {}) }, tab.id));
+                            }) }), _jsx(CollapsiblePanel, { id: "bottom-panel", variant: 'tabs', defaultTab: tab.bottom, onTabChange: onTabChange(TabLocation.BOTTOM), header: _jsx(TabsList, { children: tabs[TabLocation.BOTTOM].map((tab) => {
+                                    const LabelComponent = tab.tabLabel;
+                                    return (_jsx(TabsTrigger, { value: tab.id, "data-testid": `${tab.id.toLowerCase()}-link`, className: "cursor-pointer", children: _jsx(LabelComponent, {}) }, tab.id));
+                                }) }), children: tabs[TabLocation.BOTTOM].map((tab) => {
+                                const Element = tab.content;
+                                return (_jsx(TabsContent, { value: tab.id, className: "h-full", children: _jsx(Element, {}) }, tab.id));
+                            }) })] }) }), _jsx("div", { id: APP_SIDEBAR_CONTAINER_ID })] }));
+};