@marktoflow/gui 2.0.0-alpha.1

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

@@ -0,0 +1,189 @@
+import {
+  Plus,
+  Play,
+  Pause,
+  Layout,
+  ZoomIn,
+  ZoomOut,
+  Maximize,
+  Save,
+  Undo,
+  Redo,
+  Copy,
+  Trash2,
+} from 'lucide-react';
+import { useCanvas } from '../../hooks/useCanvas';
+import { useEditorStore } from '../../stores/editorStore';
+import { useReactFlow } from '@xyflow/react';
+
+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 canUndo = undoStack.length > 0;
+  const canRedo = redoStack.length > 0;
+  const hasSelection = selectedNodes.length > 0;
+
+  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="⌘Z"
+      />
+      <ToolbarButton
+        icon={<Redo className="w-4 h-4" />}
+        label="Redo"
+        onClick={() => redo()}
+        disabled={!canRedo}
+        shortcut="⌘⇧Z"
+      />
+
+      <ToolbarDivider />
+
+      {/* Selection actions */}
+      <ToolbarButton
+        icon={<Copy className="w-4 h-4" />}
+        label="Duplicate"
+        onClick={duplicateSelected}
+        disabled={!hasSelection}
+        shortcut="⌘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="⌘L"
+      />
+      <ToolbarButton
+        icon={<ZoomIn className="w-4 h-4" />}
+        label="Zoom In"
+        onClick={() => zoomIn()}
+        shortcut="⌘+"
+      />
+      <ToolbarButton
+        icon={<ZoomOut className="w-4 h-4" />}
+        label="Zoom Out"
+        onClick={() => zoomOut()}
+        shortcut="⌘-"
+      />
+      <ToolbarButton
+        icon={<Maximize className="w-4 h-4" />}
+        label="Fit View"
+        onClick={fitView}
+        shortcut="⌘0"
+      />
+
+      <ToolbarDivider />
+
+      {/* Execute */}
+      {onExecute && (
+        <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="⌘⏎"
+        />
+      )}
+
+      {/* Save */}
+      {onSave && (
+        <ToolbarButton
+          icon={<Save className="w-4 h-4" />}
+          label="Save"
+          onClick={onSave}
+          shortcut="⌘S"
+        />
+      )}
+    </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/TriggerNode.tsx

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