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

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

@@ -1,227 +0,0 @@
-import { useState, useEffect } from 'react';
-import {
-  Plus,
-  Play,
-  Pause,
-  Layout,
-  ZoomIn,
-  ZoomOut,
-  Maximize,
-  Save,
-  Undo,
-  Redo,
-  Copy,
-  Trash2,
-  Bot,
-  ChevronDown,
-} from 'lucide-react';
-import { useCanvas } from '../../hooks/useCanvas';
-import { useEditorStore } from '../../stores/editorStore';
-import { useReactFlow } from '@xyflow/react';
-import { getModKey } from '../../utils/platform';
-import { useAgentStore } from '../../stores/agentStore';
-import { ProviderSwitcher } from '../Settings/ProviderSwitcher';
-
-interface ToolbarProps {
-  onAddStep: () => void;
-  onExecute?: () => void;
-  onSave?: () => void;
-  isExecuting?: boolean;
-}
-
-export function Toolbar({
-  onAddStep,
-  onExecute,
-  onSave,
-  isExecuting = false,
-}: ToolbarProps) {
-  const { autoLayout, fitView, selectedNodes, deleteSelected, duplicateSelected } =
-    useCanvas();
-  const { undo, redo, undoStack, redoStack } = useEditorStore();
-  const { zoomIn, zoomOut } = useReactFlow();
-  const modKey = getModKey();
-  const { providers, activeProviderId, loadProviders } = useAgentStore();
-  const [showProviderSwitcher, setShowProviderSwitcher] = useState(false);
-
-  const canUndo = undoStack.length > 0;
-  const canRedo = redoStack.length > 0;
-  const hasSelection = selectedNodes.length > 0;
-
-  // Load providers on mount
-  useEffect(() => {
-    loadProviders();
-  }, [loadProviders]);
-
-  const activeProvider = providers.find((p) => p.id === activeProviderId);
-
-  return (
-    <div className="absolute top-4 left-1/2 -translate-x-1/2 z-10 flex items-center gap-1 px-2 py-1.5 bg-panel-bg/95 backdrop-blur border border-node-border rounded-lg shadow-lg">
-      {/* Add Step */}
-      <ToolbarButton
-        icon={<Plus className="w-4 h-4" />}
-        label="Add Step"
-        onClick={onAddStep}
-        shortcut="N"
-      />
-
-      <ToolbarDivider />
-
-      {/* Undo/Redo */}
-      <ToolbarButton
-        icon={<Undo className="w-4 h-4" />}
-        label="Undo"
-        onClick={() => undo()}
-        disabled={!canUndo}
-        shortcut={`${modKey}Z`}
-      />
-      <ToolbarButton
-        icon={<Redo className="w-4 h-4" />}
-        label="Redo"
-        onClick={() => redo()}
-        disabled={!canRedo}
-        shortcut={`${modKey}⇧Z`}
-      />
-
-      <ToolbarDivider />
-
-      {/* Selection actions */}
-      <ToolbarButton
-        icon={<Copy className="w-4 h-4" />}
-        label="Duplicate"
-        onClick={duplicateSelected}
-        disabled={!hasSelection}
-        shortcut={`${modKey}D`}
-      />
-      <ToolbarButton
-        icon={<Trash2 className="w-4 h-4" />}
-        label="Delete"
-        onClick={deleteSelected}
-        disabled={!hasSelection}
-        shortcut="⌫"
-      />
-
-      <ToolbarDivider />
-
-      {/* Layout & Zoom */}
-      <ToolbarButton
-        icon={<Layout className="w-4 h-4" />}
-        label="Auto Layout"
-        onClick={autoLayout}
-        shortcut={`${modKey}L`}
-      />
-      <ToolbarButton
-        icon={<ZoomIn className="w-4 h-4" />}
-        label="Zoom In"
-        onClick={() => zoomIn()}
-        shortcut={`${modKey}+`}
-      />
-      <ToolbarButton
-        icon={<ZoomOut className="w-4 h-4" />}
-        label="Zoom Out"
-        onClick={() => zoomOut()}
-        shortcut={`${modKey}-`}
-      />
-      <ToolbarButton
-        icon={<Maximize className="w-4 h-4" />}
-        label="Fit View"
-        onClick={fitView}
-        shortcut={`${modKey}0`}
-      />
-
-      <ToolbarDivider />
-
-      {/* AI Provider */}
-      <button
-        onClick={() => setShowProviderSwitcher(true)}
-        className="flex items-center gap-1.5 px-2 py-1.5 rounded text-sm text-gray-300 hover:text-white hover:bg-white/10 transition-colors"
-        title="Select AI Provider"
-      >
-        <Bot className="w-4 h-4" />
-        <span className="hidden sm:inline text-xs">
-          {activeProvider?.name || 'No Provider'}
-        </span>
-        <ChevronDown className="w-3 h-3" />
-      </button>
-
-      {/* Execute */}
-      {onExecute && (
-        <>
-          <ToolbarDivider />
-          <ToolbarButton
-            icon={
-              isExecuting ? (
-                <Pause className="w-4 h-4" />
-              ) : (
-                <Play className="w-4 h-4" />
-              )
-            }
-            label={isExecuting ? 'Stop' : 'Execute'}
-            onClick={onExecute}
-            variant={isExecuting ? 'destructive' : 'primary'}
-            shortcut={`${modKey}⏎`}
-          />
-        </>
-      )}
-
-      {/* Save */}
-      {onSave && (
-        <ToolbarButton
-          icon={<Save className="w-4 h-4" />}
-          label="Save"
-          onClick={onSave}
-          shortcut={`${modKey}S`}
-        />
-      )}
-
-      {/* Provider Switcher Modal */}
-      <ProviderSwitcher
-        open={showProviderSwitcher}
-        onOpenChange={setShowProviderSwitcher}
-      />
-    </div>
-  );
-}
-
-interface ToolbarButtonProps {
-  icon: React.ReactNode;
-  label: string;
-  onClick: () => void;
-  disabled?: boolean;
-  shortcut?: string;
-  variant?: 'default' | 'primary' | 'destructive';
-}
-
-function ToolbarButton({
-  icon,
-  label,
-  onClick,
-  disabled,
-  shortcut,
-  variant = 'default',
-}: ToolbarButtonProps) {
-  const variantClasses = {
-    default: 'text-gray-300 hover:text-white hover:bg-white/10',
-    primary: 'text-primary hover:text-primary-light hover:bg-primary/10',
-    destructive: 'text-error hover:text-error hover:bg-error/10',
-  };
-
-  return (
-    <button
-      onClick={onClick}
-      disabled={disabled}
-      className={`relative group p-2 rounded transition-colors disabled:opacity-40 disabled:cursor-not-allowed ${variantClasses[variant]}`}
-      title={`${label}${shortcut ? ` (${shortcut})` : ''}`}
-    >
-      {icon}
-      {/* Tooltip */}
-      <div className="absolute top-full left-1/2 -translate-x-1/2 mt-2 px-2 py-1 bg-black/90 rounded text-xs text-white whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none">
-        {label}
-        {shortcut && <span className="ml-2 text-gray-400">{shortcut}</span>}
-      </div>
-    </button>
-  );
-}
-
-function ToolbarDivider() {
-  return <div className="w-px h-6 bg-node-border mx-1" />;
-}

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

@@ -1,194 +0,0 @@
-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"
-      />
-
-      {/* Loop-back handle for iteration visualization */}
-      <Handle
-        id="loop-back"
-        type="source"
-        position={Position.Left}
-        className="!w-3 !h-3 !bg-teal-500 !border-2 !border-node-bg"
-        style={{ top: '50%', left: '-6px' }}
-      />
-    </div>
-  );
-}
-
-export const TransformNode = memo(TransformNodeComponent);

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

@@ -1,128 +0,0 @@
-import { memo } from 'react';
-import { Handle, Position, type Node, type NodeProps } from '@xyflow/react';
-import { Webhook, FolderOpen, Play, Zap, Calendar } from 'lucide-react';
-
-export interface TriggerNodeData extends Record<string, unknown> {
-  id: string;
-  name?: string;
-  type: 'manual' | 'schedule' | 'webhook' | 'file' | 'event';
-  // Schedule trigger
-  cron?: string;
-  // Webhook trigger
-  path?: string;
-  method?: string;
-  // File watcher trigger
-  pattern?: string;
-  // Event trigger
-  events?: string[];
-  // Status
-  active?: boolean;
-  lastTriggered?: string;
-}
-
-export type TriggerNodeType = Node<TriggerNodeData, 'trigger'>;
-
-const triggerConfig = {
-  manual: {
-    icon: Play,
-    color: 'text-primary',
-    bgColor: 'bg-primary/10',
-    borderColor: 'border-primary',
-    label: 'Manual Trigger',
-  },
-  schedule: {
-    icon: Calendar,
-    color: 'text-info',
-    bgColor: 'bg-info/10',
-    borderColor: 'border-info',
-    label: 'Schedule',
-  },
-  webhook: {
-    icon: Webhook,
-    color: 'text-success',
-    bgColor: 'bg-success/10',
-    borderColor: 'border-success',
-    label: 'Webhook',
-  },
-  file: {
-    icon: FolderOpen,
-    color: 'text-warning',
-    bgColor: 'bg-warning/10',
-    borderColor: 'border-warning',
-    label: 'File Watcher',
-  },
-  event: {
-    icon: Zap,
-    color: 'text-purple-400',
-    bgColor: 'bg-purple-400/10',
-    borderColor: 'border-purple-400',
-    label: 'Event',
-  },
-};
-
-function TriggerNodeComponent({ data, selected }: NodeProps<TriggerNodeType>) {
-  const config = triggerConfig[data.type] || triggerConfig.manual;
-  const Icon = config.icon;
-
-  const getSubtitle = () => {
-    switch (data.type) {
-      case 'schedule':
-        return data.cron || 'No schedule set';
-      case 'webhook':
-        return `${data.method || 'POST'} ${data.path || '/webhook'}`;
-      case 'file':
-        return data.pattern || '**/*';
-      case 'event':
-        return data.events?.join(', ') || 'No events';
-      default:
-        return 'Click to run';
-    }
-  };
-
-  return (
-    <div
-      className={`min-w-[180px] rounded-lg border-2 ${config.borderColor} ${config.bgColor} ${
-        selected ? 'ring-2 ring-primary ring-offset-2 ring-offset-canvas-bg' : ''
-      } transition-all duration-200`}
-    >
-      {/* 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`}>
-          <Icon 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">
-            {config.label}
-          </div>
-          <div className="text-sm font-medium text-white truncate">
-            {data.name || 'Trigger'}
-          </div>
-        </div>
-        {data.active !== false && (
-          <div className="w-2 h-2 rounded-full bg-success animate-pulse" title="Active" />
-        )}
-      </div>
-
-      {/* Details */}
-      <div className="px-3 py-2 border-t border-white/10">
-        <div className="text-xs text-gray-400 font-mono truncate" title={getSubtitle()}>
-          {getSubtitle()}
-        </div>
-        {data.lastTriggered && (
-          <div className="text-xs text-gray-500 mt-1">
-            Last: {new Date(data.lastTriggered).toLocaleString()}
-          </div>
-        )}
-      </div>
-
-      {/* Output handle */}
-      <Handle
-        type="source"
-        position={Position.Bottom}
-        className="!w-3 !h-3 !bg-primary !border-2 !border-canvas-bg"
-      />
-    </div>
-  );
-}
-
-export const TriggerNode = memo(TriggerNodeComponent);