@marktoflow/gui 2.0.0-alpha.12 → 2.0.0-alpha.13

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

@@ -1,157 +0,0 @@
-import { memo } from 'react';
-import { Handle, Position, type Node, type NodeProps } from '@xyflow/react';
-import { Layers, CheckCircle, XCircle, Clock, AlertTriangle } 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[];
-  failedBranches?: string[];
-  maxConcurrentExceeded?: boolean;
-}
-
-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' : ''} ${status === 'completed' ? 'completed' : ''} ${status === 'failed' ? 'failed' : ''}`}
-      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">
-        {/* Max concurrent warning */}
-        {data.maxConcurrentExceeded && (
-          <div className="mb-3 p-2 bg-yellow-500/20 border border-yellow-500/30 rounded flex items-center gap-2">
-            <AlertTriangle className="w-4 h-4 text-yellow-200" />
-            <span className="text-xs text-yellow-200 font-medium">
-              Rate limiting active
-            </span>
-          </div>
-        )}
-
-        <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.maxConcurrentExceeded ? 'text-yellow-300' : ''}`}>
-                {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);
-            const isFailed = data.failedBranches?.includes(branch.id);
-            return (
-              <div
-                key={branch.id}
-                className={`px-2 py-1 rounded text-xs font-medium transition-colors ${
-                  isFailed
-                    ? 'bg-red-500/30 text-red-200'
-                    : 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);

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

@@ -1,106 +0,0 @@
-import { memo } from 'react';
-import { Handle, Position, type Node, type NodeProps } from '@xyflow/react';
-import { Play, CheckCircle, XCircle, Clock, AlertCircle } from 'lucide-react';
-import { getServiceIcon } from '../../utils/serviceIcons';
-
-export interface StepNodeData extends Record<string, unknown> {
-  id: string;
-  name?: string;
-  action: string;
-  status?: 'pending' | 'running' | 'completed' | 'failed' | 'skipped';
-  retryCount?: number;
-  error?: string;
-}
-
-export type StepNodeType = Node<StepNodeData, 'step'>;
-
-function StepNodeComponent({ data, selected }: NodeProps<StepNodeType>) {
-  const serviceName = data.action?.split('.')[0] || 'unknown';
-  const methodName = data.action?.split('.').slice(1).join('.') || data.action;
-  const ServiceIcon = getServiceIcon(serviceName);
-
-  const statusConfig: Record<
-    NonNullable<StepNodeData['status']>,
-    { icon: typeof Clock; color: string; bgColor: string; animate?: boolean }
-  > = {
-    pending: { icon: Clock, color: 'text-gray-400', bgColor: 'bg-gray-400/10' },
-    running: {
-      icon: Play,
-      color: 'text-warning',
-      bgColor: 'bg-warning/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: AlertCircle,
-      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={`step-node p-0 ${selected ? 'selected' : ''} ${status === 'running' ? 'running' : ''} ${status === 'completed' ? 'completed' : ''} ${status === 'failed' ? 'failed' : ''}`}
-    >
-      {/* 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-node-border">
-        <div className="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center">
-          <ServiceIcon className="w-5 h-5 text-primary" />
-        </div>
-        <div className="flex-1 min-w-0">
-          <div className="text-sm font-medium text-white truncate">
-            {data.name || data.id}
-          </div>
-          <div className="text-xs text-gray-400 truncate">{serviceName}</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">
-        <div className="text-xs text-gray-300 font-mono truncate">
-          {methodName}
-        </div>
-        {data.retryCount && data.retryCount > 0 && (
-          <div className="mt-2 text-xs text-warning">
-            Retry #{data.retryCount}
-          </div>
-        )}
-        {data.error && (
-          <div className="mt-2 text-xs text-error truncate">{data.error}</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 StepNode = memo(StepNodeComponent);

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

@@ -1,141 +0,0 @@
-import { memo, useState, useCallback } from 'react';
-import { Handle, Position, type Node, type NodeProps } from '@xyflow/react';
-import {
-  FolderOpen,
-  ChevronDown,
-  ChevronRight,
-  ExternalLink,
-  ArrowRight,
-} from 'lucide-react';
-import { useNavigationStore } from '../../stores/navigationStore';
-import { useWorkflowStore } from '../../stores/workflowStore';
-
-export interface SubWorkflowNodeData extends Record<string, unknown> {
-  id: string;
-  name?: string;
-  workflowPath: string;
-  stepCount?: number;
-  status?: 'pending' | 'running' | 'completed' | 'failed';
-}
-
-export type SubWorkflowNodeType = Node<SubWorkflowNodeData, 'subworkflow'>;
-
-function SubWorkflowNodeComponent({
-  data,
-  selected,
-}: NodeProps<SubWorkflowNodeType>) {
-  const [expanded, setExpanded] = useState(false);
-  const { pushWorkflow, breadcrumbs, setRootWorkflow } = useNavigationStore();
-  const { loadWorkflow, selectedWorkflow, currentWorkflow } = useWorkflowStore();
-
-  // Handle drilling down into sub-workflow
-  const handleDrillDown = useCallback(() => {
-    // If this is the first navigation, set the current workflow as root
-    if (breadcrumbs.length === 0 && selectedWorkflow && currentWorkflow) {
-      setRootWorkflow({
-        id: selectedWorkflow,
-        name: currentWorkflow.metadata?.name || 'Main Workflow',
-        path: selectedWorkflow,
-      });
-    }
-
-    // Push the sub-workflow onto the navigation stack
-    pushWorkflow({
-      id: data.id,
-      name: data.name || data.id,
-      path: data.workflowPath,
-    });
-
-    // Load the sub-workflow
-    loadWorkflow(data.workflowPath);
-  }, [data, pushWorkflow, breadcrumbs, setRootWorkflow, selectedWorkflow, currentWorkflow, loadWorkflow]);
-
-  const statusColors = {
-    pending: 'border-node-border',
-    running: 'border-warning',
-    completed: 'border-success',
-    failed: 'border-error',
-  };
-
-  const status = data.status || 'pending';
-
-  return (
-    <div
-      className={`step-node p-0 min-w-[250px] ${selected ? 'selected' : ''} ${statusColors[status]}`}
-    >
-      {/* Input handle */}
-      <Handle
-        type="target"
-        position={Position.Top}
-        className="!w-3 !h-3 !bg-info !border-2 !border-node-bg"
-      />
-
-      {/* Node header */}
-      <div className="flex items-center gap-3 p-3 border-b border-node-border bg-info/5">
-        <button
-          onClick={() => setExpanded(!expanded)}
-          className="w-6 h-6 rounded flex items-center justify-center hover:bg-white/10 transition-colors"
-        >
-          {expanded ? (
-            <ChevronDown className="w-4 h-4 text-info" />
-          ) : (
-            <ChevronRight className="w-4 h-4 text-info" />
-          )}
-        </button>
-        <div className="w-8 h-8 rounded-lg bg-info/10 flex items-center justify-center">
-          <FolderOpen className="w-5 h-5 text-info" />
-        </div>
-        <div className="flex-1 min-w-0">
-          <div className="text-sm font-medium text-white truncate">
-            {data.name || data.id}
-          </div>
-          <div className="text-xs text-gray-400">Sub-workflow</div>
-        </div>
-        <button
-          onClick={handleDrillDown}
-          className="w-6 h-6 rounded flex items-center justify-center hover:bg-info/20 transition-colors"
-          title="Drill into sub-workflow"
-        >
-          <ArrowRight className="w-4 h-4 text-info" />
-        </button>
-      </div>
-
-      {/* Node body */}
-      <div className="p-3">
-        <div className="text-xs text-gray-400 font-mono truncate">
-          {data.workflowPath}
-        </div>
-        {data.stepCount !== undefined && (
-          <div className="mt-2 flex items-center gap-2">
-            <span className="text-xs px-2 py-0.5 rounded-full bg-info/10 text-info">
-              {data.stepCount} steps
-            </span>
-          </div>
-        )}
-      </div>
-
-      {/* Expanded content */}
-      {expanded && (
-        <div className="border-t border-node-border p-3 bg-black/20">
-          <button
-            onClick={handleDrillDown}
-            className="w-full flex items-center justify-center gap-2 px-3 py-2 bg-info/10 hover:bg-info/20 rounded text-sm text-info transition-colors"
-          >
-            <FolderOpen className="w-4 h-4" />
-            Open Sub-workflow
-            <ArrowRight className="w-4 h-4" />
-          </button>
-        </div>
-      )}
-
-      {/* Output handle */}
-      <Handle
-        type="source"
-        position={Position.Bottom}
-        className="!w-3 !h-3 !bg-info !border-2 !border-node-bg"
-      />
-    </div>
-  );
-}
-
-export const SubWorkflowNode = memo(SubWorkflowNodeComponent);

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

@@ -1,185 +0,0 @@
-import { memo } from 'react';
-import { Handle, Position, type Node, type NodeProps } from '@xyflow/react';
-import { GitFork, CheckCircle, XCircle, Clock } from 'lucide-react';
-
-export interface SwitchNodeData extends Record<string, unknown> {
-  id: string;
-  name?: string;
-  expression: string;
-  cases: Record<string, unknown>;
-  hasDefault?: boolean;
-  status?: 'pending' | 'running' | 'completed' | 'failed' | 'skipped';
-  activeCase?: string | null;
-  skippedBranches?: string[];
-}
-
-export type SwitchNodeType = Node<SwitchNodeData, 'switch'>;
-
-function SwitchNodeComponent({ data, selected }: NodeProps<SwitchNodeType>) {
-  const statusConfig: Record<
-    NonNullable<SwitchNodeData['status']>,
-    { icon: typeof Clock; color: string; bgColor: string; animate?: boolean }
-  > = {
-    pending: { icon: Clock, color: 'text-gray-400', bgColor: 'bg-gray-400/10' },
-    running: {
-      icon: GitFork,
-      color: 'text-purple-400',
-      bgColor: 'bg-purple-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;
-
-  const caseKeys = Object.keys(data.cases || {});
-  const displayCases = caseKeys.slice(0, 4); // Show up to 4 cases
-  const hasMore = caseKeys.length > 4;
-
-  // Calculate handle positions to avoid overlap
-  const totalHandles = Math.min(caseKeys.length, 4) + (data.hasDefault ? 1 : 0);
-  const getHandlePosition = (index: number) => {
-    if (totalHandles === 1) return 50;
-    return ((index + 1) / (totalHandles + 1)) * 100;
-  };
-
-  return (
-    <div
-      className={`control-flow-node switch-node p-0 ${selected ? 'selected' : ''} ${status === 'running' ? 'running' : ''} ${status === 'completed' ? 'completed' : ''} ${status === 'failed' ? 'failed' : ''}`}
-      style={{
-        background: 'linear-gradient(135deg, #a855f7 0%, #ec4899 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">
-          <GitFork 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 || 'Switch'}
-          </div>
-          <div className="text-xs text-white/70">Multi-Branch Router</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">Expression:</span>{' '}
-          <span className="font-mono">{data.expression || 'Not set'}</span>
-        </div>
-
-        {/* Case list */}
-        <div className="space-y-2">
-          <div className="text-xs text-white/70 font-medium mb-1">Cases:</div>
-          {displayCases.map((caseKey, index) => {
-            const isActive = data.activeCase === caseKey;
-            const isSkipped = data.skippedBranches?.includes(caseKey);
-            const handlePosition = getHandlePosition(index);
-
-            return (
-              <div key={caseKey} className="relative">
-                <div
-                  className={`text-xs px-2 py-1.5 rounded font-medium transition-colors relative ${
-                    isActive
-                      ? 'bg-purple-500/30 text-purple-200 ring-1 ring-purple-400/50'
-                      : isSkipped
-                        ? 'bg-gray-500/20 text-gray-400 line-through'
-                        : 'bg-white/5 text-white/70'
-                  }`}
-                >
-                  {caseKey}
-                  {isSkipped && (
-                    <span className="ml-2 text-[8px] px-1 py-0.5 rounded bg-gray-500/30">
-                      SKIPPED
-                    </span>
-                  )}
-                </div>
-              </div>
-            );
-          })}
-
-          {hasMore && (
-            <div className="text-xs px-2 py-1 rounded bg-white/5 text-white/60 text-center">
-              +{caseKeys.length - 4} more cases
-            </div>
-          )}
-
-          {/* Default case */}
-          {data.hasDefault && (
-            <div className="relative">
-              <div
-                className={`text-xs px-2 py-1.5 rounded font-medium transition-colors ${
-                  data.activeCase === 'default'
-                    ? 'bg-gray-500/30 text-gray-200 ring-1 ring-gray-400/50'
-                    : 'bg-white/5 text-white/70'
-                }`}
-              >
-                default
-              </div>
-            </div>
-          )}
-        </div>
-
-        {/* Case count */}
-        <div className="mt-3 text-xs text-white/50 flex items-center gap-2">
-          <span>ℹ️</span>
-          <span>
-            {caseKeys.length} case{caseKeys.length !== 1 ? 's' : ''}
-            {data.hasDefault ? ' + default' : ''}
-          </span>
-        </div>
-      </div>
-
-      {/* Output handles - positioned independently to avoid overlap */}
-      {displayCases.map((caseKey, index) => (
-        <Handle
-          key={`handle-${caseKey}`}
-          type="source"
-          position={Position.Bottom}
-          id={`case-${caseKey}`}
-          style={{ left: `${getHandlePosition(index)}%` }}
-          className="!w-2.5 !h-2.5 !bg-purple-400 !border-2 !border-node-bg"
-        />
-      ))}
-      {data.hasDefault && (
-        <Handle
-          type="source"
-          position={Position.Bottom}
-          id="case-default"
-          style={{ left: `${getHandlePosition(displayCases.length)}%` }}
-          className="!w-2.5 !h-2.5 !bg-gray-400 !border-2 !border-node-bg"
-        />
-      )}
-    </div>
-  );
-}
-
-export const SwitchNode = memo(SwitchNodeComponent);