@marktoflow/gui 2.0.0-alpha.4 → 2.0.1

package/src/client/utils/stepValidation.ts

@@ -1,155 +0,0 @@
-import type { WorkflowStep } from '@shared/types';
-
-export interface ValidationError {
-  field: string;
-  message: string;
-}
-
-export interface ValidationResult {
-  valid: boolean;
-  errors: ValidationError[];
-}
-
-/**
- * Validates a workflow step
- */
-export function validateStep(step: WorkflowStep): ValidationResult {
-  const errors: ValidationError[] = [];
-
-  // ID is required
-  if (!step.id || step.id.trim() === '') {
-    errors.push({
-      field: 'id',
-      message: 'Step ID is required',
-    });
-  } else {
-    // ID must be a valid identifier (letters, numbers, underscores, hyphens)
-    if (!/^[a-zA-Z][a-zA-Z0-9_-]*$/.test(step.id)) {
-      errors.push({
-        field: 'id',
-        message: 'Step ID must start with a letter and contain only letters, numbers, underscores, and hyphens',
-      });
-    }
-  }
-
-  // Must have either an action or a workflow reference
-  if (!step.action && !step.workflow) {
-    errors.push({
-      field: 'action',
-      message: 'Step must have either an action or a workflow reference',
-    });
-  }
-
-  // Action format validation (service.method or service.namespace.method)
-  if (step.action) {
-    const actionParts = step.action.split('.');
-    if (actionParts.length < 2) {
-      errors.push({
-        field: 'action',
-        message: 'Action must be in format: service.method (e.g., slack.chat.postMessage)',
-      });
-    }
-  }
-
-  // Workflow reference validation
-  if (step.workflow) {
-    if (!step.workflow.endsWith('.md') && !step.workflow.endsWith('.yaml') && !step.workflow.endsWith('.yml')) {
-      errors.push({
-        field: 'workflow',
-        message: 'Workflow reference should end with .md, .yaml, or .yml',
-      });
-    }
-  }
-
-  // Output variable name validation
-  if (step.outputVariable) {
-    if (!/^[a-zA-Z][a-zA-Z0-9_]*$/.test(step.outputVariable)) {
-      errors.push({
-        field: 'outputVariable',
-        message: 'Output variable must start with a letter and contain only letters, numbers, and underscores',
-      });
-    }
-  }
-
-  // Timeout validation
-  if (step.timeout !== undefined) {
-    if (typeof step.timeout !== 'number' || step.timeout <= 0) {
-      errors.push({
-        field: 'timeout',
-        message: 'Timeout must be a positive number',
-      });
-    }
-  }
-
-  // Error handling validation
-  if (step.errorHandling) {
-    const validActions = ['stop', 'continue', 'retry'];
-    if (!validActions.includes(step.errorHandling.action)) {
-      errors.push({
-        field: 'errorHandling.action',
-        message: 'Error action must be one of: stop, continue, retry',
-      });
-    }
-
-    if (step.errorHandling.action === 'retry') {
-      if (step.errorHandling.maxRetries !== undefined) {
-        if (typeof step.errorHandling.maxRetries !== 'number' || step.errorHandling.maxRetries < 1) {
-          errors.push({
-            field: 'errorHandling.maxRetries',
-            message: 'Max retries must be at least 1',
-          });
-        }
-      }
-
-      if (step.errorHandling.retryDelay !== undefined) {
-        if (typeof step.errorHandling.retryDelay !== 'number' || step.errorHandling.retryDelay < 0) {
-          errors.push({
-            field: 'errorHandling.retryDelay',
-            message: 'Retry delay must be a non-negative number',
-          });
-        }
-      }
-    }
-
-    if (step.errorHandling.fallbackStep) {
-      if (!/^[a-zA-Z][a-zA-Z0-9_-]*$/.test(step.errorHandling.fallbackStep)) {
-        errors.push({
-          field: 'errorHandling.fallbackStep',
-          message: 'Fallback step ID must be a valid identifier',
-        });
-      }
-    }
-  }
-
-  // Conditions validation
-  if (step.conditions && step.conditions.length > 0) {
-    step.conditions.forEach((condition, index) => {
-      if (!condition || condition.trim() === '') {
-        errors.push({
-          field: `conditions[${index}]`,
-          message: `Condition ${index + 1} cannot be empty`,
-        });
-      }
-    });
-  }
-
-  return {
-    valid: errors.length === 0,
-    errors,
-  };
-}
-
-/**
- * Get validation errors for a specific field
- */
-export function getFieldError(errors: ValidationError[], field: string): string | undefined {
-  const error = errors.find((e) => e.field === field);
-  return error?.message;
-}
-
-/**
- * Check if a field has validation errors
- */
-export function hasFieldError(errors: ValidationError[], field: string): boolean {
-  return errors.some((e) => e.field === field);
-}

package/src/client/utils/workflowToGraph.ts

@@ -1,299 +0,0 @@
-import type { Node, Edge } from '@xyflow/react';
-
-interface WorkflowStep {
-  id: string;
-  name?: string;
-  action?: string;
-  workflow?: string;
-  inputs: Record<string, unknown>;
-  outputVariable?: string;
-  conditions?: string[];
-}
-
-interface WorkflowTrigger {
-  type: 'manual' | 'schedule' | 'webhook' | 'event';
-  cron?: string;
-  path?: string;
-  events?: string[];
-}
-
-interface Workflow {
-  metadata: {
-    id: string;
-    name: string;
-  };
-  steps: WorkflowStep[];
-  triggers?: WorkflowTrigger[];
-}
-
-interface GraphResult {
-  nodes: Node[];
-  edges: Edge[];
-}
-
-/**
- * Converts a marktoflow Workflow to React Flow nodes and edges
- */
-export function workflowToGraph(workflow: Workflow): GraphResult {
-  const nodes: Node[] = [];
-  const edges: Edge[] = [];
-
-  const VERTICAL_SPACING = 120;
-  const HORIZONTAL_OFFSET = 250;
-  let currentY = 0;
-
-  // Add trigger node if triggers are defined
-  if (workflow.triggers && workflow.triggers.length > 0) {
-    const trigger = workflow.triggers[0]; // Primary trigger
-    const triggerId = `trigger-${workflow.metadata.id}`;
-
-    nodes.push({
-      id: triggerId,
-      type: 'trigger',
-      position: { x: HORIZONTAL_OFFSET, y: currentY },
-      data: {
-        id: triggerId,
-        name: workflow.metadata.name,
-        type: trigger.type || 'manual',
-        cron: trigger.cron,
-        path: trigger.path,
-        events: trigger.events,
-        active: true,
-      },
-    });
-
-    currentY += VERTICAL_SPACING;
-
-    // Edge from trigger to first step
-    if (workflow.steps.length > 0) {
-      edges.push({
-        id: `e-${triggerId}-${workflow.steps[0].id}`,
-        source: triggerId,
-        target: workflow.steps[0].id,
-        type: 'smoothstep',
-        animated: false,
-        style: { stroke: '#ff6d5a', strokeWidth: 2 },
-      });
-    }
-  }
-
-  // Create nodes for each step
-  workflow.steps.forEach((step, index) => {
-    const isSubWorkflow = !!step.workflow;
-
-    const node: Node = {
-      id: step.id,
-      type: isSubWorkflow ? 'subworkflow' : 'step',
-      position: {
-        x: HORIZONTAL_OFFSET,
-        y: currentY + index * VERTICAL_SPACING,
-      },
-      data: {
-        id: step.id,
-        name: step.name,
-        action: step.action,
-        workflowPath: step.workflow,
-        status: 'pending',
-      },
-    };
-
-    nodes.push(node);
-
-    // Create edge to next step
-    if (index < workflow.steps.length - 1) {
-      const nextStep = workflow.steps[index + 1];
-      const edge: Edge = {
-        id: `e-${step.id}-${nextStep.id}`,
-        source: step.id,
-        target: nextStep.id,
-        type: 'smoothstep',
-        animated: false,
-        style: { stroke: '#ff6d5a', strokeWidth: 2 },
-      };
-
-      // Add condition label if present
-      if (nextStep.conditions && nextStep.conditions.length > 0) {
-        edge.label = 'conditional';
-        edge.labelStyle = { fill: '#a0a0c0', fontSize: 10 };
-        edge.labelBgStyle = { fill: '#232340' };
-      }
-
-      edges.push(edge);
-    }
-  });
-
-  // Add output node at the end
-  if (workflow.steps.length > 0) {
-    const outputId = `output-${workflow.metadata.id}`;
-    const lastStep = workflow.steps[workflow.steps.length - 1];
-    const outputY = currentY + workflow.steps.length * VERTICAL_SPACING;
-
-    // Collect all output variables
-    const outputVariables = workflow.steps
-      .filter((s) => s.outputVariable)
-      .map((s) => s.outputVariable as string);
-
-    nodes.push({
-      id: outputId,
-      type: 'output',
-      position: { x: HORIZONTAL_OFFSET, y: outputY },
-      data: {
-        id: outputId,
-        name: 'Workflow Output',
-        variables: outputVariables,
-        status: 'pending',
-      },
-    });
-
-    // Edge from last step to output
-    edges.push({
-      id: `e-${lastStep.id}-${outputId}`,
-      source: lastStep.id,
-      target: outputId,
-      type: 'smoothstep',
-      animated: false,
-      style: { stroke: '#ff6d5a', strokeWidth: 2 },
-    });
-  }
-
-  // Add data flow edges based on variable references
-  const variableEdges = findVariableDependencies(workflow.steps);
-  edges.push(...variableEdges);
-
-  return { nodes, edges };
-}
-
-/**
- * Finds variable dependencies between steps
- * Creates additional edges showing data flow
- */
-function findVariableDependencies(steps: WorkflowStep[]): Edge[] {
-  const edges: Edge[] = [];
-  const outputVariables = new Map<string, string>(); // variable name -> step id
-
-  // First pass: collect all output variables
-  steps.forEach((step) => {
-    if (step.outputVariable) {
-      outputVariables.set(step.outputVariable, step.id);
-    }
-  });
-
-  // Second pass: find references in inputs
-  steps.forEach((step) => {
-    const references = findTemplateVariables(step.inputs);
-
-    references.forEach((ref) => {
-      // Extract the root variable name (e.g., "pr_details" from "pr_details.title")
-      const rootVar = ref.split('.')[0];
-
-      // Check if this references an output variable
-      const sourceStepId = outputVariables.get(rootVar);
-      if (sourceStepId && sourceStepId !== step.id) {
-        // Create data flow edge
-        const edgeId = `data-${sourceStepId}-${step.id}-${rootVar}`;
-
-        // Check if edge already exists
-        if (!edges.find((e) => e.id === edgeId)) {
-          edges.push({
-            id: edgeId,
-            source: sourceStepId,
-            target: step.id,
-            type: 'smoothstep',
-            animated: true,
-            style: {
-              stroke: '#5bc0de',
-              strokeWidth: 1,
-              strokeDasharray: '5,5',
-            },
-            label: rootVar,
-            labelStyle: { fill: '#5bc0de', fontSize: 9 },
-            labelBgStyle: { fill: '#1a1a2e', fillOpacity: 0.8 },
-          });
-        }
-      }
-    });
-  });
-
-  return edges;
-}
-
-/**
- * Extracts template variable references from inputs
- */
-function findTemplateVariables(inputs: Record<string, unknown>): string[] {
-  const variables: string[] = [];
-  const templateRegex = /\{\{\s*([^}]+)\s*\}\}/g;
-
-  function extractFromValue(value: unknown): void {
-    if (typeof value === 'string') {
-      let match;
-      while ((match = templateRegex.exec(value)) !== null) {
-        // Extract variable name, removing any method calls
-        const varExpr = match[1].trim();
-        const varName = varExpr.split('.')[0].replace(/\[.*\]/, '');
-
-        // Filter out 'inputs' as those are workflow inputs, not step outputs
-        if (varName !== 'inputs' && !variables.includes(varName)) {
-          variables.push(varName);
-        }
-      }
-    } else if (Array.isArray(value)) {
-      value.forEach(extractFromValue);
-    } else if (value && typeof value === 'object') {
-      Object.values(value).forEach(extractFromValue);
-    }
-  }
-
-  Object.values(inputs).forEach(extractFromValue);
-  return variables;
-}
-
-/**
- * Converts React Flow nodes and edges back to a Workflow
- */
-export function graphToWorkflow(
-  nodes: Node[],
-  _edges: Edge[],
-  metadata: Workflow['metadata']
-): Workflow {
-  // Filter out trigger and output nodes, sort by vertical position
-  const stepNodes = nodes
-    .filter((node) => node.type === 'step' || node.type === 'subworkflow')
-    .sort((a, b) => a.position.y - b.position.y);
-
-  // Extract trigger info if present
-  const triggerNode = nodes.find((node) => node.type === 'trigger');
-  const triggers: WorkflowTrigger[] = [];
-
-  if (triggerNode) {
-    const data = triggerNode.data as Record<string, unknown>;
-    triggers.push({
-      type: (data.type as WorkflowTrigger['type']) || 'manual',
-      cron: data.cron as string | undefined,
-      path: data.path as string | undefined,
-      events: data.events as string[] | undefined,
-    });
-  }
-
-  const steps: WorkflowStep[] = stepNodes.map((node) => {
-    const data = node.data as Record<string, unknown>;
-    const step: WorkflowStep = {
-      id: (data.id as string) || node.id,
-      inputs: (data.inputs as Record<string, unknown>) || {},
-    };
-
-    if (data.name) step.name = data.name as string;
-    if (data.action) step.action = data.action as string;
-    if (data.workflowPath) step.workflow = data.workflowPath as string;
-    if (data.outputVariable) step.outputVariable = data.outputVariable as string;
-    if (data.conditions) step.conditions = data.conditions as string[];
-
-    return step;
-  });
-
-  return {
-    metadata,
-    steps,
-    triggers: triggers.length > 0 ? triggers : undefined,
-  };
-}

package/src/server/index.ts

@@ -1,114 +0,0 @@
-#!/usr/bin/env node
-
-import express from 'express';
-import cors from 'cors';
-import { createServer, type Server } from 'http';
-import { Server as SocketIOServer } from 'socket.io';
-import { join } from 'path';
-import { existsSync } from 'fs';
-import { workflowRoutes } from './routes/workflows.js';
-import { aiRoutes } from './routes/ai.js';
-import { executeRoutes } from './routes/execute.js';
-import { toolsRoutes } from './routes/tools.js';
-import { setupWebSocket } from './websocket/index.js';
-import { FileWatcher } from './services/FileWatcher.js';
-
-export interface ServerOptions {
-  port?: number;
-  workflowDir?: string;
-  staticDir?: string;
-}
-
-let httpServer: Server | null = null;
-let fileWatcher: FileWatcher | null = null;
-
-/**
- * Start the GUI server programmatically
- */
-export async function startServer(options: ServerOptions = {}): Promise<Server> {
-  const PORT = options.port || parseInt(process.env.PORT || '3001', 10);
-  const WORKFLOW_DIR = options.workflowDir || process.env.WORKFLOW_DIR || process.cwd();
-  const STATIC_DIR = options.staticDir || process.env.STATIC_DIR;
-
-  const app = express();
-  httpServer = createServer(app);
-  const io = new SocketIOServer(httpServer, {
-    cors: {
-      origin: ['http://localhost:5173', 'http://localhost:3000', `http://localhost:${PORT}`],
-      methods: ['GET', 'POST'],
-    },
-  });
-
-  // Middleware
-  app.use(cors());
-  app.use(express.json());
-
-  // Routes
-  app.use('/api/workflows', workflowRoutes);
-  app.use('/api/ai', aiRoutes);
-  app.use('/api/execute', executeRoutes);
-  app.use('/api/tools', toolsRoutes);
-
-  // Health check
-  app.get('/api/health', (_req, res) => {
-    res.json({ status: 'ok', version: '2.0.0-alpha.2' });
-  });
-
-  // Serve static files if static dir is provided
-  if (STATIC_DIR && existsSync(STATIC_DIR)) {
-    app.use(express.static(STATIC_DIR));
-    // SPA fallback
-    app.get('*', (_req, res) => {
-      res.sendFile(join(STATIC_DIR, 'index.html'));
-    });
-  }
-
-  // WebSocket
-  setupWebSocket(io);
-
-  // File watcher for live updates
-  fileWatcher = new FileWatcher(WORKFLOW_DIR, io);
-
-  return new Promise((resolve) => {
-    httpServer!.listen(PORT, () => {
-      console.log(`
-  ╔══════════════════════════════════════════════════════════╗
-  ║                                                          ║
-  ║   Marktoflow GUI Server                                  ║
-  ║                                                          ║
-  ║   Server:    http://localhost:${String(PORT).padEnd(25)}║
-  ║   Workflows: ${WORKFLOW_DIR.slice(0, 40).padEnd(40)}║
-  ║                                                          ║
-  ╚══════════════════════════════════════════════════════════╝
-      `);
-      resolve(httpServer!);
-    });
-  });
-}
-
-/**
- * Stop the GUI server
- */
-export function stopServer(): void {
-  if (fileWatcher) {
-    fileWatcher.stop();
-    fileWatcher = null;
-  }
-  if (httpServer) {
-    httpServer.close();
-    httpServer = null;
-  }
-}
-
-// Graceful shutdown
-process.on('SIGINT', () => {
-  console.log('\nShutting down...');
-  stopServer();
-  process.exit(0);
-});
-
-// Auto-start if run directly
-const isDirectRun = process.argv[1]?.endsWith('index.js') || process.argv[1]?.endsWith('index.ts');
-if (isDirectRun) {
-  startServer();
-}

package/src/server/routes/ai.ts

@@ -1,91 +0,0 @@
-import { Router, type Router as RouterType } from 'express';
-import { AIService } from '../services/AIService.js';
-
-const router: RouterType = Router();
-const aiService = new AIService();
-
-// Process AI prompt
-router.post('/prompt', async (req, res) => {
-  try {
-    const { prompt, workflow } = req.body;
-
-    if (!prompt) {
-      return res.status(400).json({ error: 'Prompt is required' });
-    }
-
-    const result = await aiService.processPrompt(prompt, workflow);
-    res.json(result);
-  } catch (error) {
-    res.status(500).json({
-      error: 'Failed to process prompt',
-      message: error instanceof Error ? error.message : 'Unknown error',
-    });
-  }
-});
-
-// Get prompt history
-router.get('/history', async (_req, res) => {
-  try {
-    const history = await aiService.getHistory();
-    res.json({ history });
-  } catch (error) {
-    res.status(500).json({
-      error: 'Failed to get history',
-      message: error instanceof Error ? error.message : 'Unknown error',
-    });
-  }
-});
-
-// Get AI suggestions for current context
-router.post('/suggestions', async (req, res) => {
-  try {
-    const { workflow, selectedStepId } = req.body;
-    const suggestions = await aiService.getSuggestions(workflow, selectedStepId);
-    res.json({ suggestions });
-  } catch (error) {
-    res.status(500).json({
-      error: 'Failed to get suggestions',
-      message: error instanceof Error ? error.message : 'Unknown error',
-    });
-  }
-});
-
-// Get available AI providers and status
-router.get('/providers', async (_req, res) => {
-  try {
-    const status = aiService.getStatus();
-    res.json(status);
-  } catch (error) {
-    res.status(500).json({
-      error: 'Failed to get providers',
-      message: error instanceof Error ? error.message : 'Unknown error',
-    });
-  }
-});
-
-// Set active AI provider
-router.post('/providers/:providerId', async (req, res) => {
-  try {
-    const { providerId } = req.params;
-    const { apiKey, baseUrl, model } = req.body;
-
-    const success = await aiService.setProvider(providerId, { apiKey, baseUrl, model });
-
-    if (success) {
-      const status = aiService.getStatus();
-      res.json({ success: true, status });
-    } else {
-      res.status(400).json({
-        error: 'Failed to set provider',
-        message: `Provider "${providerId}" is not available or failed to initialize`,
-      });
-    }
-  } catch (error) {
-    res.status(500).json({
-      error: 'Failed to set provider',
-      message: error instanceof Error ? error.message : 'Unknown error',
-    });
-  }
-});
-
-export { router as aiRoutes };