bmad-elsabro 1.0.0

package/renderer/components/workflow/StepNode.tsx

@@ -0,0 +1,234 @@
+/**
+ * StepNode Component
+ *
+ * Custom node component for React Flow representing a workflow step.
+ * Displays step information and handles connections.
+ *
+ * Features:
+ * - Visual step representation
+ * - Connection handles (input/output)
+ * - Status indicators
+ * - Edit/delete actions
+ * - Dark/light theme support
+ *
+ * @module renderer/components/workflow/StepNode
+ */
+
+import React, { memo } from 'react';
+import { Handle, Position, NodeProps } from 'reactflow';
+
+/**
+ * Step node data structure
+ */
+export interface StepNodeData {
+  /**
+   * Step type ID
+   */
+  stepType: string;
+
+  /**
+   * Display label
+   */
+  label: string;
+
+  /**
+   * Step icon
+   */
+  icon?: string;
+
+  /**
+   * Step category
+   */
+  category?: 'input' | 'processing' | 'output' | 'control' | 'ai';
+
+  /**
+   * Execution status
+   */
+  status?: 'idle' | 'running' | 'success' | 'error';
+
+  /**
+   * Optional error message
+   */
+  error?: string;
+
+  /**
+   * Whether the node is selected
+   */
+  selected?: boolean;
+
+  /**
+   * Callback when edit is clicked
+   */
+  onEdit?: () => void;
+
+  /**
+   * Callback when delete is clicked
+   */
+  onDelete?: () => void;
+}
+
+/**
+ * Get color classes based on category
+ */
+const getCategoryColor = (category?: string): string => {
+  switch (category) {
+    case 'input':
+      return 'border-blue-500 bg-blue-50 dark:bg-blue-900/20';
+    case 'processing':
+      return 'border-purple-500 bg-purple-50 dark:bg-purple-900/20';
+    case 'ai':
+      return 'border-indigo-500 bg-indigo-50 dark:bg-indigo-900/20';
+    case 'output':
+      return 'border-green-500 bg-green-50 dark:bg-green-900/20';
+    case 'control':
+      return 'border-orange-500 bg-orange-50 dark:bg-orange-900/20';
+    default:
+      return 'border-gray-500 bg-gray-50 dark:bg-gray-800';
+  }
+};
+
+/**
+ * Get status indicator
+ */
+const getStatusIndicator = (status?: string): { icon: string; color: string } | null => {
+  switch (status) {
+    case 'running':
+      return { icon: '⏳', color: 'text-blue-500' };
+    case 'success':
+      return { icon: '✅', color: 'text-green-500' };
+    case 'error':
+      return { icon: '❌', color: 'text-red-500' };
+    default:
+      return null;
+  }
+};
+
+/**
+ * StepNode Component
+ *
+ * Custom React Flow node for workflow steps.
+ *
+ * @example
+ * ```tsx
+ * // Used internally by React Flow - don't instantiate directly
+ * const nodeTypes = {
+ *   step: StepNode
+ * };
+ * ```
+ */
+const StepNode: React.FC<NodeProps<StepNodeData>> = memo(({ data, selected }) => {
+  const statusIndicator = getStatusIndicator(data.status);
+  const colorClass = getCategoryColor(data.category);
+  const isSelected = selected || data.selected;
+
+  return (
+    <div
+      className={`
+        relative min-w-[200px] rounded-lg border-2 transition-all
+        ${colorClass}
+        ${isSelected ? 'ring-2 ring-blue-500 ring-offset-2 dark:ring-offset-gray-900' : ''}
+        ${data.status === 'error' ? 'border-red-500' : ''}
+        shadow-md hover:shadow-lg
+      `}
+      role="article"
+      aria-label={`Workflow step: ${data.label}`}
+    >
+      {/* Input Handle */}
+      <Handle
+        type="target"
+        position={Position.Top}
+        className="w-3 h-3 !bg-gray-400 dark:!bg-gray-500 border-2 border-white dark:border-gray-900"
+        aria-label="Input connection point"
+      />
+
+      {/* Node Content */}
+      <div className="px-3 py-2">
+        {/* Header */}
+        <div className="flex items-start justify-between gap-2 mb-1">
+          <div className="flex items-center gap-2 flex-1 min-w-0">
+            {data.icon && (
+              <span className="text-lg flex-shrink-0" aria-hidden="true">
+                {data.icon}
+              </span>
+            )}
+            <span className="text-sm font-semibold text-gray-900 dark:text-white truncate">
+              {data.label}
+            </span>
+          </div>
+
+          {/* Status Indicator */}
+          {statusIndicator && (
+            <span
+              className={`text-sm ${statusIndicator.color}`}
+              title={`Status: ${data.status}`}
+              aria-label={`Status: ${data.status}`}
+            >
+              {statusIndicator.icon}
+            </span>
+          )}
+        </div>
+
+        {/* Step Type */}
+        <div className="text-xs text-gray-600 dark:text-gray-400 mb-2">
+          {data.stepType}
+        </div>
+
+        {/* Error Message */}
+        {data.error && (
+          <div className="mt-2 p-2 bg-red-100 dark:bg-red-900/20 rounded text-xs text-red-700 dark:text-red-400">
+            {data.error}
+          </div>
+        )}
+
+        {/* Actions */}
+        <div className="flex items-center gap-1 mt-2 pt-2 border-t border-gray-200 dark:border-gray-700">
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              data.onEdit?.();
+            }}
+            className="flex-1 px-2 py-1 text-xs bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 transition-colors"
+            aria-label="Edit step"
+            title="Edit step"
+          >
+            ✏️ Edit
+          </button>
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              data.onDelete?.();
+            }}
+            className="px-2 py-1 text-xs bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded hover:bg-red-50 dark:hover:bg-red-900/20 text-gray-700 dark:text-gray-300 hover:text-red-600 dark:hover:text-red-400 transition-colors"
+            aria-label="Delete step"
+            title="Delete step"
+          >
+            🗑️
+          </button>
+        </div>
+      </div>
+
+      {/* Output Handle */}
+      <Handle
+        type="source"
+        position={Position.Bottom}
+        className="w-3 h-3 !bg-gray-400 dark:!bg-gray-500 border-2 border-white dark:border-gray-900"
+        aria-label="Output connection point"
+      />
+
+      {/* Loading Spinner Overlay */}
+      {data.status === 'running' && (
+        <div className="absolute inset-0 bg-white/50 dark:bg-gray-900/50 rounded-lg flex items-center justify-center">
+          <div
+            className="w-6 h-6 border-2 border-blue-500 border-t-transparent rounded-full animate-spin"
+            role="status"
+            aria-label="Step is running"
+          />
+        </div>
+      )}
+    </div>
+  );
+});
+
+StepNode.displayName = 'StepNode';
+
+export default StepNode;

package/renderer/components/workflow/StepPalette.tsx

@@ -0,0 +1,412 @@
+/**
+ * StepPalette Component
+ *
+ * Palette of available workflow steps that can be dragged onto the canvas.
+ * Displays categorized step types with visual indicators.
+ *
+ * Features:
+ * - Drag-and-drop step types
+ * - Categorized step display
+ * - Search/filter functionality
+ * - Step descriptions
+ * - Dark/light theme support
+ *
+ * @module renderer/components/workflow/StepPalette
+ */
+
+import React, { useState, useMemo } from 'react';
+
+/**
+ * Step type definition
+ */
+export interface StepType {
+  /**
+   * Unique identifier for the step type
+   */
+  id: string;
+
+  /**
+   * Display name
+   */
+  name: string;
+
+  /**
+   * Step category
+   */
+  category: 'input' | 'processing' | 'output' | 'control' | 'ai';
+
+  /**
+   * Brief description
+   */
+  description: string;
+
+  /**
+   * Icon or emoji
+   */
+  icon: string;
+
+  /**
+   * Color for visual identification
+   */
+  color: string;
+}
+
+/**
+ * Props for StepPalette component
+ */
+export interface StepPaletteProps {
+  /**
+   * Custom CSS class name
+   */
+  className?: string;
+
+  /**
+   * Callback when a step is selected (not dragged)
+   */
+  onStepSelect?: (stepType: StepType) => void;
+}
+
+/**
+ * Default step types available in the palette
+ */
+const DEFAULT_STEP_TYPES: StepType[] = [
+  // Input Steps
+  {
+    id: 'input-file',
+    name: 'Read File',
+    category: 'input',
+    description: 'Read content from a file',
+    icon: '📄',
+    color: 'bg-blue-500',
+  },
+  {
+    id: 'input-prompt',
+    name: 'User Prompt',
+    category: 'input',
+    description: 'Get input from user',
+    icon: '💬',
+    color: 'bg-blue-500',
+  },
+  {
+    id: 'input-api',
+    name: 'API Call',
+    category: 'input',
+    description: 'Fetch data from API',
+    icon: '🌐',
+    color: 'bg-blue-500',
+  },
+
+  // Processing Steps
+  {
+    id: 'process-transform',
+    name: 'Transform',
+    category: 'processing',
+    description: 'Transform or modify data',
+    icon: '⚙️',
+    color: 'bg-purple-500',
+  },
+  {
+    id: 'process-validate',
+    name: 'Validate',
+    category: 'processing',
+    description: 'Validate data against rules',
+    icon: '✅',
+    color: 'bg-purple-500',
+  },
+  {
+    id: 'process-filter',
+    name: 'Filter',
+    category: 'processing',
+    description: 'Filter data by criteria',
+    icon: '🔍',
+    color: 'bg-purple-500',
+  },
+
+  // AI Steps
+  {
+    id: 'ai-analyze',
+    name: 'AI Analyze',
+    category: 'ai',
+    description: 'Analyze with AI',
+    icon: '🤖',
+    color: 'bg-indigo-500',
+  },
+  {
+    id: 'ai-generate',
+    name: 'AI Generate',
+    category: 'ai',
+    description: 'Generate content with AI',
+    icon: '✨',
+    color: 'bg-indigo-500',
+  },
+  {
+    id: 'ai-chat',
+    name: 'AI Chat',
+    category: 'ai',
+    description: 'Interactive AI conversation',
+    icon: '💭',
+    color: 'bg-indigo-500',
+  },
+
+  // Output Steps
+  {
+    id: 'output-file',
+    name: 'Write File',
+    category: 'output',
+    description: 'Write content to a file',
+    icon: '💾',
+    color: 'bg-green-500',
+  },
+  {
+    id: 'output-display',
+    name: 'Display',
+    category: 'output',
+    description: 'Display result to user',
+    icon: '📺',
+    color: 'bg-green-500',
+  },
+  {
+    id: 'output-notify',
+    name: 'Notify',
+    category: 'output',
+    description: 'Send notification',
+    icon: '🔔',
+    color: 'bg-green-500',
+  },
+
+  // Control Steps
+  {
+    id: 'control-condition',
+    name: 'Condition',
+    category: 'control',
+    description: 'Conditional branching',
+    icon: '🔀',
+    color: 'bg-orange-500',
+  },
+  {
+    id: 'control-loop',
+    name: 'Loop',
+    category: 'control',
+    description: 'Repeat steps',
+    icon: '🔁',
+    color: 'bg-orange-500',
+  },
+  {
+    id: 'control-delay',
+    name: 'Delay',
+    category: 'control',
+    description: 'Wait before continuing',
+    icon: '⏱️',
+    color: 'bg-orange-500',
+  },
+];
+
+/**
+ * Category display information
+ */
+const CATEGORY_INFO = {
+  input: { name: 'Input', icon: '📥', color: 'text-blue-600 dark:text-blue-400' },
+  processing: { name: 'Processing', icon: '⚙️', color: 'text-purple-600 dark:text-purple-400' },
+  ai: { name: 'AI', icon: '🤖', color: 'text-indigo-600 dark:text-indigo-400' },
+  output: { name: 'Output', icon: '📤', color: 'text-green-600 dark:text-green-400' },
+  control: { name: 'Control', icon: '🎮', color: 'text-orange-600 dark:text-orange-400' },
+};
+
+/**
+ * StepPalette Component
+ *
+ * Displays a palette of draggable workflow steps organized by category.
+ *
+ * @example
+ * ```tsx
+ * <StepPalette onStepSelect={(step) => console.log('Selected:', step)} />
+ * ```
+ */
+const StepPalette: React.FC<StepPaletteProps> = ({
+  className = '',
+  onStepSelect,
+}) => {
+  const [searchTerm, setSearchTerm] = useState('');
+  const [expandedCategory, setExpandedCategory] = useState<string | null>('input');
+
+  /**
+   * Filter steps by search term
+   */
+  const filteredSteps = useMemo(() => {
+    if (!searchTerm.trim()) {
+      return DEFAULT_STEP_TYPES;
+    }
+
+    const term = searchTerm.toLowerCase();
+    return DEFAULT_STEP_TYPES.filter(
+      (step) =>
+        step.name.toLowerCase().includes(term) ||
+        step.description.toLowerCase().includes(term) ||
+        step.category.toLowerCase().includes(term)
+    );
+  }, [searchTerm]);
+
+  /**
+   * Group steps by category
+   */
+  const stepsByCategory = useMemo(() => {
+    const grouped: Record<string, StepType[]> = {
+      input: [],
+      processing: [],
+      ai: [],
+      output: [],
+      control: [],
+    };
+
+    filteredSteps.forEach((step) => {
+      grouped[step.category].push(step);
+    });
+
+    return grouped;
+  }, [filteredSteps]);
+
+  /**
+   * Handle drag start - store step data
+   */
+  const handleDragStart = (event: React.DragEvent, stepType: StepType) => {
+    event.dataTransfer.setData('application/reactflow', stepType.id);
+    event.dataTransfer.setData('application/json', JSON.stringify(stepType));
+    event.dataTransfer.effectAllowed = 'copy';
+  };
+
+  /**
+   * Toggle category expansion
+   */
+  const toggleCategory = (category: string) => {
+    setExpandedCategory(expandedCategory === category ? null : category);
+  };
+
+  return (
+    <div
+      className={`flex flex-col h-full bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-700 ${className}`}
+      role="complementary"
+      aria-label="Workflow step palette"
+    >
+      {/* Header */}
+      <div className="flex-none px-4 py-3 border-b border-gray-200 dark:border-gray-700">
+        <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">
+          Steps
+        </h3>
+
+        {/* Search */}
+        <div className="relative">
+          <input
+            type="text"
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            placeholder="Search steps..."
+            className="w-full px-3 py-2 pl-9 bg-gray-50 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md text-sm text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400"
+            aria-label="Search workflow steps"
+          />
+          <span className="absolute left-3 top-2.5 text-gray-400">🔍</span>
+        </div>
+      </div>
+
+      {/* Step List */}
+      <div className="flex-1 overflow-y-auto px-2 py-2">
+        {Object.entries(stepsByCategory).map(([category, steps]) => {
+          if (steps.length === 0) return null;
+
+          const categoryInfo = CATEGORY_INFO[category as keyof typeof CATEGORY_INFO];
+          const isExpanded = expandedCategory === category;
+
+          return (
+            <div key={category} className="mb-2">
+              {/* Category Header */}
+              <button
+                onClick={() => toggleCategory(category)}
+                className="w-full flex items-center justify-between px-3 py-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+                aria-expanded={isExpanded}
+                aria-controls={`category-${category}`}
+              >
+                <div className="flex items-center gap-2">
+                  <span className="text-lg">{categoryInfo.icon}</span>
+                  <span className={`text-sm font-semibold ${categoryInfo.color}`}>
+                    {categoryInfo.name}
+                  </span>
+                  <span className="text-xs text-gray-500 dark:text-gray-400">
+                    ({steps.length})
+                  </span>
+                </div>
+                <svg
+                  className={`w-4 h-4 text-gray-400 transition-transform ${isExpanded ? 'rotate-180' : ''}`}
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                </svg>
+              </button>
+
+              {/* Category Steps */}
+              {isExpanded && (
+                <div
+                  id={`category-${category}`}
+                  className="mt-1 space-y-1"
+                >
+                  {steps.map((step) => (
+                    <div
+                      key={step.id}
+                      draggable
+                      onDragStart={(e) => handleDragStart(e, step)}
+                      onClick={() => onStepSelect?.(step)}
+                      className="group px-3 py-2 rounded-md bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-move transition-colors border border-transparent hover:border-gray-300 dark:hover:border-gray-600"
+                      role="button"
+                      tabIndex={0}
+                      aria-label={`${step.name}: ${step.description}. Drag to add to workflow.`}
+                      onKeyDown={(e) => {
+                        if (e.key === 'Enter' || e.key === ' ') {
+                          onStepSelect?.(step);
+                        }
+                      }}
+                    >
+                      <div className="flex items-start gap-2">
+                        <span className="text-lg flex-shrink-0">{step.icon}</span>
+                        <div className="flex-1 min-w-0">
+                          <div className="text-sm font-medium text-gray-900 dark:text-white truncate">
+                            {step.name}
+                          </div>
+                          <div className="text-xs text-gray-600 dark:text-gray-400 line-clamp-2">
+                            {step.description}
+                          </div>
+                        </div>
+                      </div>
+
+                      {/* Drag Indicator */}
+                      <div className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                        <svg
+                          className="w-4 h-4 text-gray-400"
+                          fill="none"
+                          stroke="currentColor"
+                          viewBox="0 0 24 24"
+                        >
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 8h16M4 16h16" />
+                        </svg>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Instructions */}
+      <div className="flex-none px-4 py-3 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800">
+        <p className="text-xs text-gray-600 dark:text-gray-400">
+          💡 <strong>Tip:</strong> Drag steps to the canvas to build your workflow
+        </p>
+      </div>
+    </div>
+  );
+};
+
+StepPalette.displayName = 'StepPalette';
+
+export default StepPalette;