@marktoflow/gui 2.0.0-alpha.4 → 2.0.0-alpha.5

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,6 +65,7 @@ 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
@@ -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',
+    });
+  }
+});

package/src/server/routes/workflows.ts

@@ -1,9 +1,27 @@
 import { Router, type Router as RouterType } from 'express';
+import multer from 'multer';
 import { WorkflowService } from '../services/WorkflowService.js';
 
 const router: RouterType = Router();
 const workflowService = new WorkflowService();
 
+// Configure multer for file uploads (in-memory storage)
+const upload = multer({
+  storage: multer.memoryStorage(),
+  limits: {
+    fileSize: 10 * 1024 * 1024, // 10MB max file size
+  },
+  fileFilter: (_req, file, cb) => {
+    const allowedExtensions = ['.md', '.yaml', '.yml', '.zip'];
+    const ext = file.originalname.toLowerCase().slice(file.originalname.lastIndexOf('.'));
+    if (allowedExtensions.includes(ext)) {
+      cb(null, true);
+    } else {
+      cb(new Error('Invalid file type. Only .md, .yaml, .yml, and .zip files are allowed.'));
+    }
+  },
+});
+
 // List all workflows
 router.get('/', async (_req, res) => {
   try {
@@ -20,7 +38,8 @@ router.get('/', async (_req, res) => {
 // Get a specific workflow
 router.get('/:path(*)', async (req, res) => {
   try {
-    const workflowPath = decodeURIComponent((req.params as Record<string, string>)['path(*)']);
+    // Express captures wildcard routes in params[0]
+    const workflowPath = decodeURIComponent((req.params as any)[0] || '');
     const workflow = await workflowService.getWorkflow(workflowPath);
 
     if (!workflow) {
@@ -103,4 +122,26 @@ router.get('/:path(*)/runs', async (req, res) => {
   }
 });
 
+// Import workflow from file upload
+router.post('/import', upload.single('file'), async (req, res) => {
+  try {
+    if (!req.file) {
+      return res.status(400).json({ error: 'No file uploaded' });
+    }
+
+    const result = await workflowService.importWorkflow(
+      req.file.buffer,
+      req.file.originalname
+    );
+
+    res.json(result);
+  } catch (error) {
+    console.error('Import error:', error);
+    res.status(500).json({
+      error: 'Failed to import workflow',
+      message: error instanceof Error ? error.message : 'Unknown error',
+    });
+  }
+});
+
 export { router as workflowRoutes };

package/src/server/services/WorkflowService.ts

@@ -1,9 +1,11 @@
 import { readdir, readFile, writeFile, unlink, mkdir } from 'fs/promises';
-import { join, relative, dirname } from 'path';
+import { join, relative, dirname, basename, extname } from 'path';
 import { existsSync } from 'fs';
-import { stringify as yamlStringify } from 'yaml';
+import { stringify as yamlStringify, parse as yamlParse } from 'yaml';
+import AdmZip from 'adm-zip';
 // Import from @marktoflow/core for proper parsing
-import { parseFile as coreParseFile } from '@marktoflow/core';
+import { parseFile as coreParseFile, type ExecutionRecord } from '@marktoflow/core';
+import { getStateStore } from '../index.js';
 
 interface WorkflowListItem {
   path: string;
@@ -44,6 +46,7 @@ interface Workflow {
   tools?: Record<string, unknown>;
   inputs?: Record<string, unknown>;
   triggers?: unknown[];
+  markdown?: string;
 }
 
 export class WorkflowService {
@@ -75,17 +78,41 @@ export class WorkflowService {
             entry.isFile() &&
             (entry.name.endsWith('.md') || entry.name.endsWith('.yaml') || entry.name.endsWith('.yml'))
           ) {
-            // Check if it's a workflow file by looking for frontmatter
+            // Skip README files (they're documentation, not workflows)
+            if (entry.name.toLowerCase() === 'readme.md') {
+              continue;
+            }
+
+            // Check if it's a workflow file by verifying YAML frontmatter
             try {
               const content = await readFile(fullPath, 'utf-8');
-              if (content.includes('workflow:') || content.includes('steps:')) {
-                const relativePath = relative(baseDir, fullPath);
-                const workflowInfo = extractWorkflowInfo(content, entry.name);
-                workflows.push({
-                  path: relativePath,
-                  ...workflowInfo,
-                });
+
+              // For markdown files, verify it has YAML frontmatter
+              if (entry.name.endsWith('.md')) {
+                if (!content.trimStart().startsWith('---\n')) {
+                  continue;
+                }
+                const frontmatterMatch = content.match(/^---\n[\s\S]*?\n---/);
+                if (!frontmatterMatch) {
+                  continue;
+                }
+                const frontmatter = frontmatterMatch[0];
+                if (!frontmatter.includes('workflow:') && !frontmatter.includes('steps:')) {
+                  continue;
+                }
+              } else {
+                // For YAML files, check if they contain workflow structure
+                if (!content.includes('workflow:') && !content.includes('steps:')) {
+                  continue;
+                }
               }
+
+              const relativePath = relative(baseDir, fullPath);
+              const workflowInfo = extractWorkflowInfo(content, entry.name);
+              workflows.push({
+                path: relativePath,
+                ...workflowInfo,
+              });
             } catch {
               // Skip files that can't be read
             }
@@ -108,6 +135,9 @@ export class WorkflowService {
     }
 
     try {
+      // Read the raw markdown content for GUI parser
+      const rawContent = await readFile(fullPath, 'utf-8');
+
       // Use core parser for proper workflow parsing
       const result = await coreParseFile(fullPath);
       if (result.warnings && result.warnings.length > 0) {
@@ -115,7 +145,13 @@ export class WorkflowService {
       }
 
       // Convert core Workflow type to GUI Workflow type
-      return this.convertCoreWorkflow(result.workflow, workflowPath);
+      const workflow = this.convertCoreWorkflow(result.workflow, workflowPath);
+
+      // Add raw markdown for GUI control flow parsing
+      return {
+        ...workflow,
+        markdown: rawContent,
+      };
     } catch (error) {
       console.error(`Error parsing workflow ${workflowPath}:`, error);
       // Fallback to local parsing if core parser fails
@@ -197,10 +233,134 @@ export class WorkflowService {
     }
   }
 
-  async getExecutionHistory(_workflowPath: string): Promise<unknown[]> {
-    // TODO: Query state store for execution history
-    // This will integrate with @marktoflow/core StateStore
-    return [];
+  async getExecutionHistory(workflowPath: string): Promise<ExecutionRecord[]> {
+    try {
+      const stateStore = getStateStore();
+      // Use the workflow path as the workflow ID for querying
+      const executions = stateStore.listExecutions({
+        workflowId: workflowPath,
+        limit: 50,
+      });
+      return executions;
+    } catch (error) {
+      console.error('Error getting execution history:', error);
+      return [];
+    }
+  }
+
+  async importWorkflow(
+    fileBuffer: Buffer,
+    originalFilename: string
+  ): Promise<{ success: boolean; results?: Array<{ success: boolean; filename: string; message?: string }>; filename?: string; message?: string }> {
+    const ext = extname(originalFilename).toLowerCase();
+
+    try {
+      // Handle ZIP files - extract and import all workflow files
+      if (ext === '.zip') {
+        return await this.importZipBundle(fileBuffer);
+      }
+
+      // Handle single workflow files (.md, .yaml, .yml)
+      if (['.md', '.yaml', '.yml'].includes(ext)) {
+        const content = fileBuffer.toString('utf-8');
+        await this.importSingleWorkflow(content, originalFilename);
+
+        return {
+          success: true,
+          filename: originalFilename,
+          message: 'Workflow imported successfully',
+        };
+      }
+
+      throw new Error('Unsupported file type');
+    } catch (error) {
+      console.error('Import error:', error);
+      throw error;
+    }
+  }
+
+  private async importSingleWorkflow(content: string, filename: string): Promise<void> {
+    // Validate workflow content
+    try {
+      // Basic validation - try to parse YAML frontmatter or direct YAML
+      if (filename.endsWith('.md')) {
+        const frontmatterMatch = content.match(/^---\n([\s\S]*?)\n---/);
+        if (frontmatterMatch) {
+          yamlParse(frontmatterMatch[1]);
+        } else {
+          throw new Error('Invalid markdown workflow: missing YAML frontmatter');
+        }
+      } else {
+        yamlParse(content);
+      }
+    } catch (error) {
+      throw new Error(`Invalid workflow format: ${error instanceof Error ? error.message : 'Unknown error'}`);
+    }
+
+    // Check for filename conflicts
+    let targetFilename = filename;
+    let fullPath = this.resolvePath(targetFilename);
+    let counter = 1;
+
+    while (existsSync(fullPath)) {
+      const nameWithoutExt = basename(filename, extname(filename));
+      targetFilename = `${nameWithoutExt}-${counter}${extname(filename)}`;
+      fullPath = this.resolvePath(targetFilename);
+      counter++;
+    }
+
+    // Write file
+    await writeFile(fullPath, content, 'utf-8');
+  }
+
+  private async importZipBundle(zipBuffer: Buffer): Promise<{ success: boolean; results: Array<{ success: boolean; filename: string; message?: string }> }> {
+    const results: Array<{ success: boolean; filename: string; message?: string }> = [];
+
+    try {
+      const zip = new AdmZip(zipBuffer);
+      const zipEntries = zip.getEntries();
+
+      for (const entry of zipEntries) {
+        // Skip directories and non-workflow files
+        if (entry.isDirectory) continue;
+
+        const filename = basename(entry.entryName);
+        const ext = extname(filename).toLowerCase();
+
+        if (!['.md', '.yaml', '.yml'].includes(ext)) {
+          results.push({
+            success: false,
+            filename,
+            message: 'Skipped: not a workflow file',
+          });
+          continue;
+        }
+
+        try {
+          const content = entry.getData().toString('utf-8');
+          await this.importSingleWorkflow(content, filename);
+
+          results.push({
+            success: true,
+            filename,
+            message: 'Imported successfully',
+          });
+        } catch (error) {
+          results.push({
+            success: false,
+            filename,
+            message: error instanceof Error ? error.message : 'Unknown error',
+          });
+        }
+      }
+
+      return {
+        success: results.some(r => r.success),
+        results,
+      };
+    } catch (error) {
+      throw new Error(`Failed to extract ZIP file: ${error instanceof Error ? error.message : 'Unknown error'}`);
+    }
   }
 
   private resolvePath(workflowPath: string): string {

package/src/server/websocket/index.ts

@@ -70,6 +70,19 @@ export function setupWebSocket(io: SocketIOServer) {
       });
     },
 
+    // Emit execution started
+    emitExecutionStarted(runId: string, data: any) {
+      io.to(`execution:${runId}`).emit('execution:started', {
+        runId,
+        ...data,
+      });
+      // Also broadcast to all clients for global execution history updates
+      io.emit('execution:new', {
+        runId,
+        ...data,
+      });
+    },
+
     // Emit execution step update
     emitExecutionStep(runId: string, data: any) {
       io.to(`execution:${runId}`).emit('execution:step', {

package/tests/unit/ForEachNode.test.tsx

@@ -112,8 +112,9 @@ describe('ForEachNode', () => {
         totalIterations: 10,
       });
 
-      const progressBar = container.querySelector('.bg-orange-400');
-      expect(progressBar).toHaveStyle({ width: '50%' });
+      const progressBar = container.querySelector('.bg-pink-400, .bg-orange-400');
+      expect(progressBar).toBeInTheDocument();
+      expect(progressBar).toHaveAttribute('style', expect.stringContaining('50%'));
     });
 
     it('should display 0% progress when currentIteration is 0', () => {
@@ -122,8 +123,9 @@ describe('ForEachNode', () => {
         totalIterations: 10,
       });
 
-      const progressBar = container.querySelector('.bg-orange-400');
-      expect(progressBar).toHaveStyle({ width: '0%' });
+      const progressBar = container.querySelector('.bg-pink-400, .bg-orange-400');
+      expect(progressBar).toBeInTheDocument();
+      expect(progressBar).toHaveAttribute('style', expect.stringContaining('0%'));
     });
 
     it('should display 100% progress when completed', () => {
@@ -132,8 +134,9 @@ describe('ForEachNode', () => {
         totalIterations: 10,
       });
 
-      const progressBar = container.querySelector('.bg-orange-400');
-      expect(progressBar).toHaveStyle({ width: '100%' });
+      const progressBar = container.querySelector('.bg-pink-400, .bg-orange-400');
+      expect(progressBar).toBeInTheDocument();
+      expect(progressBar).toHaveAttribute('style', expect.stringContaining('100%'));
     });
 
     it('should not display progress when totalIterations is undefined', () => {
@@ -215,4 +218,91 @@ describe('ForEachNode', () => {
       expect(screen.getByText(complexItems)).toBeInTheDocument();
     });
   });
+
+  describe('early exit indicators', () => {
+    it('should show early exit warning when loop exited with break', () => {
+      renderNode({
+        earlyExit: true,
+        exitReason: 'break',
+        currentIteration: 3,
+        totalIterations: 10
+      });
+
+      expect(screen.getByText('Loop exited early (break)')).toBeInTheDocument();
+    });
+
+    it('should show error message when loop stopped on error', () => {
+      renderNode({
+        earlyExit: true,
+        exitReason: 'error',
+        currentIteration: 5,
+        totalIterations: 10
+      });
+
+      expect(screen.getByText('Loop stopped on error')).toBeInTheDocument();
+    });
+
+    it('should show (stopped) indicator in progress text', () => {
+      renderNode({
+        earlyExit: true,
+        exitReason: 'break',
+        currentIteration: 5,
+        totalIterations: 10
+      });
+
+      expect(screen.getByText('(stopped)')).toBeInTheDocument();
+      expect(screen.getByText('5 / 10')).toBeInTheDocument();
+    });
+
+    it('should change progress bar color to orange when early exit', () => {
+      const { container } = renderNode({
+        earlyExit: true,
+        exitReason: 'break',
+        currentIteration: 5,
+        totalIterations: 10
+      });
+
+      const progressBar = container.querySelector('.bg-orange-400');
+      expect(progressBar).toBeInTheDocument();
+      expect(progressBar).toHaveStyle({ width: '50%' });
+    });
+
+    it('should use pink color for progress bar when no early exit', () => {
+      const { container } = renderNode({
+        earlyExit: false,
+        currentIteration: 5,
+        totalIterations: 10
+      });
+
+      const progressBar = container.querySelector('.bg-pink-400');
+      expect(progressBar).toBeInTheDocument();
+    });
+
+    it('should not show early exit warning when earlyExit is false', () => {
+      renderNode({
+        earlyExit: false,
+        currentIteration: 10,
+        totalIterations: 10
+      });
+
+      expect(screen.queryByText('Loop exited early (break)')).not.toBeInTheDocument();
+      expect(screen.queryByText('Loop stopped on error')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('completed and failed states', () => {
+    it('should show completed class on node', () => {
+      renderNode({ status: 'completed' });
+
+      const node = screen.getByText('Process Orders').closest('.control-flow-node');
+      expect(node).toHaveClass('completed');
+    });
+
+    it('should show failed class on node', () => {
+      renderNode({ status: 'failed' });
+
+      const node = screen.getByText('Process Orders').closest('.control-flow-node');
+      expect(node).toHaveClass('failed');
+    });
+  });
 });