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

package/src/client/stores/executionStore.ts

@@ -8,6 +8,7 @@ export interface ExecutionStepResult {
   startTime?: string;
   endTime?: string;
   duration?: number;
+  inputs?: Record<string, unknown>;
   output?: unknown;
   outputVariable?: string;
   error?: string;
@@ -42,13 +43,14 @@ interface ExecutionState {
   currentRunId: string | null;
   isExecuting: boolean;
   isPaused: boolean;
+  isLoadingHistory: boolean;
 
   // Debug mode state
   debug: DebugState;
 
   // Existing methods
   startExecution: (workflowId: string, workflowName: string, inputs?: Record<string, unknown>) => string;
-  updateStepStatus: (runId: string, stepId: string, status: StepStatus, output?: unknown, error?: string, outputVariable?: string) => void;
+  updateStepStatus: (runId: string, stepId: string, status: StepStatus, output?: unknown, error?: string, outputVariable?: string, inputs?: Record<string, unknown>) => void;
   completeExecution: (runId: string, status: WorkflowStatus, outputs?: Record<string, unknown>) => void;
   addLog: (runId: string, message: string) => void;
   pauseExecution: () => void;
@@ -57,6 +59,10 @@ interface ExecutionState {
   clearHistory: () => void;
   getRun: (runId: string) => ExecutionRun | undefined;
 
+  // API sync methods
+  loadHistory: (workflowId?: string) => Promise<void>;
+  syncRunWithBackend: (runId: string) => Promise<void>;
+
   // Debug mode methods
   enableDebugMode: () => void;
   disableDebugMode: () => void;
@@ -87,6 +93,7 @@ export const useExecutionStore = create<ExecutionState>((set, get) => ({
   currentRunId: null,
   isExecuting: false,
   isPaused: false,
+  isLoadingHistory: false,
   debug: initialDebugState,
 
   startExecution: (workflowId, workflowName, inputs) => {
@@ -112,7 +119,7 @@ export const useExecutionStore = create<ExecutionState>((set, get) => ({
     return runId;
   },
 
-  updateStepStatus: (runId, stepId, status, output, error, outputVariable) => {
+  updateStepStatus: (runId, stepId, status, output, error, outputVariable, inputs) => {
     const { debug } = get();
 
     // Check if we need to pause at breakpoint
@@ -141,6 +148,7 @@ export const useExecutionStore = create<ExecutionState>((set, get) => ({
                 status,
                 endTime,
                 duration,
+                inputs: inputs ?? s.inputs,
                 output: output ?? s.output,
                 outputVariable: outputVariable ?? s.outputVariable,
                 error: error ?? s.error,
@@ -157,6 +165,7 @@ export const useExecutionStore = create<ExecutionState>((set, get) => ({
                 stepName: stepId,
                 status,
                 startTime: now,
+                inputs,
                 output,
                 outputVariable,
                 error,
@@ -411,6 +420,59 @@ export const useExecutionStore = create<ExecutionState>((set, get) => ({
       },
     });
   },
+
+  // API sync methods
+  loadHistory: async (workflowId) => {
+    set({ isLoadingHistory: true });
+    try {
+      const url = workflowId
+        ? `/api/executions?workflowId=${encodeURIComponent(workflowId)}&limit=50`
+        : '/api/executions?limit=50';
+
+      const response = await fetch(url);
+      if (!response.ok) {
+        throw new Error('Failed to load execution history');
+      }
+
+      const executions = await response.json();
+
+      // Convert backend ExecutionRecord format to ExecutionRun format
+      const runs: ExecutionRun[] = executions.map((exec: any) => ({
+        id: exec.runId,
+        workflowId: exec.workflowId,
+        workflowName: exec.workflowPath.split('/').pop()?.replace('.md', '') || exec.workflowId,
+        status: exec.status,
+        startTime: exec.startedAt,
+        endTime: exec.completedAt || undefined,
+        duration: exec.completedAt
+          ? new Date(exec.completedAt).getTime() - new Date(exec.startedAt).getTime()
+          : undefined,
+        steps: [],
+        logs: [],
+        inputs: exec.inputs || undefined,
+        outputs: exec.outputs || undefined,
+      }));
+
+      // Merge with existing runs, avoiding duplicates
+      const existingRunIds = new Set(get().runs.map((r) => r.id));
+      const newRuns = runs.filter((r) => !existingRunIds.has(r.id));
+
+      set({
+        runs: [...get().runs, ...newRuns].slice(0, 50),
+        isLoadingHistory: false,
+      });
+    } catch (error) {
+      console.error('Error loading execution history:', error);
+      set({ isLoadingHistory: false });
+    }
+  },
+
+  syncRunWithBackend: async (runId) => {
+    // This would be called to persist a run to the backend
+    // For now, the backend integration will happen via WebSocket events
+    // This is a placeholder for future direct API sync
+    console.log('Syncing run with backend:', runId);
+  },
 }));
 
 // Helper to format duration

package/src/client/stores/workflowStore.ts

@@ -9,6 +9,7 @@ interface WorkflowState {
   error: string | null;
 
   loadWorkflows: () => Promise<void>;
+  fetchWorkflows: () => Promise<void>; // Alias for compatibility
   selectWorkflow: (path: string) => void;
   loadWorkflow: (path: string) => Promise<void>;
   saveWorkflow: (workflow: Workflow) => Promise<void>;
@@ -85,8 +86,8 @@ const demoWorkflow: Workflow = {
 
 export const useWorkflowStore = create<WorkflowState>((set, get) => ({
   workflows: demoWorkflows,
-  selectedWorkflow: demoWorkflows[0].path,
-  currentWorkflow: demoWorkflow,
+  selectedWorkflow: null,
+  currentWorkflow: null,
   isLoading: false,
   error: null,
 
@@ -96,13 +97,20 @@ export const useWorkflowStore = create<WorkflowState>((set, get) => ({
       const response = await fetch('/api/workflows');
       if (!response.ok) throw new Error('Failed to load workflows');
       const data = await response.json();
+      console.log('Loaded workflows:', data.workflows.length);
       set({ workflows: data.workflows, isLoading: false });
     } catch (error) {
+      console.error('Failed to load workflows, using demo data:', error);
       // Use demo data if API fails
       set({ workflows: demoWorkflows, isLoading: false });
     }
   },
 
+  // Alias for compatibility with components
+  fetchWorkflows: async () => {
+    await get().loadWorkflows();
+  },
+
   selectWorkflow: (path) => {
     set({ selectedWorkflow: path });
     get().loadWorkflow(path);

package/src/client/styles/globals.css

@@ -82,6 +82,112 @@
   border-color: #d9534f;
 }
 
+/* Control flow node base styles */
+.control-flow-node {
+  min-width: 220px;
+  border-radius: 12px;
+  border: 2px solid transparent;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+  transition: all 0.2s ease;
+  overflow: hidden;
+}
+
+.control-flow-node:hover {
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
+  transform: translateY(-1px);
+}
+
+.control-flow-node.selected {
+  box-shadow: 0 0 0 4px rgba(255, 109, 90, 0.3), 0 4px 16px rgba(0, 0, 0, 0.4);
+  border-color: rgba(255, 109, 90, 0.5);
+}
+
+.control-flow-node.running {
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+.control-flow-node.completed {
+  box-shadow: 0 0 0 2px rgba(92, 184, 92, 0.4), 0 4px 16px rgba(0, 0, 0, 0.4);
+}
+
+.control-flow-node.failed {
+  box-shadow: 0 0 0 2px rgba(217, 83, 79, 0.4), 0 4px 16px rgba(0, 0, 0, 0.4);
+}
+
+/* Control flow specific node types */
+.if-else-node {
+  position: relative;
+}
+
+.switch-node {
+  position: relative;
+}
+
+.for-each-node,
+.while-node {
+  position: relative;
+}
+
+.parallel-node {
+  position: relative;
+}
+
+.try-catch-node {
+  position: relative;
+}
+
+.transform-node {
+  position: relative;
+}
+
+/* Execution overlays for control flow nodes */
+.control-flow-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+  pointer-events: none;
+  animation: fadeIn 0.2s ease-out;
+}
+
+.control-flow-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  border-radius: 6px;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
+}
+
+.control-flow-badge.early-exit {
+  background: rgba(255, 152, 0, 0.2);
+  border: 1px solid rgba(255, 152, 0, 0.5);
+  color: #ff9800;
+}
+
+.control-flow-badge.skipped {
+  background: rgba(128, 128, 128, 0.2);
+  border: 1px solid rgba(128, 128, 128, 0.5);
+  color: #999;
+}
+
+.control-flow-badge.max-concurrent {
+  background: rgba(255, 193, 7, 0.2);
+  border: 1px solid rgba(255, 193, 7, 0.5);
+  color: #ffc107;
+}
+
 /* Edge animation */
 .react-flow__edge-path.animated {
   stroke-dasharray: 8;

package/src/client/utils/platform.ts

@@ -0,0 +1,46 @@
+/**
+ * Platform detection utilities for cross-platform keyboard shortcuts
+ */
+
+/**
+ * Detect if the user is on a Mac platform
+ */
+export const isMac = (): boolean => {
+  if (typeof window === 'undefined' || typeof navigator === 'undefined') {
+    return false;
+  }
+  return navigator.platform.toUpperCase().includes('MAC');
+};
+
+/**
+ * Get the appropriate modifier key display for the current platform
+ * Returns '⌘' on Mac, 'Ctrl' on Windows/Linux
+ */
+export const getModKey = (): string => {
+  return isMac() ? '⌘' : 'Ctrl';
+};
+
+/**
+ * Convert a shortcut string to display the correct modifier for the platform
+ * @param shortcut - The shortcut string (can contain ⌘, Cmd, or Ctrl)
+ * @returns The shortcut with the correct platform modifier
+ *
+ * @example
+ * getShortcutDisplay('⌘+S') // '⌘+S' on Mac, 'Ctrl+S' on Windows
+ * getShortcutDisplay('Cmd+Z') // '⌘+Z' on Mac, 'Ctrl+Z' on Windows
+ */
+export const getShortcutDisplay = (shortcut: string): string => {
+  const modKey = getModKey();
+
+  return shortcut
+    .replace(/⌘/g, modKey)
+    .replace(/Cmd/g, modKey);
+};
+
+/**
+ * Check if the modifier key is pressed in a keyboard event
+ * Checks metaKey on Mac, ctrlKey on Windows/Linux
+ */
+export const isModKeyPressed = (event: KeyboardEvent | React.KeyboardEvent): boolean => {
+  return isMac() ? event.metaKey : event.ctrlKey;
+};

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 };