@marktoflow/gui 2.0.0-alpha.1

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

@@ -0,0 +1,188 @@
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuShortcut,
+} from '../common/ContextMenu';
+import {
+  Edit,
+  Code,
+  FileText,
+  Copy,
+  Trash2,
+  Plus,
+  FolderOpen,
+  Play,
+  AlertTriangle,
+} from 'lucide-react';
+import type { Node } from '@xyflow/react';
+
+interface NodeContextMenuProps {
+  children: React.ReactNode;
+  node: Node;
+  onEdit: () => void;
+  onViewYaml: () => void;
+  onViewDocs: () => void;
+  onDuplicate: () => void;
+  onDelete: () => void;
+  onAddStepBefore: () => void;
+  onAddStepAfter: () => void;
+  onConvertToSubworkflow: () => void;
+  onExecuteFrom: () => void;
+}
+
+export function NodeContextMenu({
+  children,
+  node,
+  onEdit,
+  onViewYaml,
+  onViewDocs,
+  onDuplicate,
+  onDelete,
+  onAddStepBefore,
+  onAddStepAfter,
+  onConvertToSubworkflow,
+  onExecuteFrom,
+}: NodeContextMenuProps) {
+  const isSubworkflow = node.type === 'subworkflow';
+  const hasError = node.data?.status === 'failed';
+
+  return (
+    <ContextMenu>
+      {children}
+      <ContextMenuContent>
+        <ContextMenuItem onClick={onEdit}>
+          <Edit className="w-4 h-4 mr-2" />
+          Edit Step
+          <ContextMenuShortcut>E</ContextMenuShortcut>
+        </ContextMenuItem>
+
+        <ContextMenuItem onClick={onViewYaml}>
+          <Code className="w-4 h-4 mr-2" />
+          View YAML
+          <ContextMenuShortcut>Y</ContextMenuShortcut>
+        </ContextMenuItem>
+
+        <ContextMenuItem onClick={onViewDocs}>
+          <FileText className="w-4 h-4 mr-2" />
+          View Documentation
+        </ContextMenuItem>
+
+        <ContextMenuSeparator />
+
+        <ContextMenuItem onClick={onDuplicate}>
+          <Copy className="w-4 h-4 mr-2" />
+          Duplicate
+          <ContextMenuShortcut>⌘D</ContextMenuShortcut>
+        </ContextMenuItem>
+
+        <ContextMenuSub>
+          <ContextMenuSubTrigger>
+            <Plus className="w-4 h-4 mr-2" />
+            Add Step
+          </ContextMenuSubTrigger>
+          <ContextMenuSubContent>
+            <ContextMenuItem onClick={onAddStepBefore}>
+              Before this step
+            </ContextMenuItem>
+            <ContextMenuItem onClick={onAddStepAfter}>
+              After this step
+            </ContextMenuItem>
+          </ContextMenuSubContent>
+        </ContextMenuSub>
+
+        {!isSubworkflow && (
+          <ContextMenuItem onClick={onConvertToSubworkflow}>
+            <FolderOpen className="w-4 h-4 mr-2" />
+            Convert to Sub-workflow
+          </ContextMenuItem>
+        )}
+
+        <ContextMenuSeparator />
+
+        <ContextMenuItem onClick={onExecuteFrom}>
+          <Play className="w-4 h-4 mr-2" />
+          Execute from here
+        </ContextMenuItem>
+
+        {hasError && (
+          <ContextMenuItem className="text-error">
+            <AlertTriangle className="w-4 h-4 mr-2" />
+            View Error Details
+          </ContextMenuItem>
+        )}
+
+        <ContextMenuSeparator />
+
+        <ContextMenuItem destructive onClick={onDelete}>
+          <Trash2 className="w-4 h-4 mr-2" />
+          Delete
+          <ContextMenuShortcut>⌫</ContextMenuShortcut>
+        </ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+}
+
+// Canvas context menu (right-click on empty space)
+interface CanvasContextMenuProps {
+  children: React.ReactNode;
+  onAddStep: () => void;
+  onAddSubworkflow: () => void;
+  onPaste: () => void;
+  onAutoLayout: () => void;
+  onFitView: () => void;
+  canPaste: boolean;
+}
+
+export function CanvasContextMenu({
+  children,
+  onAddStep,
+  onAddSubworkflow,
+  onPaste,
+  onAutoLayout,
+  onFitView,
+  canPaste,
+}: CanvasContextMenuProps) {
+  return (
+    <ContextMenu>
+      {children}
+      <ContextMenuContent>
+        <ContextMenuItem onClick={onAddStep}>
+          <Plus className="w-4 h-4 mr-2" />
+          Add Step
+          <ContextMenuShortcut>N</ContextMenuShortcut>
+        </ContextMenuItem>
+
+        <ContextMenuItem onClick={onAddSubworkflow}>
+          <FolderOpen className="w-4 h-4 mr-2" />
+          Add Sub-workflow
+        </ContextMenuItem>
+
+        <ContextMenuSeparator />
+
+        <ContextMenuItem onClick={onPaste} disabled={!canPaste}>
+          <Copy className="w-4 h-4 mr-2" />
+          Paste
+          <ContextMenuShortcut>⌘V</ContextMenuShortcut>
+        </ContextMenuItem>
+
+        <ContextMenuSeparator />
+
+        <ContextMenuItem onClick={onAutoLayout}>
+          Auto-layout
+          <ContextMenuShortcut>⌘L</ContextMenuShortcut>
+        </ContextMenuItem>
+
+        <ContextMenuItem onClick={onFitView}>
+          Fit to View
+          <ContextMenuShortcut>⌘0</ContextMenuShortcut>
+        </ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+}

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

@@ -0,0 +1,111 @@
+import { memo } from 'react';
+import { Handle, Position, type Node, type NodeProps } from '@xyflow/react';
+import { Flag, CheckCircle, XCircle, Clock } from 'lucide-react';
+
+export interface OutputNodeData extends Record<string, unknown> {
+  id: string;
+  name?: string;
+  description?: string;
+  variables?: string[];
+  status?: 'pending' | 'completed' | 'failed';
+  result?: unknown;
+}
+
+export type OutputNodeType = Node<OutputNodeData, 'output'>;
+
+function OutputNodeComponent({ data, selected }: NodeProps<OutputNodeType>) {
+  const statusConfig = {
+    pending: {
+      icon: Clock,
+      color: 'text-gray-400',
+      borderColor: 'border-gray-500',
+      bgColor: 'bg-gray-500/10',
+    },
+    completed: {
+      icon: CheckCircle,
+      color: 'text-success',
+      borderColor: 'border-success',
+      bgColor: 'bg-success/10',
+    },
+    failed: {
+      icon: XCircle,
+      color: 'text-error',
+      borderColor: 'border-error',
+      bgColor: 'bg-error/10',
+    },
+  };
+
+  const status = data.status || 'pending';
+  const config = statusConfig[status];
+  const StatusIcon = config.icon;
+
+  return (
+    <div
+      className={`min-w-[160px] rounded-lg border-2 ${config.borderColor} ${config.bgColor} ${
+        selected ? 'ring-2 ring-primary ring-offset-2 ring-offset-canvas-bg' : ''
+      } transition-all duration-200`}
+    >
+      {/* Input handle */}
+      <Handle
+        type="target"
+        position={Position.Top}
+        className="!w-3 !h-3 !bg-primary !border-2 !border-canvas-bg"
+      />
+
+      {/* 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`}>
+          <Flag 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">
+            Output
+          </div>
+          <div className="text-sm font-medium text-white truncate">
+            {data.name || 'Workflow End'}
+          </div>
+        </div>
+        <StatusIcon className={`w-4 h-4 ${config.color}`} />
+      </div>
+
+      {/* Variables */}
+      {data.variables && data.variables.length > 0 && (
+        <div className="px-3 py-2 border-t border-white/10">
+          <div className="text-xs text-gray-500 mb-1">Output Variables</div>
+          <div className="flex flex-wrap gap-1">
+            {data.variables.map((variable) => (
+              <code
+                key={variable}
+                className="px-1.5 py-0.5 bg-white/5 text-primary text-xs rounded"
+              >
+                {variable}
+              </code>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Description */}
+      {data.description && (
+        <div className="px-3 py-2 border-t border-white/10">
+          <div className="text-xs text-gray-400">{data.description}</div>
+        </div>
+      )}
+
+      {/* Result preview */}
+      {status === 'completed' && data.result !== undefined && (
+        <div className="px-3 py-2 border-t border-white/10">
+          <div className="text-xs text-gray-500 mb-1">Result</div>
+          <pre className="text-xs text-success font-mono bg-black/20 rounded p-1.5 overflow-x-auto max-h-20">
+            {typeof data.result === 'string'
+              ? data.result.slice(0, 100)
+              : JSON.stringify(data.result, null, 2).slice(0, 100)}
+            {(typeof data.result === 'string' ? data.result : JSON.stringify(data.result)).length > 100 && '...'}
+          </pre>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export const OutputNode = memo(OutputNodeComponent);

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

@@ -0,0 +1,106 @@
+import { memo } from 'react';
+import { Handle, Position, type Node, type NodeProps } from '@xyflow/react';
+import { Play, CheckCircle, XCircle, Clock, AlertCircle } from 'lucide-react';
+import { getServiceIcon } from '../../utils/serviceIcons';
+
+export interface StepNodeData extends Record<string, unknown> {
+  id: string;
+  name?: string;
+  action: string;
+  status?: 'pending' | 'running' | 'completed' | 'failed' | 'skipped';
+  retryCount?: number;
+  error?: string;
+}
+
+export type StepNodeType = Node<StepNodeData, 'step'>;
+
+function StepNodeComponent({ data, selected }: NodeProps<StepNodeType>) {
+  const serviceName = data.action?.split('.')[0] || 'unknown';
+  const methodName = data.action?.split('.').slice(1).join('.') || data.action;
+  const ServiceIcon = getServiceIcon(serviceName);
+
+  const statusConfig: Record<
+    NonNullable<StepNodeData['status']>,
+    { icon: typeof Clock; color: string; bgColor: string; animate?: boolean }
+  > = {
+    pending: { icon: Clock, color: 'text-gray-400', bgColor: 'bg-gray-400/10' },
+    running: {
+      icon: Play,
+      color: 'text-warning',
+      bgColor: 'bg-warning/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: AlertCircle,
+      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={`step-node p-0 ${selected ? 'selected' : ''} ${status === 'running' ? 'running' : ''} ${status === 'completed' ? 'completed' : ''} ${status === 'failed' ? 'failed' : ''}`}
+    >
+      {/* 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-node-border">
+        <div className="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center">
+          <ServiceIcon className="w-5 h-5 text-primary" />
+        </div>
+        <div className="flex-1 min-w-0">
+          <div className="text-sm font-medium text-white truncate">
+            {data.name || data.id}
+          </div>
+          <div className="text-xs text-gray-400 truncate">{serviceName}</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">
+        <div className="text-xs text-gray-300 font-mono truncate">
+          {methodName}
+        </div>
+        {data.retryCount && data.retryCount > 0 && (
+          <div className="mt-2 text-xs text-warning">
+            Retry #{data.retryCount}
+          </div>
+        )}
+        {data.error && (
+          <div className="mt-2 text-xs text-error truncate">{data.error}</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 StepNode = memo(StepNodeComponent);

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

@@ -0,0 +1,141 @@
+import { memo, useState, useCallback } from 'react';
+import { Handle, Position, type Node, type NodeProps } from '@xyflow/react';
+import {
+  FolderOpen,
+  ChevronDown,
+  ChevronRight,
+  ExternalLink,
+  ArrowRight,
+} from 'lucide-react';
+import { useNavigationStore } from '../../stores/navigationStore';
+import { useWorkflowStore } from '../../stores/workflowStore';
+
+export interface SubWorkflowNodeData extends Record<string, unknown> {
+  id: string;
+  name?: string;
+  workflowPath: string;
+  stepCount?: number;
+  status?: 'pending' | 'running' | 'completed' | 'failed';
+}
+
+export type SubWorkflowNodeType = Node<SubWorkflowNodeData, 'subworkflow'>;
+
+function SubWorkflowNodeComponent({
+  data,
+  selected,
+}: NodeProps<SubWorkflowNodeType>) {
+  const [expanded, setExpanded] = useState(false);
+  const { pushWorkflow, breadcrumbs, setRootWorkflow } = useNavigationStore();
+  const { loadWorkflow, selectedWorkflow, currentWorkflow } = useWorkflowStore();
+
+  // Handle drilling down into sub-workflow
+  const handleDrillDown = useCallback(() => {
+    // If this is the first navigation, set the current workflow as root
+    if (breadcrumbs.length === 0 && selectedWorkflow && currentWorkflow) {
+      setRootWorkflow({
+        id: selectedWorkflow,
+        name: currentWorkflow.metadata?.name || 'Main Workflow',
+        path: selectedWorkflow,
+      });
+    }
+
+    // Push the sub-workflow onto the navigation stack
+    pushWorkflow({
+      id: data.id,
+      name: data.name || data.id,
+      path: data.workflowPath,
+    });
+
+    // Load the sub-workflow
+    loadWorkflow(data.workflowPath);
+  }, [data, pushWorkflow, breadcrumbs, setRootWorkflow, selectedWorkflow, currentWorkflow, loadWorkflow]);
+
+  const statusColors = {
+    pending: 'border-node-border',
+    running: 'border-warning',
+    completed: 'border-success',
+    failed: 'border-error',
+  };
+
+  const status = data.status || 'pending';
+
+  return (
+    <div
+      className={`step-node p-0 min-w-[250px] ${selected ? 'selected' : ''} ${statusColors[status]}`}
+    >
+      {/* Input handle */}
+      <Handle
+        type="target"
+        position={Position.Top}
+        className="!w-3 !h-3 !bg-info !border-2 !border-node-bg"
+      />
+
+      {/* Node header */}
+      <div className="flex items-center gap-3 p-3 border-b border-node-border bg-info/5">
+        <button
+          onClick={() => setExpanded(!expanded)}
+          className="w-6 h-6 rounded flex items-center justify-center hover:bg-white/10 transition-colors"
+        >
+          {expanded ? (
+            <ChevronDown className="w-4 h-4 text-info" />
+          ) : (
+            <ChevronRight className="w-4 h-4 text-info" />
+          )}
+        </button>
+        <div className="w-8 h-8 rounded-lg bg-info/10 flex items-center justify-center">
+          <FolderOpen className="w-5 h-5 text-info" />
+        </div>
+        <div className="flex-1 min-w-0">
+          <div className="text-sm font-medium text-white truncate">
+            {data.name || data.id}
+          </div>
+          <div className="text-xs text-gray-400">Sub-workflow</div>
+        </div>
+        <button
+          onClick={handleDrillDown}
+          className="w-6 h-6 rounded flex items-center justify-center hover:bg-info/20 transition-colors"
+          title="Drill into sub-workflow"
+        >
+          <ArrowRight className="w-4 h-4 text-info" />
+        </button>
+      </div>
+
+      {/* Node body */}
+      <div className="p-3">
+        <div className="text-xs text-gray-400 font-mono truncate">
+          {data.workflowPath}
+        </div>
+        {data.stepCount !== undefined && (
+          <div className="mt-2 flex items-center gap-2">
+            <span className="text-xs px-2 py-0.5 rounded-full bg-info/10 text-info">
+              {data.stepCount} steps
+            </span>
+          </div>
+        )}
+      </div>
+
+      {/* Expanded content */}
+      {expanded && (
+        <div className="border-t border-node-border p-3 bg-black/20">
+          <button
+            onClick={handleDrillDown}
+            className="w-full flex items-center justify-center gap-2 px-3 py-2 bg-info/10 hover:bg-info/20 rounded text-sm text-info transition-colors"
+          >
+            <FolderOpen className="w-4 h-4" />
+            Open Sub-workflow
+            <ArrowRight className="w-4 h-4" />
+          </button>
+        </div>
+      )}
+
+      {/* Output handle */}
+      <Handle
+        type="source"
+        position={Position.Bottom}
+        className="!w-3 !h-3 !bg-info !border-2 !border-node-bg"
+      />
+    </div>
+  );
+}
+
+export const SubWorkflowNode = memo(SubWorkflowNodeComponent);