@marktoflow/gui 2.0.0-alpha.4 → 2.0.1

package/src/client/components/Canvas/ForEachNode.tsx

@@ -1,128 +0,0 @@
-import { memo } from 'react';
-import { Handle, Position, type Node, type NodeProps } from '@xyflow/react';
-import { Repeat, CheckCircle, XCircle, Clock } from 'lucide-react';
-
-export interface ForEachNodeData extends Record<string, unknown> {
-  id: string;
-  name?: string;
-  items: string;
-  itemVariable?: string;
-  status?: 'pending' | 'running' | 'completed' | 'failed' | 'skipped';
-  currentIteration?: number;
-  totalIterations?: number;
-}
-
-export type ForEachNodeType = Node<ForEachNodeData, 'for_each'>;
-
-function ForEachNodeComponent({ data, selected }: NodeProps<ForEachNodeType>) {
-  const statusConfig: Record<
-    NonNullable<ForEachNodeData['status']>,
-    { icon: typeof Clock; color: string; bgColor: string; animate?: boolean }
-  > = {
-    pending: { icon: Clock, color: 'text-gray-400', bgColor: 'bg-gray-400/10' },
-    running: {
-      icon: Repeat,
-      color: 'text-orange-400',
-      bgColor: 'bg-orange-400/10',
-      animate: true,
-    },
-    completed: {
-      icon: CheckCircle,
-      color: 'text-success',
-      bgColor: 'bg-success/10',
-    },
-    failed: { icon: XCircle, color: 'text-error', bgColor: 'bg-error/10' },
-    skipped: {
-      icon: XCircle,
-      color: 'text-gray-500',
-      bgColor: 'bg-gray-500/10',
-    },
-  };
-
-  const status = data.status || 'pending';
-  const config = statusConfig[status];
-  const StatusIcon = config.icon;
-
-  return (
-    <div
-      className={`control-flow-node for-each-node p-0 ${selected ? 'selected' : ''} ${status === 'running' ? 'running' : ''}`}
-      style={{
-        background: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
-      }}
-    >
-      {/* Input handle */}
-      <Handle
-        type="target"
-        position={Position.Top}
-        className="!w-3 !h-3 !bg-primary !border-2 !border-node-bg"
-      />
-
-      {/* Node header */}
-      <div className="flex items-center gap-3 p-3 border-b border-white/20">
-        <div className="w-8 h-8 rounded-lg bg-white/20 flex items-center justify-center">
-          <Repeat className="w-5 h-5 text-white" />
-        </div>
-        <div className="flex-1 min-w-0">
-          <div className="text-sm font-medium text-white">
-            {data.name || 'For Each'}
-          </div>
-          <div className="text-xs text-white/70">Loop</div>
-        </div>
-        <div
-          className={`w-6 h-6 rounded-full ${config.bgColor} flex items-center justify-center`}
-        >
-          <StatusIcon
-            className={`w-4 h-4 ${config.color} ${config.animate ? 'animate-pulse' : ''}`}
-          />
-        </div>
-      </div>
-
-      {/* Node body */}
-      <div className="p-3 bg-white/10">
-        <div className="text-xs text-white/90 mb-2">
-          <span className="text-white/60">Items:</span>{' '}
-          <span className="font-mono">{data.items || 'Not set'}</span>
-        </div>
-        <div className="text-xs text-white/90 mb-3">
-          <span className="text-white/60">Variable:</span>{' '}
-          <span className="font-mono">{data.itemVariable || 'item'}</span>
-        </div>
-
-        {/* Iteration progress */}
-        {data.totalIterations !== undefined && (
-          <div className="mt-2 p-2 bg-white/5 rounded">
-            <div className="flex items-center justify-between mb-1">
-              <span className="text-xs text-white/70">Progress</span>
-              <span className="text-xs text-white font-medium">
-                {data.currentIteration || 0} / {data.totalIterations}
-              </span>
-            </div>
-            <div className="w-full bg-white/10 rounded-full h-1.5">
-              <div
-                className="bg-orange-400 h-1.5 rounded-full transition-all"
-                style={{
-                  width: `${((data.currentIteration || 0) / data.totalIterations) * 100}%`,
-                }}
-              />
-            </div>
-          </div>
-        )}
-
-        {/* Loop metadata */}
-        <div className="mt-3 text-xs text-white/50 flex items-center gap-2">
-          <span>ℹ️</span>
-          <span>Access: loop.index, loop.first, loop.last</span>
-        </div>
-      </div>
-
-      {/* Output handle */}
-      <Handle
-        type="source"
-        position={Position.Bottom}
-        className="!w-3 !h-3 !bg-primary !border-2 !border-node-bg"
-      />
-    </div>
-  );
-}
-
-export const ForEachNode = memo(ForEachNodeComponent);

package/src/client/components/Canvas/IfElseNode.tsx

@@ -1,126 +0,0 @@
-import { memo } from 'react';
-import { Handle, Position, type Node, type NodeProps } from '@xyflow/react';
-import { GitBranch, CheckCircle, XCircle, Clock } from 'lucide-react';
-
-export interface IfElseNodeData extends Record<string, unknown> {
-  id: string;
-  name?: string;
-  condition: string;
-  status?: 'pending' | 'running' | 'completed' | 'failed' | 'skipped';
-  activeBranch?: 'then' | 'else' | null;
-}
-
-export type IfElseNodeType = Node<IfElseNodeData, 'if'>;
-
-function IfElseNodeComponent({ data, selected }: NodeProps<IfElseNodeType>) {
-  const statusConfig: Record<
-    NonNullable<IfElseNodeData['status']>,
-    { icon: typeof Clock; color: string; bgColor: string; animate?: boolean }
-  > = {
-    pending: { icon: Clock, color: 'text-gray-400', bgColor: 'bg-gray-400/10' },
-    running: {
-      icon: GitBranch,
-      color: 'text-blue-400',
-      bgColor: 'bg-blue-400/10',
-      animate: true,
-    },
-    completed: {
-      icon: CheckCircle,
-      color: 'text-success',
-      bgColor: 'bg-success/10',
-    },
-    failed: { icon: XCircle, color: 'text-error', bgColor: 'bg-error/10' },
-    skipped: {
-      icon: XCircle,
-      color: 'text-gray-500',
-      bgColor: 'bg-gray-500/10',
-    },
-  };
-
-  const status = data.status || 'pending';
-  const config = statusConfig[status];
-  const StatusIcon = config.icon;
-
-  return (
-    <div
-      className={`control-flow-node if-else-node p-0 ${selected ? 'selected' : ''} ${status === 'running' ? 'running' : ''}`}
-      style={{
-        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
-      }}
-    >
-      {/* Input handle */}
-      <Handle
-        type="target"
-        position={Position.Top}
-        className="!w-3 !h-3 !bg-primary !border-2 !border-node-bg"
-      />
-
-      {/* Node header */}
-      <div className="flex items-center gap-3 p-3 border-b border-white/20">
-        <div className="w-8 h-8 rounded-lg bg-white/20 flex items-center justify-center">
-          <GitBranch className="w-5 h-5 text-white" />
-        </div>
-        <div className="flex-1 min-w-0">
-          <div className="text-sm font-medium text-white">
-            {data.name || 'If/Else'}
-          </div>
-          <div className="text-xs text-white/70">Conditional</div>
-        </div>
-        <div
-          className={`w-6 h-6 rounded-full ${config.bgColor} flex items-center justify-center`}
-        >
-          <StatusIcon
-            className={`w-4 h-4 ${config.color} ${config.animate ? 'animate-pulse' : ''}`}
-          />
-        </div>
-      </div>
-
-      {/* Node body */}
-      <div className="p-3 bg-white/10">
-        <div className="text-xs text-white/90 font-mono mb-3">
-          {data.condition || 'No condition set'}
-        </div>
-
-        {/* Branch outputs */}
-        <div className="grid grid-cols-2 gap-2">
-          <div
-            className={`text-center p-2 rounded text-xs font-medium transition-colors ${
-              data.activeBranch === 'then'
-                ? 'bg-green-500/30 text-green-200'
-                : 'bg-white/5 text-white/60'
-            }`}
-          >
-            ✓ Then
-          </div>
-          <div
-            className={`text-center p-2 rounded text-xs font-medium transition-colors ${
-              data.activeBranch === 'else'
-                ? 'bg-red-500/30 text-red-200'
-                : 'bg-white/5 text-white/60'
-            }`}
-          >
-            ✗ Else
-          </div>
-        </div>
-      </div>
-
-      {/* Output handles */}
-      <Handle
-        type="source"
-        position={Position.Bottom}
-        id="then"
-        style={{ left: '33%' }}
-        className="!w-3 !h-3 !bg-green-500 !border-2 !border-node-bg"
-      />
-      <Handle
-        type="source"
-        position={Position.Bottom}
-        id="else"
-        style={{ left: '67%' }}
-        className="!w-3 !h-3 !bg-red-500 !border-2 !border-node-bg"
-      />
-    </div>
-  );
-}
-
-export const IfElseNode = memo(IfElseNodeComponent);

package/src/client/components/Canvas/NodeContextMenu.tsx

@@ -1,188 +0,0 @@
-import {
-  ContextMenu,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuSeparator,
-  ContextMenuSub,
-  ContextMenuSubContent,
-  ContextMenuSubTrigger,
-  ContextMenuShortcut,
-} from '../common/ContextMenu';
-import {
-  Edit,
-  Code,
-  FileText,
-  Copy,
-  Trash2,
-  Plus,
-  FolderOpen,
-  Play,
-  AlertTriangle,
-} from 'lucide-react';
-import type { Node } from '@xyflow/react';
-
-interface NodeContextMenuProps {
-  children: React.ReactNode;
-  node: Node;
-  onEdit: () => void;
-  onViewYaml: () => void;
-  onViewDocs: () => void;
-  onDuplicate: () => void;
-  onDelete: () => void;
-  onAddStepBefore: () => void;
-  onAddStepAfter: () => void;
-  onConvertToSubworkflow: () => void;
-  onExecuteFrom: () => void;
-}
-
-export function NodeContextMenu({
-  children,
-  node,
-  onEdit,
-  onViewYaml,
-  onViewDocs,
-  onDuplicate,
-  onDelete,
-  onAddStepBefore,
-  onAddStepAfter,
-  onConvertToSubworkflow,
-  onExecuteFrom,
-}: NodeContextMenuProps) {
-  const isSubworkflow = node.type === 'subworkflow';
-  const hasError = node.data?.status === 'failed';
-
-  return (
-    <ContextMenu>
-      {children}
-      <ContextMenuContent>
-        <ContextMenuItem onClick={onEdit}>
-          <Edit className="w-4 h-4 mr-2" />
-          Edit Step
-          <ContextMenuShortcut>E</ContextMenuShortcut>
-        </ContextMenuItem>
-
-        <ContextMenuItem onClick={onViewYaml}>
-          <Code className="w-4 h-4 mr-2" />
-          View YAML
-          <ContextMenuShortcut>Y</ContextMenuShortcut>
-        </ContextMenuItem>
-
-        <ContextMenuItem onClick={onViewDocs}>
-          <FileText className="w-4 h-4 mr-2" />
-          View Documentation
-        </ContextMenuItem>
-
-        <ContextMenuSeparator />
-
-        <ContextMenuItem onClick={onDuplicate}>
-          <Copy className="w-4 h-4 mr-2" />
-          Duplicate
-          <ContextMenuShortcut>⌘D</ContextMenuShortcut>
-        </ContextMenuItem>
-
-        <ContextMenuSub>
-          <ContextMenuSubTrigger>
-            <Plus className="w-4 h-4 mr-2" />
-            Add Step
-          </ContextMenuSubTrigger>
-          <ContextMenuSubContent>
-            <ContextMenuItem onClick={onAddStepBefore}>
-              Before this step
-            </ContextMenuItem>
-            <ContextMenuItem onClick={onAddStepAfter}>
-              After this step
-            </ContextMenuItem>
-          </ContextMenuSubContent>
-        </ContextMenuSub>
-
-        {!isSubworkflow && (
-          <ContextMenuItem onClick={onConvertToSubworkflow}>
-            <FolderOpen className="w-4 h-4 mr-2" />
-            Convert to Sub-workflow
-          </ContextMenuItem>
-        )}
-
-        <ContextMenuSeparator />
-
-        <ContextMenuItem onClick={onExecuteFrom}>
-          <Play className="w-4 h-4 mr-2" />
-          Execute from here
-        </ContextMenuItem>
-
-        {hasError && (
-          <ContextMenuItem className="text-error">
-            <AlertTriangle className="w-4 h-4 mr-2" />
-            View Error Details
-          </ContextMenuItem>
-        )}
-
-        <ContextMenuSeparator />
-
-        <ContextMenuItem destructive onClick={onDelete}>
-          <Trash2 className="w-4 h-4 mr-2" />
-          Delete
-          <ContextMenuShortcut>⌫</ContextMenuShortcut>
-        </ContextMenuItem>
-      </ContextMenuContent>
-    </ContextMenu>
-  );
-}
-
-// Canvas context menu (right-click on empty space)
-interface CanvasContextMenuProps {
-  children: React.ReactNode;
-  onAddStep: () => void;
-  onAddSubworkflow: () => void;
-  onPaste: () => void;
-  onAutoLayout: () => void;
-  onFitView: () => void;
-  canPaste: boolean;
-}
-
-export function CanvasContextMenu({
-  children,
-  onAddStep,
-  onAddSubworkflow,
-  onPaste,
-  onAutoLayout,
-  onFitView,
-  canPaste,
-}: CanvasContextMenuProps) {
-  return (
-    <ContextMenu>
-      {children}
-      <ContextMenuContent>
-        <ContextMenuItem onClick={onAddStep}>
-          <Plus className="w-4 h-4 mr-2" />
-          Add Step
-          <ContextMenuShortcut>N</ContextMenuShortcut>
-        </ContextMenuItem>
-
-        <ContextMenuItem onClick={onAddSubworkflow}>
-          <FolderOpen className="w-4 h-4 mr-2" />
-          Add Sub-workflow
-        </ContextMenuItem>
-
-        <ContextMenuSeparator />
-
-        <ContextMenuItem onClick={onPaste} disabled={!canPaste}>
-          <Copy className="w-4 h-4 mr-2" />
-          Paste
-          <ContextMenuShortcut>⌘V</ContextMenuShortcut>
-        </ContextMenuItem>
-
-        <ContextMenuSeparator />
-
-        <ContextMenuItem onClick={onAutoLayout}>
-          Auto-layout
-          <ContextMenuShortcut>⌘L</ContextMenuShortcut>
-        </ContextMenuItem>
-
-        <ContextMenuItem onClick={onFitView}>
-          Fit to View
-          <ContextMenuShortcut>⌘0</ContextMenuShortcut>
-        </ContextMenuItem>
-      </ContextMenuContent>
-    </ContextMenu>
-  );
-}

package/src/client/components/Canvas/OutputNode.tsx

@@ -1,111 +0,0 @@
-import { memo } from 'react';
-import { Handle, Position, type Node, type NodeProps } from '@xyflow/react';
-import { Flag, CheckCircle, XCircle, Clock } from 'lucide-react';
-
-export interface OutputNodeData extends Record<string, unknown> {
-  id: string;
-  name?: string;
-  description?: string;
-  variables?: string[];
-  status?: 'pending' | 'completed' | 'failed';
-  result?: unknown;
-}
-
-export type OutputNodeType = Node<OutputNodeData, 'output'>;
-
-function OutputNodeComponent({ data, selected }: NodeProps<OutputNodeType>) {
-  const statusConfig = {
-    pending: {
-      icon: Clock,
-      color: 'text-gray-400',
-      borderColor: 'border-gray-500',
-      bgColor: 'bg-gray-500/10',
-    },
-    completed: {
-      icon: CheckCircle,
-      color: 'text-success',
-      borderColor: 'border-success',
-      bgColor: 'bg-success/10',
-    },
-    failed: {
-      icon: XCircle,
-      color: 'text-error',
-      borderColor: 'border-error',
-      bgColor: 'bg-error/10',
-    },
-  };
-
-  const status = data.status || 'pending';
-  const config = statusConfig[status];
-  const StatusIcon = config.icon;
-
-  return (
-    <div
-      className={`min-w-[160px] rounded-lg border-2 ${config.borderColor} ${config.bgColor} ${
-        selected ? 'ring-2 ring-primary ring-offset-2 ring-offset-canvas-bg' : ''
-      } transition-all duration-200`}
-    >
-      {/* Input handle */}
-      <Handle
-        type="target"
-        position={Position.Top}
-        className="!w-3 !h-3 !bg-primary !border-2 !border-canvas-bg"
-      />
-
-      {/* Header */}
-      <div className="px-3 py-2 flex items-center gap-2">
-        <div className={`w-8 h-8 rounded-full ${config.bgColor} flex items-center justify-center`}>
-          <Flag className={`w-4 h-4 ${config.color}`} />
-        </div>
-        <div className="flex-1 min-w-0">
-          <div className="text-xs font-medium text-gray-400 uppercase tracking-wider">
-            Output
-          </div>
-          <div className="text-sm font-medium text-white truncate">
-            {data.name || 'Workflow End'}
-          </div>
-        </div>
-        <StatusIcon className={`w-4 h-4 ${config.color}`} />
-      </div>
-
-      {/* Variables */}
-      {data.variables && data.variables.length > 0 && (
-        <div className="px-3 py-2 border-t border-white/10">
-          <div className="text-xs text-gray-500 mb-1">Output Variables</div>
-          <div className="flex flex-wrap gap-1">
-            {data.variables.map((variable) => (
-              <code
-                key={variable}
-                className="px-1.5 py-0.5 bg-white/5 text-primary text-xs rounded"
-              >
-                {variable}
-              </code>
-            ))}
-          </div>
-        </div>
-      )}
-
-      {/* Description */}
-      {data.description && (
-        <div className="px-3 py-2 border-t border-white/10">
-          <div className="text-xs text-gray-400">{data.description}</div>
-        </div>
-      )}
-
-      {/* Result preview */}
-      {status === 'completed' && data.result !== undefined && (
-        <div className="px-3 py-2 border-t border-white/10">
-          <div className="text-xs text-gray-500 mb-1">Result</div>
-          <pre className="text-xs text-success font-mono bg-black/20 rounded p-1.5 overflow-x-auto max-h-20">
-            {typeof data.result === 'string'
-              ? data.result.slice(0, 100)
-              : JSON.stringify(data.result, null, 2).slice(0, 100)}
-            {(typeof data.result === 'string' ? data.result : JSON.stringify(data.result)).length > 100 && '...'}
-          </pre>
-        </div>
-      )}
-    </div>
-  );
-}
-
-export const OutputNode = memo(OutputNodeComponent);

package/src/client/components/Canvas/ParallelNode.tsx

@@ -1,140 +0,0 @@
-import { memo } from 'react';
-import { Handle, Position, type Node, type NodeProps } from '@xyflow/react';
-import { Layers, CheckCircle, XCircle, Clock } from 'lucide-react';
-
-export interface ParallelNodeData extends Record<string, unknown> {
-  id: string;
-  name?: string;
-  branches: Array<{ id: string; name?: string }>;
-  maxConcurrent?: number;
-  onError?: 'stop' | 'continue';
-  status?: 'pending' | 'running' | 'completed' | 'failed' | 'skipped';
-  activeBranches?: string[];
-  completedBranches?: string[];
-}
-
-export type ParallelNodeType = Node<ParallelNodeData, 'parallel'>;
-
-function ParallelNodeComponent({ data, selected }: NodeProps<ParallelNodeType>) {
-  const statusConfig: Record<
-    NonNullable<ParallelNodeData['status']>,
-    { icon: typeof Clock; color: string; bgColor: string; animate?: boolean }
-  > = {
-    pending: { icon: Clock, color: 'text-gray-400', bgColor: 'bg-gray-400/10' },
-    running: {
-      icon: Layers,
-      color: 'text-green-400',
-      bgColor: 'bg-green-400/10',
-      animate: true,
-    },
-    completed: {
-      icon: CheckCircle,
-      color: 'text-success',
-      bgColor: 'bg-success/10',
-    },
-    failed: { icon: XCircle, color: 'text-error', bgColor: 'bg-error/10' },
-    skipped: {
-      icon: XCircle,
-      color: 'text-gray-500',
-      bgColor: 'bg-gray-500/10',
-    },
-  };
-
-  const status = data.status || 'pending';
-  const config = statusConfig[status];
-  const StatusIcon = config.icon;
-
-  return (
-    <div
-      className={`control-flow-node parallel-node p-0 ${selected ? 'selected' : ''} ${status === 'running' ? 'running' : ''}`}
-      style={{
-        background: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
-      }}
-    >
-      {/* Input handle */}
-      <Handle
-        type="target"
-        position={Position.Top}
-        className="!w-3 !h-3 !bg-primary !border-2 !border-node-bg"
-      />
-
-      {/* Node header */}
-      <div className="flex items-center gap-3 p-3 border-b border-white/20">
-        <div className="w-8 h-8 rounded-lg bg-white/20 flex items-center justify-center">
-          <Layers className="w-5 h-5 text-white" />
-        </div>
-        <div className="flex-1 min-w-0">
-          <div className="text-sm font-medium text-white">
-            {data.name || 'Parallel'}
-          </div>
-          <div className="text-xs text-white/70">Concurrent Execution</div>
-        </div>
-        <div
-          className={`w-6 h-6 rounded-full ${config.bgColor} flex items-center justify-center`}
-        >
-          <StatusIcon
-            className={`w-4 h-4 ${config.color} ${config.animate ? 'animate-pulse' : ''}`}
-          />
-        </div>
-      </div>
-
-      {/* Node body */}
-      <div className="p-3 bg-white/10">
-        <div className="text-xs text-white/90 mb-3">
-          <span className="text-white/60">Branches:</span>{' '}
-          <span className="font-medium">{data.branches?.length || 0}</span>
-          {data.maxConcurrent && (
-            <>
-              {' '}
-              <span className="text-white/60">• Max Concurrent:</span>{' '}
-              <span className="font-medium">{data.maxConcurrent}</span>
-            </>
-          )}
-        </div>
-
-        {/* Branch indicators */}
-        <div className="flex flex-wrap gap-2 mb-3">
-          {data.branches?.slice(0, 6).map((branch) => {
-            const isActive = data.activeBranches?.includes(branch.id);
-            const isCompleted = data.completedBranches?.includes(branch.id);
-            return (
-              <div
-                key={branch.id}
-                className={`px-2 py-1 rounded text-xs font-medium transition-colors ${
-                  isCompleted
-                    ? 'bg-green-500/30 text-green-200'
-                    : isActive
-                      ? 'bg-blue-500/30 text-blue-200 animate-pulse'
-                      : 'bg-white/10 text-white/60'
-                }`}
-                title={branch.name || branch.id}
-              >
-                {branch.name || `B${branch.id.slice(-2)}`}
-              </div>
-            );
-          })}
-          {data.branches && data.branches.length > 6 && (
-            <div className="px-2 py-1 rounded text-xs font-medium bg-white/10 text-white/60">
-              +{data.branches.length - 6}
-            </div>
-          )}
-        </div>
-
-        {/* Error handling */}
-        <div className="text-xs text-white/50 flex items-center gap-1">
-          <span>On Error:</span>
-          <span className="font-medium">{data.onError || 'stop'}</span>
-        </div>
-      </div>
-
-      {/* Output handle */}
-      <Handle
-        type="source"
-        position={Position.Bottom}
-        className="!w-3 !h-3 !bg-primary !border-2 !border-node-bg"
-      />
-    </div>
-  );
-}
-
-export const ParallelNode = memo(ParallelNodeComponent);