@marktoflow/gui 2.0.0-alpha.1

package/dist/server/websocket/index.d.ts

@@ -0,0 +1,10 @@
+import type { Server as SocketIOServer } from 'socket.io';
+export declare function setupWebSocket(io: SocketIOServer): {
+    emitWorkflowUpdate(workflowPath: string, data: any): void;
+    emitExecutionStep(runId: string, data: any): void;
+    emitExecutionCompleted(runId: string, data: any): void;
+    emitAIProcessing(socketId: string, processing: boolean): void;
+    emitAIResponse(socketId: string, response: any): void;
+    broadcast(event: string, data: any): void;
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/server/websocket/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/server/websocket/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,IAAI,cAAc,EAAU,MAAM,WAAW,CAAC;AASlE,wBAAgB,cAAc,CAAC,EAAE,EAAE,cAAc;qCAwDZ,MAAM,QAAQ,GAAG;6BAQzB,MAAM,QAAQ,GAAG;kCAQZ,MAAM,QAAQ,GAAG;+BAQpB,MAAM,cAAc,OAAO;6BAK7B,MAAM,YAAY,GAAG;qBAK7B,MAAM,QAAQ,GAAG;EAIrC"}

package/dist/server/websocket/index.js

@@ -0,0 +1,85 @@
+const clients = new Map();
+export function setupWebSocket(io) {
+    io.on('connection', (socket) => {
+        console.log(`Client connected: ${socket.id}`);
+        // Initialize client state
+        clients.set(socket.id, {
+            subscribedWorkflows: new Set(),
+            subscribedExecutions: new Set(),
+        });
+        // Handle workflow subscription
+        socket.on('workflow:subscribe', (workflowPath) => {
+            const state = clients.get(socket.id);
+            if (state) {
+                state.subscribedWorkflows.add(workflowPath);
+                socket.join(`workflow:${workflowPath}`);
+                console.log(`Client ${socket.id} subscribed to workflow: ${workflowPath}`);
+            }
+        });
+        socket.on('workflow:unsubscribe', (workflowPath) => {
+            const state = clients.get(socket.id);
+            if (state) {
+                state.subscribedWorkflows.delete(workflowPath);
+                socket.leave(`workflow:${workflowPath}`);
+            }
+        });
+        // Handle execution subscription
+        socket.on('execution:subscribe', (runId) => {
+            const state = clients.get(socket.id);
+            if (state) {
+                state.subscribedExecutions.add(runId);
+                socket.join(`execution:${runId}`);
+                console.log(`Client ${socket.id} subscribed to execution: ${runId}`);
+            }
+        });
+        socket.on('execution:unsubscribe', (runId) => {
+            const state = clients.get(socket.id);
+            if (state) {
+                state.subscribedExecutions.delete(runId);
+                socket.leave(`execution:${runId}`);
+            }
+        });
+        // Handle disconnect
+        socket.on('disconnect', () => {
+            console.log(`Client disconnected: ${socket.id}`);
+            clients.delete(socket.id);
+        });
+    });
+    // Helper functions to emit events
+    return {
+        // Emit to all clients subscribed to a workflow
+        emitWorkflowUpdate(workflowPath, data) {
+            io.to(`workflow:${workflowPath}`).emit('workflow:updated', {
+                path: workflowPath,
+                ...data,
+            });
+        },
+        // Emit execution step update
+        emitExecutionStep(runId, data) {
+            io.to(`execution:${runId}`).emit('execution:step', {
+                runId,
+                ...data,
+            });
+        },
+        // Emit execution completed
+        emitExecutionCompleted(runId, data) {
+            io.to(`execution:${runId}`).emit('execution:completed', {
+                runId,
+                ...data,
+            });
+        },
+        // Emit AI processing status
+        emitAIProcessing(socketId, processing) {
+            io.to(socketId).emit('ai:processing', { processing });
+        },
+        // Emit AI response
+        emitAIResponse(socketId, response) {
+            io.to(socketId).emit('ai:response', response);
+        },
+        // Broadcast to all clients
+        broadcast(event, data) {
+            io.emit(event, data);
+        },
+    };
+}
+//# sourceMappingURL=index.js.map

package/dist/server/websocket/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/server/websocket/index.ts"],"names":[],"mappings":"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"}

package/index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Marktoflow Designer</title>
+    <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:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body class="bg-canvas-bg text-white antialiased">
+    <div id="root"></div>
+    <script type="module" src="/src/client/main.tsx"></script>
+  </body>
+</html>

package/package.json

@@ -0,0 +1,96 @@
+{
+  "name": "@marktoflow/gui",
+  "version": "2.0.0-alpha.1",
+  "description": "Visual workflow designer for marktoflow - n8n-inspired web UI",
+  "type": "module",
+  "main": "./dist/server/index.js",
+  "types": "./dist/server/index.d.ts",
+  "bin": {
+    "marktoflow-gui": "./dist/server/index.js"
+  },
+  "scripts": {
+    "dev": "concurrently \"pnpm:dev:*\"",
+    "dev:client": "vite",
+    "dev:server": "tsx watch src/server/index.ts",
+    "build": "pnpm build:client && pnpm build:server",
+    "build:client": "vite build",
+    "build:server": "tsc -p tsconfig.server.json",
+    "preview": "vite preview",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:e2e": "playwright test",
+    "lint": "eslint src --ext ts,tsx",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@anthropic-ai/claude-agent-sdk": ">=0.1.0",
+    "@anthropic-ai/sdk": "^0.52.0",
+    "@github/copilot-sdk": "^0.1.18",
+    "@marktoflow/core": "workspace:*",
+    "@monaco-editor/react": "^4.6.0",
+    "@radix-ui/react-context-menu": "^2.2.2",
+    "@radix-ui/react-dialog": "^1.1.2",
+    "@radix-ui/react-dropdown-menu": "^2.1.2",
+    "@radix-ui/react-popover": "^1.1.2",
+    "@radix-ui/react-tabs": "^1.1.1",
+    "@radix-ui/react-tooltip": "^1.1.3",
+    "@xyflow/react": "^12.3.6",
+    "chokidar": "^4.0.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cors": "^2.8.5",
+    "dagre": "^0.8.5",
+    "express": "^4.21.2",
+    "lucide-react": "^0.468.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-markdown": "^9.0.1",
+    "rehype-highlight": "^7.0.1",
+    "remark-gfm": "^4.0.0",
+    "socket.io": "^4.8.1",
+    "socket.io-client": "^4.8.1",
+    "tailwind-merge": "^2.5.5",
+    "yaml": "^2.6.1",
+    "zustand": "^5.0.2"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.49.1",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@types/cors": "^2.8.17",
+    "@types/dagre": "^0.7.52",
+    "@types/express": "^5.0.0",
+    "@types/node": "^22.10.2",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@types/supertest": "^6.0.3",
+    "@vitejs/plugin-react": "^4.3.4",
+    "autoprefixer": "^10.4.20",
+    "concurrently": "^9.1.2",
+    "jsdom": "^27.4.0",
+    "postcss": "^8.4.49",
+    "supertest": "^7.2.2",
+    "tailwindcss": "^3.4.17",
+    "tsx": "^4.19.2",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.6",
+    "vitest": "^2.1.8"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "keywords": [
+    "marktoflow",
+    "workflow",
+    "visual-editor",
+    "n8n",
+    "react-flow",
+    "automation"
+  ],
+  "author": "Scott Gilroy",
+  "license": "MIT"
+}

package/playwright.config.ts

@@ -0,0 +1,27 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './tests/e2e',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: 'html',
+  use: {
+    baseURL: 'http://localhost:5173',
+    trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+  webServer: {
+    command: 'pnpm dev',
+    url: 'http://localhost:5173',
+    reuseExistingServer: !process.env.CI,
+    timeout: 120000,
+  },
+});

package/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/public/vite.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
+  <rect width="32" height="32" rx="6" fill="#1a1a2e"/>
+  <path d="M8 12L16 8L24 12V20L16 24L8 20V12Z" stroke="#ff6d5a" stroke-width="2" fill="none"/>
+  <circle cx="16" cy="12" r="2" fill="#ff6d5a"/>
+  <circle cx="12" cy="18" r="2" fill="#ff6d5a"/>
+  <circle cx="20" cy="18" r="2" fill="#ff6d5a"/>
+  <line x1="16" y1="12" x2="12" y2="18" stroke="#ff6d5a" stroke-width="1.5"/>
+  <line x1="16" y1="12" x2="20" y2="18" stroke="#ff6d5a" stroke-width="1.5"/>
+</svg>