npm - @motiadev/workbench - Versions diffs - 0.1.0-beta.9 → 0.2.0-beta.31 - Mend

@motiadev/workbench 0.1.0-beta.9 → 0.2.0-beta.31

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (40) hide show

package/dist/index.html CHANGED Viewed

@@ -3,9 +3,10 @@
   <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=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap"
+      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"
     />

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useListFlows } from '@/hooks/use-list-flows';
-import { File, Logs, Workflow } from 'lucide-react';
+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';
@@ -10,5 +10,5 @@ export const AppSidebar = () => {
     const { pathname } = useLocation();
     const isActive = (flowId) => pathname.includes(`/flow/${flowId}`);
     const unreadLogsCount = useLogs((state) => state.unreadLogsCount);
-    return (_jsxs(Sidebar, { children: [_jsxs(SidebarGroup, { title: "Motia", children: [_jsx(Link, { to: "/logs", children: _jsxs(SidebarButton, { isActive: pathname === '/logs', icon: _jsx(Logs, { className: "w-4 h-4" }), children: ["Logs", pathname !== '/logs' && unreadLogsCount > 0 && _jsx(Badge, { variant: "red-rounded", children: unreadLogsCount })] }) }), _jsx(Link, { to: "/states", children: _jsx(SidebarButton, { isActive: pathname === '/states', icon: _jsx(File, { className: "w-4 h-4" }), children: "States" }) })] }), _jsx(SidebarGroup, { title: "Flows", children: flows.map((flow) => (_jsx(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))) })] }));
+    return (_jsxs(Sidebar, { children: [_jsxs(SidebarGroup, { title: "Motia", children: [_jsx(Link, { to: "/logs", children: _jsxs(SidebarButton, { isActive: pathname === '/logs', icon: _jsx(Logs, { className: "w-4 h-4" }), children: ["Logs", pathname !== '/logs' && unreadLogsCount > 0 && _jsx(Badge, { variant: "red-rounded", children: unreadLogsCount })] }) }), _jsx(Link, { to: "/states", children: _jsx(SidebarButton, { isActive: pathname === '/states', icon: _jsx(File, { className: "w-4 h-4" }), children: "States" }) }), _jsx(Link, { to: "/endpoints", children: _jsx(SidebarButton, { isActive: pathname === '/endpoints', icon: _jsx(Link2, { className: "w-4 h-4" }), children: "Endpoints" }) })] }), _jsx(SidebarGroup, { title: "Flows", children: flows.map((flow) => (_jsx(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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -0,0 +1,55 @@
+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';
+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 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 p-4 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 p-4 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"] })] }), _jsx("span", { className: "text-xs font-mono font-bold bg-black/50 p-2 rounded-lg whitespace-pre-wrap", children: JSON.stringify(responseBody, null, 2) })] }))] }));
+};

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

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

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -0,0 +1,19 @@
+import { useCallback, useEffect, useState } from 'react';
+import { useSocket } from '../../../hooks/use-socket';
+export const useGetEndpoints = () => {
+    const { socket } = useSocket();
+    const [endpoints, setEndpoints] = useState([]);
+    const fetchEndpoints = useCallback(() => {
+        fetch(`/api-endpoints`)
+            .then((res) => res.json())
+            .then((endpoints) => setEndpoints(endpoints));
+    }, []);
+    useEffect(() => {
+        fetchEndpoints();
+        socket.on('api-endpoint-changed', fetchEndpoints);
+        return () => {
+            socket.off('api-endpoint-changed', fetchEndpoints);
+        };
+    }, [socket, fetchEndpoints]);
+    return endpoints;
+};

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

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

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

@@ -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/utils.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const convertJsonSchemaToJson: (schema: Record<string, any>) => any;

package/dist/src/components/endpoints/hooks/utils.js ADDED Viewed

@@ -0,0 +1,29 @@
+export const convertJsonSchemaToJson = (schema) => {
+    if (!schema)
+        return {};
+    if (schema.type === 'object') {
+        const result = {};
+        if (schema.properties) {
+            Object.entries(schema.properties).forEach(([key, value]) => {
+                result[key] = convertJsonSchemaToJson(value);
+            });
+        }
+        return result;
+    }
+    switch (schema.type) {
+        case 'array':
+            return [convertJsonSchemaToJson(schema.items)];
+        case 'string':
+            return schema.description ?? 'string';
+        case 'number':
+            return schema.description ?? 0;
+        case 'integer':
+            return 0;
+        case 'boolean':
+            return schema.description ?? false;
+        case 'null':
+            return schema.description ?? null;
+        default:
+            return undefined;
+    }
+};

package/dist/src/components/endpoints/response-body.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import React from 'react';
+type Props = {
+    status: string;
+    body: Record<string, any>;
+};
+export declare const ResponseBody: React.FC<Props>;
+export {};

package/dist/src/components/endpoints/response-body.js ADDED Viewed

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useJsonSchemaToJson } from './hooks/use-json-schema-to-json';
+export const ResponseBody = ({ status, body }) => {
+    const { body: responseBody } = useJsonSchemaToJson(body);
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("span", { className: "text-xs font-bold", children: status }), _jsx("span", { className: "text-xs font-mono bg-black/50 p-2 rounded-lg whitespace-pre-wrap", children: responseBody })] }));
+};

package/dist/src/components/endpoints/selected-endpoint.d.ts ADDED Viewed

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

package/dist/src/components/endpoints/selected-endpoint.js ADDED Viewed

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useJsonSchemaToJson } from './hooks/use-json-schema-to-json';
+import { ResponseBody } from './response-body';
+export const SelectedEndpoint = ({ endpoint }) => {
+    const { body: requestBody } = useJsonSchemaToJson(endpoint.bodySchema);
+    return (_jsxs(_Fragment, { children: [endpoint.queryParams && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("span", { className: "text-xs font-bold", children: "Query Params" }), _jsx("div", { className: "flex flex-col gap-2 flex-1 p-2 rounded-lg bg-muted table", children: endpoint.queryParams.map((param) => (_jsxs("span", { className: "text-xs table-row", children: [_jsx("span", { className: "font-bold table-cell", children: param.name }), _jsx("span", { className: "text-xs table-cell", children: param.description })] }, param.name))) })] })), requestBody && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("span", { className: "text-xs font-bold", children: "Request Body" }), _jsx("span", { className: "text-xs font-mono bg-black/50 p-2 rounded-lg whitespace-pre-wrap", children: requestBody })] })), endpoint.responseSchema && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("span", { className: "text-xs font-bold", children: "Response" }), Object.entries(endpoint.responseSchema).map(([status, schema]) => (_jsx(ResponseBody, { status: status, body: schema }, status)))] }))] }));
+};

package/dist/src/components/logs/log-level-dot.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+import * as React from 'react';
+export declare const LogLevelDot: React.FC<{
+    level: string;
+}>;

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

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from 'class-variance-authority';
+const badgeVariants = cva('text-xs font-medium tracking-wide w-2 h-2 rounded-full mx-1', {
+    variants: {
+        variant: {
+            info: 'bg-sky-500',
+            trace: 'bg-sky-500',
+            debug: 'bg-sky-500',
+            error: 'bg-rose-500',
+            fatal: 'bg-rose-500',
+            warn: 'bg-amber-500',
+        },
+    },
+});
+export const LogLevelDot = ({ level }) => {
+    return _jsx("div", { className: badgeVariants({ variant: level }) });
+};

package/dist/src/components/logs/logs.js CHANGED Viewed

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import { Table, TableBody, TableCell, TableRow } from '@/components/ui/table';
 import { useLogs } from '@/stores/use-logs';
-import { LogLevelBadge } from './log-level-badge';
 import { useState } from 'react';
 import { LogDetail } from './log-detail';
+import { LogLevelDot } from './log-level-dot';
 const timestamp = (time) => {
     const date = new Date(Number(time));
     return `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
@@ -14,5 +14,5 @@ export const Logs = () => {
     const handleLogClick = (log) => {
         setSelectedLog(log);
     };
-    return (_jsxs("div", { className: "overflow-y-auto h-full text-bold p-4", children: [_jsx(LogDetail, { log: selectedLog, onClose: () => setSelectedLog(undefined) }), _jsxs(Table, { children: [_jsx(TableHeader, { className: "sticky top-0", children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Time" }), _jsx(TableHead, { children: "Level" }), _jsx(TableHead, { children: "Trace" }), _jsx(TableHead, { children: "Flow" }), _jsx(TableHead, { children: "Step" }), _jsx(TableHead, { children: "Message" })] }) }), _jsx(TableBody, { className: "text-md font-mono", children: logs.map((log, index) => (_jsxs(TableRow, { className: "text-white border-b border-zinc-800/50", onClick: () => handleLogClick(log), children: [_jsx(TableCell, { className: "whitespace-nowrap", children: timestamp(log.time) }), _jsx(TableCell, { children: _jsx(LogLevelBadge, { level: log.level }) }), _jsx(TableCell, { children: log.traceId }), _jsx(TableCell, { children: log.flows?.join?.(', ') }), _jsx(TableCell, { children: log.step }), _jsx(TableCell, { children: log.msg })] }, index))) })] })] }));
+    return (_jsxs("div", { className: "overflow-y-auto h-full text-bold p-4", children: [_jsx(LogDetail, { log: selectedLog, onClose: () => setSelectedLog(undefined) }), _jsx(Table, { children: _jsx(TableBody, { className: "text-md font-mono", children: logs.map((log, index) => (_jsxs(TableRow, { className: "cursor-pointer even:bg-muted/50 border-0", onClick: () => handleLogClick(log), children: [_jsxs(TableCell, { className: "whitespace-nowrap flex items-center gap-2", children: [_jsx(LogLevelDot, { level: log.level }), timestamp(log.time)] }), _jsx(TableCell, { className: "whitespace-nowrap text-md font-mono cursor-pointer hover:text-primary text-muted-foreground text-xs font-mono", children: log.traceId }), _jsx(TableCell, { className: "whitespace-nowrap text-md font-mono", children: log.step }), _jsx(TableCell, { className: "whitespace-nowrap text-md font-mono max-w-[500px] truncate w-full", children: log.msg })] }, index))) }) })] }));
 };

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

@@ -8,8 +8,8 @@ export const Sidebar = ({ children }) => {
     return (_jsxs("div", { className: cn('max-h-screen overflow-y-auto transition-[width] duration-300 border-r border-zinc-800 border-solid', isCollapsed ? 'w-[50px]' : 'w-[250px]'), children: [_jsx("div", { className: "flex items-center justify-end gap-2 px-4 py-3", children: _jsx(Button, { variant: "ghost", size: "icon", onClick: () => setIsCollapsed(!isCollapsed), children: isCollapsed ? _jsx(PanelLeftOpen, { className: "w-4 h-4" }) : _jsx(PanelLeftClose, { className: "w-4 h-4" }) }) }), !isCollapsed && _jsx("div", { className: "overflow-y-auto w-[250px]", children: children })] }));
 };
 export const SidebarGroup = ({ children, title }) => {
-    return (_jsxs("div", { className: "flex flex-col", children: [_jsx("h2", { className: "text-lg text-white/60 px-4 py-2 uppercase", children: title }), children] }));
+    return (_jsxs("div", { className: "flex flex-col", children: [_jsx("h2", { className: "text-xs font-bold text-muted-foreground px-4 py-2 uppercase", children: title }), children] }));
 };
 export const SidebarButton = ({ children, isActive, icon }) => {
-    return (_jsxs("div", { className: cn('flex items-center gap-2 px-4 py-3 ', isActive && 'bg-[#242036]'), children: [_jsx("div", { className: "text-gray-500", children: icon }), children] }));
+    return (_jsxs("div", { className: cn('flex text-sm font-medium items-center gap-2 px-4 py-3 ', isActive && 'bg-muted'), children: [_jsx("div", { className: "text-muted-foreground", children: icon }), children] }));
 };

package/dist/src/components/ui/table.js CHANGED Viewed

@@ -11,7 +11,7 @@ const TableFooter = React.forwardRef(({ className, ...props }, ref) => (_jsx("tf
 TableFooter.displayName = 'TableFooter';
 const TableRow = React.forwardRef(({ className, ...props }, ref) => (_jsx("tr", { ref: ref, className: cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', className), ...props })));
 TableRow.displayName = 'TableRow';
-const TableHead = React.forwardRef(({ className, ...props }, ref) => (_jsx("th", { ref: ref, className: cn('h-10 px-2 text-left align-middle text-lg bg-[#252234] text-muted-foreground first:rounded-l-lg last:rounded-r-lg [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', className), ...props })));
+const TableHead = React.forwardRef(({ className, ...props }, ref) => (_jsx("th", { ref: ref, className: cn('h-10 px-2 text-left align-middle text-md font-medium bg-muted text-muted-foreground first:rounded-l-lg last:rounded-r-lg [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', className), ...props })));
 TableHead.displayName = 'TableHead';
 const TableCell = React.forwardRef(({ className, ...props }, ref) => (_jsx("td", { ref: ref, className: cn('p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', className), ...props })));
 TableCell.displayName = 'TableCell';

package/dist/src/index.css CHANGED Viewed

@@ -133,9 +133,7 @@ table {
   font-size: 16px;
   color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
+  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");
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
@@ -149,7 +147,7 @@ table {
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  font-family: 'DM Sans', serif;
+  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");
   font-optical-sizing: auto;
 }
@@ -162,7 +160,7 @@ body {
 button,
 textarea {
-  font-family: 'DM Sans', serif;
+  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");
 }
 strong {
@@ -182,72 +180,72 @@ body,
 @layer base {
   :root {
     --background: 0 0% 100%;
-    --foreground: 224 71.4% 4.1%;
+    --foreground: 0 0% 4%;
     --card: 0 0% 100%;
-    --card-foreground: 224 71.4% 4.1%;
+    --card-foreground: 0 0% 4%;
     --popover: 0 0% 100%;
-    --popover-foreground: 224 71.4% 4.1%;
-    --primary: 220.9 39.3% 11%;
-    --primary-foreground: 210 20% 98%;
-    --secondary: 220 14.3% 95.9%;
-    --secondary-foreground: 220.9 39.3% 11%;
-    --muted: 220 14.3% 95.9%;
-    --muted-foreground: 220 8.9% 46.1%;
-    --accent: 220 14.3% 95.9%;
-    --accent-foreground: 220.9 39.3% 11%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 20% 98%;
-    --border: 220 13% 91%;
-    --input: 220 13% 91%;
-    --ring: 224 71.4% 4.1%;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
+    --popover-foreground: 0 0% 4%;
+    --primary: 0 0% 11%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96%;
+    --secondary-foreground: 0 0% 11%;
+    --muted: 0 0% 96%;
+    --muted-foreground: 0 0% 46%;
+    --accent: 0 0% 96%;
+    --accent-foreground: 0 0% 11%;
+    --destructive: 0 0% 60%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 91%;
+    --input: 0 0% 91%;
+    --ring: 0 0% 4%;
+    --chart-1: 0 0% 70%;
+    --chart-2: 0 0% 55%;
+    --chart-3: 0 0% 40%;
+    --chart-4: 0 0% 25%;
+    --chart-5: 0 0% 10%;
     --radius: 0.5rem;
     --sidebar-background: 0 0% 98%;
-    --sidebar-foreground: 240 5.3% 26.1%;
-    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-foreground: 0 0% 26%;
+    --sidebar-primary: 0 0% 10%;
     --sidebar-primary-foreground: 0 0% 98%;
-    --sidebar-accent: 240 4.8% 95.9%;
-    --sidebar-accent-foreground: 240 5.9% 10%;
-    --sidebar-border: 220 13% 91%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
+    --sidebar-accent: 0 0% 96%;
+    --sidebar-accent-foreground: 0 0% 10%;
+    --sidebar-border: 0 0% 91%;
+    --sidebar-ring: 0 0% 60%;
   }
   .dark {
-    --background: 249 23% 11%;
-    --border: 240 18% 18%;
-    --foreground: 210 20% 98%;
-    --card: 224 71.4% 4.1%;
-    --card-foreground: 210 20% 98%;
-    --popover: 224 71.4% 4.1%;
-    --popover-foreground: 210 20% 98%;
-    --primary: 210 20% 98%;
-    --primary-foreground: 220.9 39.3% 11%;
-    --secondary: 215 27.9% 16.9%;
-    --secondary-foreground: 210 20% 98%;
-    --muted: 215 27.9% 16.9%;
-    --muted-foreground: 217.9 10.6% 64.9%;
-    --accent: 215 27.9% 16.9%;
-    --accent-foreground: 210 20% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 20% 98%;
-    --input: 215 27.9% 16.9%;
-    --ring: 216 12.2% 83.9%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
-    --sidebar-background: 240 5.9% 10%;
-    --sidebar-foreground: 240 4.8% 95.9%;
-    --sidebar-primary: 224.3 76.3% 48%;
+    --background: 0 0% 1%;
+    --border: 0 0% 18%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 4%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 4%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 11%;
+    --secondary: 0 0% 17%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 8%;
+    --muted-foreground: 0 0% 65%;
+    --accent: 0 0% 17%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 0% 31%;
+    --destructive-foreground: 0 0% 98%;
+    --input: 0 0% 17%;
+    --ring: 0 0% 84%;
+    --chart-1: 0 0% 80%;
+    --chart-2: 0 0% 65%;
+    --chart-3: 0 0% 50%;
+    --chart-4: 0 0% 35%;
+    --chart-5: 0 0% 20%;
+    --sidebar-background: 0 0% 10%;
+    --sidebar-foreground: 0 0% 96%;
+    --sidebar-primary: 0 0% 48%;
     --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 240 3.7% 15.9%;
-    --sidebar-accent-foreground: 240 4.8% 95.9%;
-    --sidebar-border: 240 3.7% 15.9%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
+    --sidebar-accent: 0 0% 16%;
+    --sidebar-accent-foreground: 0 0% 96%;
+    --sidebar-border: 0 0% 16%;
+    --sidebar-ring: 0 0% 60%;
   }
   .text-md {
@@ -294,3 +292,17 @@ body,
 .resize-handle.dragging {
   background-color: rgba(74, 222, 128, 0.4);
 }
+.bg-muted {
+  background-color: rgba(120, 120, 120, 0.10);
+}
+.text-muted {
+  color: rgba(120, 120, 120, 0.5);
+}
+.text-muted-foreground {
+  color: rgba(255, 255, 255, 0.8);
+}

package/dist/src/main.js CHANGED Viewed

@@ -9,9 +9,10 @@ import { RouteWrapper } from './route-wrapper';
 import { LogsPage } from './routes/logs-page';
 import { RootMotia } from './components/root-motia';
 import { StatesPage } from './routes/states-page';
+import { EndpointsPage } from './routes/endpoints-page';
 // Render the app
 const rootElement = document.getElementById('root');
 if (!rootElement.innerHTML) {
     const root = createRoot(rootElement);
-    root.render(_jsx(StrictMode, { 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, {}) })] }) }) }) }) }));
+    root.render(_jsx(StrictMode, { 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, {}) })] }) }) }) }) }));
 }

package/dist/src/publicComponents/api-node.js CHANGED Viewed

@@ -3,5 +3,5 @@ import { Webhook } from 'lucide-react';
 import { BaseNode } from './base-node';
 import { DetailItem, NodeDetails } from './node-details';
 export const ApiNode = ({ data, children }) => {
-    return (_jsxs(BaseNode, { variant: "api", title: data.name, language: data.language, disableSourceHandle: !data.emits?.length && !data.virtualEmits?.length, disableTargetHandle: !data.subscribes?.length && !data.virtualSubscribes?.length, children: [data.description && _jsx("div", { className: "text-sm text-white/60", children: data.description }), children, data.webhookUrl && (_jsxs("div", { className: "flex gap-1 items-center text-xs text-white/60", children: [_jsx(Webhook, { className: "w-3 h-3 text-white/40" }), _jsx("div", { className: "font-mono", children: data.webhookUrl })] })), _jsx(NodeDetails, { type: "api", name: data.name, subscribes: data.subscribes, emits: data.emits, description: data.description, language: data.language, children: _jsx(DetailItem, { label: "Webhook URL", children: _jsxs("div", { className: "flex gap-1 items-center text-xs text-white/60", children: [_jsx(Webhook, { className: "w-3 h-3 text-white/40" }), _jsx("div", { className: "font-mono", children: data.webhookUrl })] }) }) })] }));
+    return (_jsxs(BaseNode, { variant: "api", title: data.name, language: data.language, disableSourceHandle: !data.emits?.length && !data.virtualEmits?.length, disableTargetHandle: !data.subscribes?.length && !data.virtualSubscribes?.length, children: [data.description && _jsx("div", { className: "text-sm text-muted-foreground", children: data.description }), children, data.webhookUrl && (_jsxs("div", { className: "flex gap-1 items-center text-xs text-muted-foreground", children: [_jsx(Webhook, { className: "w-3 h-3 text-muted-foreground/40" }), _jsx("div", { className: "font-mono", children: data.webhookUrl })] })), _jsx(NodeDetails, { type: "api", name: data.name, subscribes: data.subscribes, emits: data.emits, description: data.description, language: data.language, children: _jsx(DetailItem, { label: "Webhook URL", children: _jsxs("div", { className: "flex gap-1 items-center text-xs text-white/60", children: [_jsx(Webhook, { className: "w-3 h-3 text-white/40" }), _jsx("div", { className: "font-mono", children: data.webhookUrl })] }) }) })] }));
 };

package/dist/src/publicComponents/base-node.js CHANGED Viewed

@@ -19,7 +19,7 @@ const Dot = ({ variant }) => (_jsx("div", { className: cn(baseDot({ variant }))
 const HeaderBar = ({ text, variant, children, }) => (_jsxs("div", { className: "text-sm text-white flex justify-between items-center gap-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Dot, { variant: variant }), _jsx("span", { children: text })] }), children] }));
 export const BaseNode = (props) => {
     const { title, variant, children, disableSourceHandle, disableTargetHandle, language } = props;
-    return (_jsx("div", { className: "p-[1px] rounded-lg shadow-[0px_7px_14px_0px_rgba(7,0,23,0.98)] max-w-[350px] ", style: {
-            background: `linear-gradient(100.74deg, rgba(0, 71, 255, 0) -2.15%, ${colorMap[variant]} 45.08%, rgba(0, 71, 255, 0) 96.79%)`,
-        }, children: _jsx("div", { className: "rounded-lg bg-[#060014] p-4", children: _jsxs("div", { className: "group relative", children: [_jsx(HeaderBar, { text: title, variant: variant, children: _jsx(LanguageIndicator, { language: language }) }), _jsx("div", { className: "pt-4 space-y-3", children: children }), !disableTargetHandle && _jsx(BaseHandle, { type: "target", position: Position.Top, variant: variant }), !disableSourceHandle && _jsx(BaseHandle, { type: "source", position: Position.Bottom, variant: variant }), _jsx("div", { className: "absolute inset-0 -z-10 translate-y-1 translate-x-1 bg-black/20 rounded-md border border-white/5" })] }) }) }));
+    return (_jsx("div", { className: "p-[1px] rounded-lg max-w-[350px] ", children: _jsx("div", { className: "rounded-lg bg-background p-4 border border-muted border-solid", style: {
+                borderColor: colorMap[variant],
+            }, children: _jsxs("div", { className: "group relative", children: [_jsx(HeaderBar, { text: title, variant: variant, children: _jsx(LanguageIndicator, { language: language }) }), _jsx("div", { className: "pt-4 space-y-3", children: children }), !disableTargetHandle && _jsx(BaseHandle, { type: "target", position: Position.Top, variant: variant }), !disableSourceHandle && _jsx(BaseHandle, { type: "source", position: Position.Bottom, variant: variant }), _jsx("div", { className: "absolute inset-0 -z-10 translate-y-1 translate-x-1 bg-background rounded-md border border-white/5" })] }) }) }));
 };

package/dist/src/publicComponents/event-node.js CHANGED Viewed

@@ -3,5 +3,5 @@ import { BaseNode } from './base-node';
 import { NodeDetails } from './node-details';
 export const EventNode = (props) => {
     const { data, children } = props;
-    return (_jsxs(BaseNode, { variant: "event", title: data.name, language: data.language, disableSourceHandle: !data.emits?.length && !data.virtualEmits?.length, disableTargetHandle: !data.subscribes?.length && !data.virtualSubscribes?.length, children: [children, _jsx(NodeDetails, { type: "event", name: data.name, subscribes: data.subscribes, emits: data.emits, description: data.description, language: data.language })] }));
+    return (_jsxs(BaseNode, { variant: "event", title: data.name, language: data.language, disableSourceHandle: !data.emits?.length && !data.virtualEmits?.length, disableTargetHandle: !data.subscribes?.length && !data.virtualSubscribes?.length, children: [_jsx("div", { className: "text-sm text-muted-foreground", children: data.description }), children, _jsx(NodeDetails, { type: "event", name: data.name, subscribes: data.subscribes, emits: data.emits, description: data.description, language: data.language })] }));
 };

package/dist/src/routes/endpoints-page.d.ts ADDED Viewed

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