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

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

@@ -0,0 +1,185 @@
+import { memo } from 'react';
+import { Handle, Position, type Node, type NodeProps } from '@xyflow/react';
+import {
+  ArrowRight,
+  Filter,
+  Minimize2,
+  CheckCircle,
+  XCircle,
+  Clock,
+} from 'lucide-react';
+
+export interface TransformNodeData extends Record<string, unknown> {
+  id: string;
+  name?: string;
+  transformType: 'map' | 'filter' | 'reduce';
+  items: string;
+  itemVariable?: string;
+  expression?: string;
+  condition?: string;
+  accumulatorVariable?: string;
+  initialValue?: unknown;
+  status?: 'pending' | 'running' | 'completed' | 'failed' | 'skipped';
+  inputCount?: number;
+  outputCount?: number;
+}
+
+export type TransformNodeType = Node<TransformNodeData, 'map' | 'filter' | 'reduce'>;
+
+function TransformNodeComponent({ data, selected }: NodeProps<TransformNodeType>) {
+  const transformConfig: Record<
+    NonNullable<TransformNodeData['transformType']>,
+    { icon: typeof ArrowRight; label: string; color: string }
+  > = {
+    map: { icon: ArrowRight, label: 'Map', color: '#14b8a6' },
+    filter: { icon: Filter, label: 'Filter', color: '#10b981' },
+    reduce: { icon: Minimize2, label: 'Reduce', color: '#06b6d4' },
+  };
+
+  const statusConfig: Record<
+    NonNullable<TransformNodeData['status']>,
+    { icon: typeof Clock; color: string; bgColor: string; animate?: boolean }
+  > = {
+    pending: { icon: Clock, color: 'text-gray-400', bgColor: 'bg-gray-400/10' },
+    running: {
+      icon: transformConfig[data.transformType].icon,
+      color: 'text-teal-400',
+      bgColor: 'bg-teal-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 statusCfg = statusConfig[status];
+  const StatusIcon = statusCfg.icon;
+
+  const transformCfg = transformConfig[data.transformType];
+  const TransformIcon = transformCfg.icon;
+
+  const displayExpression =
+    data.transformType === 'filter'
+      ? data.condition
+      : data.transformType === 'reduce'
+        ? `${data.accumulatorVariable || 'acc'}: ${data.expression || 'Not set'}`
+        : data.expression;
+
+  return (
+    <div
+      className={`control-flow-node transform-node p-0 ${selected ? 'selected' : ''} ${status === 'running' ? 'running' : ''}`}
+      style={{
+        background: 'linear-gradient(135deg, #14b8a6 0%, #06b6d4 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">
+          <TransformIcon 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 || transformCfg.label}
+          </div>
+          <div className="text-xs text-white/70">Transform</div>
+        </div>
+        <div
+          className={`w-6 h-6 rounded-full ${statusCfg.bgColor} flex items-center justify-center`}
+        >
+          <StatusIcon
+            className={`w-4 h-4 ${statusCfg.color} ${statusCfg.animate ? 'animate-pulse' : ''}`}
+          />
+        </div>
+      </div>
+
+      {/* Node body */}
+      <div className="p-3 bg-white/10">
+        {/* Items source */}
+        <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>
+
+        {/* Variable */}
+        <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>
+
+        {/* Expression/Condition */}
+        <div className="mb-3 p-2 bg-white/5 rounded">
+          <div className="text-xs text-white/60 mb-1">
+            {data.transformType === 'filter'
+              ? 'Condition'
+              : data.transformType === 'reduce'
+                ? 'Reducer'
+                : 'Expression'}
+          </div>
+          <div className="text-xs text-white font-mono break-all">
+            {displayExpression || 'Not set'}
+          </div>
+        </div>
+
+        {/* Initial value for reduce */}
+        {data.transformType === 'reduce' && data.initialValue !== undefined && (
+          <div className="text-xs text-white/90 mb-3">
+            <span className="text-white/60">Initial:</span>{' '}
+            <span className="font-mono">{JSON.stringify(data.initialValue)}</span>
+          </div>
+        )}
+
+        {/* Input/Output count */}
+        {(data.inputCount !== undefined || data.outputCount !== undefined) && (
+          <div className="mt-3 p-2 bg-white/5 rounded flex items-center justify-between">
+            <div className="text-xs">
+              <span className="text-white/60">In:</span>{' '}
+              <span className="text-white font-medium">{data.inputCount ?? '?'}</span>
+            </div>
+            <div className="text-white/40">→</div>
+            <div className="text-xs">
+              <span className="text-white/60">Out:</span>{' '}
+              <span className="text-white font-medium">{data.outputCount ?? '?'}</span>
+            </div>
+          </div>
+        )}
+
+        {/* Transform type indicator */}
+        <div className="mt-3 text-xs text-white/50 flex items-center gap-2">
+          <span>ℹ️</span>
+          <span>
+            {data.transformType === 'map'
+              ? 'Transforms each item'
+              : data.transformType === 'filter'
+                ? 'Selects matching items'
+                : 'Aggregates to single value'}
+          </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 TransformNode = memo(TransformNodeComponent);

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

@@ -0,0 +1,164 @@
+import { memo } from 'react';
+import { Handle, Position, type Node, type NodeProps } from '@xyflow/react';
+import { Shield, CheckCircle, XCircle, Clock, AlertTriangle } from 'lucide-react';
+
+export interface TryCatchNodeData extends Record<string, unknown> {
+  id: string;
+  name?: string;
+  hasCatch?: boolean;
+  hasFinally?: boolean;
+  status?: 'pending' | 'running' | 'completed' | 'failed' | 'skipped';
+  activeBranch?: 'try' | 'catch' | 'finally' | null;
+  errorOccurred?: boolean;
+}
+
+export type TryCatchNodeType = Node<TryCatchNodeData, 'try'>;
+
+function TryCatchNodeComponent({ data, selected }: NodeProps<TryCatchNodeType>) {
+  const statusConfig: Record<
+    NonNullable<TryCatchNodeData['status']>,
+    { icon: typeof Clock; color: string; bgColor: string; animate?: boolean }
+  > = {
+    pending: { icon: Clock, color: 'text-gray-400', bgColor: 'bg-gray-400/10' },
+    running: {
+      icon: Shield,
+      color: 'text-yellow-400',
+      bgColor: 'bg-yellow-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 try-catch-node p-0 ${selected ? 'selected' : ''} ${status === 'running' ? 'running' : ''}`}
+      style={{
+        background: 'linear-gradient(135deg, #fbbf24 0%, #f59e0b 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">
+          <Shield 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 || 'Try/Catch'}
+          </div>
+          <div className="text-xs text-white/70">Error Handling</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">
+        {/* Error indicator */}
+        {data.errorOccurred && (
+          <div className="mb-3 p-2 bg-red-500/20 border border-red-500/30 rounded flex items-center gap-2">
+            <AlertTriangle className="w-4 h-4 text-red-200" />
+            <span className="text-xs text-red-200 font-medium">Error occurred</span>
+          </div>
+        )}
+
+        {/* Branch indicators */}
+        <div className="space-y-2">
+          <div
+            className={`text-center p-2 rounded text-xs font-medium transition-colors ${
+              data.activeBranch === 'try'
+                ? 'bg-blue-500/30 text-blue-200 ring-1 ring-blue-400/50'
+                : 'bg-white/5 text-white/60'
+            }`}
+          >
+            ✓ Try
+          </div>
+
+          {data.hasCatch && (
+            <div
+              className={`text-center p-2 rounded text-xs font-medium transition-colors ${
+                data.activeBranch === 'catch'
+                  ? 'bg-red-500/30 text-red-200 ring-1 ring-red-400/50'
+                  : 'bg-white/5 text-white/60'
+              }`}
+            >
+              ⚠ Catch
+            </div>
+          )}
+
+          {data.hasFinally && (
+            <div
+              className={`text-center p-2 rounded text-xs font-medium transition-colors ${
+                data.activeBranch === 'finally'
+                  ? 'bg-purple-500/30 text-purple-200 ring-1 ring-purple-400/50'
+                  : 'bg-white/5 text-white/60'
+              }`}
+            >
+              ⟳ Finally
+            </div>
+          )}
+        </div>
+
+        {/* Info */}
+        <div className="mt-3 text-xs text-white/50 flex items-center gap-2">
+          <span>ℹ️</span>
+          <span>Finally always executes</span>
+        </div>
+      </div>
+
+      {/* Output handles */}
+      <Handle
+        type="source"
+        position={Position.Bottom}
+        id="try"
+        style={{ left: '25%' }}
+        className="!w-2.5 !h-2.5 !bg-blue-500 !border-2 !border-node-bg"
+      />
+      {data.hasCatch && (
+        <Handle
+          type="source"
+          position={Position.Bottom}
+          id="catch"
+          style={{ left: '50%' }}
+          className="!w-2.5 !h-2.5 !bg-red-500 !border-2 !border-node-bg"
+        />
+      )}
+      {data.hasFinally && (
+        <Handle
+          type="source"
+          position={Position.Bottom}
+          id="finally"
+          style={{ left: '75%' }}
+          className="!w-2.5 !h-2.5 !bg-purple-500 !border-2 !border-node-bg"
+        />
+      )}
+    </div>
+  );
+}
+
+export const TryCatchNode = memo(TryCatchNodeComponent);

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

@@ -0,0 +1,129 @@
+import { memo } from 'react';
+import { Handle, Position, type Node, type NodeProps } from '@xyflow/react';
+import { RotateCw, CheckCircle, XCircle, Clock } from 'lucide-react';
+
+export interface WhileNodeData extends Record<string, unknown> {
+  id: string;
+  name?: string;
+  condition: string;
+  maxIterations?: number;
+  status?: 'pending' | 'running' | 'completed' | 'failed' | 'skipped';
+  currentIteration?: number;
+}
+
+export type WhileNodeType = Node<WhileNodeData, 'while'>;
+
+function WhileNodeComponent({ data, selected }: NodeProps<WhileNodeType>) {
+  const statusConfig: Record<
+    NonNullable<WhileNodeData['status']>,
+    { icon: typeof Clock; color: string; bgColor: string; animate?: boolean }
+  > = {
+    pending: { icon: Clock, color: 'text-gray-400', bgColor: 'bg-gray-400/10' },
+    running: {
+      icon: RotateCw,
+      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 while-node p-0 ${selected ? 'selected' : ''} ${status === 'running' ? 'running' : ''}`}
+      style={{
+        background: 'linear-gradient(135deg, #fb923c 0%, #f97316 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">
+          <RotateCw 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 || 'While'}
+          </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-3">
+          <span className="text-white/60">Condition:</span>{' '}
+          <span className="font-mono">{data.condition || 'Not set'}</span>
+        </div>
+
+        {/* Max iterations */}
+        <div className="text-xs text-white/90 mb-3">
+          <span className="text-white/60">Max Iterations:</span>{' '}
+          <span className="font-medium">{data.maxIterations || 100}</span>
+        </div>
+
+        {/* Current iteration counter */}
+        {data.currentIteration !== 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">Iterations</span>
+              <span className="text-xs text-white font-medium">
+                {data.currentIteration} / {data.maxIterations || 100}
+              </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 / (data.maxIterations || 100)) * 100}%`,
+                }}
+              />
+            </div>
+          </div>
+        )}
+
+        {/* Loop metadata */}
+        <div className="mt-3 text-xs text-white/50 flex items-center gap-2">
+          <span>⚠️</span>
+          <span>Exits when condition becomes false</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 WhileNode = memo(WhileNodeComponent);

package/src/client/components/Canvas/index.ts

@@ -0,0 +1,24 @@
+// Export all canvas components
+export { Canvas } from './Canvas';
+export { StepNode } from './StepNode';
+export { SubWorkflowNode } from './SubWorkflowNode';
+export { TriggerNode } from './TriggerNode';
+export { OutputNode } from './OutputNode';
+
+// Control flow nodes
+export { IfElseNode } from './IfElseNode';
+export { ForEachNode } from './ForEachNode';
+export { WhileNode } from './WhileNode';
+export { SwitchNode } from './SwitchNode';
+export { ParallelNode } from './ParallelNode';
+export { TryCatchNode } from './TryCatchNode';
+export { TransformNode } from './TransformNode';
+
+// Export types
+export type { IfElseNodeData, IfElseNodeType } from './IfElseNode';
+export type { ForEachNodeData, ForEachNodeType } from './ForEachNode';
+export type { WhileNodeData, WhileNodeType } from './WhileNode';
+export type { SwitchNodeData, SwitchNodeType } from './SwitchNode';
+export type { ParallelNodeData, ParallelNodeType } from './ParallelNode';
+export type { TryCatchNodeData, TryCatchNodeType } from './TryCatchNode';
+export type { TransformNodeData, TransformNodeType } from './TransformNode';

package/src/client/utils/serviceIcons.tsx

@@ -12,6 +12,15 @@ import {
   Bot,
   Zap,
   HelpCircle,
+  Phone,
+  Send,
+  ShoppingCart,
+  Headphones,
+  Users,
+  CheckSquare,
+  Cloud,
+  HardDrive,
+  CreditCard,
 } from 'lucide-react';
 
 type IconComponent = React.ComponentType<{ className?: string }>;
@@ -34,6 +43,18 @@ const serviceIcons: Record<string, IconComponent> = {
   webhook: Zap,
   schedule: Calendar,
   trigger: Zap,
+  stripe: CreditCard,
+  teams: Users,
+  twilio: Phone,
+  sendgrid: Send,
+  shopify: ShoppingCart,
+  zendesk: Headphones,
+  mailchimp: Mail,
+  asana: CheckSquare,
+  trello: Trello,
+  dropbox: Cloud,
+  's3': HardDrive,
+  'aws-s3': HardDrive,
 };
 
 export function getServiceIcon(serviceName: string): IconComponent {
@@ -57,6 +78,18 @@ export function getServiceColor(serviceName: string): string {
     claude: '#CC785C',
     opencode: '#00A67E',
     ollama: '#1a1a2e',
+    stripe: '#635BFF',
+    teams: '#6264A7',
+    twilio: '#F22F46',
+    sendgrid: '#1A82E2',
+    shopify: '#96BF48',
+    zendesk: '#03363D',
+    mailchimp: '#FFE01B',
+    asana: '#F06A6A',
+    trello: '#0079BF',
+    dropbox: '#0061FF',
+    's3': '#FF9900',
+    'aws-s3': '#FF9900',
   };
 
   const normalizedName = serviceName.toLowerCase().split('.')[0];

package/src/server/index.ts

@@ -51,7 +51,7 @@ export async function startServer(options: ServerOptions = {}): Promise<Server>
 
   // Health check
   app.get('/api/health', (_req, res) => {
-    res.json({ status: 'ok', version: '2.0.0-alpha.1' });
+    res.json({ status: 'ok', version: '2.0.0-alpha.2' });
   });
 
   // Serve static files if static dir is provided