@marktoflow/gui 2.0.0-alpha.5 → 2.0.2

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

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

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