@marktoflow/gui 2.0.0-alpha.1 → 2.0.0-alpha.12

package/src/client/utils/workflowToGraph.ts

@@ -5,9 +5,15 @@ interface WorkflowStep {
   name?: string;
   action?: string;
   workflow?: string;
+  type?: 'while' | 'for_each' | 'for' | 'switch' | 'parallel' | 'try' | 'if' | 'map' | 'filter' | 'reduce';
+  condition?: string;
+  items?: string;
+  maxIterations?: number;
   inputs: Record<string, unknown>;
   outputVariable?: string;
   conditions?: string[];
+  steps?: WorkflowStep[];
+  variables?: Record<string, { initial: unknown }>;
 }
 
 interface WorkflowTrigger {
@@ -31,17 +37,119 @@ interface GraphResult {
   edges: Edge[];
 }
 
+/**
+ * Parse control flow constructs from raw markdown content
+ * This is a temporary solution until the core parser supports control flow
+ */
+function extractControlFlowFromMarkdown(markdown?: string): WorkflowStep[] {
+  if (!markdown) return [];
+
+  const controlFlowSteps: WorkflowStep[] = [];
+  // Match YAML code blocks that contain control flow types
+  const codeBlockRegex = /```yaml\s*\n([\s\S]*?)\n```/g;
+  let match;
+  let stepIndex = 0;
+
+  while ((match = codeBlockRegex.exec(markdown)) !== null) {
+    const yamlContent = match[1];
+
+    // Check if this is a control flow block
+    const typeMatch = yamlContent.match(/^type:\s*(while|for_each|for|switch|parallel|try|if|map|filter|reduce)/m);
+    if (typeMatch) {
+      const type = typeMatch[1] as WorkflowStep['type'];
+      const id = `control-flow-${type}-${stepIndex++}`;
+
+      // Extract common properties
+      const conditionMatch = yamlContent.match(/condition:\s*["'](.+?)["']/);
+      const itemsMatch = yamlContent.match(/items:\s*["'](.+?)["']/);
+      const maxIterMatch = yamlContent.match(/max_iterations:\s*(\d+)/);
+      const expressionMatch = yamlContent.match(/expression:\s*["'](.+?)["']/);
+      const itemVarMatch = yamlContent.match(/item_variable:\s*(\w+)/);
+
+      // Extract switch expression
+      const switchExprMatch = yamlContent.match(/expression:\s*["'](.+?)["']/);
+
+      // Extract variables for while loops
+      const variables: Record<string, { initial: unknown }> = {};
+      const varsMatch = yamlContent.match(/variables:\s*\n((?:  .*\n)*)/);
+      if (varsMatch) {
+        const varsContent = varsMatch[1];
+        const varLines = varsContent.split('\n').filter(Boolean);
+        varLines.forEach(line => {
+          const varMatch = line.match(/^\s+(\w+):\s*$/);
+          if (varMatch) {
+            const varName = varMatch[1];
+            // Try to find initial value on next line
+            const initMatch = varsContent.match(new RegExp(`${varName}:\\s*\\n\\s+initial:\\s*(.+)`));
+            if (initMatch) {
+              try {
+                variables[varName] = { initial: JSON.parse(initMatch[1]) };
+              } catch {
+                variables[varName] = { initial: initMatch[1].trim() };
+              }
+            }
+          }
+        });
+      }
+
+      // Build step data based on type
+      const step: WorkflowStep = {
+        id,
+        type,
+        name: type === 'map' ? 'Map Transform' :
+              type === 'filter' ? 'Filter Transform' :
+              type === 'reduce' ? 'Reduce Transform' :
+              type === 'switch' ? 'Switch/Case' :
+              type === 'parallel' ? 'Parallel Execution' :
+              type === 'try' ? 'Try/Catch' :
+              type === 'if' ? 'If/Else' :
+              `${type.charAt(0).toUpperCase() + type.slice(1)} Loop`,
+        inputs: {},
+      };
+
+      // Add type-specific properties
+      if (conditionMatch) step.condition = conditionMatch[1];
+      if (itemsMatch) step.items = itemsMatch[1];
+      if (maxIterMatch) step.maxIterations = parseInt(maxIterMatch[1], 10);
+      if (Object.keys(variables).length > 0) step.variables = variables;
+
+      // Transform-specific properties
+      if (type === 'map' || type === 'filter' || type === 'reduce') {
+        if (itemVarMatch) {
+          step.inputs = { ...step.inputs, itemVariable: itemVarMatch[1] };
+        }
+        if (expressionMatch) {
+          step.inputs = { ...step.inputs, expression: expressionMatch[1] };
+        }
+      }
+
+      // Switch-specific properties
+      if (type === 'switch' && switchExprMatch) {
+        step.inputs = { ...step.inputs, expression: switchExprMatch[1] };
+      }
+
+      controlFlowSteps.push(step);
+    }
+  }
+
+  return controlFlowSteps;
+}
+
 /**
  * Converts a marktoflow Workflow to React Flow nodes and edges
  */
-export function workflowToGraph(workflow: Workflow): GraphResult {
+export function workflowToGraph(workflow: Workflow & { markdown?: string }): GraphResult {
   const nodes: Node[] = [];
   const edges: Edge[] = [];
 
-  const VERTICAL_SPACING = 120;
+  const VERTICAL_SPACING = 180;
   const HORIZONTAL_OFFSET = 250;
   let currentY = 0;
 
+  // Try to extract control flow from markdown if available
+  const controlFlowSteps = extractControlFlowFromMarkdown(workflow.markdown);
+  const allSteps = [...workflow.steps, ...controlFlowSteps];
+
   // Add trigger node if triggers are defined
   if (workflow.triggers && workflow.triggers.length > 0) {
     const trigger = workflow.triggers[0]; // Primary trigger
@@ -65,11 +173,11 @@ export function workflowToGraph(workflow: Workflow): GraphResult {
     currentY += VERTICAL_SPACING;
 
     // Edge from trigger to first step
-    if (workflow.steps.length > 0) {
+    if (allSteps.length > 0) {
       edges.push({
-        id: `e-${triggerId}-${workflow.steps[0].id}`,
+        id: `e-${triggerId}-${allSteps[0].id}`,
         source: triggerId,
-        target: workflow.steps[0].id,
+        target: allSteps[0].id,
         type: 'smoothstep',
         animated: false,
         style: { stroke: '#ff6d5a', strokeWidth: 2 },
@@ -78,30 +186,101 @@ export function workflowToGraph(workflow: Workflow): GraphResult {
   }
 
   // Create nodes for each step
-  workflow.steps.forEach((step, index) => {
+  allSteps.forEach((step, index) => {
     const isSubWorkflow = !!step.workflow;
+    const isControlFlow = !!step.type && ['while', 'for_each', 'for', 'switch', 'parallel', 'try', 'if', 'map', 'filter', 'reduce'].includes(step.type);
+
+    let nodeType = 'step';
+    if (isSubWorkflow) {
+      nodeType = 'subworkflow';
+    } else if (isControlFlow) {
+      nodeType = step.type!;
+    }
+
+    // Build node data based on type
+    const baseData = {
+      id: step.id,
+      name: step.name,
+      action: step.action,
+      workflowPath: step.workflow,
+      status: 'pending' as const,
+    };
+
+    // Add control-flow specific data
+    let nodeData = { ...baseData };
+    if (step.type === 'while') {
+      nodeData = {
+        ...baseData,
+        condition: step.condition || 'true',
+        maxIterations: step.maxIterations || 100,
+        variables: step.variables,
+      };
+    } else if (step.type === 'for_each' || step.type === 'for') {
+      nodeData = {
+        ...baseData,
+        items: step.items || '[]',
+        itemVariable: step.inputs?.itemVariable as string,
+      };
+    } else if (step.type === 'switch') {
+      nodeData = {
+        ...baseData,
+        expression: step.inputs?.expression as string || step.condition || '',
+        cases: {},
+        hasDefault: true,
+      };
+    } else if (step.type === 'parallel') {
+      nodeData = {
+        ...baseData,
+        branches: [],
+        maxConcurrent: 0,
+      };
+    } else if (step.type === 'try') {
+      nodeData = {
+        ...baseData,
+        hasCatch: true,
+        hasFinally: false,
+      };
+    } else if (step.type === 'if') {
+      nodeData = {
+        ...baseData,
+        condition: step.condition || 'true',
+        hasElse: true,
+      };
+    } else if (step.type === 'map' || step.type === 'filter' || step.type === 'reduce') {
+      nodeData = {
+        ...baseData,
+        transformType: step.type,
+        items: step.items || '[]',
+        itemVariable: step.inputs?.itemVariable as string,
+        expression: step.inputs?.expression as string,
+        condition: step.condition,
+      };
+    } else {
+      // Regular step
+      nodeData = {
+        ...baseData,
+        condition: step.condition,
+        items: step.items,
+        maxIterations: step.maxIterations,
+        variables: step.variables,
+      };
+    }
 
     const node: Node = {
       id: step.id,
-      type: isSubWorkflow ? 'subworkflow' : 'step',
+      type: nodeType,
       position: {
         x: HORIZONTAL_OFFSET,
         y: currentY + index * VERTICAL_SPACING,
       },
-      data: {
-        id: step.id,
-        name: step.name,
-        action: step.action,
-        workflowPath: step.workflow,
-        status: 'pending',
-      },
+      data: nodeData,
     };
 
     nodes.push(node);
 
     // Create edge to next step
-    if (index < workflow.steps.length - 1) {
-      const nextStep = workflow.steps[index + 1];
+    if (index < allSteps.length - 1) {
+      const nextStep = allSteps[index + 1];
       const edge: Edge = {
         id: `e-${step.id}-${nextStep.id}`,
         source: step.id,
@@ -120,16 +299,61 @@ export function workflowToGraph(workflow: Workflow): GraphResult {
 
       edges.push(edge);
     }
+
+    // Add loop-back edge for loops
+    if (step.type === 'while' || step.type === 'for_each' || step.type === 'for') {
+      const loopColor = step.type === 'while' ? '#fb923c' : '#f093fb';
+      edges.push({
+        id: `e-${step.id}-loop-back`,
+        source: step.id,
+        target: step.id,
+        sourceHandle: 'loop-back',
+        type: 'smoothstep',
+        animated: true,
+        style: {
+          stroke: loopColor,
+          strokeWidth: 2,
+          strokeDasharray: '5,5',
+        },
+        label: step.type === 'while' ? 'while true' : 'for each item',
+        labelStyle: { fill: loopColor, fontSize: 9 },
+        labelBgStyle: { fill: '#1a1a2e', fillOpacity: 0.9 },
+      });
+    }
+
+    // Add iteration indicator for transform operations (map/filter/reduce)
+    if (step.type === 'map' || step.type === 'filter' || step.type === 'reduce') {
+      const transformColor = '#14b8a6';
+      const label = step.type === 'map' ? 'transform each' :
+                    step.type === 'filter' ? 'test each' :
+                    'accumulate';
+      edges.push({
+        id: `e-${step.id}-transform-flow`,
+        source: step.id,
+        target: step.id,
+        sourceHandle: 'loop-back',
+        type: 'smoothstep',
+        animated: true,
+        style: {
+          stroke: transformColor,
+          strokeWidth: 1.5,
+          strokeDasharray: '3,3',
+        },
+        label,
+        labelStyle: { fill: transformColor, fontSize: 8 },
+        labelBgStyle: { fill: '#1a1a2e', fillOpacity: 0.9 },
+      });
+    }
   });
 
   // Add output node at the end
-  if (workflow.steps.length > 0) {
+  if (allSteps.length > 0) {
     const outputId = `output-${workflow.metadata.id}`;
-    const lastStep = workflow.steps[workflow.steps.length - 1];
-    const outputY = currentY + workflow.steps.length * VERTICAL_SPACING;
+    const lastStep = allSteps[allSteps.length - 1];
+    const outputY = currentY + allSteps.length * VERTICAL_SPACING;
 
     // Collect all output variables
-    const outputVariables = workflow.steps
+    const outputVariables = allSteps
       .filter((s) => s.outputVariable)
       .map((s) => s.outputVariable as string);
 
@@ -157,7 +381,7 @@ export function workflowToGraph(workflow: Workflow): GraphResult {
   }
 
   // Add data flow edges based on variable references
-  const variableEdges = findVariableDependencies(workflow.steps);
+  const variableEdges = findVariableDependencies(allSteps);
   edges.push(...variableEdges);
 
   return { nodes, edges };

package/src/server/index.ts

@@ -5,11 +5,13 @@ 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 { existsSync, mkdirSync } from 'fs';
+import { StateStore } from '@marktoflow/core';
 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 { executionRoutes } from './routes/executions.js';
 import { setupWebSocket } from './websocket/index.js';
 import { FileWatcher } from './services/FileWatcher.js';
 
@@ -21,6 +23,17 @@ export interface ServerOptions {
 
 let httpServer: Server | null = null;
 let fileWatcher: FileWatcher | null = null;
+let stateStore: StateStore | null = null;
+
+/**
+ * Get the StateStore instance
+ */
+export function getStateStore(): StateStore {
+  if (!stateStore) {
+    throw new Error('StateStore not initialized. Call startServer() first.');
+  }
+  return stateStore;
+}
 
 /**
  * Start the GUI server programmatically
@@ -30,6 +43,11 @@ export async function startServer(options: ServerOptions = {}): Promise<Server>
   const WORKFLOW_DIR = options.workflowDir || process.env.WORKFLOW_DIR || process.cwd();
   const STATIC_DIR = options.staticDir || process.env.STATIC_DIR;
 
+  // Initialize StateStore
+  const stateDir = join(WORKFLOW_DIR, '.marktoflow', 'state');
+  mkdirSync(stateDir, { recursive: true });
+  stateStore = new StateStore(join(stateDir, 'workflow-state.db'));
+
   const app = express();
   httpServer = createServer(app);
   const io = new SocketIOServer(httpServer, {
@@ -47,11 +65,12 @@ export async function startServer(options: ServerOptions = {}): Promise<Server>
   app.use('/api/workflows', workflowRoutes);
   app.use('/api/ai', aiRoutes);
   app.use('/api/execute', executeRoutes);
+  app.use('/api/executions', executionRoutes);
   app.use('/api/tools', toolsRoutes);
 
   // Health check
   app.get('/api/health', (_req, res) => {
-    res.json({ status: 'ok', version: '2.0.0-alpha.1' });
+    res.json({ status: 'ok', version: '2.0.0-alpha.5' });
   });
 
   // Serve static files if static dir is provided
@@ -94,6 +113,10 @@ export function stopServer(): void {
     fileWatcher.stop();
     fileWatcher = null;
   }
+  if (stateStore) {
+    stateStore.close();
+    stateStore = null;
+  }
   if (httpServer) {
     httpServer.close();
     httpServer = null;

package/src/server/routes/executions.ts

@@ -0,0 +1,136 @@
+/**
+ * API routes for execution history
+ */
+
+import { Router, type Request, type Response } from 'express';
+import { getStateStore } from '../index.js';
+
+export const executionRoutes = Router();
+
+/**
+ * GET /api/executions
+ * List all executions with optional filtering
+ */
+executionRoutes.get('/', (req: Request, res: Response) => {
+  try {
+    const stateStore = getStateStore();
+    const { workflowId, status, limit, offset } = req.query;
+
+    // Helper to extract string from query param
+    const getString = (val: unknown): string | undefined => {
+      if (typeof val === 'string') return val;
+      if (Array.isArray(val) && val.length > 0 && typeof val[0] === 'string') return val[0];
+      return undefined;
+    };
+
+    const workflowIdStr = getString(workflowId);
+    const statusStr = getString(status);
+    const limitNum = parseInt(getString(limit) || '50', 10);
+    const offsetNum = getString(offset) ? parseInt(getString(offset)!, 10) : undefined;
+
+    const executions = stateStore.listExecutions({
+      workflowId: workflowIdStr,
+      status: statusStr as any,
+      limit: limitNum,
+      offset: offsetNum,
+    });
+
+    res.json(executions);
+  } catch (error) {
+    console.error('Error listing executions:', error);
+    res.status(500).json({
+      error: 'Failed to list executions',
+      message: error instanceof Error ? error.message : 'Unknown error',
+    });
+  }
+});
+
+/**
+ * GET /api/executions/:runId
+ * Get details for a specific execution
+ */
+executionRoutes.get('/:runId', (req: Request, res: Response) => {
+  try {
+    const stateStore = getStateStore();
+    const runId = Array.isArray(req.params.runId) ? req.params.runId[0] : req.params.runId;
+
+    const execution = stateStore.getExecution(runId);
+    if (!execution) {
+      res.status(404).json({ error: 'Execution not found' });
+      return;
+    }
+
+    res.json(execution);
+  } catch (error) {
+    console.error('Error getting execution:', error);
+    res.status(500).json({
+      error: 'Failed to get execution',
+      message: error instanceof Error ? error.message : 'Unknown error',
+    });
+  }
+});
+
+/**
+ * GET /api/executions/:runId/checkpoints
+ * Get checkpoints for a specific execution
+ */
+executionRoutes.get('/:runId/checkpoints', (req: Request, res: Response) => {
+  try {
+    const stateStore = getStateStore();
+    const runId = Array.isArray(req.params.runId) ? req.params.runId[0] : req.params.runId;
+
+    const checkpoints = stateStore.getCheckpoints(runId);
+    res.json(checkpoints);
+  } catch (error) {
+    console.error('Error getting checkpoints:', error);
+    res.status(500).json({
+      error: 'Failed to get checkpoints',
+      message: error instanceof Error ? error.message : 'Unknown error',
+    });
+  }
+});
+
+/**
+ * GET /api/executions/:runId/stats
+ * Get execution statistics
+ */
+executionRoutes.get('/:runId/stats', (req: Request, res: Response) => {
+  try {
+    const stateStore = getStateStore();
+    const runId = Array.isArray(req.params.runId) ? req.params.runId[0] : req.params.runId;
+
+    const execution = stateStore.getExecution(runId);
+    if (!execution) {
+      res.status(404).json({ error: 'Execution not found' });
+      return;
+    }
+
+    const checkpoints = stateStore.getCheckpoints(runId);
+    const completedSteps = checkpoints.filter((c) => c.status === 'completed').length;
+    const failedSteps = checkpoints.filter((c) => c.status === 'failed').length;
+
+    const stats = {
+      runId,
+      workflowId: execution.workflowId,
+      status: execution.status,
+      totalSteps: execution.totalSteps,
+      completedSteps,
+      failedSteps,
+      currentStep: execution.currentStep,
+      duration:
+        execution.completedAt && execution.startedAt
+          ? execution.completedAt.getTime() - execution.startedAt.getTime()
+          : null,
+      startedAt: execution.startedAt,
+      completedAt: execution.completedAt,
+    };
+
+    res.json(stats);
+  } catch (error) {
+    console.error('Error getting execution stats:', error);
+    res.status(500).json({
+      error: 'Failed to get execution stats',
+      message: error instanceof Error ? error.message : 'Unknown error',
+    });
+  }
+});