@marktoflow/gui 2.0.0-alpha.1

package/src/client/utils/stepValidation.ts

@@ -0,0 +1,155 @@
+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

@@ -0,0 +1,299 @@
+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

@@ -0,0 +1,114 @@
+#!/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.1' });
+  });
+
+  // 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

@@ -0,0 +1,91 @@
+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 };