@marktoflow/gui 2.0.0-alpha.1

package/src/client/components/Editor/StepEditor.tsx

@@ -0,0 +1,532 @@
+import { useState, useEffect, useMemo } from 'react';
+import { Modal, ModalFooter } from '../common/Modal';
+import { Button } from '../common/Button';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '../common/Tabs';
+import { YamlEditor } from './YamlEditor';
+import { InputsEditor } from './InputsEditor';
+import {
+  Settings,
+  FileInput,
+  FileOutput,
+  AlertTriangle,
+  Filter,
+  Code,
+  AlertCircle,
+} from 'lucide-react';
+import type { WorkflowStep } from '@shared/types';
+import { validateStep, getFieldError, type ValidationError } from '../../utils/stepValidation';
+
+interface StepEditorProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  step: WorkflowStep | null;
+  onSave: (step: WorkflowStep) => void;
+  availableVariables: string[];
+}
+
+export function StepEditor({
+  open,
+  onOpenChange,
+  step,
+  onSave,
+  availableVariables,
+}: StepEditorProps) {
+  const [editedStep, setEditedStep] = useState<WorkflowStep | null>(null);
+  const [activeTab, setActiveTab] = useState('properties');
+  const [validationErrors, setValidationErrors] = useState<ValidationError[]>([]);
+  const [showErrors, setShowErrors] = useState(false);
+
+  useEffect(() => {
+    if (step) {
+      setEditedStep({ ...step });
+      setActiveTab('properties');
+      setValidationErrors([]);
+      setShowErrors(false);
+    }
+  }, [step]);
+
+  // Validate on every change
+  const validation = useMemo(() => {
+    if (!editedStep) return { valid: true, errors: [] };
+    return validateStep(editedStep);
+  }, [editedStep]);
+
+  if (!editedStep) return null;
+
+  const handleSave = () => {
+    if (!editedStep) return;
+
+    const result = validateStep(editedStep);
+    setValidationErrors(result.errors);
+    setShowErrors(true);
+
+    if (result.valid) {
+      onSave(editedStep);
+      onOpenChange(false);
+    } else {
+      // Switch to tab with first error
+      const firstError = result.errors[0];
+      if (firstError) {
+        if (firstError.field === 'id' || firstError.field === 'action' || firstError.field === 'workflow' || firstError.field === 'timeout') {
+          setActiveTab('properties');
+        } else if (firstError.field === 'outputVariable') {
+          setActiveTab('output');
+        } else if (firstError.field.startsWith('errorHandling')) {
+          setActiveTab('errors');
+        } else if (firstError.field.startsWith('conditions')) {
+          setActiveTab('conditions');
+        }
+      }
+    }
+  };
+
+  const updateStep = (updates: Partial<WorkflowStep>) => {
+    setEditedStep((prev) => (prev ? { ...prev, ...updates } : null));
+  };
+
+  const getError = (field: string): string | undefined => {
+    if (!showErrors) return undefined;
+    return getFieldError(validationErrors, field);
+  };
+
+  return (
+    <Modal
+      open={open}
+      onOpenChange={onOpenChange}
+      title={`Edit Step: ${editedStep.name || editedStep.id}`}
+      description={editedStep.action || editedStep.workflow || 'Configure step settings'}
+      size="xl"
+    >
+      <Tabs value={activeTab} onValueChange={setActiveTab}>
+        <TabsList>
+          <TabsTrigger value="properties">
+            <Settings className="w-4 h-4 mr-1.5" />
+            Properties
+          </TabsTrigger>
+          <TabsTrigger value="inputs">
+            <FileInput className="w-4 h-4 mr-1.5" />
+            Inputs
+          </TabsTrigger>
+          <TabsTrigger value="output">
+            <FileOutput className="w-4 h-4 mr-1.5" />
+            Output
+          </TabsTrigger>
+          <TabsTrigger value="errors">
+            <AlertTriangle className="w-4 h-4 mr-1.5" />
+            Errors
+          </TabsTrigger>
+          <TabsTrigger value="conditions">
+            <Filter className="w-4 h-4 mr-1.5" />
+            Conditions
+          </TabsTrigger>
+          <TabsTrigger value="yaml">
+            <Code className="w-4 h-4 mr-1.5" />
+            YAML
+          </TabsTrigger>
+        </TabsList>
+
+        <div className="p-4">
+          <TabsContent value="properties">
+            <PropertiesTab step={editedStep} onChange={updateStep} getError={getError} />
+          </TabsContent>
+
+          <TabsContent value="inputs">
+            <InputsEditor
+              inputs={editedStep.inputs}
+              onChange={(inputs) => updateStep({ inputs })}
+              availableVariables={availableVariables}
+            />
+          </TabsContent>
+
+          <TabsContent value="output">
+            <OutputTab step={editedStep} onChange={updateStep} />
+          </TabsContent>
+
+          <TabsContent value="errors">
+            <ErrorHandlingTab step={editedStep} onChange={updateStep} />
+          </TabsContent>
+
+          <TabsContent value="conditions">
+            <ConditionsTab
+              step={editedStep}
+              onChange={updateStep}
+              availableVariables={availableVariables}
+            />
+          </TabsContent>
+
+          <TabsContent value="yaml">
+            <YamlEditor
+              value={editedStep}
+              onChange={(updated) => setEditedStep(updated)}
+            />
+          </TabsContent>
+        </div>
+      </Tabs>
+
+      <ModalFooter>
+        {showErrors && validationErrors.length > 0 && (
+          <div className="flex-1 flex items-center gap-2 text-error text-sm">
+            <AlertCircle className="w-4 h-4 flex-shrink-0" />
+            <span>{validationErrors.length} validation error{validationErrors.length > 1 ? 's' : ''}</span>
+          </div>
+        )}
+        <Button variant="secondary" onClick={() => onOpenChange(false)}>
+          Cancel
+        </Button>
+        <Button onClick={handleSave}>Save Changes</Button>
+      </ModalFooter>
+    </Modal>
+  );
+}
+
+// Properties Tab
+function PropertiesTab({
+  step,
+  onChange,
+  getError,
+}: {
+  step: WorkflowStep;
+  onChange: (updates: Partial<WorkflowStep>) => void;
+  getError: (field: string) => string | undefined;
+}) {
+  const idError = getError('id');
+  const actionError = getError('action');
+  const workflowError = getError('workflow');
+  const timeoutError = getError('timeout');
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <label className="block text-sm font-medium text-gray-300 mb-1.5">
+          Step ID <span className="text-error">*</span>
+        </label>
+        <input
+          type="text"
+          value={step.id}
+          onChange={(e) => onChange({ id: e.target.value })}
+          className={`w-full px-3 py-2 bg-node-bg border rounded-lg text-white text-sm focus:outline-none ${
+            idError ? 'border-error focus:border-error' : 'border-node-border focus:border-primary'
+          }`}
+          placeholder="unique-step-id"
+        />
+        {idError ? (
+          <p className="mt-1 text-xs text-error">{idError}</p>
+        ) : (
+          <p className="mt-1 text-xs text-gray-500">
+            Unique identifier for this step
+          </p>
+        )}
+      </div>
+
+      <div>
+        <label className="block text-sm font-medium text-gray-300 mb-1.5">
+          Step Name
+        </label>
+        <input
+          type="text"
+          value={step.name || ''}
+          onChange={(e) => onChange({ name: e.target.value || undefined })}
+          className="w-full px-3 py-2 bg-node-bg border border-node-border rounded-lg text-white text-sm focus:outline-none focus:border-primary"
+          placeholder="Human-readable name"
+        />
+      </div>
+
+      <div>
+        <label className="block text-sm font-medium text-gray-300 mb-1.5">
+          Action {!step.workflow && <span className="text-error">*</span>}
+        </label>
+        <input
+          type="text"
+          value={step.action || ''}
+          onChange={(e) => onChange({ action: e.target.value || undefined })}
+          className={`w-full px-3 py-2 bg-node-bg border rounded-lg text-white text-sm font-mono focus:outline-none ${
+            actionError ? 'border-error focus:border-error' : 'border-node-border focus:border-primary'
+          }`}
+          placeholder="service.method (e.g., slack.chat.postMessage)"
+        />
+        {actionError ? (
+          <p className="mt-1 text-xs text-error">{actionError}</p>
+        ) : (
+          <p className="mt-1 text-xs text-gray-500">
+            Format: service.method or service.namespace.method
+          </p>
+        )}
+      </div>
+
+      {step.workflow && (
+        <div>
+          <label className="block text-sm font-medium text-gray-300 mb-1.5">
+            Sub-workflow Path
+          </label>
+          <input
+            type="text"
+            value={step.workflow}
+            onChange={(e) => onChange({ workflow: e.target.value })}
+            className={`w-full px-3 py-2 bg-node-bg border rounded-lg text-white text-sm font-mono focus:outline-none ${
+              workflowError ? 'border-error focus:border-error' : 'border-node-border focus:border-primary'
+            }`}
+            placeholder="./path/to/workflow.md"
+          />
+          {workflowError && (
+            <p className="mt-1 text-xs text-error">{workflowError}</p>
+          )}
+        </div>
+      )}
+
+      <div>
+        <label className="block text-sm font-medium text-gray-300 mb-1.5">
+          Timeout (seconds)
+        </label>
+        <input
+          type="number"
+          value={step.timeout || ''}
+          onChange={(e) =>
+            onChange({
+              timeout: e.target.value ? parseInt(e.target.value, 10) : undefined,
+            })
+          }
+          className={`w-full px-3 py-2 bg-node-bg border rounded-lg text-white text-sm focus:outline-none ${
+            timeoutError ? 'border-error focus:border-error' : 'border-node-border focus:border-primary'
+          }`}
+          placeholder="30"
+          min="1"
+        />
+        {timeoutError && (
+          <p className="mt-1 text-xs text-error">{timeoutError}</p>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// Output Tab
+function OutputTab({
+  step,
+  onChange,
+}: {
+  step: WorkflowStep;
+  onChange: (updates: Partial<WorkflowStep>) => void;
+}) {
+  return (
+    <div className="space-y-4">
+      <div>
+        <label className="block text-sm font-medium text-gray-300 mb-1.5">
+          Output Variable
+        </label>
+        <input
+          type="text"
+          value={step.outputVariable || ''}
+          onChange={(e) =>
+            onChange({ outputVariable: e.target.value || undefined })
+          }
+          className="w-full px-3 py-2 bg-node-bg border border-node-border rounded-lg text-white text-sm font-mono focus:outline-none focus:border-primary"
+          placeholder="result_variable"
+        />
+        <p className="mt-1 text-xs text-gray-500">
+          Store the step output in this variable for use in subsequent steps
+        </p>
+      </div>
+
+      <div className="p-4 bg-node-bg rounded-lg border border-node-border">
+        <h4 className="text-sm font-medium text-gray-300 mb-2">Usage Example</h4>
+        <code className="text-xs text-primary font-mono">
+          {'{{ ' + (step.outputVariable || 'variable_name') + ' }}'}
+        </code>
+        <p className="mt-2 text-xs text-gray-500">
+          Use this syntax in subsequent steps to reference the output
+        </p>
+      </div>
+    </div>
+  );
+}
+
+// Error Handling Tab
+function ErrorHandlingTab({
+  step,
+  onChange,
+}: {
+  step: WorkflowStep;
+  onChange: (updates: Partial<WorkflowStep>) => void;
+}) {
+  const errorHandling = step.errorHandling || { action: 'stop' };
+
+  const updateErrorHandling = (updates: Partial<typeof errorHandling>) => {
+    onChange({
+      errorHandling: { ...errorHandling, ...updates },
+    });
+  };
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <label className="block text-sm font-medium text-gray-300 mb-1.5">
+          Error Action
+        </label>
+        <select
+          value={errorHandling.action}
+          onChange={(e) =>
+            updateErrorHandling({
+              action: e.target.value as 'stop' | 'continue' | 'retry',
+            })
+          }
+          className="w-full px-3 py-2 bg-node-bg border border-node-border rounded-lg text-white text-sm focus:outline-none focus:border-primary"
+        >
+          <option value="stop">Stop workflow on error</option>
+          <option value="continue">Continue to next step</option>
+          <option value="retry">Retry with backoff</option>
+        </select>
+      </div>
+
+      {errorHandling.action === 'retry' && (
+        <>
+          <div>
+            <label className="block text-sm font-medium text-gray-300 mb-1.5">
+              Max Retries
+            </label>
+            <input
+              type="number"
+              value={errorHandling.maxRetries || 3}
+              onChange={(e) =>
+                updateErrorHandling({
+                  maxRetries: parseInt(e.target.value, 10),
+                })
+              }
+              className="w-full px-3 py-2 bg-node-bg border border-node-border rounded-lg text-white text-sm focus:outline-none focus:border-primary"
+              min="1"
+              max="10"
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-300 mb-1.5">
+              Retry Delay (ms)
+            </label>
+            <input
+              type="number"
+              value={errorHandling.retryDelay || 1000}
+              onChange={(e) =>
+                updateErrorHandling({
+                  retryDelay: parseInt(e.target.value, 10),
+                })
+              }
+              className="w-full px-3 py-2 bg-node-bg border border-node-border rounded-lg text-white text-sm focus:outline-none focus:border-primary"
+              min="100"
+              step="100"
+            />
+          </div>
+        </>
+      )}
+
+      <div>
+        <label className="block text-sm font-medium text-gray-300 mb-1.5">
+          Fallback Step (optional)
+        </label>
+        <input
+          type="text"
+          value={errorHandling.fallbackStep || ''}
+          onChange={(e) =>
+            updateErrorHandling({
+              fallbackStep: e.target.value || undefined,
+            })
+          }
+          className="w-full px-3 py-2 bg-node-bg border border-node-border rounded-lg text-white text-sm font-mono focus:outline-none focus:border-primary"
+          placeholder="fallback-step-id"
+        />
+        <p className="mt-1 text-xs text-gray-500">
+          Jump to this step if the error action fails
+        </p>
+      </div>
+    </div>
+  );
+}
+
+// Conditions Tab
+function ConditionsTab({
+  step,
+  onChange,
+  availableVariables,
+}: {
+  step: WorkflowStep;
+  onChange: (updates: Partial<WorkflowStep>) => void;
+  availableVariables: string[];
+}) {
+  const conditions = step.conditions || [];
+
+  const addCondition = () => {
+    onChange({ conditions: [...conditions, ''] });
+  };
+
+  const updateCondition = (index: number, value: string) => {
+    const updated = [...conditions];
+    updated[index] = value;
+    onChange({ conditions: updated });
+  };
+
+  const removeCondition = (index: number) => {
+    const updated = conditions.filter((_, i) => i !== index);
+    onChange({ conditions: updated.length > 0 ? updated : undefined });
+  };
+
+  return (
+    <div className="space-y-4">
+      <p className="text-sm text-gray-400">
+        This step will only execute if all conditions evaluate to true.
+      </p>
+
+      {conditions.length === 0 ? (
+        <div className="text-center py-8">
+          <p className="text-sm text-gray-500 mb-3">No conditions defined</p>
+          <Button variant="secondary" size="sm" onClick={addCondition}>
+            Add Condition
+          </Button>
+        </div>
+      ) : (
+        <div className="space-y-3">
+          {conditions.map((condition, index) => (
+            <div key={index} className="flex gap-2">
+              <input
+                type="text"
+                value={condition}
+                onChange={(e) => updateCondition(index, e.target.value)}
+                className="flex-1 px-3 py-2 bg-node-bg border border-node-border rounded-lg text-white text-sm font-mono focus:outline-none focus:border-primary"
+                placeholder="{{ variable }} === 'value'"
+              />
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => removeCondition(index)}
+              >
+                ×
+              </Button>
+            </div>
+          ))}
+          <Button variant="secondary" size="sm" onClick={addCondition}>
+            Add Condition
+          </Button>
+        </div>
+      )}
+
+      {availableVariables.length > 0 && (
+        <div className="mt-4 p-3 bg-node-bg rounded-lg border border-node-border">
+          <h4 className="text-xs font-medium text-gray-400 uppercase tracking-wider mb-2">
+            Available Variables
+          </h4>
+          <div className="flex flex-wrap gap-1.5">
+            {availableVariables.map((variable) => (
+              <code
+                key={variable}
+                className="px-2 py-0.5 bg-primary/10 text-primary text-xs rounded cursor-pointer hover:bg-primary/20"
+                onClick={() => {
+                  // Copy to clipboard
+                  navigator.clipboard.writeText(`{{ ${variable} }}`);
+                }}
+              >
+                {variable}
+              </code>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/client/components/Editor/YamlEditor.tsx

@@ -0,0 +1,160 @@
+import { useState, useEffect } from 'react';
+import Editor from '@monaco-editor/react';
+import { stringify, parse } from 'yaml';
+import { AlertCircle, Check } from 'lucide-react';
+import type { WorkflowStep } from '@shared/types';
+
+interface YamlEditorProps {
+  value: WorkflowStep;
+  onChange: (step: WorkflowStep) => void;
+}
+
+export function YamlEditor({ value, onChange }: YamlEditorProps) {
+  const [yamlContent, setYamlContent] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [isValid, setIsValid] = useState(true);
+
+  useEffect(() => {
+    try {
+      const yaml = stringify(value, {
+        indent: 2,
+        lineWidth: 0,
+      });
+      setYamlContent(yaml);
+      setError(null);
+      setIsValid(true);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to serialize');
+      setIsValid(false);
+    }
+  }, [value]);
+
+  const handleEditorChange = (content: string | undefined) => {
+    if (!content) return;
+
+    setYamlContent(content);
+
+    try {
+      const parsed = parse(content) as WorkflowStep;
+
+      // Validate required fields
+      if (!parsed.id) {
+        throw new Error('Step ID is required');
+      }
+      if (!parsed.action && !parsed.workflow) {
+        throw new Error('Either action or workflow is required');
+      }
+
+      setError(null);
+      setIsValid(true);
+      onChange(parsed);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Invalid YAML');
+      setIsValid(false);
+    }
+  };
+
+  return (
+    <div className="space-y-2">
+      {/* Status bar */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          {isValid ? (
+            <span className="flex items-center gap-1 text-xs text-success">
+              <Check className="w-3 h-3" />
+              Valid YAML
+            </span>
+          ) : (
+            <span className="flex items-center gap-1 text-xs text-error">
+              <AlertCircle className="w-3 h-3" />
+              {error}
+            </span>
+          )}
+        </div>
+        <span className="text-xs text-gray-500">
+          {yamlContent.split('\n').length} lines
+        </span>
+      </div>
+
+      {/* Editor */}
+      <div className="border border-node-border rounded-lg overflow-hidden">
+        <Editor
+          height="400px"
+          language="yaml"
+          value={yamlContent}
+          onChange={handleEditorChange}
+          theme="vs-dark"
+          options={{
+            minimap: { enabled: false },
+            fontSize: 13,
+            fontFamily: 'JetBrains Mono, Consolas, monospace',
+            lineNumbers: 'on',
+            scrollBeyondLastLine: false,
+            automaticLayout: true,
+            tabSize: 2,
+            wordWrap: 'on',
+            padding: { top: 12, bottom: 12 },
+          }}
+        />
+      </div>
+
+      {/* Help text */}
+      <div className="text-xs text-gray-500">
+        <p>
+          Edit the step configuration directly in YAML format. Changes are
+          applied automatically when valid.
+        </p>
+      </div>
+    </div>
+  );
+}
+
+// Read-only YAML viewer
+interface YamlViewerProps {
+  value: unknown;
+  title?: string;
+}
+
+export function YamlViewer({ value, title }: YamlViewerProps) {
+  const [yamlContent, setYamlContent] = useState('');
+
+  useEffect(() => {
+    try {
+      const yaml = stringify(value, {
+        indent: 2,
+        lineWidth: 0,
+      });
+      setYamlContent(yaml);
+    } catch {
+      setYamlContent('# Failed to serialize value');
+    }
+  }, [value]);
+
+  return (
+    <div className="space-y-2">
+      {title && (
+        <h4 className="text-sm font-medium text-gray-300">{title}</h4>
+      )}
+      <div className="border border-node-border rounded-lg overflow-hidden">
+        <Editor
+          height="300px"
+          language="yaml"
+          value={yamlContent}
+          theme="vs-dark"
+          options={{
+            readOnly: true,
+            minimap: { enabled: false },
+            fontSize: 13,
+            fontFamily: 'JetBrains Mono, Consolas, monospace',
+            lineNumbers: 'on',
+            scrollBeyondLastLine: false,
+            automaticLayout: true,
+            tabSize: 2,
+            wordWrap: 'on',
+            padding: { top: 12, bottom: 12 },
+          }}
+        />
+      </div>
+    </div>
+  );
+}