@marktoflow/gui 2.0.0-alpha.1 → 2.0.0-alpha.2

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

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

@@ -0,0 +1,126 @@
+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/ParallelNode.tsx

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

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

@@ -0,0 +1,164 @@
+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;
+}
+
+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;
+
+  return (
+    <div
+      className={`control-flow-node switch-node p-0 ${selected ? 'selected' : ''} ${status === 'running' ? 'running' : ''}`}
+      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 handlePosition = ((index + 1) / (displayCases.length + (data.hasDefault ? 2 : 1))) * 100;
+
+            return (
+              <div key={caseKey} className="relative">
+                <div
+                  className={`text-xs px-2 py-1.5 rounded font-medium transition-colors ${
+                    isActive
+                      ? 'bg-purple-500/30 text-purple-200 ring-1 ring-purple-400/50'
+                      : 'bg-white/5 text-white/70'
+                  }`}
+                >
+                  {caseKey}
+                </div>
+                {/* Output handle for this case */}
+                <Handle
+                  type="source"
+                  position={Position.Bottom}
+                  id={`case-${caseKey}`}
+                  style={{ left: `${handlePosition}%` }}
+                  className="!w-2.5 !h-2.5 !bg-purple-400 !border-2 !border-node-bg"
+                />
+              </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>
+              {/* Output handle for default */}
+              <Handle
+                type="source"
+                position={Position.Bottom}
+                id="case-default"
+                style={{ left: '95%' }}
+                className="!w-2.5 !h-2.5 !bg-gray-400 !border-2 !border-node-bg"
+              />
+            </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>
+    </div>
+  );
+}
+
+export const SwitchNode = memo(SwitchNodeComponent);