bmad-elsabro 1.0.0

package/renderer/components/FlowSelector.tsx

@@ -0,0 +1,534 @@
+/**
+ * FlowSelector Component
+ *
+ * Helps users choose between Quick Flow and Full Method based on their task.
+ * Uses the WorkflowRouter service to analyze task description and provide
+ * intelligent recommendations.
+ *
+ * Features:
+ * - Task description input with real-time analysis
+ * - AI-powered flow recommendation (Quick Flow vs Full Method)
+ * - Confidence scoring and reasoning display
+ * - Visual comparison of both workflows
+ * - Complexity level indicator
+ * - User can override recommendation
+ * - Dark/light theme support
+ * - Keyboard shortcuts (Enter to confirm, Escape to cancel)
+ *
+ * Integration:
+ * - Calls window.electron.workflow.analyzeTask() via IPC
+ * - Emits onSelect(flowType) when user confirms choice
+ *
+ * @module renderer/components/FlowSelector
+ */
+
+import React, { useState, useCallback, useEffect } from 'react';
+
+/**
+ * Flow type
+ */
+type FlowType = 'quick-flow' | 'full-method';
+
+/**
+ * Complexity level
+ */
+type ComplexityLevel = 'trivial' | 'simple' | 'moderate' | 'complex' | 'enterprise';
+
+/**
+ * Routing decision from workflow router
+ */
+interface RoutingDecision {
+  recommendedFlow: FlowType;
+  confidence: number;
+  complexity: ComplexityLevel;
+  reasoning: string;
+  characteristics: {
+    isNewProduct: boolean;
+    isMajorFeature: boolean;
+    requiresMultipleTeams: boolean;
+    requiresStakeholderAlignment: boolean;
+    isBugFix: boolean;
+    isRefactoring: boolean;
+    isSmallFeature: boolean;
+    isPrototype: boolean;
+  };
+  matchedKeywords: string[];
+}
+
+/**
+ * FlowSelector component props
+ */
+interface FlowSelectorProps {
+  /**
+   * Whether the selector is open
+   */
+  isOpen?: boolean;
+
+  /**
+   * Initial task description
+   */
+  initialTask?: string;
+
+  /**
+   * Callback when flow is selected
+   */
+  onSelect: (flow: FlowType, decision: RoutingDecision) => void;
+
+  /**
+   * Callback when selector is closed
+   */
+  onCancel?: () => void;
+
+  /**
+   * Dark mode enabled
+   */
+  darkMode?: boolean;
+
+  /**
+   * Project information (optional, enhances analysis)
+   */
+  projectInfo?: {
+    type?: string;
+    size?: 'tiny' | 'small' | 'medium' | 'large' | 'huge';
+    fileCount?: number;
+  };
+}
+
+/**
+ * FlowSelector Component
+ *
+ * Intelligent workflow selection interface with AI-powered recommendations.
+ */
+export const FlowSelector: React.FC<FlowSelectorProps> = ({
+  isOpen = true,
+  initialTask = '',
+  onSelect,
+  onCancel,
+  darkMode = true,
+  projectInfo,
+}) => {
+  const [taskDescription, setTaskDescription] = useState(initialTask);
+  const [decision, setDecision] = useState<RoutingDecision | null>(null);
+  const [selectedFlow, setSelectedFlow] = useState<FlowType | null>(null);
+  const [isAnalyzing, setIsAnalyzing] = useState(false);
+
+  /**
+   * Analyze task description
+   */
+  const analyzeTask = useCallback(async () => {
+    if (!taskDescription.trim()) {
+      setDecision(null);
+      return;
+    }
+
+    setIsAnalyzing(true);
+
+    try {
+      // Call workflow router service via IPC
+      const result = await window.electron.workflowRouter.analyzeTask({
+        taskDescription,
+        projectType: projectInfo?.type,
+        projectSize: projectInfo?.size,
+        fileCount: projectInfo?.fileCount,
+      });
+
+      setDecision(result);
+      setSelectedFlow(result.recommendedFlow);
+    } catch (error) {
+      console.error('Failed to analyze task:', error);
+    } finally {
+      setIsAnalyzing(false);
+    }
+  }, [taskDescription, projectInfo]);
+
+  /**
+   * Handle task description change
+   */
+  const handleTaskChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setTaskDescription(e.target.value);
+  }, []);
+
+  /**
+   * Handle flow selection
+   */
+  const handleFlowSelect = useCallback((flow: FlowType) => {
+    setSelectedFlow(flow);
+  }, []);
+
+  /**
+   * Confirm selection
+   */
+  const handleConfirm = useCallback(() => {
+    if (selectedFlow && decision) {
+      onSelect(selectedFlow, decision);
+    }
+  }, [selectedFlow, decision, onSelect]);
+
+  /**
+   * Handle keyboard shortcuts
+   */
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (!isOpen) return;
+
+      if (e.key === 'Escape' && onCancel) {
+        onCancel();
+      } else if (e.key === 'Enter' && e.ctrlKey && selectedFlow && decision) {
+        handleConfirm();
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [isOpen, selectedFlow, decision, onCancel, handleConfirm]);
+
+  /**
+   * Auto-analyze when task description changes (debounced)
+   */
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      if (taskDescription.trim()) {
+        analyzeTask();
+      }
+    }, 800);
+
+    return () => clearTimeout(timer);
+  }, [taskDescription, analyzeTask]);
+
+  if (!isOpen) return null;
+
+  const bgClass = darkMode ? 'bg-gray-900' : 'bg-white';
+  const textClass = darkMode ? 'text-gray-100' : 'text-gray-900';
+  const borderClass = darkMode ? 'border-gray-700' : 'border-gray-300';
+  const inputBgClass = darkMode ? 'bg-gray-800' : 'bg-gray-50';
+  const cardBgClass = darkMode ? 'bg-gray-800' : 'bg-gray-100';
+
+  return (
+    <div className={`fixed inset-0 z-50 flex items-center justify-center ${bgClass} bg-opacity-95`}>
+      <div className={`max-w-4xl w-full mx-4 p-8 rounded-lg shadow-2xl ${cardBgClass} ${textClass} border ${borderClass}`}>
+        {/* Header */}
+        <div className="mb-6">
+          <h2 className="text-3xl font-bold mb-2">Choose Your Workflow 🚀</h2>
+          <p className={`${darkMode ? 'text-gray-400' : 'text-gray-600'}`}>
+            Describe your task and we'll recommend the best approach
+          </p>
+        </div>
+
+        {/* Task Input */}
+        <div className="mb-6">
+          <label className="block mb-2 font-semibold">What do you want to build?</label>
+          <textarea
+            value={taskDescription}
+            onChange={handleTaskChange}
+            placeholder="E.g., Fix the login bug on mobile, Add user authentication, Build a new dashboard..."
+            className={`w-full p-4 rounded-lg border ${borderClass} ${inputBgClass} ${textClass} resize-none focus:outline-none focus:ring-2 focus:ring-blue-500`}
+            rows={4}
+            autoFocus
+          />
+          <p className={`mt-2 text-sm ${darkMode ? 'text-gray-500' : 'text-gray-500'}`}>
+            {taskDescription.length}/500 characters
+          </p>
+        </div>
+
+        {/* Analysis Loading */}
+        {isAnalyzing && (
+          <div className="mb-6 p-4 rounded-lg bg-blue-500 bg-opacity-10 border border-blue-500">
+            <div className="flex items-center">
+              <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-blue-500 mr-3"></div>
+              <span className="text-blue-500">Analyzing your task...</span>
+            </div>
+          </div>
+        )}
+
+        {/* Analysis Results */}
+        {decision && !isAnalyzing && (
+          <div className="mb-6">
+            {/* Recommendation Banner */}
+            <div className={`p-4 rounded-lg mb-4 ${
+              decision.recommendedFlow === 'quick-flow'
+                ? 'bg-green-500 bg-opacity-10 border border-green-500'
+                : 'bg-blue-500 bg-opacity-10 border border-blue-500'
+            }`}>
+              <div className="flex items-center justify-between mb-2">
+                <h3 className="text-lg font-bold">
+                  {decision.recommendedFlow === 'quick-flow' ? '⚡ Quick Flow Recommended' : '🎯 Full Method Recommended'}
+                </h3>
+                <span className={`px-3 py-1 rounded-full text-sm font-semibold ${
+                  decision.confidence >= 80
+                    ? 'bg-green-500 text-white'
+                    : decision.confidence >= 60
+                    ? 'bg-yellow-500 text-black'
+                    : 'bg-gray-500 text-white'
+                }`}>
+                  {decision.confidence}% confident
+                </span>
+              </div>
+
+              {/* Complexity Badge */}
+              <div className="mb-3">
+                <span className={`inline-block px-3 py-1 rounded-full text-xs font-semibold ${getComplexityColor(decision.complexity)}`}>
+                  {decision.complexity.toUpperCase()} COMPLEXITY
+                </span>
+              </div>
+
+              {/* Reasoning */}
+              <div className={`text-sm whitespace-pre-line ${darkMode ? 'text-gray-300' : 'text-gray-700'}`}>
+                {decision.reasoning}
+              </div>
+            </div>
+
+            {/* Flow Comparison Cards */}
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              {/* Quick Flow Card */}
+              <FlowCard
+                type="quick-flow"
+                title="⚡ Quick Flow"
+                description="Fast-track for focused changes"
+                features={[
+                  '✓ Skip Product Brief & PRD',
+                  '✓ Go straight to tech spec',
+                  '✓ Rapid implementation',
+                  '✓ Perfect for: bugs, refactors, small features',
+                ]}
+                isSelected={selectedFlow === 'quick-flow'}
+                isRecommended={decision.recommendedFlow === 'quick-flow'}
+                onClick={() => handleFlowSelect('quick-flow')}
+                darkMode={darkMode}
+              />
+
+              {/* Full Method Card */}
+              <FlowCard
+                type="full-method"
+                title="🎯 Full Method"
+                description="Comprehensive for major work"
+                features={[
+                  '✓ Product Brief & PRD',
+                  '✓ Architecture planning',
+                  '✓ Stakeholder alignment',
+                  '✓ Perfect for: new products, major features',
+                ]}
+                isSelected={selectedFlow === 'full-method'}
+                isRecommended={decision.recommendedFlow === 'full-method'}
+                onClick={() => handleFlowSelect('full-method')}
+                darkMode={darkMode}
+              />
+            </div>
+
+            {/* Matched Keywords */}
+            {decision.matchedKeywords.length > 0 && (
+              <div className="mt-4">
+                <p className={`text-sm mb-2 ${darkMode ? 'text-gray-400' : 'text-gray-600'}`}>
+                  Detected keywords:
+                </p>
+                <div className="flex flex-wrap gap-2">
+                  {decision.matchedKeywords.slice(0, 10).map((keyword) => (
+                    <span
+                      key={keyword}
+                      className={`px-2 py-1 rounded text-xs ${darkMode ? 'bg-gray-700 text-gray-300' : 'bg-gray-200 text-gray-700'}`}
+                    >
+                      {keyword}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Action Buttons */}
+        <div className="flex justify-end gap-3 mt-6">
+          {onCancel && (
+            <button
+              onClick={onCancel}
+              className={`px-6 py-2 rounded-lg font-semibold ${
+                darkMode
+                  ? 'bg-gray-700 text-gray-300 hover:bg-gray-600'
+                  : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
+              } transition-colors`}
+            >
+              Cancel
+            </button>
+          )}
+          <button
+            onClick={handleConfirm}
+            disabled={!selectedFlow || !decision}
+            className={`px-6 py-2 rounded-lg font-semibold ${
+              selectedFlow && decision
+                ? 'bg-blue-500 text-white hover:bg-blue-600'
+                : 'bg-gray-500 text-gray-300 cursor-not-allowed'
+            } transition-colors`}
+          >
+            Continue with {selectedFlow === 'quick-flow' ? 'Quick Flow' : 'Full Method'}
+          </button>
+        </div>
+
+        {/* Keyboard Hints */}
+        <div className={`mt-4 text-xs text-center ${darkMode ? 'text-gray-500' : 'text-gray-500'}`}>
+          Press <kbd className="px-2 py-1 rounded bg-gray-700 text-gray-300">Ctrl+Enter</kbd> to confirm
+          {onCancel && (
+            <>
+              {' or '}
+              <kbd className="px-2 py-1 rounded bg-gray-700 text-gray-300">Esc</kbd> to cancel
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+/**
+ * FlowCard Component
+ */
+interface FlowCardProps {
+  type: FlowType;
+  title: string;
+  description: string;
+  features: string[];
+  isSelected: boolean;
+  isRecommended: boolean;
+  onClick: () => void;
+  darkMode: boolean;
+}
+
+const FlowCard: React.FC<FlowCardProps> = ({
+  title,
+  description,
+  features,
+  isSelected,
+  isRecommended,
+  onClick,
+  darkMode,
+}) => {
+  const borderClass = isSelected
+    ? 'border-blue-500 border-2 shadow-lg'
+    : darkMode
+    ? 'border-gray-600'
+    : 'border-gray-300';
+
+  const bgClass = darkMode ? 'bg-gray-700' : 'bg-white';
+
+  return (
+    <div
+      onClick={onClick}
+      className={`p-4 rounded-lg border ${borderClass} ${bgClass} cursor-pointer hover:shadow-lg transition-all relative`}
+    >
+      {isRecommended && (
+        <div className="absolute top-2 right-2">
+          <span className="bg-green-500 text-white text-xs font-bold px-2 py-1 rounded">
+            RECOMMENDED
+          </span>
+        </div>
+      )}
+
+      <h4 className="text-xl font-bold mb-2">{title}</h4>
+      <p className={`text-sm mb-4 ${darkMode ? 'text-gray-400' : 'text-gray-600'}`}>
+        {description}
+      </p>
+
+      <ul className="space-y-2">
+        {features.map((feature, index) => (
+          <li key={index} className={`text-sm ${darkMode ? 'text-gray-300' : 'text-gray-700'}`}>
+            {feature}
+          </li>
+        ))}
+      </ul>
+
+      {isSelected && (
+        <div className="mt-4 flex items-center justify-center">
+          <div className="bg-blue-500 text-white rounded-full w-6 h-6 flex items-center justify-center">
+            ✓
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+/**
+ * Get complexity badge color
+ */
+function getComplexityColor(complexity: ComplexityLevel): string {
+  const colors: Record<ComplexityLevel, string> = {
+    trivial: 'bg-green-500 text-white',
+    simple: 'bg-green-400 text-white',
+    moderate: 'bg-yellow-500 text-black',
+    complex: 'bg-orange-500 text-white',
+    enterprise: 'bg-red-500 text-white',
+  };
+  return colors[complexity];
+}
+
+/**
+ * Mock task analysis (placeholder for actual IPC integration)
+ */
+function mockAnalyzeTask(
+  taskDescription: string,
+  projectInfo?: FlowSelectorProps['projectInfo']
+): RoutingDecision {
+  const description = taskDescription.toLowerCase();
+
+  // Simple keyword matching
+  const isBugFix = /bug|fix|error|issue|problem|broken/.test(description);
+  const isRefactoring = /refactor|cleanup|optimize|improve/.test(description);
+  const isSmallFeature = /small|minor|simple|quick|add button|add field/.test(description);
+  const isPrototype = /prototype|proof of concept|poc|spike|experiment/.test(description);
+  const isNewProduct = /new product|new application|new app|build from scratch/.test(description);
+  const isMajorFeature = /major feature|new feature|implement|authentication|payment|api/.test(description);
+  const requiresMultipleTeams = /multiple teams|team|cross-team/.test(description);
+  const requiresStakeholderAlignment = /stakeholder|approval|requirements|specification/.test(description);
+
+  const quickFlowScore = [isBugFix, isRefactoring, isSmallFeature, isPrototype].filter(Boolean).length;
+  const fullMethodScore = [isNewProduct, isMajorFeature, requiresMultipleTeams, requiresStakeholderAlignment].filter(Boolean).length;
+
+  const recommendedFlow: FlowType = fullMethodScore > quickFlowScore ? 'full-method' : 'quick-flow';
+  const confidence = Math.min(50 + (Math.max(quickFlowScore, fullMethodScore) * 15), 95);
+
+  let complexity: ComplexityLevel = 'simple';
+  if (isNewProduct || requiresMultipleTeams) complexity = 'complex';
+  else if (isMajorFeature) complexity = 'moderate';
+  else if (isBugFix || isPrototype) complexity = 'trivial';
+
+  const matchedKeywords: string[] = [];
+  if (isBugFix) matchedKeywords.push('bug', 'fix');
+  if (isRefactoring) matchedKeywords.push('refactor');
+  if (isSmallFeature) matchedKeywords.push('small');
+  if (isNewProduct) matchedKeywords.push('new product');
+  if (isMajorFeature) matchedKeywords.push('major feature');
+
+  let reasoning = `Recommended: ${recommendedFlow === 'quick-flow' ? 'Quick Flow' : 'Full Method'}\n\n`;
+
+  if (recommendedFlow === 'quick-flow') {
+    if (isBugFix) reasoning += '• Detected as a bug fix - perfect for Quick Flow\n';
+    if (isRefactoring) reasoning += '• Code refactoring task - ideal for streamlined approach\n';
+    if (isSmallFeature) reasoning += '• Small feature addition - no need for full ceremony\n';
+    if (isPrototype) reasoning += '• Prototype/experiment - Quick Flow enables rapid iteration\n';
+    reasoning += `• Task complexity is ${complexity} - Quick Flow is sufficient`;
+  } else {
+    if (isNewProduct) reasoning += '• New product creation requires comprehensive planning\n';
+    if (isMajorFeature) reasoning += '• Major feature work benefits from full methodology\n';
+    if (requiresMultipleTeams) reasoning += '• Multi-team coordination needs structured approach\n';
+    if (requiresStakeholderAlignment) reasoning += '• Stakeholder alignment requires Product Brief and PRD\n';
+    reasoning += `• Task complexity is ${complexity} - full process recommended`;
+  }
+
+  return {
+    recommendedFlow,
+    confidence,
+    complexity,
+    reasoning,
+    characteristics: {
+      isNewProduct,
+      isMajorFeature,
+      requiresMultipleTeams,
+      requiresStakeholderAlignment,
+      isBugFix,
+      isRefactoring,
+      isSmallFeature,
+      isPrototype,
+    },
+    matchedKeywords,
+  };
+}
+
+export default FlowSelector;