import React, { useState, useEffect, useRef } from 'react'; import CodeMirror from '@uiw/react-codemirror'; import { markdown } from '@codemirror/lang-markdown'; import { oneDark } from '@codemirror/theme-one-dark'; import { EditorView } from '@codemirror/view'; import { X, Save, Download, Maximize2, Minimize2, Eye, FileText, Sparkles, AlertTriangle } from 'lucide-react'; import { cn } from '../lib/utils'; import { api, authenticatedFetch } from '../utils/api'; const PRDEditor = ({ file, onClose, projectPath, project, // Add project object initialContent = '', isNewFile = false, onSave }) => { const [content, setContent] = useState(initialContent); const [loading, setLoading] = useState(!isNewFile); const [saving, setSaving] = useState(false); const [isFullscreen, setIsFullscreen] = useState(false); const [isDarkMode, setIsDarkMode] = useState(true); const [saveSuccess, setSaveSuccess] = useState(false); const [previewMode, setPreviewMode] = useState(false); const [wordWrap, setWordWrap] = useState(true); // Default to true for markdown const [fileName, setFileName] = useState(''); const [showGenerateModal, setShowGenerateModal] = useState(false); const [showOverwriteConfirm, setShowOverwriteConfirm] = useState(false); const [existingPRDs, setExistingPRDs] = useState([]); const editorRef = useRef(null); const PRD_TEMPLATE = `# Product Requirements Document - Example Project ## 1. Overview **Product Name:** AI-Powered Task Manager **Version:** 1.0 **Date:** 2024-12-27 **Author:** Development Team This document outlines the requirements for building an AI-powered task management application that integrates with development workflows and provides intelligent task breakdown and prioritization. ## 2. Objectives - Create an intuitive task management system that works seamlessly with developer tools - Provide AI-powered task generation from high-level requirements - Enable real-time collaboration and progress tracking - Integrate with popular development environments (VS Code, Cursor, etc.) ### Success Metrics - User adoption rate > 80% within development teams - Task completion rate improvement of 25% - Time-to-delivery reduction of 15% ## 3. User Stories ### Core Functionality - As a project manager, I want to create PRDs that automatically generate detailed tasks so I can save time on project planning - As a developer, I want to see my next task clearly highlighted so I can maintain focus - As a team lead, I want to track progress across multiple projects so I can provide accurate status updates - As a developer, I want tasks to be broken down into implementable subtasks so I can work more efficiently ### AI Integration - As a user, I want to describe a feature in natural language and get detailed implementation tasks so I can start working immediately - As a project manager, I want the AI to analyze task complexity and suggest appropriate time estimates - As a developer, I want intelligent task prioritization based on dependencies and deadlines ### Collaboration - As a team member, I want to see real-time updates when tasks are completed so I can coordinate my work - As a stakeholder, I want to view project progress through intuitive dashboards - As a developer, I want to add implementation notes to tasks for future reference ## 4. Functional Requirements ### Task Management - Create, edit, and delete tasks with rich metadata (priority, status, dependencies, estimates) - Hierarchical task structure with subtasks and sub-subtasks - Real-time status updates and progress tracking - Dependency management with circular dependency detection - Bulk operations (move, update status, assign) ### AI Features - Natural language PRD parsing to generate structured tasks - Intelligent task breakdown with complexity analysis - Automated subtask generation with implementation details - Smart dependency suggestion - Progress prediction based on historical data ### Integration Features - VS Code/Cursor extension for in-editor task management - Git integration for linking commits to tasks - API for third-party tool integration - Webhook support for external notifications - CLI tool for command-line task management ### User Interface - Responsive web application (desktop and mobile) - Multiple view modes (Kanban, list, calendar) - Dark/light theme support - Drag-and-drop task organization - Advanced filtering and search capabilities - Keyboard shortcuts for power users ## 5. Technical Requirements ### Frontend - React.js with TypeScript for type safety - Modern UI framework (Tailwind CSS) - State management (Context API or Redux) - Real-time updates via WebSockets - Progressive Web App (PWA) support - Accessibility compliance (WCAG 2.1 AA) ### Backend - Node.js with Express.js framework - RESTful API design with OpenAPI documentation - Real-time communication via Socket.io - Background job processing - Rate limiting and security middleware ### AI Integration - Integration with multiple AI providers (OpenAI, Anthropic, etc.) - Fallback model support - Context-aware prompt engineering - Token usage optimization - Model response caching ### Database - Primary: PostgreSQL for relational data - Cache: Redis for session management and real-time features - Full-text search capabilities - Database migrations and seeding - Backup and recovery procedures ### Infrastructure - Docker containerization - Cloud deployment (AWS/GCP/Azure) - Auto-scaling capabilities - Monitoring and logging (structured logging) - CI/CD pipeline with automated testing ## 6. Non-Functional Requirements ### Performance - Page load time < 2 seconds - API response time < 500ms for 95% of requests - Support for 1000+ concurrent users - Efficient handling of large task lists (10,000+ tasks) ### Security - JWT-based authentication with refresh tokens - Role-based access control (RBAC) - Data encryption at rest and in transit - Regular security audits and penetration testing - GDPR and privacy compliance ### Reliability - 99.9% uptime SLA - Graceful error handling and recovery - Data backup every 6 hours with point-in-time recovery - Disaster recovery plan with RTO < 4 hours ### Scalability - Horizontal scaling for both frontend and backend - Database read replicas for query optimization - CDN for static asset delivery - Microservices architecture for future expansion ## 7. User Experience Design ### Information Architecture - Intuitive navigation with breadcrumbs - Context-aware menus and actions - Progressive disclosure of complex features - Consistent design patterns throughout ### Interaction Design - Smooth animations and transitions - Immediate feedback for user actions - Undo/redo functionality for critical operations - Smart defaults and auto-save features ### Visual Design - Modern, clean interface with plenty of whitespace - Consistent color scheme and typography - Clear visual hierarchy with proper contrast ratios - Iconography that supports comprehension ## 8. Integration Requirements ### Development Tools - VS Code extension with task panel and quick actions - Cursor IDE integration with AI task suggestions - Terminal CLI for command-line workflow - Browser extension for web-based tools ### Third-Party Services - GitHub/GitLab integration for issue sync - Slack/Discord notifications - Calendar integration (Google Calendar, Outlook) - Time tracking tools (Toggl, Harvest) ### APIs and Webhooks - RESTful API with comprehensive documentation - GraphQL endpoint for complex queries - Webhook system for external integrations - SDK development for major programming languages ## 9. Implementation Phases ### Phase 1: Core MVP (8-10 weeks) - Basic task management (CRUD operations) - Simple AI task generation - Web interface with essential features - User authentication and basic permissions ### Phase 2: Enhanced Features (6-8 weeks) - Advanced AI features (complexity analysis, subtask generation) - Real-time collaboration - Mobile-responsive design - Integration with one development tool (VS Code) ### Phase 3: Enterprise Features (4-6 weeks) - Advanced user management and permissions - API and webhook system - Performance optimization - Comprehensive testing and security audit ### Phase 4: Ecosystem Expansion (4-6 weeks) - Additional tool integrations - Mobile app development - Advanced analytics and reporting - Third-party marketplace preparation ## 10. Risk Assessment ### Technical Risks - AI model reliability and cost management - Real-time synchronization complexity - Database performance with large datasets - Integration complexity with multiple tools ### Business Risks - User adoption in competitive market - AI provider dependency - Data privacy and security concerns - Feature scope creep and timeline delays ### Mitigation Strategies - Implement robust error handling and fallback systems - Develop comprehensive testing strategy - Create detailed documentation and user guides - Establish clear project scope and change management process ## 11. Success Criteria ### Development Milestones - Alpha version with core features completed - Beta version with selected user group feedback - Production-ready version with full feature set - Post-launch iterations based on user feedback ### Business Metrics - User engagement and retention rates - Task completion and productivity metrics - Customer satisfaction scores (NPS > 50) - Revenue targets and subscription growth ## 12. Appendices ### Glossary - **PRD**: Product Requirements Document - **AI**: Artificial Intelligence - **CRUD**: Create, Read, Update, Delete - **API**: Application Programming Interface - **CI/CD**: Continuous Integration/Continuous Deployment ### References - Industry best practices for task management - AI integration patterns and examples - Security and compliance requirements - Performance benchmarking data --- **Document Control:** - Version: 1.0 - Last Updated: December 27, 2024 - Next Review: January 15, 2025 - Approved By: Product Owner, Technical Lead`; // Initialize filename and load content useEffect(() => { const initializeEditor = async () => { // Set initial filename if (file?.name) { setFileName(file.name.replace(/\.(txt|md)$/, '')); // Remove extension for editing } else if (isNewFile) { // Generate default filename based on current date const now = new Date(); const dateStr = now.toISOString().split('T')[0]; // YYYY-MM-DD setFileName(`prd-${dateStr}`); } // Load content if (isNewFile) { setContent(PRD_TEMPLATE); setLoading(false); return; } // If content is directly provided (for existing PRDs loaded from API) if (file.content) { setContent(file.content); setLoading(false); return; } // Fallback to loading from file path (legacy support) try { setLoading(true); const response = await api.readFile(file.projectName, file.path); if (!response.ok) { throw new Error(`Failed to load file: ${response.status} ${response.statusText}`); } const data = await response.json(); setContent(data.content || PRD_TEMPLATE); } catch (error) { console.error('Error loading PRD file:', error); setContent(`# Error Loading PRD\n\nError: ${error.message}\n\nFile: ${file?.name || 'New PRD'}\nPath: ${file?.path || 'Not saved yet'}\n\n${PRD_TEMPLATE}`); } finally { setLoading(false); } }; initializeEditor(); }, [file, projectPath, isNewFile]); // Fetch existing PRDs to check for conflicts useEffect(() => { const fetchExistingPRDs = async () => { if (!project?.name) { console.log('No project name available:', project); return; } try { console.log('Fetching PRDs for project:', project.name); const response = await api.get(`/taskmaster/prd/${encodeURIComponent(project.name)}`); if (response.ok) { const data = await response.json(); console.log('Fetched existing PRDs:', data.prds); setExistingPRDs(data.prds || []); } else { console.log('Failed to fetch PRDs:', response.status, response.statusText); } } catch (error) { console.error('Error fetching existing PRDs:', error); } }; fetchExistingPRDs(); }, [project?.name]); const handleSave = async () => { if (!content.trim()) { alert('Please add content before saving.'); return; } if (!fileName.trim()) { alert('Please provide a filename for the PRD.'); return; } // Check if file already exists const fullFileName = fileName.endsWith('.txt') || fileName.endsWith('.md') ? fileName : `${fileName}.txt`; const existingFile = existingPRDs.find(prd => prd.name === fullFileName); console.log('Save check:', { fullFileName, existingPRDs, existingFile, isExisting: file?.isExisting, fileObject: file, shouldShowModal: existingFile && !file?.isExisting }); if (existingFile && !file?.isExisting) { console.log('Showing overwrite confirmation modal'); // Show confirmation modal for overwrite setShowOverwriteConfirm(true); return; } await performSave(); }; const performSave = async () => { setSaving(true); try { // Ensure filename has .txt extension const fullFileName = fileName.endsWith('.txt') || fileName.endsWith('.md') ? fileName : `${fileName}.txt`; const response = await authenticatedFetch(`/api/taskmaster/prd/${encodeURIComponent(project?.name)}`, { method: 'POST', body: JSON.stringify({ fileName: fullFileName, content }) }); if (!response.ok) { const errorData = await response.json(); throw new Error(errorData.message || `Save failed: ${response.status}`); } // Show success feedback setSaveSuccess(true); setTimeout(() => setSaveSuccess(false), 2000); // Update existing PRDs list const response2 = await api.get(`/taskmaster/prd/${encodeURIComponent(project.name)}`); if (response2.ok) { const data = await response2.json(); setExistingPRDs(data.prds || []); } // Call the onSave callback if provided (for UI updates) if (onSave) { await onSave(); } } catch (error) { console.error('Error saving PRD:', error); alert(`Error saving PRD: ${error.message}`); } finally { setSaving(false); } }; const handleDownload = () => { const blob = new Blob([content], { type: 'text/markdown' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; const downloadFileName = fileName ? `${fileName}.txt` : 'prd.txt'; a.download = downloadFileName; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); }; const handleGenerateTasks = async () => { if (!content.trim()) { alert('Please add content to the PRD before generating tasks.'); return; } // Show AI-first modal instead of simple confirm setShowGenerateModal(true); }; const toggleFullscreen = () => { setIsFullscreen(!isFullscreen); }; // Handle keyboard shortcuts useEffect(() => { const handleKeyDown = (e) => { if (e.ctrlKey || e.metaKey) { if (e.key === 's') { e.preventDefault(); handleSave(); } else if (e.key === 'Escape') { e.preventDefault(); onClose(); } } }; document.addEventListener('keydown', handleKeyDown); return () => document.removeEventListener('keydown', handleKeyDown); }, [content]); // Simple markdown to HTML converter for preview const renderMarkdown = (markdown) => { return markdown .replace(/^### (.*$)/gim, '

$1

') .replace(/^## (.*$)/gim, '

$1

') .replace(/^# (.*$)/gim, '

$1

') .replace(/\*\*(.*)\*\*/gim, '$1') .replace(/\*(.*)\*/gim, '$1') .replace(/^\- (.*$)/gim, '
  • $1
    • ') .replace(/(
  • .*<\/li>)/gims, '') .replace(/\n\n/gim, '

    ') .replace(/^(?!<[h|u|l])(.*$)/gim, '

    $1

    ') .replace(/<\/ul>\s*