@motiadev/workbench 0.0.6 → 0.0.7-build.20250529212805

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Motia
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE. 

package/README.md

@@ -1,50 +1,105 @@
-# React + TypeScript + Vite
+# @motiadev/workbench
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+A web-based interface for building, visualizing, and managing Motia workflows.
 
-Currently, two official plugins are available:
+## Overview
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+`@motiadev/workbench` provides a powerful visual interface for Motia workflows, offering:
 
-## Expanding the ESLint configuration
+- Flow visualization with interactive diagrams
+- Real-time log monitoring
+- State inspection and management
+- API testing capabilities
 
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+## Installation
 
-- Configure the top-level `parserOptions` property like this:
+```bash
+npm install @motiadev/workbench
+# or
+yarn add @motiadev/workbench
+# or
+pnpm add @motiadev/workbench
+```
+
+## Usage
+
+The Workbench is automatically integrated when you run a Motia project in development mode:
+
+```bash
+npx motia dev
+```
+
+This starts the development server and makes the Workbench available at `http://localhost:3000` by default.
+
+## Features
+
+### Flow Visualization
+
+Visualize your workflows as interactive diagrams, showing the connections between steps and the flow of events through your application.
+
+### Log Monitoring
+
+Monitor logs in real-time with filtering capabilities, log level indicators, and detailed log inspection.
+
+### State Management
+
+Inspect and manage application state, with support for viewing complex nested objects and state changes over time.
 
-```js
-export default tseslint.config({
-  languageOptions: {
-    // other options...
-    parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
-      tsconfigRootDir: import.meta.dirname,
-    },
-  },
-})
+### API Testing
+
+Test API endpoints directly from the Workbench interface, with support for different HTTP methods and request bodies.
+
+## Components
+
+The package exports several components that can be used to customize the visualization of your workflows:
+
+```typescript
+import { 
+  EventNode, 
+  ApiNode, 
+  NoopNode, 
+  BaseNode, 
+  BaseHandle 
+} from '@motiadev/workbench'
 ```
 
-- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
-- Optionally add `...tseslint.configs.stylisticTypeChecked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
-
-```js
-// eslint.config.js
-import react from 'eslint-plugin-react'
-
-export default tseslint.config({
-  // Set the react version
-  settings: { react: { version: '18.3' } },
-  plugins: {
-    // Add the react plugin
-    react,
-  },
-  rules: {
-    // other rules...
-    // Enable its recommended rules
-    ...react.configs.recommended.rules,
-    ...react.configs['jsx-runtime'].rules,
-  },
-})
+### Node Components
+
+- `EventNode`: Visualizes event-based steps
+- `ApiNode`: Visualizes API endpoint steps
+- `NoopNode`: A placeholder node with no specific functionality
+- `BaseNode`: Base component for creating custom node types
+- `BaseHandle`: Connection point component for nodes
+
+## Customization
+
+You can customize the appearance and behavior of the Workbench by creating custom node components:
+
+```typescript
+import { BaseNode, Position } from '@motiadev/workbench'
+
+export const CustomNode = ({ data, ...props }) => {
+  return (
+    <BaseNode 
+      {...props} 
+      title="Custom Node" 
+      color="#8B5CF6"
+    >
+      <div className="p-4">
+        {data.customContent}
+      </div>
+    </BaseNode>
+  )
+}
 ```
+
+## Technical Details
+
+- Built with React and TypeScript
+- Uses [XY Flow](https://xyflow.com/) for flow visualization
+- Styled with Tailwind CSS and shadcn/ui components
+- Supports real-time updates via WebSockets
+
+## License
+
+This package is part of the Motia framework and is licensed under the same terms.

package/dist/README.md

@@ -0,0 +1,105 @@
+# @motiadev/workbench
+
+A web-based interface for building, visualizing, and managing Motia workflows.
+
+## Overview
+
+`@motiadev/workbench` provides a powerful visual interface for Motia workflows, offering:
+
+- Flow visualization with interactive diagrams
+- Real-time log monitoring
+- State inspection and management
+- API testing capabilities
+
+## Installation
+
+```bash
+npm install @motiadev/workbench
+# or
+yarn add @motiadev/workbench
+# or
+pnpm add @motiadev/workbench
+```
+
+## Usage
+
+The Workbench is automatically integrated when you run a Motia project in development mode:
+
+```bash
+npx motia dev
+```
+
+This starts the development server and makes the Workbench available at `http://localhost:3000` by default.
+
+## Features
+
+### Flow Visualization
+
+Visualize your workflows as interactive diagrams, showing the connections between steps and the flow of events through your application.
+
+### Log Monitoring
+
+Monitor logs in real-time with filtering capabilities, log level indicators, and detailed log inspection.
+
+### State Management
+
+Inspect and manage application state, with support for viewing complex nested objects and state changes over time.
+
+### API Testing
+
+Test API endpoints directly from the Workbench interface, with support for different HTTP methods and request bodies.
+
+## Components
+
+The package exports several components that can be used to customize the visualization of your workflows:
+
+```typescript
+import { 
+  EventNode, 
+  ApiNode, 
+  NoopNode, 
+  BaseNode, 
+  BaseHandle 
+} from '@motiadev/workbench'
+```
+
+### Node Components
+
+- `EventNode`: Visualizes event-based steps
+- `ApiNode`: Visualizes API endpoint steps
+- `NoopNode`: A placeholder node with no specific functionality
+- `BaseNode`: Base component for creating custom node types
+- `BaseHandle`: Connection point component for nodes
+
+## Customization
+
+You can customize the appearance and behavior of the Workbench by creating custom node components:
+
+```typescript
+import { BaseNode, Position } from '@motiadev/workbench'
+
+export const CustomNode = ({ data, ...props }) => {
+  return (
+    <BaseNode 
+      {...props} 
+      title="Custom Node" 
+      color="#8B5CF6"
+    >
+      <div className="p-4">
+        {data.customContent}
+      </div>
+    </BaseNode>
+  )
+}
+```
+
+## Technical Details
+
+- Built with React and TypeScript
+- Uses [XY Flow](https://xyflow.com/) for flow visualization
+- Styled with Tailwind CSS and shadcn/ui components
+- Supports real-time updates via WebSockets
+
+## License
+
+This package is part of the Motia framework and is licensed under the same terms.

package/dist/index.d.ts

@@ -5,6 +5,5 @@ export { BaseNode } from './src/publicComponents/base-node';
 export { BaseHandle } from './src/publicComponents/base-handle';
 export { Position } from '@xyflow/react';
 export type { EventNodeData, ApiNodeData } from './src/views/flow/nodes/nodes.types';
-export * from './src/publicComponents/node-props';
+export type { ApiNodeProps, BaseNodeProps, CronNodeProps, EventNodeProps, NoopNodeProps, } from './src/publicComponents/node-props';
 export { Button } from './src/components/ui/button';
-//# sourceMappingURL=index.d.ts.map

package/dist/index.html

@@ -0,0 +1,31 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.amplitude.com/libs/analytics-browser-2.11.1-min.js.gz"></script>
+    <script>
+      window.amplitude.init('ab2408031a38aa5cb85587a27ecfc69c', {
+          autocapture: {
+            fileDownloads: false,
+            formInteractions: false,
+          }, 
+          fetchRemoteConfig: true, 
+          recording: false
+        })
+    </script>
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Motia</title>
+  </head>
+  <body class="dark">
+    <div id="root"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

package/dist/index.js

@@ -4,5 +4,4 @@ export { NoopNode } from './src/publicComponents/noop-node';
 export { BaseNode } from './src/publicComponents/base-node';
 export { BaseHandle } from './src/publicComponents/base-handle';
 export { Position } from '@xyflow/react';
-export * from './src/publicComponents/node-props';
 export { Button } from './src/components/ui/button';

package/dist/middleware.d.ts

@@ -1,2 +1,2 @@
-export declare const applyMiddleware: (app: any) => Promise<void>;
-//# sourceMappingURL=middleware.d.ts.map
+import type { Express } from 'express';
+export declare const applyMiddleware: (app: Express) => Promise<void>;

package/dist/middleware.js

@@ -4,39 +4,32 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.applyMiddleware = void 0;
-const tailwind_config_1 = __importDefault(require("./tailwind.config"));
+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 applyMiddleware = async (app) => {
-    // NOTE: this is needed since vite is an ESM https://vite.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated
-    const fs = await import('fs');
-    const path = await import('path');
-    const { default: Express } = await import('express');
-    const { createServer } = await import('vite');
-    const { default: autoprefixer } = await import('autoprefixer');
-    const { default: tailwindcss } = await import('tailwindcss');
-    const vite = await createServer({
+    const vite = await (0, vite_1.createServer)({
         appType: 'spa',
         root: __dirname,
         server: {
             middlewareMode: true,
+            host: true,
             fs: {
-                allow: [__dirname, path.join(process.cwd(), './steps')],
+                allow: [__dirname, path_1.default.join(process.cwd(), './steps')],
             },
         },
         resolve: {
-            alias: { '@': path.resolve(__dirname, './src') },
-        },
-        css: {
-            postcss: {
-                plugins: [autoprefixer(), tailwindcss(tailwind_config_1.default)],
-            },
+            alias: { '@': path_1.default.resolve(__dirname, './src') },
         },
+        plugins: [(0, plugin_react_1.default)()],
     });
     app.use(vite.middlewares);
     app.use('*', async (req, res, next) => {
         const url = req.originalUrl;
         console.log('[UI] Request', { url });
         try {
-            const index = fs.readFileSync(path.resolve(__dirname, 'index.html'), 'utf-8');
+            const index = fs_1.default.readFileSync(path_1.default.resolve(__dirname, 'index.html'), 'utf-8');
             const html = await vite.transformIndexHtml(url, index);
             res.status(200).set({ 'Content-Type': 'text/html' }).end(html);
         }

package/dist/postcss.config.mjs

@@ -0,0 +1,9 @@
+import path from 'path'
+
+export default {
+  plugins: {
+    "@tailwindcss/postcss": {
+      base: path.join(import.meta.dirname, './src'),
+    },
+  }
+}

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

@@ -1,2 +1 @@
 export declare const AppSidebar: () => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=app-sidebar.d.ts.map

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

@@ -1,13 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useListFlows } from '@/hooks/use-list-flows';
-import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem, } from './ui/sidebar';
-import { Workflow } from 'lucide-react';
-import { Link, useMatchRoute } from '@tanstack/react-router';
+import { File, Link2, Logs, Workflow } from 'lucide-react';
+import { Link, useLocation } from 'react-router';
+import { Sidebar, SidebarButton, SidebarGroup } from './ui/sidebar';
+import { Badge } from './ui/badge';
+import { useLogs } from '@/stores/use-logs';
+const BadgeCount = () => {
+    const unreadLogsCount = useLogs((state) => state.unreadLogsCount);
+    if (!unreadLogsCount) {
+        return null;
+    }
+    return _jsx(Badge, { variant: "red-rounded", children: unreadLogsCount });
+};
 export const AppSidebar = () => {
     const { flows } = useListFlows();
-    const matchRoute = useMatchRoute();
-    const isActive = (flowId) => {
-        return !!matchRoute({ to: '/flow/$id', params: { id: flowId } });
-    };
-    return (_jsxs(Sidebar, { children: [_jsx(SidebarHeader, {}), _jsx(SidebarContent, { children: _jsxs(SidebarGroup, { children: [_jsx(SidebarGroupLabel, { children: "Flows" }), _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: flows.map((flow) => (_jsx(SidebarMenuItem, { children: _jsx(SidebarMenuButton, { asChild: true, className: "cursor-pointer", isActive: isActive(flow.id), children: _jsxs(Link, { to: "/flow/$id", params: { id: flow.id }, className: "flex items-center gap-2", "data-testid": `flow-link-${flow.id}`, children: [_jsx(Workflow, {}), _jsx("span", { children: flow.name })] }) }) }, flow.id))) }) })] }) }), _jsx(SidebarFooter, {})] }));
+    const { pathname } = useLocation();
+    const isActive = (flowId) => pathname.includes(`/flow/${flowId}`);
+    return (_jsxs(Sidebar, { children: [_jsxs(SidebarGroup, { testId: "motia-title", title: "Motia", children: [_jsx(Link, { "data-testid": "logs-link", to: "/logs", children: _jsxs(SidebarButton, { isActive: pathname === '/logs', icon: _jsx(Logs, { className: "w-4 h-4" }), children: ["Logs", pathname !== '/logs' && _jsx(BadgeCount, {})] }) }), _jsx(Link, { "data-testid": "states-link", to: "/states", children: _jsx(SidebarButton, { isActive: pathname === '/states', icon: _jsx(File, { className: "w-4 h-4" }), children: "States" }) }), _jsx(Link, { "data-testid": "endpoints-link", to: "/endpoints", children: _jsx(SidebarButton, { isActive: pathname === '/endpoints', icon: _jsx(Link2, { className: "w-4 h-4" }), children: "Endpoints" }) })] }), _jsx(SidebarGroup, { testId: "flows-title", title: "Flows", children: flows.map((flow) => (_jsx(Link, { "data-testid": `flow-${flow.name}-link`, to: `/flow/${flow.id}`, children: _jsx(SidebarButton, { isActive: isActive(flow.id), icon: _jsx(Workflow, { className: "w-4 h-4" }), children: flow.name }) }, flow.id))) })] }));
 };

package/dist/src/components/endpoints/endpoint-badge.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const badgeVariants: (props?: ({
+    variant?: "POST" | "GET" | "PUT" | "DELETE" | "PATCH" | "HEAD" | "OPTIONS" | null | undefined;
+    defaultVariants?: "variant" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+}
+export declare function EndpointBadge({ className, variant, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/endpoints/endpoint-badge.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+const badgeVariants = cva('inline-flex items-center rounded-lg border px-2 py-1 text-xs font-bold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2', {
+    variants: {
+        variant: {
+            POST: 'bg-sky-500/50 text-sky-100',
+            GET: 'bg-lime-500/50 text-lime-100',
+            PUT: 'bg-yellow-500/50 text-yellow-100',
+            DELETE: 'bg-red-500/50 text-red-100',
+            PATCH: 'bg-yellow-500/50 text-yellow-100',
+            HEAD: 'bg-blue-500/50 text-blue-100',
+            OPTIONS: 'bg-purple-500/50 text-purple-100',
+        },
+        defaultVariants: {
+            variant: 'bg-blue-500/50 text-blue-100',
+        },
+    },
+});
+export function EndpointBadge({ className, variant, ...props }) {
+    return _jsx("div", { className: cn(badgeVariants({ variant }), className), ...props });
+}

package/dist/src/components/endpoints/endpoint-call.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ApiEndpoint } from './hooks/use-get-endpoints';
+type Props = {
+    endpoint: ApiEndpoint;
+    onClose: () => void;
+};
+export declare const EndpointCall: React.FC<Props>;
+export {};

package/dist/src/components/endpoints/endpoint-call.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { Loader2, Play, X } from 'lucide-react';
+import { Button } from '../ui/button';
+import { Input } from '../ui/input';
+import { Textarea } from '../ui/textarea';
+import { EndpointBadge } from './endpoint-badge';
+import { useJsonSchemaToJson } from './hooks/use-json-schema-to-json';
+import { usePathParams } from './hooks/use-path-params';
+import { useStateStream } from './hooks/use-state-stream';
+export const EndpointCall = ({ endpoint, onClose }) => {
+    const shouldHaveBody = ['post', 'put', 'patch'].includes(endpoint.method.toLowerCase());
+    const [isRequestLoading, setIsRequestLoading] = useState(false);
+    const [responseCode, setResponseCode] = useState();
+    const [responseBody, setResponseBody] = useState();
+    const [executionTime, setExecutionTime] = useState();
+    const { body, setBody } = useJsonSchemaToJson(endpoint.bodySchema);
+    const pathParams = usePathParams(endpoint.path);
+    const [pathParamsValues, setPathParamsValues] = useState(pathParams?.reduce((acc, param) => ({ ...acc, [param]: '' }), {}));
+    const [queryParamsValues, setQueryParamsValues] = useState(endpoint.queryParams?.reduce((acc, param) => ({ ...acc, [param.name]: '' }), {}) ?? {});
+    const { data: responseBodyData, isStreamed } = useStateStream(responseBody);
+    const isPlayEnabled = useMemo(() => {
+        if (!pathParams)
+            return true;
+        return pathParams?.every((param) => pathParamsValues[param]);
+    }, [pathParams, pathParamsValues]);
+    const onPathParamChange = (param, value) => {
+        setPathParamsValues((prev) => ({ ...prev, [param]: value }));
+    };
+    const onQueryParamChange = (param, value) => {
+        setQueryParamsValues((prev) => ({ ...prev, [param]: value }));
+    };
+    const handleRequest = async () => {
+        setIsRequestLoading(true);
+        const startTime = Date.now();
+        const path = new URL(window.location.origin +
+            pathParams.reduce((acc, param) => {
+                return acc.replace(`:${param}`, pathParamsValues[param]);
+            }, endpoint.path));
+        for (const [key, value] of Object.entries(queryParamsValues)) {
+            path.searchParams.set(key, value);
+        }
+        const response = await fetch(path.toString(), {
+            method: endpoint.method,
+            headers: { 'Content-Type': 'application/json' },
+            body: endpoint.method === 'GET' ? null : body,
+        });
+        const endTime = Date.now();
+        const executionTime = endTime - startTime;
+        const json = await response.json();
+        setResponseCode(response.status);
+        setResponseBody(json);
+        setExecutionTime(executionTime);
+        setIsRequestLoading(false);
+    };
+    return (_jsxs("div", { className: "flex flex-col gap-2 overflow-y-auto", children: [_jsxs("div", { className: "text-xs flex flex-row gap-2 items-center justify-between w-full", children: [_jsx("span", { className: "font-bold", children: "Request" }), _jsx("div", { className: "flex flex-row gap-2 items-center hover:bg-white/10 rounded-md p-1", children: _jsx(X, { className: "cursor-pointer w-4 h-4", onClick: onClose }) })] }), _jsxs("div", { className: "flex flex-row gap-2 items-center", children: [_jsx(EndpointBadge, { variant: endpoint.method, children: endpoint.method.toUpperCase() }), _jsx("span", { className: "text-md font-bold", children: endpoint.path })] }), _jsx("span", { className: "text-xs text-muted-foreground", children: endpoint.description }), !!pathParams.length && (_jsxs("div", { className: "flex flex-col gap-2 p-4 rounded-lg bg-muted", children: [_jsx("span", { className: "text-xs font-bold", children: "Path Params" }), _jsx("div", { className: "flex flex-col gap-4", children: pathParams.map((param) => (_jsxs("div", { className: "text-xs", children: [_jsx("div", { className: "font-bold mb-2", children: param }), _jsx(Input, { className: "w-full", value: pathParamsValues[param], onChange: (e) => onPathParamChange(param, e.target.value) })] }, param))) })] })), !!endpoint.queryParams?.length && (_jsxs("div", { className: "flex flex-col gap-2 p-4 rounded-lg bg-muted", children: [_jsx("span", { className: "text-xs font-bold", children: "Query Params" }), _jsx("div", { className: "flex flex-col gap-4", children: endpoint.queryParams.map((param) => (_jsxs("div", { className: "text-xs", children: [_jsx("div", { className: "font-bold mb-2", children: param.name }), _jsx(Input, { className: "w-full", value: queryParamsValues[param.name], onChange: (e) => onQueryParamChange(param.name, e.target.value) })] }, param.name))) })] })), shouldHaveBody && (_jsxs("div", { className: "flex flex-col gap-2 rounded-lg bg-muted", children: [_jsx("span", { className: "text-xs font-bold", children: "Body" }), _jsx(Textarea, { className: "w-full font-mono font-medium min-h-[200px]", value: body, onChange: (e) => setBody(e.target.value) })] })), _jsxs(Button, { className: "w-fit", onClick: handleRequest, disabled: isRequestLoading || !isPlayEnabled, children: [isRequestLoading ? _jsx(Loader2, { className: "animate-spin" }) : _jsx(Play, {}), " Play"] }), responseCode !== undefined && (_jsxs("div", { className: "flex flex-col gap-2 rounded-lg bg-muted", children: [_jsxs("span", { className: "text-xs font-bold", children: [_jsx(EndpointBadge, { variant: responseCode >= 400 ? 'DELETE' : 'GET', children: responseCode }), " Execution time: ", _jsxs("span", { className: "text-muted-foreground", children: [executionTime, "ms"] })] }), isStreamed && (_jsxs("span", { className: "flex flex-row items-center font-medium text-muted-foreground text-xs", children: [_jsxs("span", { className: "ml-1 inline-block w-2 h-2 rounded-full bg-green-500 mr-2 relative", children: [_jsx("span", { className: "absolute inset-0 rounded-full bg-green-500 animate-[ping_1.5s_ease-in-out_infinite]" }), _jsx("span", { className: "absolute inset-0 rounded-full bg-green-500" })] }), "Object is being streamed, this is not the actual response from the API Endpoint"] })), _jsx("span", { className: "text-xs font-mono font-bold dark:bg-black/50 bg-white/50 p-2 rounded-lg whitespace-pre-wrap", children: JSON.stringify(responseBodyData, null, 2) })] }))] }));
+};

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

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

package/dist/src/components/endpoints/endpoints.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cva } from 'class-variance-authority';
+import { useEffect, useState } from 'react';
+import { EndpointBadge } from './endpoint-badge';
+import { EndpointCall } from './endpoint-call';
+import { useGetEndpoints } from './hooks/use-get-endpoints';
+import { SelectedEndpoint } from './selected-endpoint';
+const endpointVariants = cva('flex flex-col gap-2 font-mono p-2 rounded-lg cursor-pointer', {
+    variants: {
+        method: {
+            GET: 'bg-lime-500/20',
+            POST: 'bg-blue-500/20',
+            PUT: 'bg-yellow-500/20',
+            DELETE: 'bg-red-500/20',
+            PATCH: 'bg-yellow-500/20',
+            HEAD: 'bg-blue-500/20',
+            OPTIONS: 'bg-purple-500/20',
+        },
+    },
+    defaultVariants: { method: 'GET' },
+});
+export const Endpoints = () => {
+    const endpoints = useGetEndpoints();
+    const [selectedEndpoint, setSelectedEndpoint] = useState(null);
+    useEffect(() => {
+        setSelectedEndpoint((selected) => {
+            if (!selected)
+                return null;
+            const endpoint = endpoints.find((endpoint) => endpoint.method === selected.method && endpoint.path === selected.path);
+            return endpoint ?? null;
+        });
+    }, [endpoints]);
+    return (_jsxs("div", { className: "flex flex-row w-full h-screen", children: [_jsxs("div", { className: "flex flex-col gap-2 flex-1 m-4 mr-2  max-h-full overflow-y-auto", children: [_jsxs("header", { children: [_jsx("h1", { className: "text-2xl font-bold", children: "API Endpoints" }), _jsx("span", { className: "text-sm text-zinc-400", children: "Check all API endpoints" })] }), endpoints.map((endpoint) => (_jsxs("div", { className: endpointVariants({ method: endpoint.method }), onClick: () => setSelectedEndpoint(endpoint), children: [_jsxs("div", { className: "flex flex-row gap-2 items-center", children: [_jsx(EndpointBadge, { variant: endpoint.method, children: endpoint.method.toUpperCase() }), _jsx("span", { className: "text-md font-bold", children: endpoint.path }), !selectedEndpoint && _jsx("span", { className: "text-xs text-muted-foreground", children: endpoint.description })] }), selectedEndpoint && _jsx("span", { className: "text-xs text-muted-foreground", children: endpoint.description }), selectedEndpoint === endpoint && _jsx(SelectedEndpoint, { endpoint: selectedEndpoint })] }, `${endpoint.method} ${endpoint.path}`)))] }), selectedEndpoint && (_jsx("div", { className: "flex flex-col gap-2 flex-1 m-4 ml-2 p-4 rounded-lg bg-muted", children: _jsx(EndpointCall, { endpoint: selectedEndpoint, onClose: () => setSelectedEndpoint(null) }) }))] }));
+};

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

@@ -0,0 +1,15 @@
+type ApiRouteMethod = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' | 'OPTIONS' | 'HEAD';
+type QueryParam = {
+    name: string;
+    description: string;
+};
+export type ApiEndpoint = {
+    method: ApiRouteMethod;
+    path: string;
+    description?: string;
+    queryParams?: QueryParam[];
+    responseSchema?: Record<string, any>;
+    bodySchema?: Record<string, Record<string, any>>;
+};
+export declare const useGetEndpoints: () => ApiEndpoint[];
+export {};

package/dist/src/components/endpoints/hooks/use-get-endpoints.js

@@ -0,0 +1,8 @@
+import { useStreamGroup } from '@motiadev/stream-client-react';
+export const useGetEndpoints = () => {
+    const { data: endpoints } = useStreamGroup({
+        streamName: '__motia.api-endpoints',
+        groupId: 'default',
+    });
+    return endpoints;
+};

package/dist/src/components/endpoints/hooks/use-json-schema-to-json.d.ts

@@ -0,0 +1,4 @@
+export declare const useJsonSchemaToJson: (schema: Record<string, any> | undefined) => {
+    body: string;
+    setBody: import("react").Dispatch<import("react").SetStateAction<string>>;
+};

package/dist/src/components/endpoints/hooks/use-json-schema-to-json.js

@@ -0,0 +1,11 @@
+import { useEffect, useState } from 'react';
+import { convertJsonSchemaToJson } from './utils';
+export const useJsonSchemaToJson = (schema) => {
+    const [body, setBody] = useState('');
+    useEffect(() => {
+        if (schema) {
+            setBody(JSON.stringify(convertJsonSchemaToJson(schema), null, 2));
+        }
+    }, [schema]);
+    return { body, setBody };
+};

package/dist/src/components/endpoints/hooks/use-path-params.d.ts

@@ -0,0 +1 @@
+export declare const usePathParams: (path: string) => string[];

package/dist/src/components/endpoints/hooks/use-path-params.js

@@ -0,0 +1,4 @@
+export const usePathParams = (path) => {
+    const pathParams = path.match(/:(\w+)/g);
+    return pathParams?.map((param) => param.slice(1)) ?? [];
+};

package/dist/src/components/endpoints/hooks/use-state-stream.d.ts

@@ -0,0 +1,4 @@
+export declare const useStateStream: (object: Record<string, any> | undefined) => {
+    data: {} | undefined;
+    isStreamed: boolean;
+};

package/dist/src/components/endpoints/hooks/use-state-stream.js

@@ -0,0 +1,8 @@
+import { useStreamItem } from '@motiadev/stream-client-react';
+export const useStateStream = (object) => {
+    const { data } = useStreamItem(object?.__motia);
+    return {
+        data: data || object,
+        isStreamed: !!data,
+    };
+};