bmad-elsabro 1.0.0

package/renderer/components/WorkflowEditor.tsx

@@ -0,0 +1,470 @@
+/**
+ * WorkflowEditor Component
+ *
+ * Visual workflow editor with drag-and-drop functionality using React Flow.
+ * Allows users to create and edit workflows by connecting steps visually.
+ *
+ * Features:
+ * - Drag-and-drop step creation from palette
+ * - Visual graph-based step arrangement
+ * - Connection management
+ * - Step editing and deletion
+ * - Save/load workflows
+ * - Zoom and pan controls
+ * - Dark/light theme support
+ *
+ * @module renderer/components/WorkflowEditor
+ */
+
+import React, { useState, useCallback, useRef, useMemo } from 'react';
+import ReactFlow, {
+  Node,
+  Edge,
+  Connection,
+  addEdge,
+  useNodesState,
+  useEdgesState,
+  Controls,
+  Background,
+  BackgroundVariant,
+  MiniMap,
+  Panel,
+  ReactFlowProvider,
+} from 'reactflow';
+import 'reactflow/dist/style.css';
+
+import StepNode, { StepNodeData } from './workflow/StepNode';
+import StepPalette, { StepType } from './workflow/StepPalette';
+import DependencyEdge from './workflow/DependencyEdge';
+
+/**
+ * Props for WorkflowEditor component
+ */
+export interface WorkflowEditorProps {
+  /**
+   * Workflow ID (for loading existing workflows)
+   */
+  workflowId?: string;
+
+  /**
+   * Initial workflow name
+   */
+  workflowName?: string;
+
+  /**
+   * Callback when workflow is saved
+   */
+  onSave?: (workflow: WorkflowData) => void;
+
+  /**
+   * Custom CSS class name
+   */
+  className?: string;
+}
+
+/**
+ * Workflow data structure
+ */
+export interface WorkflowData {
+  /**
+   * Workflow ID
+   */
+  id: string;
+
+  /**
+   * Workflow name
+   */
+  name: string;
+
+  /**
+   * Workflow nodes
+   */
+  nodes: Node<StepNodeData>[];
+
+  /**
+   * Workflow edges (connections)
+   */
+  edges: Edge[];
+
+  /**
+   * Creation timestamp
+   */
+  createdAt: Date;
+
+  /**
+   * Last modified timestamp
+   */
+  updatedAt: Date;
+}
+
+/**
+ * Generate unique ID
+ */
+const generateId = (): string => {
+  return `${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
+};
+
+/**
+ * WorkflowEditor Component (Internal - wrapped by provider)
+ */
+const WorkflowEditorInternal: React.FC<WorkflowEditorProps> = ({
+  workflowId,
+  workflowName: initialName = 'Untitled Workflow',
+  onSave,
+  className = '',
+}) => {
+  const reactFlowWrapper = useRef<HTMLDivElement>(null);
+  const [nodes, setNodes, onNodesChange] = useNodesState<StepNodeData>([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+  const [workflowName, setWorkflowName] = useState(initialName);
+  const [reactFlowInstance, setReactFlowInstance] = useState<any>(null);
+  const [isEditingName, setIsEditingName] = useState(false);
+
+  /**
+   * Node types for React Flow
+   */
+  const nodeTypes = useMemo(() => ({ step: StepNode }), []);
+
+  /**
+   * Edge types for React Flow
+   */
+  const edgeTypes = useMemo(() => ({ dependency: DependencyEdge }), []);
+
+  /**
+   * Handle connection between nodes
+   */
+  const onConnect = useCallback(
+    (connection: Connection) => {
+      setEdges((eds) =>
+        addEdge(
+          {
+            ...connection,
+            type: 'dependency',
+            animated: true,
+            data: {},
+          },
+          eds
+        )
+      );
+    },
+    [setEdges]
+  );
+
+  /**
+   * Handle drag over - allow drop
+   */
+  const onDragOver = useCallback((event: React.DragEvent) => {
+    event.preventDefault();
+    event.dataTransfer.dropEffect = 'copy';
+  }, []);
+
+  /**
+   * Handle drop - create new node from palette
+   */
+  const onDrop = useCallback(
+    (event: React.DragEvent) => {
+      event.preventDefault();
+
+      if (!reactFlowInstance || !reactFlowWrapper.current) return;
+
+      const reactFlowBounds = reactFlowWrapper.current.getBoundingClientRect();
+      const stepTypeId = event.dataTransfer.getData('application/reactflow');
+      const stepDataStr = event.dataTransfer.getData('application/json');
+
+      if (!stepTypeId || !stepDataStr) return;
+
+      try {
+        const stepType: StepType = JSON.parse(stepDataStr);
+
+        // Calculate position in flow coordinates
+        const position = reactFlowInstance.project({
+          x: event.clientX - reactFlowBounds.left,
+          y: event.clientY - reactFlowBounds.top,
+        });
+
+        const newNode: Node<StepNodeData> = {
+          id: `node-${generateId()}`,
+          type: 'step',
+          position,
+          data: {
+            stepType: stepType.id,
+            label: stepType.name,
+            icon: stepType.icon,
+            category: stepType.category,
+            status: 'idle',
+            onEdit: () => handleEditNode(`node-${generateId()}`),
+            onDelete: () => handleDeleteNode(`node-${generateId()}`),
+          },
+        };
+
+        setNodes((nds) => [...nds, newNode]);
+      } catch (error) {
+        console.error('Failed to parse step data:', error);
+      }
+    },
+    [reactFlowInstance, setNodes]
+  );
+
+  /**
+   * Handle edit node
+   */
+  const handleEditNode = useCallback((nodeId: string) => {
+    console.log('Edit node:', nodeId);
+    // TODO: Open node configuration modal
+    alert(`Edit node: ${nodeId}\n\nNode configuration modal coming soon!`);
+  }, []);
+
+  /**
+   * Handle delete node
+   */
+  const handleDeleteNode = useCallback(
+    (nodeId: string) => {
+      setNodes((nds) => nds.filter((node) => node.id !== nodeId));
+      setEdges((eds) => eds.filter((edge) => edge.source !== nodeId && edge.target !== nodeId));
+    },
+    [setNodes, setEdges]
+  );
+
+  /**
+   * Update node callbacks when nodes change
+   */
+  const nodesWithCallbacks = useMemo(() => {
+    return nodes.map((node) => ({
+      ...node,
+      data: {
+        ...node.data,
+        onEdit: () => handleEditNode(node.id),
+        onDelete: () => handleDeleteNode(node.id),
+      },
+    }));
+  }, [nodes, handleEditNode, handleDeleteNode]);
+
+  /**
+   * Handle save workflow
+   */
+  const handleSave = useCallback(() => {
+    const workflow: WorkflowData = {
+      id: workflowId || `workflow-${generateId()}`,
+      name: workflowName,
+      nodes: nodesWithCallbacks,
+      edges,
+      createdAt: new Date(),
+      updatedAt: new Date(),
+    };
+
+    console.log('Saving workflow:', workflow);
+    onSave?.(workflow);
+
+    // TODO: Integrate with electron IPC to save to filesystem
+    alert(`Workflow "${workflowName}" saved!\n\n${nodes.length} steps, ${edges.length} connections`);
+  }, [workflowId, workflowName, nodesWithCallbacks, edges, onSave, nodes.length]);
+
+  /**
+   * Handle clear workflow
+   */
+  const handleClear = useCallback(() => {
+    if (nodes.length === 0 && edges.length === 0) return;
+
+    if (confirm('Are you sure you want to clear the workflow? This cannot be undone.')) {
+      setNodes([]);
+      setEdges([]);
+    }
+  }, [nodes.length, edges.length, setNodes, setEdges]);
+
+  /**
+   * Handle auto-layout
+   */
+  const handleAutoLayout = useCallback(() => {
+    // Simple vertical layout
+    const nodeWidth = 220;
+    const nodeHeight = 120;
+    const horizontalSpacing = 50;
+    const verticalSpacing = 100;
+
+    const layoutedNodes = nodes.map((node, index) => {
+      const row = Math.floor(index / 3);
+      const col = index % 3;
+
+      return {
+        ...node,
+        position: {
+          x: col * (nodeWidth + horizontalSpacing),
+          y: row * (nodeHeight + verticalSpacing),
+        },
+      };
+    });
+
+    setNodes(layoutedNodes);
+  }, [nodes, setNodes]);
+
+  return (
+    <div className={`flex h-full bg-gray-50 dark:bg-gray-900 ${className}`}>
+      {/* Step Palette */}
+      <div className="w-64 flex-shrink-0">
+        <StepPalette />
+      </div>
+
+      {/* Workflow Canvas */}
+      <div className="flex-1 flex flex-col">
+        {/* Toolbar */}
+        <div className="flex-none bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 px-4 py-3">
+          <div className="flex items-center justify-between">
+            {/* Workflow Name */}
+            <div className="flex items-center gap-2 flex-1">
+              {isEditingName ? (
+                <input
+                  type="text"
+                  value={workflowName}
+                  onChange={(e) => setWorkflowName(e.target.value)}
+                  onBlur={() => setIsEditingName(false)}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter') setIsEditingName(false);
+                    if (e.key === 'Escape') {
+                      setWorkflowName(initialName);
+                      setIsEditingName(false);
+                    }
+                  }}
+                  className="px-2 py-1 text-lg font-semibold bg-gray-50 dark:bg-gray-900 border border-gray-300 dark:border-gray-600 rounded text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  autoFocus
+                  aria-label="Workflow name"
+                />
+              ) : (
+                <h2
+                  className="text-lg font-semibold text-gray-900 dark:text-white cursor-pointer hover:text-blue-600 dark:hover:text-blue-400"
+                  onClick={() => setIsEditingName(true)}
+                  title="Click to edit name"
+                >
+                  {workflowName}
+                </h2>
+              )}
+              <span className="text-sm text-gray-500 dark:text-gray-400">
+                ({nodes.length} steps)
+              </span>
+            </div>
+
+            {/* Actions */}
+            <div className="flex items-center gap-2">
+              <button
+                onClick={handleAutoLayout}
+                disabled={nodes.length === 0}
+                className="px-3 py-1.5 text-sm bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded hover:bg-gray-50 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                aria-label="Auto-arrange workflow steps"
+                title="Auto-layout"
+              >
+                🎯 Auto-Layout
+              </button>
+              <button
+                onClick={handleClear}
+                disabled={nodes.length === 0 && edges.length === 0}
+                className="px-3 py-1.5 text-sm bg-white dark:bg-gray-700 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 disabled:opacity-50 disabled:cursor-not-allowed"
+                aria-label="Clear workflow"
+                title="Clear all"
+              >
+                🗑️ Clear
+              </button>
+              <button
+                onClick={handleSave}
+                className="px-4 py-1.5 text-sm bg-blue-600 hover:bg-blue-700 text-white rounded transition-colors font-medium"
+                aria-label="Save workflow"
+                title="Save workflow"
+              >
+                💾 Save
+              </button>
+            </div>
+          </div>
+        </div>
+
+        {/* React Flow Canvas */}
+        <div ref={reactFlowWrapper} className="flex-1">
+          <ReactFlow
+            nodes={nodesWithCallbacks}
+            edges={edges}
+            onNodesChange={onNodesChange}
+            onEdgesChange={onEdgesChange}
+            onConnect={onConnect}
+            onInit={setReactFlowInstance}
+            onDrop={onDrop}
+            onDragOver={onDragOver}
+            nodeTypes={nodeTypes}
+            edgeTypes={edgeTypes}
+            fitView
+            attributionPosition="bottom-left"
+            className="bg-gray-50 dark:bg-gray-900"
+          >
+            <Background
+              variant={BackgroundVariant.Dots}
+              gap={16}
+              size={1}
+              className="dark:opacity-30"
+            />
+            <Controls
+              className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg"
+            />
+            <MiniMap
+              className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg"
+              nodeColor={(node) => {
+                switch (node.data?.category) {
+                  case 'input':
+                    return '#3b82f6';
+                  case 'processing':
+                    return '#a855f7';
+                  case 'ai':
+                    return '#6366f1';
+                  case 'output':
+                    return '#22c55e';
+                  case 'control':
+                    return '#f97316';
+                  default:
+                    return '#6b7280';
+                }
+              }}
+            />
+
+            {/* Empty State */}
+            {nodes.length === 0 && (
+              <Panel position="top-center" className="mt-8">
+                <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 px-6 py-4 max-w-md">
+                  <div className="text-center">
+                    <div className="text-4xl mb-2">🎨</div>
+                    <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
+                      Start Building Your Workflow
+                    </h3>
+                    <p className="text-sm text-gray-600 dark:text-gray-400">
+                      Drag steps from the palette on the left and drop them here.
+                      Connect steps by dragging from one handle to another.
+                    </p>
+                  </div>
+                </div>
+              </Panel>
+            )}
+          </ReactFlow>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+/**
+ * WorkflowEditor Component with React Flow Provider
+ *
+ * Visual workflow editor with drag-and-drop functionality.
+ *
+ * @example
+ * ```tsx
+ * <WorkflowEditor
+ *   workflowName="My Workflow"
+ *   onSave={(workflow) => console.log('Saved:', workflow)}
+ * />
+ * ```
+ */
+const WorkflowEditor: React.FC<WorkflowEditorProps> = (props) => {
+  return (
+    <ReactFlowProvider>
+      <WorkflowEditorInternal {...props} />
+    </ReactFlowProvider>
+  );
+};
+
+WorkflowEditor.displayName = 'WorkflowEditor';
+
+export default WorkflowEditor;

package/renderer/components/onboarding/Step1Welcome.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+
+interface Step1WelcomeProps {
+  onNext: () => void;
+}
+
+/**
+ * Step1Welcome Component
+ *
+ * Welcome screen introducing BMAD Studio to first-time users.
+ * Provides overview of key features and sets expectations.
+ */
+const Step1Welcome: React.FC<Step1WelcomeProps> = ({ onNext }) => {
+  return (
+    <div className="flex flex-col items-center text-center max-w-2xl mx-auto">
+      {/* Logo/Icon */}
+      <div className="mb-6">
+        <div className="w-20 h-20 bg-blue-600 rounded-full flex items-center justify-center text-white text-3xl font-bold">
+          B
+        </div>
+      </div>
+
+      {/* Welcome Heading */}
+      <h1 className="text-4xl font-bold mb-4 text-gray-900 dark:text-white">
+        Welcome to BMAD Studio
+      </h1>
+
+      <p className="text-xl text-gray-600 dark:text-gray-400 mb-8">
+        Breakthrough Method of Agile AI-driven Development
+      </p>
+
+      {/* Feature Highlights */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-10 w-full">
+        <div className="p-4 bg-gray-100 dark:bg-gray-800 rounded-lg">
+          <div className="text-3xl mb-2">🚀</div>
+          <h3 className="font-semibold mb-2 text-gray-900 dark:text-white">AI-Powered</h3>
+          <p className="text-sm text-gray-600 dark:text-gray-400">
+            Leverage AI agents for automated development workflows
+          </p>
+        </div>
+        <div className="p-4 bg-gray-100 dark:bg-gray-800 rounded-lg">
+          <div className="text-3xl mb-2">⚡</div>
+          <h3 className="font-semibold mb-2 text-gray-900 dark:text-white">Fast & Efficient</h3>
+          <p className="text-sm text-gray-600 dark:text-gray-400">
+            Streamline your development process with intelligent automation
+          </p>
+        </div>
+        <div className="p-4 bg-gray-100 dark:bg-gray-800 rounded-lg">
+          <div className="text-3xl mb-2">🎯</div>
+          <h3 className="font-semibold mb-2 text-gray-900 dark:text-white">Professional</h3>
+          <p className="text-sm text-gray-600 dark:text-gray-400">
+            Enterprise-grade tools for serious developers
+          </p>
+        </div>
+      </div>
+
+      {/* Get Started Button */}
+      <button
+        onClick={onNext}
+        className="px-8 py-3 bg-blue-600 hover:bg-blue-700 text-white text-lg font-semibold rounded-lg transition-colors shadow-md hover:shadow-lg"
+      >
+        Get Started
+      </button>
+
+      <p className="mt-6 text-sm text-gray-500 dark:text-gray-500">
+        This quick setup will take less than 5 minutes
+      </p>
+    </div>
+  );
+};
+
+export default Step1Welcome;