Refactor/shared and tasks components (#473)

* refactor: remove unused TasksSettings component

* refactor: migrate TodoList component to a new file with improved structure and normalization logic

* refactor: Move Tooltip and DarkModeToggle to shared/ui

* refactor: Move Tooltip and DarkModeToggle to shared/view/ui

* refactor: move GeminiLogo to llm-logo-provider and update imports

* refactor: remove unused GeminiStatus component

* refactor: move components in src/components/ui to src/shared/view/ui

* refactor: move ErrorBoundary component to main-content/view and update imports

* refactor: move VersionUpgradeModal to its own module

* refactor(wizard): rebuild project creation flow as modular TypeScript components

Replace the monolithic `ProjectCreationWizard.jsx` with a feature-based TS
implementation under `src/components/project-creation-wizard`, while preserving
existing behavior and improving readability, maintainability, and state isolation.

Why:
- The previous wizard mixed API logic, flow state, folder browsing, and UI in one file.
- Refactoring and testing were difficult due to tightly coupled concerns.
- We needed stronger type safety and localized component state.

What changed:
- Deleted:
  - `src/components/ProjectCreationWizard.jsx`
- Added new modular structure:
  - `src/components/project-creation-wizard/index.ts`
  - `src/components/project-creation-wizard/ProjectCreationWizard.tsx`
  - `src/components/project-creation-wizard/types.ts`
  - `src/components/project-creation-wizard/data/workspaceApi.ts`
  - `src/components/project-creation-wizard/hooks/useGithubTokens.ts`
  - `src/components/project-creation-wizard/utils/pathUtils.ts`
  - `src/components/project-creation-wizard/components/*`
    - `WizardProgress`, `WizardFooter`, `ErrorBanner`
    - `StepTypeSelection`, `StepConfiguration`, `StepReview`
    - `WorkspacePathField`, `GithubAuthenticationCard`, `FolderBrowserModal`
- Updated import usage:
  - `src/components/sidebar/view/subcomponents/SidebarModals.tsx`
    now imports from `../../../project-creation-wizard`.

Implementation details:
- Migrated wizard logic to TypeScript using `type` aliases only.
- Kept component prop types colocated in each component file.
- Split responsibilities by feature:
  - container/orchestration in `ProjectCreationWizard.tsx`
  - API/SSE and request parsing in `data/workspaceApi.ts`
  - GitHub token loading/caching behavior in `useGithubTokens`
  - path/URL helpers in `utils/pathUtils.ts`
- Localized UI-only state to child components:
  - folder browser modal state (current path, hidden folders, create-folder input)
  - path suggestion dropdown state with debounced lookup
- Preserved existing UX flows:
  - step navigation and validation
  - existing/new workspace modes
  - optional GitHub clone + auth modes
  - clone progress via SSE
  - folder browsing + folder creation
- Added focused comments for non-obvious logic (debounce, SSE auth constraint, path edge cases).

* refactor(quick-settings): migrate panel to typed feature-based modules

Refactor QuickSettingsPanel from a single JSX component into a modular TypeScript feature structure while preserving behavior and translations.

Highlights:
- Replace legacy src/components/QuickSettingsPanel.jsx with a typed entrypoint (src/components/QuickSettingsPanel.tsx).
- Introduce src/components/quick-settings-panel/ with clear separation of concerns:
  - view/: panel shell, header, handle, section wrappers, toggle rows, and content sections.
  - hooks/: drag interactions and whisper mode persistence.
  - constants.ts and types.ts for shared config and strict local typing.
- Move drag logic into useQuickSettingsDrag with explicit touch/mouse handling, drag threshold detection, click suppression after drag, position clamping, and localStorage persistence.
- Keep user-visible behavior intact:
  - same open/close panel interactions.
  - same mobile/desktop drag behavior and persisted handle position.
  - same quick preference toggles and wiring to useUiPreferences.
  - same hidden whisper section behavior and localStorage/event updates.
- Improve readability and maintainability by extracting repetitive setting rows and section scaffolding into reusable components.
- Add focused comments around non-obvious behavior (drag click suppression, touch scroll lock, hidden whisper section intent).
- Keep files small and reviewable (all new/changed files are under 300 lines).

Validation:
- npm run typecheck
- npm run build

* refactor(quick-settings-panel): restructure QuickSettingsPanel import and create index file

* refactor(shared): move shared ui components to share/view/ui without subfolders

* refactor(LanguageSelector): move LanguageSelector to shared UI components

* 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

* refactor(TaskMasterPanel): update PRDEditor import path to match new structure

* refactor(TaskMaster): Remove unused TaskMasterSetupWizard and TaskMasterStatus components

* refactor(TaskDetail): remove unused TaskIndicator import

* refactor(task-master): migrate tasks to a typed feature module

- introduce a new feature-oriented TaskMaster domain under src/components/task-master

- add typed TaskMaster context/provider with explicit project, task, MCP, and loading state handling

- split task UI into focused components (panel, board, toolbar, content, card, detail modal, setup/help modals, banner)

- move task board filtering/sorting/kanban derivation into dedicated hooks and utilities

- relocate CreateTaskModal into the feature module and keep task views modular/readable

- remove legacy monolithic TaskList/TaskDetail/TaskCard files and route main task panel to the new feature panel

- replace contexts/TaskMasterContext.jsx with a typed contexts/TaskMasterContext.ts re-export to the feature context

- update MainContent project sync logic to compare by project name to avoid state churn

- validation: npm run typecheck, npm run build

* refactor(MobileNav): remove unused React import and TaskMasterContext

* refactor(auth): migrate login and setup flows to typed feature module

- Introduce a new feature-based auth module under src/components/auth with clear separation of concerns:\n  - context/AuthContext.tsx for session lifecycle, onboarding status checks, token persistence, and auth actions\n  - view/* components for loading, route guarding, form layout, input fields, and error display\n  - shared auth constants, utility helpers, and type aliases (no interfaces)\n- Convert login and setup UIs to TypeScript and keep form state local to each component for readability and component-level ownership\n- Add explicit API payload typing and safe JSON parsing helpers to improve resilience when backend responses are malformed or incomplete\n- Centralize error fallback handling for auth requests to reduce repeated logic

- Replace legacy auth entrypoints with the new feature module in app wiring:\n  - App now imports AuthProvider and ProtectedRoute from src/components/auth\n  - WebSocketContext, TaskMasterContext, and Onboarding now consume useAuth from the new typed auth context\n- Remove duplicated legacy auth screens (LoginForm.jsx, SetupForm.jsx, ProtectedRoute.jsx)\n- Keep backward compatibility by turning src/contexts/AuthContext.jsx into a thin re-export of the new provider/hook

Result: auth code now follows a feature/domain structure, is fully typed, easier to navigate, and cleaner to extend without touching unrelated UI areas.

* refactor(AppContent): update MobileNav import path and add MobileNav component

* refactor(DiffViewer): rename different diff viewers and place them in different components

* refactor(components): reorganize onboarding/provider auth/sidebar indicator into domain features

- Move onboarding out of root-level components into a dedicated feature module:
  - add src/components/onboarding/view/Onboarding.tsx
  - split onboarding UI into focused subcomponents:
    - OnboardingStepProgress
    - GitConfigurationStep
    - AgentConnectionsStep
    - AgentConnectionCard
  - add onboarding-local types and utils for provider status and validation helpers

- Move multi-provider login modal into a dedicated provider-auth feature:
  - add src/components/provider-auth/view/ProviderLoginModal.tsx
  - add src/components/provider-auth/types.ts
  - keep provider-specific command/title behavior and Gemini setup guidance
  - preserve compatibility for both onboarding flow and settings login flow

- Move TaskIndicator into the sidebar domain:
  - add src/components/sidebar/view/subcomponents/TaskIndicator.tsx
  - update SidebarProjectItem to consume local sidebar TaskIndicator

- Update integration points to the new structure:
  - ProtectedRoute now imports onboarding from onboarding feature
  - Settings now imports ProviderLoginModal directly (remove legacy cast wrapper)
  - git panel consumers now import shared GitDiffViewer by explicit name

- Rename git shared diff view to clearer domain naming:
  - replace shared DiffViewer with shared GitDiffViewer
  - update FileChangeItem and CommitHistoryItem imports accordingly

- Remove superseded root-level legacy components:
  - delete src/components/LoginModal.jsx
  - delete src/components/Onboarding.jsx
  - delete src/components/TaskIndicator.jsx
  - delete old src/components/git-panel/view/shared/DiffViewer.tsx

- Result:
  - clearer feature boundaries (auth vs onboarding vs provider-auth vs sidebar)
  - easier navigation and ownership by domain
  - preserved runtime behavior with improved readability and modularity

* refactor(MainContent): remove TaskMasterPanel import and relocate to task-master component

* fix: update import paths for Input component in FileTree and FileTreeNode

* refactor(FileTree): make file tree context menu a typescript component and move it inside the file tree view

* refactor(FileTree): remove unused ScrollArea import

* feat: setup eslint with typescript and react rules, add unused imports plugin

* fix: remove unused imports, functions, and types after discovering using `npm run lint`

* feat: setup eslint-plugin-react, react-refresh, import-x, and tailwindcss plugins with recommended rules and configurations

* chore: reformat files after running `npm run lint:fix`

* chore: add omments about eslint config plugin uses

* feat: add husky and lint-staged for pre-commit linting

* feat: setup commitlint with conventional config

* fix: i18n translations

---------

Co-authored-by: Haileyesus <something@gmail.com>
Co-authored-by: viper151 <simosmik@gmail.com>

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 (
+    <div className="fixed inset-0 z-[300] flex items-center justify-center bg-black/50 p-4 backdrop-blur-sm">
+      <div className="w-full max-w-md rounded-lg border border-gray-200 bg-white shadow-xl dark:border-gray-700 dark:bg-gray-800">
+        <div className="flex items-center justify-between border-b border-gray-200 p-6 dark:border-gray-700">
+          <div className="flex items-center gap-3">
+            <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-purple-100 dark:bg-purple-900/50">
+              <Sparkles className="h-4 w-4 text-purple-600 dark:text-purple-400" />
+            </div>
+            <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
+              Generate Tasks from PRD
+            </h3>
+          </div>
+          <button
+            onClick={onClose}
+            className="rounded-md p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-600 dark:hover:bg-gray-700 dark:hover:text-gray-300"
+          >
+            <X className="h-5 w-5" />
+          </button>
+        </div>
+
+        <div className="space-y-4 p-6">
+          <div className="rounded-lg border border-purple-200 bg-purple-50 p-4 dark:border-purple-800 dark:bg-purple-900/20">
+            <h4 className="mb-2 font-semibold text-purple-900 dark:text-purple-100">
+              Ask Claude Code directly
+            </h4>
+            <p className="mb-3 text-sm text-purple-800 dark:text-purple-200">
+              Save this PRD, then ask Claude Code in chat to parse the file and create your initial tasks.
+            </p>
+
+            <div className="rounded border border-purple-200 bg-white p-3 dark:border-purple-700 dark:bg-gray-800">
+              <p className="mb-1 text-xs font-medium text-gray-600 dark:text-gray-400">Example prompt</p>
+              <p className="font-mono text-xs text-gray-900 dark:text-white">
+                I have a PRD at .taskmaster/docs/{fileName}. Parse it and create the initial tasks.
+              </p>
+            </div>
+          </div>
+
+          <div className="border-t border-gray-200 pt-4 text-center dark:border-gray-700">
+            <a
+              href={PRD_DOCS_URL}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-block text-sm font-medium text-purple-600 underline hover:text-purple-700 dark:text-purple-400 dark:hover:text-purple-300"
+            >
+              View TaskMaster documentation
+            </a>
+          </div>
+
+          <button
+            onClick={onClose}
+            className="w-full rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
+          >
+            Got it
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/prd-editor/view/OverwriteConfirmModal.tsx

@@ -0,0 +1,60 @@
+import { AlertTriangle, Save } from 'lucide-react';
+
+type OverwriteConfirmModalProps = {
+  isOpen: boolean;
+  fileName: string;
+  saving: boolean;
+  onCancel: () => void;
+  onConfirm: () => void;
+};
+
+export default function OverwriteConfirmModal({
+  isOpen,
+  fileName,
+  saving,
+  onCancel,
+  onConfirm,
+}: OverwriteConfirmModalProps) {
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <div className="fixed inset-0 z-[300] flex items-center justify-center p-4">
+      <div className="fixed inset-0 bg-black/50" onClick={onCancel} />
+
+      <div className="relative w-full max-w-md rounded-lg border border-gray-200 bg-white shadow-xl dark:border-gray-700 dark:bg-gray-800">
+        <div className="p-6">
+          <div className="mb-4 flex items-center">
+            <div className="mr-3 rounded-full bg-yellow-100 p-2 dark:bg-yellow-900">
+              <AlertTriangle className="h-5 w-5 text-yellow-600 dark:text-yellow-400" />
+            </div>
+            <h3 className="text-lg font-semibold text-gray-900 dark:text-white">File Already Exists</h3>
+          </div>
+
+          <p className="mb-6 text-sm text-gray-600 dark:text-gray-400">
+            A PRD named "{fileName}" already exists. Do you want to overwrite it?
+          </p>
+
+          <div className="flex justify-end gap-3">
+            <button
+              onClick={onCancel}
+              disabled={saving}
+              className="rounded-md border border-gray-300 bg-white px-4 py-2 text-sm text-gray-700 transition-colors hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
+            >
+              Cancel
+            </button>
+            <button
+              onClick={onConfirm}
+              disabled={saving}
+              className="flex items-center gap-2 rounded-md bg-yellow-600 px-4 py-2 text-sm text-white transition-colors hover:bg-yellow-700 disabled:opacity-50"
+            >
+              <Save className="h-4 w-4" />
+              <span>{saving ? 'Saving...' : 'Overwrite'}</span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/prd-editor/view/PrdEditorBody.tsx

@@ -0,0 +1,61 @@
+import { useMemo } from 'react';
+import { markdown } from '@codemirror/lang-markdown';
+import { oneDark } from '@codemirror/theme-one-dark';
+import { EditorView } from '@codemirror/view';
+import CodeMirror from '@uiw/react-codemirror';
+import MarkdownPreview from '../../code-editor/view/subcomponents/markdown/MarkdownPreview';
+
+type PrdEditorBodyProps = {
+  content: string;
+  onContentChange: (nextContent: string) => void;
+  previewMode: boolean;
+  isDarkMode: boolean;
+  wordWrap: boolean;
+};
+
+export default function PrdEditorBody({
+  content,
+  onContentChange,
+  previewMode,
+  isDarkMode,
+  wordWrap,
+}: PrdEditorBodyProps) {
+  const extensions = useMemo(
+    () => [markdown(), ...(wordWrap ? [EditorView.lineWrapping] : [])],
+    [wordWrap],
+  );
+
+  if (previewMode) {
+    return (
+      <div className="prose prose-gray h-full max-w-none overflow-y-auto p-6 dark:prose-invert">
+        <MarkdownPreview content={content} />
+      </div>
+    );
+  }
+
+  return (
+    <CodeMirror
+      value={content}
+      onChange={onContentChange}
+      extensions={extensions}
+      theme={isDarkMode ? oneDark : undefined}
+      height="100%"
+      style={{
+        fontSize: '14px',
+        height: '100%',
+      }}
+      basicSetup={{
+        lineNumbers: true,
+        foldGutter: true,
+        dropCursor: false,
+        allowMultipleSelections: false,
+        indentOnInput: true,
+        bracketMatching: true,
+        closeBrackets: true,
+        autocompletion: true,
+        highlightSelectionMatches: true,
+        searchKeymap: true,
+      }}
+    />
+  );
+}

src/components/prd-editor/view/PrdEditorFooter.tsx

@@ -0,0 +1,36 @@
+import { useMemo } from 'react';
+
+type PrdEditorFooterProps = {
+  content: string;
+};
+
+type ContentStats = {
+  lines: number;
+  characters: number;
+  words: number;
+};
+
+function getContentStats(content: string): ContentStats {
+  return {
+    lines: content.split('\n').length,
+    characters: content.length,
+    words: content.split(/\s+/).filter(Boolean).length,
+  };
+}
+
+export default function PrdEditorFooter({ content }: PrdEditorFooterProps) {
+  const stats = useMemo(() => getContentStats(content), [content]);
+
+  return (
+    <div className="flex flex-shrink-0 items-center justify-between border-t border-gray-200 bg-gray-50 p-3 dark:border-gray-700 dark:bg-gray-800">
+      <div className="flex items-center gap-4 text-sm text-gray-600 dark:text-gray-400">
+        <span>Lines: {stats.lines}</span>
+        <span>Characters: {stats.characters}</span>
+        <span>Words: {stats.words}</span>
+        <span>Format: Markdown</span>
+      </div>
+
+      <div className="text-sm text-gray-500 dark:text-gray-400">Press Ctrl+S to save and Esc to close</div>
+    </div>
+  );
+}

src/components/prd-editor/view/PrdEditorHeader.tsx

@@ -0,0 +1,228 @@
+import { useRef } from 'react';
+import type { ReactNode } from 'react';
+import {
+  Download,
+  Eye,
+  FileText,
+  Maximize2,
+  Minimize2,
+  Moon,
+  Save,
+  Sparkles,
+  Sun,
+  X,
+} from 'lucide-react';
+import { cn } from '../../../lib/utils';
+
+type PrdEditorHeaderProps = {
+  fileName: string;
+  onFileNameChange: (nextFileName: string) => void;
+  isNewFile: boolean;
+  previewMode: boolean;
+  onTogglePreview: () => void;
+  wordWrap: boolean;
+  onToggleWordWrap: () => void;
+  isDarkMode: boolean;
+  onToggleTheme: () => void;
+  onDownload: () => void;
+  onOpenGenerateTasks: () => void;
+  canGenerateTasks: boolean;
+  onSave: () => void;
+  saving: boolean;
+  saveSuccess: boolean;
+  isFullscreen: boolean;
+  onToggleFullscreen: () => void;
+  onClose: () => void;
+};
+
+type HeaderIconButtonProps = {
+  title: string;
+  onClick: () => void;
+  icon: ReactNode;
+  active?: boolean;
+};
+
+function HeaderIconButton({ title, onClick, icon, active = false }: HeaderIconButtonProps) {
+  return (
+    <button
+      onClick={onClick}
+      title={title}
+      className={cn(
+        'p-2 rounded-md min-w-[44px] min-h-[44px] md:min-w-0 md:min-h-0 flex items-center justify-center transition-colors',
+        active
+          ? 'text-purple-600 dark:text-purple-400 bg-purple-50 dark:bg-purple-900/50'
+          : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800',
+      )}
+    >
+      {icon}
+    </button>
+  );
+}
+
+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<HTMLInputElement | null>(null);
+
+  return (
+    <div className="flex min-w-0 flex-shrink-0 items-center justify-between border-b border-gray-200 p-4 dark:border-gray-700">
+      <div className="flex min-w-0 flex-1 items-center gap-3">
+        <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded bg-purple-600">
+          <FileText className="h-4 w-4 text-white" />
+        </div>
+
+        <div className="min-w-0 flex-1">
+          <div className="flex min-w-0 flex-col gap-2 sm:flex-row sm:items-center">
+            <div className="flex min-w-0 flex-1 items-center gap-1">
+              <div className="flex min-w-0 flex-1 items-center rounded-md border border-gray-200 bg-gray-50 px-3 py-2 focus-within:border-purple-500 focus-within:ring-2 focus-within:ring-purple-500 dark:border-gray-600 dark:bg-gray-700 dark:focus-within:border-purple-400 dark:focus-within:ring-purple-400">
+                <input
+                  ref={fileNameInputRef}
+                  type="text"
+                  value={fileName}
+                  onChange={(event) => onFileNameChange(event.target.value)}
+                  className="min-w-0 flex-1 border-none bg-transparent text-base font-medium text-gray-900 placeholder-gray-400 outline-none dark:text-white dark:placeholder-gray-500 sm:text-sm"
+                  placeholder="Enter PRD filename"
+                  maxLength={100}
+                />
+                <span className="ml-1 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400 sm:text-xs">
+                  .txt
+                </span>
+              </div>
+
+              <button
+                onClick={() => fileNameInputRef.current?.focus()}
+                className="p-1 text-gray-400 transition-colors hover:text-purple-600 dark:hover:text-purple-400"
+                title="Focus filename input"
+              >
+                <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
+                  />
+                </svg>
+              </button>
+            </div>
+
+            <div className="flex flex-shrink-0 items-center gap-2">
+              <span className="whitespace-nowrap rounded bg-purple-100 px-2 py-1 text-xs text-purple-600 dark:bg-purple-900 dark:text-purple-300">
+                PRD
+              </span>
+              {isNewFile && (
+                <span className="whitespace-nowrap rounded bg-green-100 px-2 py-1 text-xs text-green-600 dark:bg-green-900 dark:text-green-300">
+                  New
+                </span>
+              )}
+            </div>
+          </div>
+
+          <p className="mt-1 truncate text-xs text-gray-500 dark:text-gray-400 sm:text-sm">
+            Product Requirements Document
+          </p>
+        </div>
+      </div>
+
+      <div className="flex flex-shrink-0 items-center gap-1 md:gap-2">
+        <HeaderIconButton
+          title={previewMode ? 'Switch to edit mode' : 'Preview markdown'}
+          onClick={onTogglePreview}
+          icon={<Eye className="h-5 w-5 md:h-4 md:w-4" />}
+          active={previewMode}
+        />
+
+        <HeaderIconButton
+          title={wordWrap ? 'Disable word wrap' : 'Enable word wrap'}
+          onClick={onToggleWordWrap}
+          icon={<span className="font-mono text-sm font-bold md:text-xs">WRAP</span>}
+          active={wordWrap}
+        />
+
+        <HeaderIconButton
+          title="Toggle theme"
+          onClick={onToggleTheme}
+          icon={
+            isDarkMode ? (
+              <Sun className="h-5 w-5 md:h-4 md:w-4" />
+            ) : (
+              <Moon className="h-5 w-5 md:h-4 md:w-4" />
+            )
+          }
+        />
+
+        <HeaderIconButton
+          title="Download PRD"
+          onClick={onDownload}
+          icon={<Download className="h-5 w-5 md:h-4 md:w-4" />}
+        />
+
+        <button
+          onClick={onOpenGenerateTasks}
+          disabled={!canGenerateTasks}
+          className={cn(
+            'px-3 py-2 rounded-md disabled:opacity-50 flex items-center gap-2 transition-colors text-sm font-medium text-white min-h-[44px] md:min-h-0',
+            'bg-purple-600 hover:bg-purple-700',
+          )}
+          title="Generate tasks from PRD content"
+        >
+          <Sparkles className="h-4 w-4" />
+          <span className="hidden md:inline">Generate Tasks</span>
+        </button>
+
+        <button
+          onClick={onSave}
+          disabled={saving}
+          className={cn(
+            'px-3 py-2 text-white rounded-md disabled:opacity-50 flex items-center gap-2 transition-colors min-h-[44px] md:min-h-0',
+            saveSuccess ? 'bg-green-600 hover:bg-green-700' : 'bg-purple-600 hover:bg-purple-700',
+          )}
+        >
+          {saveSuccess ? (
+            <>
+              <svg className="h-5 w-5 md:h-4 md:w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+              </svg>
+              <span className="hidden sm:inline">Saved!</span>
+            </>
+          ) : (
+            <>
+              <Save className="h-5 w-5 md:h-4 md:w-4" />
+              <span className="hidden sm:inline">{saving ? 'Saving...' : 'Save PRD'}</span>
+            </>
+          )}
+        </button>
+
+        <button
+          onClick={onToggleFullscreen}
+          className="hidden items-center justify-center rounded-md p-2 text-gray-600 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-white md:flex"
+          title={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}
+        >
+          {isFullscreen ? <Minimize2 className="h-4 w-4" /> : <Maximize2 className="h-4 w-4" />}
+        </button>
+
+        <HeaderIconButton
+          title="Close"
+          onClick={onClose}
+          icon={<X className="h-6 w-6 md:h-4 md:w-4" />}
+        />
+      </div>
+    </div>
+  );
+}

src/components/prd-editor/view/PrdEditorLoadingState.tsx

@@ -0,0 +1,12 @@
+export default function PrdEditorLoadingState() {
+  return (
+    <div className="fixed inset-0 z-[200] md:flex md:items-center md:justify-center md:bg-black/50">
+      <div className="flex h-full w-full items-center justify-center bg-white p-8 dark:bg-gray-900 md:h-auto md:w-auto md:rounded-lg">
+        <div className="flex items-center gap-3">
+          <div className="h-6 w-6 animate-spin rounded-full border-b-2 border-blue-600" />
+          <span className="text-gray-900 dark:text-white">Loading PRD...</span>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/prd-editor/view/PrdEditorWorkspace.tsx

@@ -0,0 +1,114 @@
+import { useState } from 'react';
+import { cn } from '../../../lib/utils';
+import { ensurePrdExtension } from '../utils/fileName';
+import GenerateTasksModal from './GenerateTasksModal';
+import PrdEditorBody from './PrdEditorBody';
+import PrdEditorFooter from './PrdEditorFooter';
+import PrdEditorHeader from './PrdEditorHeader';
+
+type PrdEditorWorkspaceProps = {
+  content: string;
+  onContentChange: (nextContent: string) => void;
+  fileName: string;
+  onFileNameChange: (nextFileName: string) => void;
+  isNewFile: boolean;
+  saving: boolean;
+  saveSuccess: boolean;
+  onSave: () => void;
+  onDownload: () => void;
+  onClose: () => void;
+  loadError: string | null;
+};
+
+export default function PrdEditorWorkspace({
+  content,
+  onContentChange,
+  fileName,
+  onFileNameChange,
+  isNewFile,
+  saving,
+  saveSuccess,
+  onSave,
+  onDownload,
+  onClose,
+  loadError,
+}: PrdEditorWorkspaceProps) {
+  const [isFullscreen, setIsFullscreen] = useState<boolean>(false);
+  const [isDarkMode, setIsDarkMode] = useState<boolean>(true);
+  const [previewMode, setPreviewMode] = useState<boolean>(false);
+  const [wordWrap, setWordWrap] = useState<boolean>(true);
+  const [showGenerateModal, setShowGenerateModal] = useState<boolean>(false);
+
+  const handleOpenGenerateTasks = () => {
+    if (!content.trim()) {
+      alert('Please add content to the PRD before generating tasks.');
+      return;
+    }
+
+    setShowGenerateModal(true);
+  };
+
+  return (
+    <div
+      className={cn(
+        'fixed inset-0 z-[200] md:bg-black/50 md:flex md:items-center md:justify-center',
+        isFullscreen ? 'md:p-0' : 'md:p-4',
+      )}
+    >
+      <div
+        className={cn(
+          'bg-white dark:bg-gray-900 shadow-2xl flex flex-col',
+          'w-full h-full md:rounded-lg md:shadow-2xl',
+          isFullscreen
+            ? 'md:w-full md:h-full md:rounded-none'
+            : 'md:w-full md:max-w-6xl md:h-[85vh] md:max-h-[85vh]',
+        )}
+      >
+        {loadError && (
+          <div className="border-b border-yellow-200 bg-yellow-50 px-4 py-3 text-sm text-yellow-800 dark:border-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-200">
+            {loadError}
+          </div>
+        )}
+
+        <PrdEditorHeader
+          fileName={fileName}
+          onFileNameChange={onFileNameChange}
+          isNewFile={isNewFile}
+          previewMode={previewMode}
+          onTogglePreview={() => 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}
+        />
+
+        <div className="flex-1 overflow-hidden">
+          <PrdEditorBody
+            content={content}
+            onContentChange={onContentChange}
+            previewMode={previewMode}
+            isDarkMode={isDarkMode}
+            wordWrap={wordWrap}
+          />
+        </div>
+
+        <PrdEditorFooter content={content} />
+      </div>
+
+      <GenerateTasksModal
+        isOpen={showGenerateModal}
+        fileName={ensurePrdExtension(fileName || 'prd')}
+        onClose={() => setShowGenerateModal(false)}
+      />
+    </div>
+  );
+}