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

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

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

@@ -1,161 +0,0 @@
-import { memo } from 'react';
-import { Handle, Position, type Node, type NodeProps } from '@xyflow/react';
-import { RotateCw, CheckCircle, XCircle, Clock, LogOut, AlertTriangle } 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;
-  earlyExit?: boolean;
-  exitReason?: 'break' | 'max_iterations' | 'error';
-}
-
-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' : ''} ${status === 'completed' ? 'completed' : ''} ${status === 'failed' ? 'failed' : ''}`}
-      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>
-
-        {/* Early exit indicator */}
-        {data.earlyExit && (
-          <div className="mb-3 p-2 bg-orange-500/20 border border-orange-500/30 rounded flex items-center gap-2">
-            {data.exitReason === 'max_iterations' ? (
-              <AlertTriangle className="w-4 h-4 text-orange-200" />
-            ) : (
-              <LogOut className="w-4 h-4 text-orange-200" />
-            )}
-            <span className="text-xs text-orange-200 font-medium">
-              {data.exitReason === 'break'
-                ? 'Loop exited early (break)'
-                : data.exitReason === 'max_iterations'
-                  ? 'Max iterations reached'
-                  : 'Loop stopped on error'}
-            </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}
-                {data.earlyExit && (
-                  <span className="ml-1 text-orange-300 text-[10px]">(stopped)</span>
-                )}
-              </span>
-            </div>
-            <div className="w-full bg-white/10 rounded-full h-1.5">
-              <div
-                className={`h-1.5 rounded-full transition-all ${data.earlyExit ? 'bg-orange-400' : 'bg-orange-500'}`}
-                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"
-      />
-
-      {/* Loop-back handle (left side for iteration feedback) */}
-      <Handle
-        id="loop-back"
-        type="source"
-        position={Position.Left}
-        className="!w-3 !h-3 !bg-orange-500 !border-2 !border-node-bg"
-        style={{ top: '50%', left: '-6px' }}
-      />
-    </div>
-  );
-}
-
-export const WhileNode = memo(WhileNodeComponent);

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

@@ -1,24 +0,0 @@
-// 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/components/Debug/VariableInspector.tsx

@@ -1,148 +0,0 @@
-/**
- * Variable Inspector Component
- * Displays JSON data with syntax highlighting and expand/collapse functionality
- */
-
-import { useState } from 'react';
-import { ChevronRight, ChevronDown, Copy, Check } from 'lucide-react';
-
-interface VariableInspectorProps {
-  data: unknown;
-  name?: string;
-  expanded?: boolean;
-}
-
-export function VariableInspector({ data, name, expanded = true }: VariableInspectorProps) {
-  return (
-    <div className="font-mono text-sm">
-      <JsonNode value={data} name={name} depth={0} initiallyExpanded={expanded} />
-    </div>
-  );
-}
-
-interface JsonNodeProps {
-  value: unknown;
-  name?: string;
-  depth: number;
-  initiallyExpanded?: boolean;
-}
-
-function JsonNode({ value, name, depth, initiallyExpanded = true }: JsonNodeProps) {
-  const [isExpanded, setIsExpanded] = useState(initiallyExpanded);
-  const [copied, setCopied] = useState(false);
-
-  const indent = depth * 16;
-  const isObject = value !== null && typeof value === 'object' && !Array.isArray(value);
-  const isArray = Array.isArray(value);
-  const isExpandable = isObject || isArray;
-
-  const handleCopy = () => {
-    navigator.clipboard.writeText(JSON.stringify(value, null, 2));
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
-  };
-
-  const getValueColor = (val: unknown): string => {
-    if (val === null) return 'text-gray-500';
-    if (typeof val === 'string') return 'text-green-400';
-    if (typeof val === 'number') return 'text-blue-400';
-    if (typeof val === 'boolean') return 'text-purple-400';
-    return 'text-gray-300';
-  };
-
-  const renderValue = (val: unknown): string => {
-    if (val === null) return 'null';
-    if (val === undefined) return 'undefined';
-    if (typeof val === 'string') return `"${val}"`;
-    if (typeof val === 'number' || typeof val === 'boolean') return String(val);
-    return '';
-  };
-
-  if (!isExpandable) {
-    return (
-      <div className="flex items-center gap-2 py-0.5 hover:bg-white/5 rounded px-1" style={{ paddingLeft: indent }}>
-        {name && (
-          <>
-            <span className="text-cyan-400">{name}</span>
-            <span className="text-gray-500">:</span>
-          </>
-        )}
-        <span className={getValueColor(value)}>{renderValue(value)}</span>
-      </div>
-    );
-  }
-
-  const entries = isArray
-    ? (value as unknown[]).map((v, i) => [String(i), v] as [string, unknown])
-    : Object.entries(value as Record<string, unknown>);
-
-  const preview = isArray
-    ? `Array(${entries.length})`
-    : `Object {${entries.length} ${entries.length === 1 ? 'key' : 'keys'}}`;
-
-  return (
-    <div>
-      <div
-        className="flex items-center gap-2 py-0.5 hover:bg-white/5 rounded px-1 cursor-pointer group"
-        style={{ paddingLeft: indent }}
-        onClick={() => setIsExpanded(!isExpanded)}
-      >
-        <button className="text-gray-500 hover:text-white">
-          {isExpanded ? (
-            <ChevronDown className="w-3 h-3" />
-          ) : (
-            <ChevronRight className="w-3 h-3" />
-          )}
-        </button>
-
-        {name && (
-          <>
-            <span className="text-cyan-400">{name}</span>
-            <span className="text-gray-500">:</span>
-          </>
-        )}
-
-        <span className="text-gray-500">
-          {isArray ? '[' : '{'}
-          {!isExpanded && <span className="text-gray-600 ml-1">{preview}</span>}
-        </span>
-
-        <button
-          onClick={(e) => {
-            e.stopPropagation();
-            handleCopy();
-          }}
-          className="ml-auto opacity-0 group-hover:opacity-100 transition-opacity"
-          title="Copy to clipboard"
-        >
-          {copied ? (
-            <Check className="w-3 h-3 text-green-400" />
-          ) : (
-            <Copy className="w-3 h-3 text-gray-500 hover:text-white" />
-          )}
-        </button>
-      </div>
-
-      {isExpanded && (
-        <>
-          {entries.map(([key, val]) => (
-            <JsonNode
-              key={key}
-              name={isArray ? undefined : key}
-              value={val}
-              depth={depth + 1}
-              initiallyExpanded={depth < 1}
-            />
-          ))}
-          <div className="text-gray-500 py-0.5 px-1" style={{ paddingLeft: indent }}>
-            {isArray ? ']' : '}'}
-          </div>
-        </>
-      )}
-
-      {!isExpanded && (
-        <div className="text-gray-500 inline">{isArray ? ']' : '}'}</div>
-      )}
-    </div>
-  );
-}