From f68600bb76a566a725ed4ebeab7bdd5ad43932e5 Mon Sep 17 00:00:00 2001 From: Haileyesus Date: Mon, 2 Mar 2026 17:04:02 +0300 Subject: [PATCH] refactor(prd-editor): modularize PRD editor with typed feature modules Break the legacy PRDEditor.jsx monolith into a feature-based TypeScript architecture under src/components/prd-editor while keeping behavior parity and readability. Key changes: - Replace PRDEditor.jsx with a typed orchestrator component and a compatibility export bridge at src/components/PRDEditor.tsx. - Split responsibilities into dedicated hooks: document loading/init, existing PRD registry fetching, save workflow with overwrite detection, and keyboard shortcuts. - Split UI into focused view components: header, editor/preview body, footer stats, loading state, generate-tasks modal, and overwrite-confirm modal. - Move filename concerns into utility helpers (sanitize, extension handling, default naming) and centralize template/constants. - Keep component-local state close to the UI that owns it (workspace controls/modal toggles), while shared workflow state remains in the feature container. - Reuse the existing MarkdownPreview component for safer markdown rendering instead of ad-hoc HTML conversion. - Update TaskMasterPanel integration to consume typed PRDEditor directly (remove any-cast) and pass isExisting metadata for correct overwrite behavior. - Keep all new/changed files below 300 lines and add targeted comments where behavior needs clarification. Validation: - npm run typecheck - npm run build --- src/components/PRDEditor.jsx | 871 ------------------ src/components/PRDEditor.tsx | 1 + .../view/subcomponents/TaskMasterPanel.tsx | 4 +- src/components/prd-editor/PRDEditor.tsx | 138 +++ src/components/prd-editor/constants.ts | 67 ++ .../prd-editor/hooks/usePrdDocument.ts | 132 +++ .../hooks/usePrdKeyboardShortcuts.ts | 34 + .../prd-editor/hooks/usePrdRegistry.ts | 50 + src/components/prd-editor/hooks/usePrdSave.ts | 111 +++ src/components/prd-editor/index.ts | 1 + src/components/prd-editor/types.ts | 30 + src/components/prd-editor/utils/fileName.ts | 18 + .../prd-editor/view/GenerateTasksModal.tsx | 77 ++ .../prd-editor/view/OverwriteConfirmModal.tsx | 60 ++ .../prd-editor/view/PrdEditorBody.tsx | 61 ++ .../prd-editor/view/PrdEditorFooter.tsx | 36 + .../prd-editor/view/PrdEditorHeader.tsx | 228 +++++ .../prd-editor/view/PrdEditorLoadingState.tsx | 12 + .../prd-editor/view/PrdEditorWorkspace.tsx | 114 +++ 19 files changed, 1172 insertions(+), 873 deletions(-) delete mode 100644 src/components/PRDEditor.jsx create mode 100644 src/components/PRDEditor.tsx create mode 100644 src/components/prd-editor/PRDEditor.tsx create mode 100644 src/components/prd-editor/constants.ts create mode 100644 src/components/prd-editor/hooks/usePrdDocument.ts create mode 100644 src/components/prd-editor/hooks/usePrdKeyboardShortcuts.ts create mode 100644 src/components/prd-editor/hooks/usePrdRegistry.ts create mode 100644 src/components/prd-editor/hooks/usePrdSave.ts create mode 100644 src/components/prd-editor/index.ts create mode 100644 src/components/prd-editor/types.ts create mode 100644 src/components/prd-editor/utils/fileName.ts create mode 100644 src/components/prd-editor/view/GenerateTasksModal.tsx create mode 100644 src/components/prd-editor/view/OverwriteConfirmModal.tsx create mode 100644 src/components/prd-editor/view/PrdEditorBody.tsx create mode 100644 src/components/prd-editor/view/PrdEditorFooter.tsx create mode 100644 src/components/prd-editor/view/PrdEditorHeader.tsx create mode 100644 src/components/prd-editor/view/PrdEditorLoadingState.tsx create mode 100644 src/components/prd-editor/view/PrdEditorWorkspace.tsx diff --git a/src/components/PRDEditor.jsx b/src/components/PRDEditor.jsx deleted file mode 100644 index 3f1ff358..00000000 --- a/src/components/PRDEditor.jsx +++ /dev/null @@ -1,871 +0,0 @@ -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*