-
- {/* Header */}
-
-
-
-
-
- {/* Mobile: Stack filename and tags vertically for more space */}
-
- {/* Filename input row - full width on mobile */}
-
-
- .txt
-
-
document.querySelector('input[placeholder="Enter PRD filename"]')?.focus()}
- className="p-1 text-gray-400 hover:text-purple-600 dark:hover:text-purple-400 transition-colors"
- title="Click to edit filename"
- >
-
-
-
-
-
- {/* Tags row - moves to second line on mobile for more filename space */}
-
-
- 📋 PRD
-
- {isNewFile && (
-
- ✨ New
-
- )}
-
-
-
- {/* Description - smaller on mobile */}
-
- Product Requirements Document
-
-
-
-
-
-
setPreviewMode(!previewMode)}
- className={cn(
- 'p-2 md:p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800',
- 'min-w-[44px] min-h-[44px] md:min-w-0 md:min-h-0 flex items-center justify-center',
- previewMode
- ? 'text-purple-600 dark:text-purple-400 bg-purple-50 dark:bg-purple-900'
- : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
- )}
- title={previewMode ? 'Switch to edit mode' : 'Preview markdown'}
- >
-
-
-
setWordWrap(!wordWrap)}
- className={cn(
- 'p-2 md:p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800',
- 'min-w-[44px] min-h-[44px] md:min-w-0 md:min-h-0 flex items-center justify-center',
- wordWrap
- ? 'text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900'
- : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
- )}
- title={wordWrap ? 'Disable word wrap' : 'Enable word wrap'}
- >
- ↵
-
-
-
setIsDarkMode(!isDarkMode)}
- className="p-2 md:p-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 min-w-[44px] min-h-[44px] md:min-w-0 md:min-h-0 flex items-center justify-center"
- title="Toggle theme"
- >
- {isDarkMode ? '☀️' : '🌙'}
-
-
-
-
-
-
- Generate Tasks
-
-
-
- {saveSuccess ? (
- <>
-
-
- Saved!
-
- ) : (
- <>
- {saving ? 'Saving...' : 'Save PRD'}
-
- )}
-
-
-
- {isFullscreen ?
-
-
-
-
-
-
- {/* Editor/Preview Content */}
-
- {previewMode ? (
-
- ) : (
-
- )}
-
-
- {/* Footer */}
-
-
- Lines: {content.split('\n').length}
- Characters: {content.length}
- Words: {content.split(/\s+/).filter(word => word.length > 0).length}
- Format: Markdown
-
-
-
- Press Ctrl+S to save • Esc to close
-
-
-
-
- {/* Generate Tasks Modal */}
- {showGenerateModal && (
-
-
- {/* Header */}
-
-
-
-
-
Generate Tasks from PRD
-
-
setShowGenerateModal(false)}
- className="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700"
- >
-
-
-
- {/* Content */}
-
- {/* AI-First Approach */}
-
-
-
-
-
-
- 💡 Pro Tip: Ask Claude Code Directly!
-
-
- You can simply ask Claude Code in the chat to parse your PRD and generate tasks.
- The AI assistant will automatically save your PRD and create detailed tasks with implementation details.
-
-
-
-
💬 Example:
-
- "I've just initialized a new project with Claude Task Master. I have a PRD at .taskmaster/docs/{fileName.endsWith('.txt') || fileName.endsWith('.md') ? fileName : `${fileName}.txt`}. Can you help me parse it and set up the initial tasks?"
-
-
-
-
- This will: Save your PRD, analyze its content, and generate structured tasks with subtasks, dependencies, and implementation details.
-
-
-
-
-
- {/* Learn More Link */}
-
-
- {/* Footer */}
-
- setShowGenerateModal(false)}
- className="w-full px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
- >
- Got it, I'll ask Claude Code directly
-
-
-
-
-
- )}
-
- {/* Overwrite Confirmation Modal */}
- {showOverwriteConfirm && (
-
-
setShowOverwriteConfirm(false)} />
-
-
-
-
-
- File Already Exists
-
-
-
-
- A PRD file named "{fileName.endsWith('.txt') || fileName.endsWith('.md') ? fileName : `${fileName}.txt`}" already exists.
- Do you want to overwrite it with the current content?
-
-
-
- setShowOverwriteConfirm(false)}
- className="px-4 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
- >
- Cancel
-
- {
- setShowOverwriteConfirm(false);
- await performSave();
- }}
- className="px-4 py-2 text-sm text-white bg-yellow-600 hover:bg-yellow-700 rounded-md flex items-center space-x-2 transition-colors"
- >
- Overwrite
-
-
-
-
-
- )}
-
- );
-};
-
-export default PRDEditor;
\ No newline at end of file
diff --git a/src/components/PRDEditor.tsx b/src/components/PRDEditor.tsx
new file mode 100644
index 00000000..80a59f24
--- /dev/null
+++ b/src/components/PRDEditor.tsx
@@ -0,0 +1 @@
+export { default } from './prd-editor';
diff --git a/src/components/main-content/view/subcomponents/TaskMasterPanel.tsx b/src/components/main-content/view/subcomponents/TaskMasterPanel.tsx
index 91810cfe..27554f29 100644
--- a/src/components/main-content/view/subcomponents/TaskMasterPanel.tsx
+++ b/src/components/main-content/view/subcomponents/TaskMasterPanel.tsx
@@ -9,7 +9,6 @@ import type { PrdFile, TaskMasterPanelProps, TaskMasterTask, TaskSelection } fro
const AnyTaskList = TaskList as any;
const AnyTaskDetail = TaskDetail as any;
-const AnyPRDEditor = PRDEditor as any;
type TaskMasterContextValue = {
tasks?: TaskMasterTask[];
@@ -178,7 +177,7 @@ export default function TaskMasterPanel({ isVisible }: TaskMasterPanelProps) {
)}
{showPRDEditor && (
-
diff --git a/src/components/prd-editor/PRDEditor.tsx b/src/components/prd-editor/PRDEditor.tsx
new file mode 100644
index 00000000..3ad89d63
--- /dev/null
+++ b/src/components/prd-editor/PRDEditor.tsx
@@ -0,0 +1,138 @@
+import { useCallback, useMemo, useState } from 'react';
+import type { Project } from '../../types/app';
+import { usePrdDocument } from './hooks/usePrdDocument';
+import { usePrdKeyboardShortcuts } from './hooks/usePrdKeyboardShortcuts';
+import { usePrdRegistry } from './hooks/usePrdRegistry';
+import { usePrdSave } from './hooks/usePrdSave';
+import type { PrdFile } from './types';
+import { ensurePrdExtension } from './utils/fileName';
+import OverwriteConfirmModal from './view/OverwriteConfirmModal';
+import PrdEditorLoadingState from './view/PrdEditorLoadingState';
+import PrdEditorWorkspace from './view/PrdEditorWorkspace';
+
+type PRDEditorProps = {
+ file?: PrdFile | null;
+ onClose: () => void;
+ projectPath?: string;
+ project?: Project | null;
+ initialContent?: string;
+ isNewFile?: boolean;
+ onSave?: () => Promise
| void;
+};
+
+export default function PRDEditor({
+ file,
+ onClose,
+ projectPath,
+ project,
+ initialContent = '',
+ isNewFile = false,
+ onSave,
+}: PRDEditorProps) {
+ const [showOverwriteConfirm, setShowOverwriteConfirm] = useState(false);
+ const [overwriteFileName, setOverwriteFileName] = useState('');
+
+ const { content, setContent, fileName, setFileName, loading, loadError } = usePrdDocument({
+ file,
+ isNewFile,
+ initialContent,
+ projectPath,
+ });
+
+ const { existingPrds, refreshExistingPrds } = usePrdRegistry({
+ projectName: project?.name,
+ });
+
+ const isExistingFile = useMemo(() => !isNewFile || Boolean(file?.isExisting), [file?.isExisting, isNewFile]);
+
+ const { savePrd, saving, saveSuccess } = usePrdSave({
+ projectName: project?.name,
+ existingPrds,
+ isExistingFile,
+ onAfterSave: async () => {
+ await refreshExistingPrds();
+ await onSave?.();
+ },
+ });
+
+ const handleDownload = useCallback(() => {
+ const blob = new Blob([content], { type: 'text/markdown' });
+ const url = URL.createObjectURL(blob);
+ const anchor = document.createElement('a');
+ const downloadedFileName = ensurePrdExtension(fileName || 'prd');
+
+ anchor.href = url;
+ anchor.download = downloadedFileName;
+ document.body.appendChild(anchor);
+ anchor.click();
+ document.body.removeChild(anchor);
+ URL.revokeObjectURL(url);
+ }, [content, fileName]);
+
+ const handleSave = useCallback(
+ async (allowOverwrite = false) => {
+ const result = await savePrd({
+ content,
+ fileName,
+ allowOverwrite,
+ });
+
+ if (result.status === 'needs-overwrite') {
+ setOverwriteFileName(result.fileName);
+ setShowOverwriteConfirm(true);
+ return;
+ }
+
+ if (result.status === 'failed') {
+ alert(result.message);
+ }
+ },
+ [content, fileName, savePrd],
+ );
+
+ const confirmOverwrite = useCallback(async () => {
+ setShowOverwriteConfirm(false);
+ await handleSave(true);
+ }, [handleSave]);
+
+ usePrdKeyboardShortcuts({
+ onSave: () => {
+ void handleSave();
+ },
+ onClose,
+ });
+
+ if (loading) {
+ return {
+ void handleSave();
+ }}
+ onDownload={handleDownload}
+ onClose={onClose}
+ loadError={loadError}
+ />
+
+ setShowOverwriteConfirm(false)}
+ onConfirm={() => {
+ void confirmOverwrite();
+ }}
+ />
+
+ );
+}
diff --git a/src/components/prd-editor/constants.ts b/src/components/prd-editor/constants.ts
new file mode 100644
index 00000000..527d03f8
--- /dev/null
+++ b/src/components/prd-editor/constants.ts
@@ -0,0 +1,67 @@
+export const PRD_TEMPLATE = `# Product Requirements Document
+
+## 1. Overview
+- Product Name:
+- Owner:
+- Last Updated:
+- Version:
+
+Describe what problem this product solves and who it serves.
+
+## 2. Objectives
+- Primary objective:
+- Secondary objective:
+- Out-of-scope:
+
+## 3. User Stories
+- As a , I want , so that .
+- As a , I want , so that .
+
+## 4. Functional Requirements
+### Core Requirements
+- Requirement 1
+- Requirement 2
+
+### Edge Cases
+- Edge case 1
+- Edge case 2
+
+## 5. Non-Functional Requirements
+- Performance:
+- Security:
+- Reliability:
+- Accessibility:
+
+## 6. Success Metrics
+- Metric 1:
+- Metric 2:
+
+## 7. Technical Notes
+- Architecture constraints:
+- Dependencies:
+- Integration points:
+
+## 8. Release Plan
+### Milestone 1
+- Scope:
+- Exit criteria:
+
+### Milestone 2
+- Scope:
+- Exit criteria:
+
+## 9. Risks and Mitigations
+- Risk:
+ - Impact:
+ - Mitigation:
+
+## 10. Open Questions
+- Question 1
+- Question 2
+`;
+
+export const PRD_DOCS_URL =
+ 'https://github.com/eyaltoledano/claude-task-master/blob/main/docs/examples.md';
+
+export const INVALID_FILE_NAME_CHARACTERS = /[<>:"/\\|?*]/g;
+export const PRD_EXTENSION_PATTERN = /\.(txt|md)$/i;
diff --git a/src/components/prd-editor/hooks/usePrdDocument.ts b/src/components/prd-editor/hooks/usePrdDocument.ts
new file mode 100644
index 00000000..3728caf4
--- /dev/null
+++ b/src/components/prd-editor/hooks/usePrdDocument.ts
@@ -0,0 +1,132 @@
+import { useCallback, useEffect, useState } from 'react';
+import { api } from '../../../utils/api';
+import { PRD_TEMPLATE } from '../constants';
+import type { PrdFile } from '../types';
+import { createDefaultPrdName, sanitizeFileName, stripPrdExtension } from '../utils/fileName';
+
+type UsePrdDocumentArgs = {
+ file?: PrdFile | null;
+ isNewFile: boolean;
+ initialContent: string;
+ projectPath?: string;
+};
+
+type UsePrdDocumentResult = {
+ content: string;
+ setContent: (nextContent: string) => void;
+ fileName: string;
+ setFileName: (nextFileName: string) => void;
+ loading: boolean;
+ loadError: string | null;
+};
+
+export function usePrdDocument({
+ file,
+ isNewFile,
+ initialContent,
+ projectPath,
+}: UsePrdDocumentArgs): UsePrdDocumentResult {
+ const [content, setContent] = useState(initialContent || '');
+ const [fileName, setFileNameState] = useState('');
+ const [loading, setLoading] = useState(!isNewFile);
+ const [loadError, setLoadError] = useState(null);
+
+ const setFileName = useCallback((nextFileName: string) => {
+ setFileNameState(sanitizeFileName(nextFileName));
+ }, []);
+
+ useEffect(() => {
+ let isMounted = true;
+
+ const initialize = async () => {
+ const defaultName = file?.name
+ ? stripPrdExtension(file.name)
+ : createDefaultPrdName(new Date());
+
+ if (isMounted) {
+ setFileNameState(defaultName);
+ }
+
+ // Loading precedence:
+ // 1) new file -> initial content or template
+ // 2) provided content -> use it directly
+ // 3) legacy file path -> fetch from API
+ if (isNewFile) {
+ if (!isMounted) {
+ return;
+ }
+
+ setContent(initialContent || PRD_TEMPLATE);
+ setLoadError(null);
+ setLoading(false);
+ return;
+ }
+
+ if (file?.content) {
+ if (!isMounted) {
+ return;
+ }
+
+ setContent(file.content);
+ setLoadError(null);
+ setLoading(false);
+ return;
+ }
+
+ if (!file?.projectName || !file?.path) {
+ if (!isMounted) {
+ return;
+ }
+
+ setContent(initialContent || PRD_TEMPLATE);
+ setLoadError(null);
+ setLoading(false);
+ return;
+ }
+
+ 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()) as { content?: string };
+ if (!isMounted) {
+ return;
+ }
+
+ setContent(data.content || PRD_TEMPLATE);
+ setLoadError(null);
+ } catch (error) {
+ const message = error instanceof Error ? error.message : 'Unknown error';
+ if (!isMounted) {
+ return;
+ }
+
+ setContent(initialContent || PRD_TEMPLATE);
+ setLoadError(`Unable to load file content: ${message}`);
+ } finally {
+ if (isMounted) {
+ setLoading(false);
+ }
+ }
+ };
+
+ void initialize();
+
+ return () => {
+ isMounted = false;
+ };
+ }, [file, initialContent, isNewFile, projectPath]);
+
+ return {
+ content,
+ setContent,
+ fileName,
+ setFileName,
+ loading,
+ loadError,
+ };
+}
diff --git a/src/components/prd-editor/hooks/usePrdKeyboardShortcuts.ts b/src/components/prd-editor/hooks/usePrdKeyboardShortcuts.ts
new file mode 100644
index 00000000..8834f791
--- /dev/null
+++ b/src/components/prd-editor/hooks/usePrdKeyboardShortcuts.ts
@@ -0,0 +1,34 @@
+import { useEffect } from 'react';
+
+type UsePrdKeyboardShortcutsArgs = {
+ onSave: () => void;
+ onClose: () => void;
+};
+
+export function usePrdKeyboardShortcuts({
+ onSave,
+ onClose,
+}: UsePrdKeyboardShortcutsArgs): void {
+ useEffect(() => {
+ // Keep shortcuts global so the editor behaves consistently in fullscreen and modal mode.
+ const handleKeyDown = (event: KeyboardEvent) => {
+ const loweredKey = event.key.toLowerCase();
+
+ if ((event.ctrlKey || event.metaKey) && loweredKey === 's') {
+ event.preventDefault();
+ onSave();
+ return;
+ }
+
+ if (event.key === 'Escape') {
+ event.preventDefault();
+ onClose();
+ }
+ };
+
+ document.addEventListener('keydown', handleKeyDown);
+ return () => {
+ document.removeEventListener('keydown', handleKeyDown);
+ };
+ }, [onClose, onSave]);
+}
diff --git a/src/components/prd-editor/hooks/usePrdRegistry.ts b/src/components/prd-editor/hooks/usePrdRegistry.ts
new file mode 100644
index 00000000..f7a40856
--- /dev/null
+++ b/src/components/prd-editor/hooks/usePrdRegistry.ts
@@ -0,0 +1,50 @@
+import { useCallback, useEffect, useState } from 'react';
+import { api } from '../../../utils/api';
+import type { ExistingPrdFile, PrdListResponse } from '../types';
+
+type UsePrdRegistryArgs = {
+ projectName?: string;
+};
+
+type UsePrdRegistryResult = {
+ existingPrds: ExistingPrdFile[];
+ refreshExistingPrds: () => Promise;
+};
+
+function getPrdFiles(data: PrdListResponse): ExistingPrdFile[] {
+ return data.prdFiles || data.prds || [];
+}
+
+export function usePrdRegistry({ projectName }: UsePrdRegistryArgs): UsePrdRegistryResult {
+ const [existingPrds, setExistingPrds] = useState([]);
+
+ const refreshExistingPrds = useCallback(async () => {
+ if (!projectName) {
+ setExistingPrds([]);
+ return;
+ }
+
+ try {
+ const response = await api.get(`/taskmaster/prd/${encodeURIComponent(projectName)}`);
+ if (!response.ok) {
+ setExistingPrds([]);
+ return;
+ }
+
+ const data = (await response.json()) as PrdListResponse;
+ setExistingPrds(getPrdFiles(data));
+ } catch (error) {
+ console.error('Failed to fetch existing PRDs:', error);
+ setExistingPrds([]);
+ }
+ }, [projectName]);
+
+ useEffect(() => {
+ void refreshExistingPrds();
+ }, [refreshExistingPrds]);
+
+ return {
+ existingPrds,
+ refreshExistingPrds,
+ };
+}
diff --git a/src/components/prd-editor/hooks/usePrdSave.ts b/src/components/prd-editor/hooks/usePrdSave.ts
new file mode 100644
index 00000000..1d802ad5
--- /dev/null
+++ b/src/components/prd-editor/hooks/usePrdSave.ts
@@ -0,0 +1,111 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { authenticatedFetch } from '../../../utils/api';
+import type { ExistingPrdFile, SavePrdInput, SavePrdResult } from '../types';
+import { ensurePrdExtension } from '../utils/fileName';
+
+type UsePrdSaveArgs = {
+ projectName?: string;
+ existingPrds: ExistingPrdFile[];
+ isExistingFile: boolean;
+ onAfterSave?: () => Promise;
+};
+
+type UsePrdSaveResult = {
+ savePrd: (input: SavePrdInput) => Promise;
+ saving: boolean;
+ saveSuccess: boolean;
+};
+
+export function usePrdSave({
+ projectName,
+ existingPrds,
+ isExistingFile,
+ onAfterSave,
+}: UsePrdSaveArgs): UsePrdSaveResult {
+ const [saving, setSaving] = useState(false);
+ const [saveSuccess, setSaveSuccess] = useState(false);
+ const saveSuccessTimeoutRef = useRef | null>(null);
+
+ useEffect(() => {
+ return () => {
+ if (saveSuccessTimeoutRef.current) {
+ clearTimeout(saveSuccessTimeoutRef.current);
+ }
+ };
+ }, []);
+
+ const savePrd = useCallback(
+ async ({ content, fileName, allowOverwrite = false }: SavePrdInput): Promise => {
+ if (!content.trim()) {
+ return { status: 'failed', message: 'Please add content before saving.' };
+ }
+
+ if (!fileName.trim()) {
+ return { status: 'failed', message: 'Please provide a filename for the PRD.' };
+ }
+
+ if (!projectName) {
+ return { status: 'failed', message: 'No project selected. Please reopen the editor.' };
+ }
+
+ const finalFileName = ensurePrdExtension(fileName.trim());
+ const hasConflict = existingPrds.some((prd) => prd.name === finalFileName);
+
+ // Overwrite confirmation is only required when creating a brand-new PRD.
+ if (hasConflict && !allowOverwrite && !isExistingFile) {
+ return { status: 'needs-overwrite', fileName: finalFileName };
+ }
+
+ setSaving(true);
+
+ try {
+ const response = await authenticatedFetch(`/api/taskmaster/prd/${encodeURIComponent(projectName)}`, {
+ method: 'POST',
+ body: JSON.stringify({
+ fileName: finalFileName,
+ content,
+ }),
+ });
+
+ if (!response.ok) {
+ const fallbackMessage = `Save failed: ${response.status}`;
+
+ try {
+ const errorData = (await response.json()) as { message?: string };
+ return { status: 'failed', message: errorData.message || fallbackMessage };
+ } catch {
+ return { status: 'failed', message: fallbackMessage };
+ }
+ }
+
+ if (saveSuccessTimeoutRef.current) {
+ clearTimeout(saveSuccessTimeoutRef.current);
+ }
+
+ setSaveSuccess(true);
+ saveSuccessTimeoutRef.current = setTimeout(() => {
+ setSaveSuccess(false);
+ saveSuccessTimeoutRef.current = null;
+ }, 2000);
+
+ if (onAfterSave) {
+ await onAfterSave();
+ }
+
+ return { status: 'saved', fileName: finalFileName };
+ } catch (error) {
+ const message = error instanceof Error ? error.message : 'Unknown error';
+ return { status: 'failed', message: `Error saving PRD: ${message}` };
+ } finally {
+ setSaving(false);
+ }
+ },
+ [existingPrds, isExistingFile, onAfterSave, projectName],
+ );
+
+ return {
+ savePrd,
+ saving,
+ saveSuccess,
+ };
+}
diff --git a/src/components/prd-editor/index.ts b/src/components/prd-editor/index.ts
new file mode 100644
index 00000000..1732efcf
--- /dev/null
+++ b/src/components/prd-editor/index.ts
@@ -0,0 +1 @@
+export { default } from './PRDEditor';
diff --git a/src/components/prd-editor/types.ts b/src/components/prd-editor/types.ts
new file mode 100644
index 00000000..c9ddfd85
--- /dev/null
+++ b/src/components/prd-editor/types.ts
@@ -0,0 +1,30 @@
+export type PrdFile = {
+ name?: string;
+ path?: string;
+ projectName?: string;
+ content?: string;
+ isExisting?: boolean;
+};
+
+export type ExistingPrdFile = {
+ name: string;
+ content?: string;
+ isExisting?: boolean;
+ [key: string]: unknown;
+};
+
+export type PrdListResponse = {
+ prdFiles?: ExistingPrdFile[];
+ prds?: ExistingPrdFile[];
+};
+
+export type SavePrdInput = {
+ content: string;
+ fileName: string;
+ allowOverwrite?: boolean;
+};
+
+export type SavePrdResult =
+ | { status: 'saved'; fileName: string }
+ | { status: 'needs-overwrite'; fileName: string }
+ | { status: 'failed'; message: string };
diff --git a/src/components/prd-editor/utils/fileName.ts b/src/components/prd-editor/utils/fileName.ts
new file mode 100644
index 00000000..47c0eb4a
--- /dev/null
+++ b/src/components/prd-editor/utils/fileName.ts
@@ -0,0 +1,18 @@
+import { INVALID_FILE_NAME_CHARACTERS, PRD_EXTENSION_PATTERN } from '../constants';
+
+export function sanitizeFileName(value: string): string {
+ return value.replace(INVALID_FILE_NAME_CHARACTERS, '');
+}
+
+export function stripPrdExtension(value: string): string {
+ return value.replace(PRD_EXTENSION_PATTERN, '');
+}
+
+export function ensurePrdExtension(value: string): string {
+ return PRD_EXTENSION_PATTERN.test(value) ? value : `${value}.txt`;
+}
+
+export function createDefaultPrdName(date: Date): string {
+ const isoDate = date.toISOString().split('T')[0];
+ return `prd-${isoDate}`;
+}
diff --git a/src/components/prd-editor/view/GenerateTasksModal.tsx b/src/components/prd-editor/view/GenerateTasksModal.tsx
new file mode 100644
index 00000000..ca1ad280
--- /dev/null
+++ b/src/components/prd-editor/view/GenerateTasksModal.tsx
@@ -0,0 +1,77 @@
+import { Sparkles, X } from 'lucide-react';
+import { PRD_DOCS_URL } from '../constants';
+
+type GenerateTasksModalProps = {
+ isOpen: boolean;
+ fileName: string;
+ onClose: () => void;
+};
+
+export default function GenerateTasksModal({
+ isOpen,
+ fileName,
+ onClose,
+}: GenerateTasksModalProps) {
+ if (!isOpen) {
+ return null;
+ }
+
+ return (
+
+
+
+
+
+
+
+ Generate Tasks from PRD
+
+
+
+
+
+
+
+
+
+ Ask Claude Code directly
+
+
+ Save this PRD, then ask Claude Code in chat to parse the file and create your initial tasks.
+
+
+
+
Example prompt
+
+ I have a PRD at .taskmaster/docs/{fileName}. Parse it and create the initial tasks.
+
+
+
+
+
+
+
+ Got it
+
+
+
+
+
+
+
+
+
+
+
File Already Exists
+
+
+
+ A PRD named "{fileName}" already exists. Do you want to overwrite it?
+
+
+
+
+ Cancel
+
+
+ {saving ? 'Saving...' : 'Overwrite'}
+
+
+
+
+
+
+ );
+ }
+
+ return (
+
+
+ Lines: {stats.lines}
+ Characters: {stats.characters}
+ Words: {stats.words}
+ Format: Markdown
+
+
+
Press Ctrl+S to save and Esc to close
+
+ {icon}
+
+ );
+}
+
+export default function PrdEditorHeader({
+ fileName,
+ onFileNameChange,
+ isNewFile,
+ previewMode,
+ onTogglePreview,
+ wordWrap,
+ onToggleWordWrap,
+ isDarkMode,
+ onToggleTheme,
+ onDownload,
+ onOpenGenerateTasks,
+ canGenerateTasks,
+ onSave,
+ saving,
+ saveSuccess,
+ isFullscreen,
+ onToggleFullscreen,
+ onClose,
+}: PrdEditorHeaderProps) {
+ const fileNameInputRef = useRef(null);
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ .txt
+
+
+
+
fileNameInputRef.current?.focus()}
+ className="p-1 text-gray-400 hover:text-purple-600 dark:hover:text-purple-400 transition-colors"
+ title="Focus filename input"
+ >
+
+
+
+
+
+
+
+ PRD
+
+ {isNewFile && (
+
+ New
+
+ )}
+
+
+
+
+ Product Requirements Document
+
+
+
+
+
+
}
+ active={previewMode}
+ />
+
+
WRAP}
+ active={wordWrap}
+ />
+
+
+ Generate Tasks
+
+
+
+ {saveSuccess ? (
+ <>
+
+
+ Saved!
+
+ ) : (
+ <>
+ {saving ? 'Saving...' : 'Save PRD'}
+
+ )}
+
+
+
+ {isFullscreen ?
+
+
+
(false);
+ const [isDarkMode, setIsDarkMode] = useState(true);
+ const [previewMode, setPreviewMode] = useState(false);
+ const [wordWrap, setWordWrap] = useState(true);
+ const [showGenerateModal, setShowGenerateModal] = useState(false);
+
+ const handleOpenGenerateTasks = () => {
+ if (!content.trim()) {
+ alert('Please add content to the PRD before generating tasks.');
+ return;
+ }
+
+ setShowGenerateModal(true);
+ };
+
+ return (
+
+
+ {loadError && (
+
+ {loadError}
+
+ )}
+
+
setPreviewMode((current) => !current)}
+ wordWrap={wordWrap}
+ onToggleWordWrap={() => setWordWrap((current) => !current)}
+ isDarkMode={isDarkMode}
+ onToggleTheme={() => setIsDarkMode((current) => !current)}
+ onDownload={onDownload}
+ onOpenGenerateTasks={handleOpenGenerateTasks}
+ canGenerateTasks={Boolean(content.trim())}
+ onSave={onSave}
+ saving={saving}
+ saveSuccess={saveSuccess}
+ isFullscreen={isFullscreen}
+ onToggleFullscreen={() => setIsFullscreen((current) => !current)}
+ onClose={onClose}
+ />
+
+
+
+
+
+
setShowGenerateModal(false)}
+ />
+