+ {/* Breadcrumb Navigation - Task 1 */}
+
+ {/* Placeholder for breadcrumb */}
+
+
+ {/* Story Header - Task 2 */}
+
+ {/* Placeholder for story header */}
+
+
+ {/* Two-column layout */}
+
+ {/* Main Content Column */}
+
+ {/* Story Description Card */}
+
+ {/* Placeholder for description - Task 4 */}
+
+
+ {/* Acceptance Criteria Card */}
+
+ {/* Placeholder for acceptance criteria - Story 3 */}
+
+
+ {/* Tasks Section - Story 2 dependency */}
+
+ {/* Placeholder for tasks list - Story 2 */}
+
+
+
+ {/* Metadata Sidebar Column - Task 3 */}
+
+
+
+
+ {/* Back Button */}
+
+
+ {/* Title and Badges */}
+
+
+ {story.title}
+
+
+
+ {/* Status Badge */}
+
+ {story.status}
+
+
+ {/* Priority Badge */}
+
+ {story.priority}
+
+
+
+
+
+ {/* Action Buttons */}
+
+
+
+
+
+
+ {/* Status Section */}
+
+ Status
+
+
+
+ {/* Priority Section */}
+
+ Priority
+
+ {story.priority}
+
+
+
+ {/* Assignee Section */}
+
+ Assignee
+ {story.assigneeId ? (
+
+
+
+
+
+
+
+
+
Assignee Name
+
+
+
+
+ {/* Time Tracking Section */}
+
+ Time Tracking
+
+
+ Estimated
+ {story.estimatedHours || 0}h
+
+
+ Actual
+ {story.actualHours || 0}h
+
+
+
+ {Math.round(completionPercentage)}% complete
+
+
+
+ {/* Dates Section */}
+
+ Dates
+
+
+
+ Created {formatDistanceToNow(new Date(story.createdAt), { addSuffix: true })}
+
+
+
+ Updated {formatDistanceToNow(new Date(story.updatedAt), { addSuffix: true })}
+
+
+
+ {/* Parent Epic Section */}
+ {parentEpic && (
+
+ Parent Epic
+
+
+
{parentEpic.title}
+
+ {parentEpic.status}
+
+
+
+ View Epic Details →
+
+
+
+ )}
+
+
+
+
+ {storyError?.message || 'Failed to load Story. Please try again.'}
+
+
+
+ {/* Breadcrumb Navigation */}
+
+
+ {/* Story Header */}
+
setIsEditDialogOpen(true)}
+ onDelete={() => setIsDeleteDialogOpen(true)}
+ />
+
+ {/* Two-column layout */}
+
+ {/* Main Content Column */}
+
+ {/* Story Description Card */}
+
+ Description
+ {story.description ? (
+
+ ) : (
+ No description provided.
+ )}
+
+
+ {/* Acceptance Criteria Card - Story 3 */}
+
+ Acceptance Criteria
+
+ Acceptance criteria will be added in Story 3.
+
+
+
+ {/* Tasks Section - Story 2 */}
+
+ Tasks
+
+ Task list will be added in Story 2.
+
+
+
+
+ {/* Metadata Sidebar Column */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Story Not Found
+
+ The Story you're looking for doesn't exist or you don't have permission to view it.
+
+
+
+
+
+
+
+ {/* ... existing content ... */}
+
+
setIsEditDialogOpen(true)}
+ onDelete={() => setIsDeleteDialogOpen(true)}
+ />
+
+ {/* ... rest of content ... */}
+
+ {/* Edit Story Dialog */}
+
+
+ {/* Delete Story Confirmation Dialog */}
+
+
+
+
+
+ Delete Story?
+
+
+ This will permanently delete {story?.title} and all associated data.
+ This action cannot be undone.
+
+ {/* Cascade warning if Tasks exist */}
+ {tasks.length > 0 && (
+
+
+ ⚠️ This Story has {tasks.length} Task{tasks.length > 1 ? 's' : ''} that will also be deleted:
+
+
+ {tasks.slice(0, 5).map((task) => (
+ - {task.title}
+ ))}
+ {tasks.length > 5 && (
+ - ... and {tasks.length - 5} more
+ )}
+
+
+ {/* Main content - full width on mobile, 70% on desktop */}
+
+ {/* Story description, acceptance criteria, tasks */}
+
+
+ {/* Sidebar - full width on mobile (at top), fixed width on desktop */}
+
+
+ {story.title}
+
+
+
+
+ {story.status}
+
+
+
+ {story.priority}
+
+
+
+
+
+
+ Opens a dialog to edit story title, description, and metadata
+
+
+
+
+ Permanently deletes this story and all associated tasks
+
+
+
+
+// Main content sections
+
+
+ Description
+
+ {story.description}
+
+
+
+
+ Acceptance Criteria
+ {/* Criteria list */}
+
+
+
+ Tasks
+ {/* Tasks list */}
+
+
+
+// Sidebar
+
+```
+
+### Keyboard Navigation
+
+```typescript
+// Add keyboard shortcuts
+useEffect(() => {
+ const handleKeyDown = (e: KeyboardEvent) => {
+ // ESC - Go back to Epic
+ if (e.key === 'Escape' && !isEditDialogOpen && !isDeleteDialogOpen) {
+ router.push(`/epics/${story.epicId}`);
+ }
+
+ // Cmd/Ctrl + E - Edit Story
+ if ((e.metaKey || e.ctrlKey) && e.key === 'e') {
+ e.preventDefault();
+ setIsEditDialogOpen(true);
+ }
+
+ // Cmd/Ctrl + Backspace - Delete Story
+ if ((e.metaKey || e.ctrlKey) && e.key === 'Backspace') {
+ e.preventDefault();
+ setIsDeleteDialogOpen(true);
+ }
+ };
+
+ window.addEventListener('keydown', handleKeyDown);
+ return () => window.removeEventListener('keydown', handleKeyDown);
+}, [isEditDialogOpen, isDeleteDialogOpen]);
+
+// Add keyboard shortcut hints
+
+```
+
+### Focus Management
+
+```typescript
+// Trap focus in dialogs
+import { useFocusTrap } from '@/lib/hooks/use-focus-trap';
+
+function EditStoryDialog({ isOpen, onClose }: Props) {
+ const dialogRef = useRef(null);
+ useFocusTrap(dialogRef, isOpen);
+
+ // Auto-focus first field when dialog opens
+ useEffect(() => {
+ if (isOpen) {
+ const firstInput = dialogRef.current?.querySelector('input');
+ firstInput?.focus();
+ }
+ }, [isOpen]);
+
+ // Return focus to trigger element when dialog closes
+ const triggerRef = useRef(null);
+
+ const handleOpen = () => {
+ triggerRef.current = document.activeElement as HTMLButtonElement;
+ setIsOpen(true);
+ };
+
+ const handleClose = () => {
+ setIsOpen(false);
+ triggerRef.current?.focus();
+ };
+
+ return (
+
+ );
+}
+```
+
+### Skip Links
+
+```typescript
+// Add skip link for keyboard users
+
+ Skip to main content
+
+
+
+ {/* Main content */}
+
+```
+
+## Acceptance Criteria
+
+### Responsive Design
+- [ ] Desktop (> 1024px): Two-column layout (content + sidebar)
+- [ ] Tablet (640px - 1024px): Two-column layout with narrower sidebar
+- [ ] Mobile (< 640px): Single-column layout, sidebar moves to top or tabs
+- [ ] All buttons and controls accessible on touch devices
+- [ ] No horizontal scrolling on any screen size
+- [ ] Text remains readable on all screen sizes (minimum 14px)
+
+### Accessibility (WCAG 2.1 Level AA)
+- [ ] All interactive elements keyboard accessible (Tab navigation)
+- [ ] Focus indicators visible (2px outline, high contrast)
+- [ ] ARIA labels on all buttons, links, and form controls
+- [ ] Proper heading hierarchy (h1 → h2 → h3)
+- [ ] Color contrast ratio >= 4.5:1 for all text
+- [ ] Large text (18px+) contrast ratio >= 3:1
+- [ ] Screen reader announces all content correctly
+- [ ] Focus trapped in dialogs (cannot Tab outside)
+- [ ] Focus returns to trigger element when dialog closes
+- [ ] Skip links available for keyboard users
+- [ ] Icons have `aria-hidden="true"` (text labels present)
+- [ ] Loading states announced to screen readers (`role="status"`)
+- [ ] Error messages announced (`role="alert"`)
+
+### Keyboard Navigation
+- [ ] Tab - Navigate through interactive elements
+- [ ] Enter - Activate buttons and links
+- [ ] Space - Toggle checkboxes and buttons
+- [ ] ESC - Close dialogs and navigate back
+- [ ] Cmd/Ctrl + E - Edit Story (custom shortcut)
+- [ ] Cmd/Ctrl + Backspace - Delete Story (custom shortcut)
+
+## Testing
+
+### Manual Testing
+
+**Responsive Design**:
+1. Open Story detail page on desktop → Verify two-column layout
+2. Resize to tablet width (768px) → Verify layout adjusts
+3. Resize to mobile width (375px) → Verify single-column layout
+4. Verify sidebar moves to top on mobile
+5. Test all buttons clickable on touch device
+6. Verify no horizontal scrolling on any screen
+7. Test landscape and portrait orientations
+
+**Keyboard Navigation**:
+1. Navigate to Story page using only keyboard
+2. Press Tab → Verify focus moves through all interactive elements
+3. Verify focus indicator visible (blue outline)
+4. Press ESC → Verify navigates back to Epic
+5. Press Cmd/Ctrl + E → Verify Edit dialog opens
+6. Press Tab in dialog → Verify focus trapped
+7. Press ESC in dialog → Verify dialog closes and focus returns
+
+**Screen Reader** (NVDA/JAWS):
+1. Enable screen reader
+2. Navigate to Story page
+3. Verify page structure announced (heading hierarchy)
+4. Verify all buttons have labels
+5. Verify badges announced with context ("Status: In Progress")
+6. Verify loading states announced
+7. Verify error messages announced
+8. Open Edit dialog → Verify form fields labeled correctly
+
+### Automated Testing
+
+**Lighthouse Audit**:
+```bash
+# Run Lighthouse accessibility audit
+npm run lighthouse
+
+# Expected results:
+# Accessibility: >= 90 (ideally 100)
+# Best Practices: >= 90
+# SEO: >= 90
+# Performance: >= 80 (acceptable for dynamic content)
+```
+
+**axe DevTools**:
+```bash
+# Install axe DevTools browser extension
+# Open Story page
+# Run axe scan
+# Expected: 0 violations
+```
+
+### Color Contrast Testing
+
+```bash
+# Test all text colors
+# Use browser DevTools > Accessibility > Color contrast
+
+# Required ratios (WCAG AA):
+# Normal text (< 18px): 4.5:1
+# Large text (>= 18px): 3:1
+# UI components: 3:1
+
+# Test combinations:
+Story Title (32px): Should pass (large text)
+Description (16px): Should pass 4.5:1
+Metadata labels (14px): Should pass 4.5:1
+Badges: Should pass 3:1 (UI components)
+Buttons: Should pass 3:1 (UI components)
+```
+
+## Dependencies
+
+**Prerequisites**:
+- Task 1, 2, 3, 4, 5 (all components must exist)
+- ✅ shadcn/ui components with built-in accessibility
+- ✅ Tailwind CSS responsive utilities
+- ✅ ARIA attributes support
+
+**Blocks**:
+- None (final polish task)
+
+## Estimated Time
+
+3 hours
+
+## Notes
+
+**Testing Tools**:
+- Chrome DevTools > Lighthouse (accessibility audit)
+- axe DevTools browser extension (automated WCAG testing)
+- NVDA/JAWS screen reader (manual testing)
+- WAVE browser extension (visual accessibility check)
+- Contrast Checker (color contrast ratios)
+
+**Common Accessibility Issues to Avoid**:
+- Missing alt text on images
+- Insufficient color contrast
+- Missing ARIA labels on icon-only buttons
+- Broken keyboard navigation (focus trap)
+- Missing heading hierarchy (h1 → h3, skip h2)
+- Form inputs without labels
+- Loading states not announced to screen readers
+
+**Responsive Design Checklist**:
+- Test on real devices (iPhone, Android, tablet)
+- Test different orientations (portrait, landscape)
+- Test different zoom levels (100%, 150%, 200%)
+- Verify touch targets >= 44x44px
+- No horizontal scrolling on any screen
diff --git a/docs/plans/sprint_4_story_2.md b/docs/plans/sprint_4_story_2.md
new file mode 100644
index 0000000..40eb293
--- /dev/null
+++ b/docs/plans/sprint_4_story_2.md
@@ -0,0 +1,278 @@
+---
+story_id: sprint_4_story_2
+sprint: sprint_4
+priority: P0
+status: not_started
+story_points: 5
+estimated_days: 2
+created_date: 2025-11-05
+assignee: Frontend Team
+---
+
+# Story 2: Task Management in Story Detail
+
+**Sprint**: Sprint 4
+**Priority**: P0 (Critical)
+**Estimated**: 2 days
+**Owner**: Frontend Team
+
+## Description
+
+Implement comprehensive Task management within the Story detail page, including Task list display, inline Task creation, Task status updates via checkbox, Task filtering, and Task sorting. This enables users to break down Stories into granular implementation tasks and track their progress.
+
+## User Story
+
+**As a** developer or project manager,
+**I want** to create and manage Tasks within a Story,
+**So that** I can break down Stories into smaller work items and track implementation progress.
+
+## Acceptance Criteria
+
+- [ ] Task list displays all Tasks associated with the Story
+- [ ] Empty state shows when Story has no Tasks
+- [ ] "Add Task" button opens inline Task creation form
+- [ ] Inline form allows creating Tasks without leaving the page
+- [ ] Task checkbox toggles Task status (Todo ↔ Done)
+- [ ] Task cards display title, priority, assignee, estimated hours
+- [ ] Task count badge shows in Story header (e.g., "Tasks (8)")
+- [ ] Task filters allow filtering by status, priority, assignee
+- [ ] Task sorting allows sorting by priority, status, created date, assignee
+- [ ] Task form validates inputs (title required, hours numeric)
+- [ ] Success/error toast notifications for Task operations
+- [ ] Loading states during Task creation/update
+- [ ] Optimistic UI updates for instant feedback
+
+## Technical Requirements
+
+**New Components**:
+- `components/projects/task-list.tsx` - Task list container (300-400 lines)
+- `components/projects/task-card.tsx` - Individual Task card (150-200 lines)
+- `components/projects/task-form.tsx` - Inline Task creation form (200-250 lines)
+
+**New Hooks**:
+- `lib/hooks/use-tasks.ts` - Task CRUD hooks (150-200 lines)
+ - `useTasks(storyId)` - List Tasks by Story
+ - `useCreateTask()` - Create Task
+ - `useUpdateTask()` - Update Task
+ - `useDeleteTask()` - Delete Task
+ - `useChangeTaskStatus()` - Change Task status (checkbox)
+
+**API Integration**:
+- `GET /api/v1/stories/{storyId}/tasks` - List Tasks
+- `POST /api/v1/tasks` - Create Task
+- `PUT /api/v1/tasks/{id}` - Update Task
+- `DELETE /api/v1/tasks/{id}` - Delete Task
+- `PUT /api/v1/tasks/{id}/status` - Change status
+
+**Task Types** (add to `types/project.ts`):
+```typescript
+export interface Task {
+ id: string;
+ title: string;
+ description?: string;
+ storyId: string;
+ projectId: string;
+ status: WorkItemStatus;
+ priority: WorkItemPriority;
+ estimatedHours?: number;
+ actualHours?: number;
+ assigneeId?: string;
+ tenantId: string;
+ createdAt: string;
+ updatedAt: string;
+}
+
+export interface CreateTaskDto {
+ storyId: string;
+ title: string;
+ description?: string;
+ priority: WorkItemPriority;
+ estimatedHours?: number;
+}
+
+export interface UpdateTaskDto {
+ title?: string;
+ description?: string;
+ priority?: WorkItemPriority;
+ estimatedHours?: number;
+ actualHours?: number;
+}
+```
+
+## Tasks
+
+- [ ] [Task 1](sprint_4_story_2_task_1.md) - Verify Task API endpoints and create Task types
+- [ ] [Task 2](sprint_4_story_2_task_2.md) - Create Task API client and React Query hooks
+- [ ] [Task 3](sprint_4_story_2_task_3.md) - Implement TaskList component with filters and sorting
+- [ ] [Task 4](sprint_4_story_2_task_4.md) - Implement TaskCard component with checkbox status toggle
+- [ ] [Task 5](sprint_4_story_2_task_5.md) - Implement inline TaskForm for Task creation
+- [ ] [Task 6](sprint_4_story_2_task_6.md) - Integrate Task management into Story detail page
+
+**Progress**: 0/6 tasks completed
+
+## Dependencies
+
+**Prerequisites**:
+- ✅ Task API endpoints ready (TasksController.cs)
+- Story 1 completed (Story detail page must exist)
+
+**Blocks**:
+- None (independent feature after Story 1)
+
+## Definition of Done
+
+- All 6 tasks completed
+- Task list displays Tasks correctly
+- Task creation form working (inline)
+- Task checkbox status toggle working
+- Task filters and sorting functional
+- Task count badge updates in real-time
+- Empty state displays when no Tasks
+- Loading and error states implemented
+- Optimistic UI updates for status changes
+- Code reviewed and approved
+- E2E tests passing
+- Git commit created with descriptive message
+
+## Test Plan
+
+**Manual Testing**:
+1. Navigate to Story detail page
+2. Verify "Add Task" button visible
+3. Click "Add Task" → Verify inline form appears
+4. Create Task with title "Implement login API" → Verify Task appears in list
+5. Create Task without title → Verify validation error
+6. Click Task checkbox → Verify status changes to Done
+7. Uncheck Task checkbox → Verify status changes back to Todo
+8. Verify Task count badge updates (e.g., "Tasks (3)")
+9. Filter by status: "Done" → Verify only Done Tasks show
+10. Sort by priority → Verify Tasks reorder correctly
+11. Create 10+ Tasks → Verify list scrolls properly
+12. Test on mobile → Verify responsive layout
+
+**E2E Test** (Playwright):
+```typescript
+test('user can create and manage tasks', async ({ page }) => {
+ await page.goto('/stories/story-123');
+
+ // Create Task
+ await page.click('[data-testid="add-task-button"]');
+ await page.fill('[name="title"]', 'Implement login form');
+ await page.selectOption('[name="priority"]', 'High');
+ await page.fill('[name="estimatedHours"]', '8');
+ await page.click('[data-testid="submit-task"]');
+
+ // Verify Task appears
+ await expect(page.locator('[data-testid="task-item"]')).toContainText('Implement login form');
+
+ // Toggle status
+ await page.click('[data-testid="task-checkbox"]');
+ await expect(page.locator('[data-testid="task-status"]')).toContainText('Done');
+
+ // Verify count updates
+ await expect(page.locator('[data-testid="task-count"]')).toContainText('1');
+});
+
+test('task filters work correctly', async ({ page }) => {
+ await page.goto('/stories/story-123');
+
+ // Create Done Task
+ await page.click('[data-testid="add-task-button"]');
+ await page.fill('[name="title"]', 'Task 1');
+ await page.click('[data-testid="submit-task"]');
+ await page.click('[data-testid="task-checkbox"]');
+
+ // Create Todo Task
+ await page.click('[data-testid="add-task-button"]');
+ await page.fill('[name="title"]', 'Task 2');
+ await page.click('[data-testid="submit-task"]');
+
+ // Filter by Done
+ await page.selectOption('[data-testid="task-filter"]', 'Done');
+ await expect(page.locator('[data-testid="task-item"]')).toHaveCount(1);
+ await expect(page.locator('[data-testid="task-item"]')).toContainText('Task 1');
+});
+```
+
+**Verification Commands**:
+```bash
+# Start dev server
+npm run dev
+
+# Navigate to Story detail page
+# Create Tasks and test functionality
+
+# Run E2E tests
+npm run test:e2e -- tasks
+```
+
+## UX Design Reference
+
+**Design Document**: `docs/designs/STORY_UX_UI_DESIGN.md`
+- Section: "Tasks Section" (lines 305-348)
+- Layout: Task cards with checkbox, metadata, actions
+- Interaction: Checkbox toggles status, click card to expand details
+- Filters: All, Todo, InProgress, Done
+- Sorting: Priority, Status, Created date, Assignee
+
+**Design Tokens**:
+```css
+/* Task Card */
+.task-card {
+ padding: 12px 16px;
+ border: 1px solid var(--border);
+ border-radius: 8px;
+}
+
+.task-card:hover {
+ border-color: var(--primary);
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* Task Checkbox */
+.task-checkbox {
+ width: 20px;
+ height: 20px;
+ cursor: pointer;
+}
+
+.task-checkbox:hover {
+ transform: scale(1.1);
+}
+
+/* Task Count Badge */
+.task-count-badge {
+ background: var(--muted);
+ color: var(--muted-foreground);
+ padding: 2px 8px;
+ border-radius: 12px;
+ font-size: 12px;
+}
+```
+
+## Notes
+
+**Why This Matters**:
+- **Core Feature**: Tasks are essential for breaking down Stories into implementation steps
+- **User Experience**: Inline Task creation enables fast workflow without navigation
+- **Real-time Feedback**: Optimistic UI updates make the app feel instant
+- **Epic → Story → Task**: Completes the full project management hierarchy
+
+**Performance Considerations**:
+- Use React.memo for TaskCard to prevent unnecessary re-renders
+- Debounce filter/sort operations (300ms delay)
+- Virtual scrolling for lists > 50 Tasks (Phase 3)
+- Optimistic updates for status changes (instant UI feedback)
+
+**Future Enhancements** (Post-Sprint 4):
+- Task drag-and-drop reordering
+- Task bulk operations (multi-select)
+- Task due dates and reminders
+- Task comments and activity log
+- Task templates for common patterns
+- Task time tracking (start/stop timer)
+
+---
+
+**Created**: 2025-11-05 by Frontend Agent
+**Updated**: 2025-11-05
diff --git a/docs/plans/sprint_4_story_2_task_1.md b/docs/plans/sprint_4_story_2_task_1.md
new file mode 100644
index 0000000..fe9b8ac
--- /dev/null
+++ b/docs/plans/sprint_4_story_2_task_1.md
@@ -0,0 +1,234 @@
+---
+task_id: sprint_4_story_2_task_1
+story_id: sprint_4_story_2
+sprint_id: sprint_4
+status: not_started
+type: frontend
+assignee: Frontend Developer 2
+created_date: 2025-11-05
+estimated_hours: 2
+---
+
+# Task 1: Verify Task API Endpoints and Create Task Types
+
+## Description
+
+Verify that all Task API endpoints are working correctly and create TypeScript types for Task entities. This task ensures the backend is ready and establishes the type-safe foundation for Task management.
+
+## What to Do
+
+1. Test Task API endpoints using Postman or Swagger
+2. Verify GET /api/v1/stories/{storyId}/tasks returns Task list
+3. Verify POST /api/v1/tasks creates Task correctly
+4. Verify PUT /api/v1/tasks/{id} updates Task
+5. Verify DELETE /api/v1/tasks/{id} deletes Task
+6. Verify PUT /api/v1/tasks/{id}/status changes status
+7. Check multi-tenant isolation (cannot access other tenant Tasks)
+8. Add Task types to `types/project.ts`
+9. Document any API quirks or issues
+
+## Files to Create/Modify
+
+- `types/project.ts` (modify, add Task types ~50 lines)
+
+## Implementation Details
+
+```typescript
+// types/project.ts
+// Add these Task types
+
+export interface Task {
+ id: string;
+ title: string;
+ description?: string;
+ storyId: string;
+ projectId: string;
+ status: WorkItemStatus;
+ priority: WorkItemPriority;
+ estimatedHours?: number;
+ actualHours?: number;
+ assigneeId?: string;
+ tenantId: string;
+ createdAt: string;
+ updatedAt: string;
+ createdBy?: string;
+ updatedBy?: string;
+}
+
+export interface CreateTaskDto {
+ storyId: string;
+ projectId?: string; // May be auto-filled from Story
+ title: string;
+ description?: string;
+ priority: WorkItemPriority;
+ estimatedHours?: number;
+ createdBy: string;
+}
+
+export interface UpdateTaskDto {
+ title?: string;
+ description?: string;
+ priority?: WorkItemPriority;
+ estimatedHours?: number;
+ actualHours?: number;
+}
+
+export interface ChangeTaskStatusDto {
+ status: WorkItemStatus;
+}
+
+export interface AssignTaskDto {
+ assigneeId: string;
+}
+
+// Add Task to existing types if needed
+export interface Story {
+ // ... existing fields
+ taskCount?: number; // Optional: count of Tasks
+ tasks?: Task[]; // Optional: nested Tasks
+}
+```
+
+## API Testing Checklist
+
+**GET /api/v1/stories/{storyId}/tasks** - List Tasks:
+```bash
+# Expected: 200 OK, array of Tasks
+curl -H "Authorization: Bearer {token}" \
+ GET https://api.colaflow.com/api/v1/stories/{storyId}/tasks
+
+# Test cases:
+# - Valid storyId → Returns tasks array
+# - Empty story → Returns []
+# - Invalid storyId → Returns 404
+# - Other tenant story → Returns 403 or empty array
+```
+
+**POST /api/v1/tasks** - Create Task:
+```bash
+# Expected: 201 Created, Task object
+curl -H "Authorization: Bearer {token}" \
+ -H "Content-Type: application/json" \
+ -d '{
+ "storyId": "story-123",
+ "title": "Implement login API",
+ "description": "Create POST /auth/login endpoint",
+ "priority": "High",
+ "estimatedHours": 8,
+ "createdBy": "user-123"
+ }' \
+ POST https://api.colaflow.com/api/v1/tasks
+
+# Test cases:
+# - Valid data → Creates task
+# - Missing title → Returns 400 validation error
+# - Invalid storyId → Returns 404 or 400
+# - Missing storyId → Returns 400
+```
+
+**PUT /api/v1/tasks/{id}** - Update Task:
+```bash
+# Expected: 200 OK, updated Task object
+curl -H "Authorization: Bearer {token}" \
+ -H "Content-Type: application/json" \
+ -d '{
+ "title": "Updated title",
+ "priority": "Critical"
+ }' \
+ PUT https://api.colaflow.com/api/v1/tasks/{id}
+
+# Test cases:
+# - Valid update → Returns updated task
+# - Invalid taskId → Returns 404
+# - Other tenant task → Returns 403
+```
+
+**DELETE /api/v1/tasks/{id}** - Delete Task:
+```bash
+# Expected: 204 No Content or 200 OK
+curl -H "Authorization: Bearer {token}" \
+ DELETE https://api.colaflow.com/api/v1/tasks/{id}
+
+# Test cases:
+# - Valid taskId → Deletes task
+# - Invalid taskId → Returns 404
+# - Other tenant task → Returns 403
+```
+
+**PUT /api/v1/tasks/{id}/status** - Change Status:
+```bash
+# Expected: 200 OK, updated Task object
+curl -H "Authorization: Bearer {token}" \
+ -H "Content-Type: application/json" \
+ -d '{
+ "status": "Done"
+ }' \
+ PUT https://api.colaflow.com/api/v1/tasks/{id}/status
+
+# Test cases:
+# - Valid status → Updates status
+# - Invalid status → Returns 400
+# - Other tenant task → Returns 403
+```
+
+## Acceptance Criteria
+
+- [ ] All Task API endpoints tested and working
+- [ ] GET endpoint returns Task list for Story
+- [ ] POST endpoint creates Task successfully
+- [ ] PUT endpoint updates Task correctly
+- [ ] DELETE endpoint removes Task
+- [ ] Status change endpoint works
+- [ ] Multi-tenant isolation verified (cannot access other tenant Tasks)
+- [ ] Task types added to `types/project.ts`
+- [ ] All Task fields properly typed
+- [ ] CreateTaskDto, UpdateTaskDto, ChangeTaskStatusDto defined
+- [ ] API quirks documented (if any)
+
+## Testing
+
+**Postman/Swagger Testing**:
+1. Import Task API collection (if available)
+2. Test each endpoint with valid data
+3. Test error cases (invalid IDs, missing fields, validation)
+4. Verify responses match TypeScript types
+5. Document any discrepancies
+
+**Expected API Behavior**:
+- All endpoints require authentication (JWT token)
+- All endpoints respect multi-tenant isolation (TenantId filter)
+- Validation errors return 400 with error details
+- Not found errors return 404
+- Forbidden errors return 403
+- Successful creates return 201 Created
+- Successful updates/deletes return 200 OK or 204 No Content
+
+## Dependencies
+
+**Prerequisites**:
+- ✅ Task API ready (TasksController.cs)
+- ✅ JWT authentication working
+- ✅ Postman or Swagger access
+
+**Blocks**:
+- Task 2 (API client depends on verified endpoints)
+
+## Estimated Time
+
+2 hours
+
+## Notes
+
+**Document API Issues**:
+If you find any API issues, document them clearly:
+- Missing fields in response
+- Unexpected validation rules
+- Incorrect HTTP status codes
+- Multi-tenant isolation not working
+- Performance issues (slow responses)
+
+**Communicate with Backend**:
+If API endpoints are not ready or have issues, immediately notify Backend team and Product Manager. This is a blocker for Story 2.
+
+**Fallback Plan**:
+If Task API is not ready, frontend can proceed with mock data for development, but API must be ready before Story 2 completion.
diff --git a/docs/plans/sprint_4_story_2_task_2.md b/docs/plans/sprint_4_story_2_task_2.md
new file mode 100644
index 0000000..3b0f7e1
--- /dev/null
+++ b/docs/plans/sprint_4_story_2_task_2.md
@@ -0,0 +1,449 @@
+---
+task_id: sprint_4_story_2_task_2
+story_id: sprint_4_story_2
+sprint_id: sprint_4
+status: not_started
+type: frontend
+assignee: Frontend Developer 2
+created_date: 2025-11-05
+estimated_hours: 3
+---
+
+# Task 2: Create Task API Client and React Query Hooks
+
+## Description
+
+Create the Task API client module and React Query hooks for Task CRUD operations. This establishes the data layer for Task management with optimistic updates, caching, and error handling.
+
+## What to Do
+
+1. Add Task API client methods to `lib/api/pm.ts`
+2. Create `lib/hooks/use-tasks.ts` with React Query hooks
+3. Implement optimistic updates for instant UI feedback
+4. Add cache invalidation strategies
+5. Add error handling with toast notifications
+6. Add logger integration for debugging
+7. Test all hooks with real API data
+8. Document hook usage and examples
+
+## Files to Create/Modify
+
+- `lib/api/pm.ts` (modify, add Task methods ~100 lines)
+- `lib/hooks/use-tasks.ts` (new, ~150-200 lines)
+
+## Implementation Details
+
+### Task API Client (`lib/api/pm.ts`)
+
+```typescript
+// lib/api/pm.ts
+// Add these Task API methods
+
+import { apiClient } from './client';
+import type {
+ Task,
+ CreateTaskDto,
+ UpdateTaskDto,
+ ChangeTaskStatusDto,
+ AssignTaskDto,
+} from '@/types/project';
+
+export const tasksApi = {
+ /**
+ * Get all Tasks for a Story
+ */
+ list: async (storyId: string): Promise => {
+ const response = await apiClient.get(`/api/v1/stories/${storyId}/tasks`);
+ return response.data;
+ },
+
+ /**
+ * Get single Task by ID
+ */
+ get: async (id: string): Promise => {
+ const response = await apiClient.get(`/api/v1/tasks/${id}`);
+ return response.data;
+ },
+
+ /**
+ * Create new Task
+ */
+ create: async (data: CreateTaskDto): Promise => {
+ const response = await apiClient.post('/api/v1/tasks', data);
+ return response.data;
+ },
+
+ /**
+ * Update Task
+ */
+ update: async (id: string, data: UpdateTaskDto): Promise => {
+ const response = await apiClient.put(`/api/v1/tasks/${id}`, data);
+ return response.data;
+ },
+
+ /**
+ * Delete Task
+ */
+ delete: async (id: string): Promise => {
+ await apiClient.delete(`/api/v1/tasks/${id}`);
+ },
+
+ /**
+ * Change Task status
+ */
+ changeStatus: async (id: string, status: string): Promise => {
+ const response = await apiClient.put(`/api/v1/tasks/${id}/status`, { status });
+ return response.data;
+ },
+
+ /**
+ * Assign Task to user
+ */
+ assign: async (id: string, assigneeId: string): Promise => {
+ const response = await apiClient.put(`/api/v1/tasks/${id}/assign`, { assigneeId });
+ return response.data;
+ },
+};
+```
+
+### React Query Hooks (`lib/hooks/use-tasks.ts`)
+
+```typescript
+// lib/hooks/use-tasks.ts
+'use client';
+
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { tasksApi } from '@/lib/api/pm';
+import { toast } from 'sonner';
+import { logger } from '@/lib/utils/logger';
+import type { Task, CreateTaskDto, UpdateTaskDto } from '@/types/project';
+
+/**
+ * Get all Tasks for a Story
+ */
+export function useTasks(storyId: string | undefined) {
+ return useQuery({
+ queryKey: ['tasks', storyId],
+ queryFn: () => {
+ if (!storyId) throw new Error('Story ID required');
+ return tasksApi.list(storyId);
+ },
+ enabled: !!storyId,
+ staleTime: 60_000, // Consider fresh for 1 minute
+ });
+}
+
+/**
+ * Get single Task by ID
+ */
+export function useTask(id: string | undefined) {
+ return useQuery({
+ queryKey: ['tasks', id],
+ queryFn: () => {
+ if (!id) throw new Error('Task ID required');
+ return tasksApi.get(id);
+ },
+ enabled: !!id,
+ });
+}
+
+/**
+ * Create new Task with optimistic update
+ */
+export function useCreateTask() {
+ const queryClient = useQueryClient();
+
+ return useMutation({
+ mutationFn: async (data: CreateTaskDto) => {
+ logger.info('Creating task:', data);
+ return tasksApi.create(data);
+ },
+
+ onMutate: async (newTask) => {
+ // Cancel outgoing queries
+ await queryClient.cancelQueries({ queryKey: ['tasks', newTask.storyId] });
+
+ // Snapshot previous value
+ const previousTasks = queryClient.getQueryData(['tasks', newTask.storyId]);
+
+ // Optimistically update (optional for creates)
+ // Usually we just wait for server response
+
+ return { previousTasks };
+ },
+
+ onSuccess: (newTask, variables) => {
+ logger.info('Task created successfully:', newTask);
+
+ // Invalidate and refetch
+ queryClient.invalidateQueries({ queryKey: ['tasks', variables.storyId] });
+ queryClient.invalidateQueries({ queryKey: ['stories', variables.storyId] }); // Update Story task count
+
+ toast.success('Task created successfully');
+ },
+
+ onError: (error, variables, context) => {
+ logger.error('Failed to create task:', error);
+
+ // Restore previous state if optimistic update was used
+ if (context?.previousTasks) {
+ queryClient.setQueryData(['tasks', variables.storyId], context.previousTasks);
+ }
+
+ toast.error('Failed to create Task');
+ },
+ });
+}
+
+/**
+ * Update Task with optimistic update
+ */
+export function useUpdateTask() {
+ const queryClient = useQueryClient();
+
+ return useMutation({
+ mutationFn: async ({ id, data }: { id: string; data: UpdateTaskDto }) => {
+ logger.info('Updating task:', id, data);
+ return tasksApi.update(id, data);
+ },
+
+ onMutate: async ({ id, data }) => {
+ // Cancel queries
+ await queryClient.cancelQueries({ queryKey: ['tasks', id] });
+
+ // Snapshot previous
+ const previousTask = queryClient.getQueryData(['tasks', id]);
+
+ // Optimistically update
+ queryClient.setQueryData(['tasks', id], (old) => {
+ if (!old) return old;
+ return { ...old, ...data };
+ });
+
+ return { previousTask };
+ },
+
+ onSuccess: (updatedTask) => {
+ logger.info('Task updated successfully:', updatedTask);
+
+ // Invalidate queries
+ queryClient.invalidateQueries({ queryKey: ['tasks', updatedTask.id] });
+ queryClient.invalidateQueries({ queryKey: ['tasks', updatedTask.storyId] });
+
+ toast.success('Task updated successfully');
+ },
+
+ onError: (error, variables, context) => {
+ logger.error('Failed to update task:', error);
+
+ // Revert optimistic update
+ if (context?.previousTask) {
+ queryClient.setQueryData(['tasks', variables.id], context.previousTask);
+ }
+
+ toast.error('Failed to update Task');
+ },
+ });
+}
+
+/**
+ * Delete Task
+ */
+export function useDeleteTask() {
+ const queryClient = useQueryClient();
+
+ return useMutation({
+ mutationFn: async (id: string) => {
+ logger.info('Deleting task:', id);
+ return tasksApi.delete(id);
+ },
+
+ onSuccess: (_, deletedId) => {
+ logger.info('Task deleted successfully:', deletedId);
+
+ // Remove from cache
+ queryClient.removeQueries({ queryKey: ['tasks', deletedId] });
+
+ // Invalidate lists
+ queryClient.invalidateQueries({ queryKey: ['tasks'] });
+
+ toast.success('Task deleted successfully');
+ },
+
+ onError: (error) => {
+ logger.error('Failed to delete task:', error);
+ toast.error('Failed to delete Task');
+ },
+ });
+}
+
+/**
+ * Change Task status (for checkbox toggle)
+ */
+export function useChangeTaskStatus() {
+ const queryClient = useQueryClient();
+
+ return useMutation({
+ mutationFn: async ({ taskId, status }: { taskId: string; status: string }) => {
+ logger.info('Changing task status:', taskId, status);
+ return tasksApi.changeStatus(taskId, status);
+ },
+
+ onMutate: async ({ taskId, status }) => {
+ // Cancel queries
+ await queryClient.cancelQueries({ queryKey: ['tasks', taskId] });
+
+ // Snapshot previous
+ const previousTask = queryClient.getQueryData(['tasks', taskId]);
+
+ // Optimistically update status
+ queryClient.setQueryData(['tasks', taskId], (old) => {
+ if (!old) return old;
+ return { ...old, status };
+ });
+
+ // Also update in list
+ const storyId = previousTask?.storyId;
+ if (storyId) {
+ queryClient.setQueryData(['tasks', storyId], (old) => {
+ if (!old) return old;
+ return old.map((task) =>
+ task.id === taskId ? { ...task, status } : task
+ );
+ });
+ }
+
+ return { previousTask };
+ },
+
+ onSuccess: (updatedTask) => {
+ logger.info('Task status changed successfully:', updatedTask);
+
+ // Invalidate queries
+ queryClient.invalidateQueries({ queryKey: ['tasks', updatedTask.id] });
+ queryClient.invalidateQueries({ queryKey: ['tasks', updatedTask.storyId] });
+ queryClient.invalidateQueries({ queryKey: ['stories', updatedTask.storyId] }); // Update Story progress
+
+ toast.success(`Task marked as ${updatedTask.status}`);
+ },
+
+ onError: (error, variables, context) => {
+ logger.error('Failed to change task status:', error);
+
+ // Revert optimistic update
+ if (context?.previousTask) {
+ queryClient.setQueryData(['tasks', variables.taskId], context.previousTask);
+ }
+
+ toast.error('Failed to update Task status');
+ },
+ });
+}
+
+/**
+ * Assign Task to user
+ */
+export function useAssignTask() {
+ const queryClient = useQueryClient();
+
+ return useMutation({
+ mutationFn: async ({ taskId, assigneeId }: { taskId: string; assigneeId: string }) => {
+ logger.info('Assigning task:', taskId, assigneeId);
+ return tasksApi.assign(taskId, assigneeId);
+ },
+
+ onSuccess: (updatedTask) => {
+ logger.info('Task assigned successfully:', updatedTask);
+
+ queryClient.invalidateQueries({ queryKey: ['tasks', updatedTask.id] });
+ queryClient.invalidateQueries({ queryKey: ['tasks', updatedTask.storyId] });
+
+ toast.success('Task assigned successfully');
+ },
+
+ onError: (error) => {
+ logger.error('Failed to assign task:', error);
+ toast.error('Failed to assign Task');
+ },
+ });
+}
+```
+
+## Acceptance Criteria
+
+- [ ] Task API client methods added to `lib/api/pm.ts`
+- [ ] All CRUD operations implemented (list, get, create, update, delete)
+- [ ] `use-tasks.ts` hooks file created
+- [ ] `useTasks(storyId)` hook returns Task list for Story
+- [ ] `useCreateTask()` hook creates Task with optimistic update
+- [ ] `useUpdateTask()` hook updates Task with optimistic update
+- [ ] `useDeleteTask()` hook deletes Task
+- [ ] `useChangeTaskStatus()` hook changes status with optimistic update
+- [ ] All hooks include error handling with toast notifications
+- [ ] All hooks include logger integration
+- [ ] Cache invalidation strategies implemented correctly
+- [ ] Optimistic updates provide instant UI feedback
+- [ ] Hooks tested with real API data
+
+## Testing
+
+**Manual Testing**:
+```typescript
+// Test in a React component
+function TestTaskHooks() {
+ const { data: tasks, isLoading } = useTasks('story-123');
+ const createTask = useCreateTask();
+
+ const handleCreate = () => {
+ createTask.mutate({
+ storyId: 'story-123',
+ title: 'Test Task',
+ priority: 'High',
+ estimatedHours: 8,
+ createdBy: 'user-123',
+ });
+ };
+
+ return (
+
+
+ {isLoading &&
Loading...
}
+ {tasks?.map((task) => (
+
{task.title}
+ ))}
+
Failed to load Tasks. Please try again.
+
+ );
+ }
+
+ return (
+
+ {/* Header */}
+
+
+
Tasks
+
+ {taskCount} total
+
+ {completedCount > 0 && (
+
+ {completedCount} done
+
+ )}
+
+
+ {!readonly && (
+
+ )}
+
+
+ {/* Filters and Sorting */}
+ {taskCount > 0 && (
+
+
+
+ Filter:
+
+
+
+
+
+
+
+
+
Sort:
+
+
+
+ )}
+
+ {/* Add Task Form */}
+ {showAddForm && (
+
+ setShowAddForm(false)}
+ onCancel={() => setShowAddForm(false)}
+ />
+
+ )}
+
+ {/* Task List */}
+ {filteredAndSortedTasks.length > 0 ? (
+
+ {filteredAndSortedTasks.map((task) => (
+
+ ))}
+
+ ) : (
+
{
+ setFilterStatus('All');
+ setFilterPriority('All');
+ }}
+ onAddTask={() => setShowAddForm(true)}
+ readonly={readonly}
+ />
+ )}
+
+ No Tasks match the selected filters.
+
+
+
+ );
+ }
+
+ return (
+
+ ☑️
+ No Tasks Yet
+
+ Break down this Story into technical Tasks to track implementation progress.
+
+ {!readonly && (
+
+ )}
+
+ );
+}
+
+// Loading skeleton
+function TaskListSkeleton() {
+ return (
+
+ );
+}
+```
+
+## Acceptance Criteria
+
+- [ ] TaskList component displays all Tasks for Story
+- [ ] Task count badge shows total and completed count
+- [ ] "Add Task" button opens inline Task form
+- [ ] Status filter works (All, Backlog, Todo, InProgress, Done)
+- [ ] Priority filter works (All, Low, Medium, High, Critical)
+- [ ] Sorting works (Priority, Status, Created date, Assignee)
+- [ ] Filters and sorting can be combined
+- [ ] Empty state displays when no Tasks exist
+- [ ] Empty state with filters shows "Reset Filters" button
+- [ ] Loading skeleton displays during data fetch
+- [ ] Error state displays on fetch failure
+- [ ] Component integrates with useTasks hook
+- [ ] Readonly mode hides "Add Task" button
+- [ ] Performance: Filters/sorts without lag (<100ms)
+
+## Testing
+
+**Manual Testing**:
+1. Navigate to Story detail page
+2. Verify Task count badge shows correctly (e.g., "8 total, 3 done")
+3. Click "Add Task" → Verify inline form appears
+4. Create 5 Tasks with different statuses and priorities
+5. Test status filter → Select "Done" → Verify only Done Tasks show
+6. Test priority filter → Select "High" → Verify only High priority Tasks show
+7. Test combined filters → Status: InProgress + Priority: High
+8. Test sorting → Sort by Priority → Verify High/Critical at top
+9. Test sorting → Sort by Status → Verify Backlog → Todo → InProgress → Done
+10. Reset filters → Verify all Tasks show again
+11. Test empty state (Story with no Tasks) → Verify helpful message
+
+**Unit Test**:
+```typescript
+import { render, screen, fireEvent } from '@testing-library/react';
+import { TaskList } from './task-list';
+
+describe('TaskList', () => {
+ const mockTasks = [
+ { id: '1', title: 'Task 1', status: 'Todo', priority: 'High' },
+ { id: '2', title: 'Task 2', status: 'Done', priority: 'Low' },
+ { id: '3', title: 'Task 3', status: 'InProgress', priority: 'Critical' },
+ ];
+
+ it('renders task count badge', () => {
+ render();
+ expect(screen.getByText('3 total')).toBeInTheDocument();
+ expect(screen.getByText('1 done')).toBeInTheDocument();
+ });
+
+ it('filters tasks by status', () => {
+ render();
+ fireEvent.click(screen.getByText('All Status'));
+ fireEvent.click(screen.getByText('Done'));
+ expect(screen.getAllByTestId('task-card')).toHaveLength(1);
+ expect(screen.getByText('Task 2')).toBeInTheDocument();
+ });
+
+ it('sorts tasks by priority', () => {
+ render();
+ const tasks = screen.getAllByTestId('task-card');
+ expect(tasks[0]).toHaveTextContent('Task 3'); // Critical first
+ expect(tasks[1]).toHaveTextContent('Task 1'); // High second
+ });
+});
+```
+
+## Dependencies
+
+**Prerequisites**:
+- Task 2 (useTasks hook must exist)
+- TaskCard component (Task 4 - can use placeholder initially)
+- TaskForm component (Task 5 - can use placeholder initially)
+- ✅ shadcn/ui Card, Button, Badge, Select components
+
+**Blocks**:
+- Task 6 (Story detail page integration)
+
+## Estimated Time
+
+4 hours
+
+## Notes
+
+**Performance**: Use `useMemo` for filtering/sorting to avoid recalculating on every render. With 100+ Tasks, this prevents performance issues.
+
+**Empty State**: Different empty states for "no Tasks" vs "no Tasks matching filters" improve UX.
+
+**Progressive Enhancement**: Component works with TaskCard and TaskForm placeholders initially. Replace with real components in Tasks 4 and 5.
diff --git a/docs/plans/sprint_4_story_2_task_4.md b/docs/plans/sprint_4_story_2_task_4.md
new file mode 100644
index 0000000..0858fe7
--- /dev/null
+++ b/docs/plans/sprint_4_story_2_task_4.md
@@ -0,0 +1,28 @@
+---
+task_id: sprint_4_story_2_task_4
+story_id: sprint_4_story_2
+sprint_id: sprint_4
+status: not_started
+type: frontend
+assignee: Frontend Developer 2
+created_date: 2025-11-05
+estimated_hours: 3
+---
+
+# Task 4: Implement TaskCard Component with Checkbox Status Toggle
+
+## Description
+
+Create the TaskCard component that displays individual Task information with a checkbox for quick status toggling.
+
+## Acceptance Criteria
+
+- [ ] TaskCard displays Task title, priority, estimated hours
+- [ ] Checkbox shows correct state (checked = Done, unchecked = Todo/InProgress)
+- [ ] Clicking checkbox toggles Task status
+- [ ] Optimistic UI update for instant feedback
+- [ ] Hover effect highlights card
+
+## Estimated Time
+
+3 hours
diff --git a/docs/plans/sprint_4_story_2_task_5.md b/docs/plans/sprint_4_story_2_task_5.md
new file mode 100644
index 0000000..f430d03
--- /dev/null
+++ b/docs/plans/sprint_4_story_2_task_5.md
@@ -0,0 +1,29 @@
+---
+task_id: sprint_4_story_2_task_5
+story_id: sprint_4_story_2
+sprint_id: sprint_4
+status: not_started
+type: frontend
+assignee: Frontend Developer 2
+created_date: 2025-11-05
+estimated_hours: 3
+---
+
+# Task 5: Implement Inline TaskForm for Task Creation
+
+## Description
+
+Create the inline TaskForm component for creating new Tasks without leaving the Story detail page.
+
+## Acceptance Criteria
+
+- [ ] Form displays title, description, priority, estimated hours fields
+- [ ] Title field is required with validation
+- [ ] Submitting form creates Task successfully
+- [ ] Form resets after successful creation
+- [ ] Cancel button closes form
+- [ ] Success and error toast notifications
+
+## Estimated Time
+
+3 hours
diff --git a/docs/plans/sprint_4_story_2_task_6.md b/docs/plans/sprint_4_story_2_task_6.md
new file mode 100644
index 0000000..115594d
--- /dev/null
+++ b/docs/plans/sprint_4_story_2_task_6.md
@@ -0,0 +1,30 @@
+---
+task_id: sprint_4_story_2_task_6
+story_id: sprint_4_story_2
+sprint_id: sprint_4
+status: not_started
+type: frontend
+assignee: Frontend Developer 2
+created_date: 2025-11-05
+estimated_hours: 2
+---
+
+# Task 6: Integrate Task Management into Story Detail Page
+
+## Description
+
+Integrate the complete Task management system into the Story detail page and test full functionality.
+
+## Acceptance Criteria
+
+- [ ] TaskList component integrated into Story detail page
+- [ ] Task count badge shows in Story header
+- [ ] Full Task CRUD operations working
+- [ ] Filters and sorting functional
+- [ ] Checkbox status toggle working
+- [ ] E2E tests passing
+- [ ] No console errors
+
+## Estimated Time
+
+2 hours
diff --git a/docs/plans/sprint_4_story_3.md b/docs/plans/sprint_4_story_3.md
new file mode 100644
index 0000000..488ddf4
--- /dev/null
+++ b/docs/plans/sprint_4_story_3.md
@@ -0,0 +1,58 @@
+---
+story_id: sprint_4_story_3
+sprint: sprint_4
+priority: P1
+status: not_started
+story_points: 3
+estimated_days: 2
+created_date: 2025-11-05
+assignee: Frontend Team
+---
+
+# Story 3: Enhanced Story Form
+
+**Sprint**: Sprint 4
+**Priority**: P1 (High)
+**Estimated**: 2 days
+**Owner**: Frontend Team
+
+## Description
+
+Enhance the existing Story form component to include UX-designed fields: Acceptance Criteria (checkbox list), Assignee selector, Tags/Labels (multi-select), and Story Points. This improves Story planning capabilities and aligns with the comprehensive UX design.
+
+## User Story
+
+**As a** product manager,
+**I want** to add acceptance criteria, assignee, tags, and story points when creating Stories,
+**So that** I can better plan and communicate Story requirements.
+
+## Acceptance Criteria
+
+- [ ] Form includes Acceptance Criteria field (dynamic checkbox list)
+- [ ] Form includes Assignee selector (searchable dropdown showing users)
+- [ ] Form includes Tags field (multi-select labels)
+- [ ] Form includes Story Points field (optional numeric)
+- [ ] Acceptance criteria can be added/removed dynamically
+- [ ] Tags support multi-select
+- [ ] Form validation works for all fields
+- [ ] Backward compatible with existing Stories (missing fields are optional)
+- [ ] Form saves correctly with all new fields
+
+## Tasks
+
+- [ ] Task 1: Add Acceptance Criteria editor component
+- [ ] Task 2: Implement Assignee selector component
+- [ ] Task 3: Add Tags/Labels multi-select component
+- [ ] Task 4: Add Story Points field and update schema
+- [ ] Task 5: Integrate all new fields into Story form
+- [ ] Task 6: Update Story types and API client
+
+**Progress**: 0/6 tasks completed
+
+## Estimated Time
+
+2 days (16 hours)
+
+---
+
+**Created**: 2025-11-05 by Frontend Agent
diff --git a/docs/plans/sprint_4_story_4.md b/docs/plans/sprint_4_story_4.md
new file mode 100644
index 0000000..4c083b0
--- /dev/null
+++ b/docs/plans/sprint_4_story_4.md
@@ -0,0 +1,57 @@
+---
+story_id: sprint_4_story_4
+sprint: sprint_4
+priority: P1
+status: not_started
+story_points: 3
+estimated_days: 2
+created_date: 2025-11-05
+assignee: Frontend Team
+---
+
+# Story 4: Quick Add Story Workflow
+
+**Sprint**: Sprint 4
+**Priority**: P1 (High)
+**Estimated**: 2 days
+**Owner**: Frontend Team
+
+## Description
+
+Implement a Quick Add Story workflow with an inline form that requires only title and priority. This enables rapid Story creation for batch planning sessions without the overhead of the full form dialog.
+
+## User Story
+
+**As a** product manager,
+**I want** to quickly create multiple Stories with just title and priority,
+**So that** I can rapidly plan Epics during brainstorming sessions.
+
+## Acceptance Criteria
+
+- [ ] Quick Add button appears at top of Stories list in Epic detail page
+- [ ] Clicking button shows inline form (not dialog)
+- [ ] Form requires only title and priority (minimal fields)
+- [ ] Pressing Enter key submits form
+- [ ] Form resets and stays open after successful creation (batch creation)
+- [ ] Keyboard shortcut (Cmd/Ctrl + N) opens Quick Add form
+- [ ] "Add & Create Tasks" button variant navigates to Story detail page
+- [ ] Form animations smooth and performant
+- [ ] Success toast notifications shown
+
+## Tasks
+
+- [ ] Task 1: Create QuickAddStory component with inline form
+- [ ] Task 2: Add keyboard shortcut handler (Cmd/Ctrl + N)
+- [ ] Task 3: Implement auto-reset and batch creation flow
+- [ ] Task 4: Add "Add & Create Tasks" button and navigation
+- [ ] Task 5: Integrate into Epic detail page
+
+**Progress**: 0/5 tasks completed
+
+## Estimated Time
+
+2 days (16 hours)
+
+---
+
+**Created**: 2025-11-05 by Frontend Agent
diff --git a/docs/plans/sprint_4_story_5.md b/docs/plans/sprint_4_story_5.md
new file mode 100644
index 0000000..374a0a2
--- /dev/null
+++ b/docs/plans/sprint_4_story_5.md
@@ -0,0 +1,55 @@
+---
+story_id: sprint_4_story_5
+sprint: sprint_4
+priority: P2
+status: not_started
+story_points: 2
+estimated_days: 1
+created_date: 2025-11-05
+assignee: Frontend Team
+---
+
+# Story 5: Story Card Component
+
+**Sprint**: Sprint 4
+**Priority**: P2 (Medium)
+**Estimated**: 1 day
+**Owner**: Frontend Team
+
+## Description
+
+Create a reusable StoryCard component with three variants (list, kanban, compact) to replace inline Story display code and improve code maintainability. This component will be used across Epic detail page, Kanban board, and Story lists.
+
+## User Story
+
+**As a** developer,
+**I want** a reusable Story card component,
+**So that** Story display is consistent across the app and easier to maintain.
+
+## Acceptance Criteria
+
+- [ ] StoryCard component works in three variants (list, kanban, compact)
+- [ ] Visual states implemented (default, hover, selected, dragging)
+- [ ] Quick actions menu appears on hover (Edit, Delete, Duplicate)
+- [ ] Task count indicator shows (e.g., "5 tasks")
+- [ ] Component shows all relevant metadata (status, priority, assignee, time)
+- [ ] Component is reusable across different views
+- [ ] Performance optimized with React.memo
+- [ ] TypeScript types fully defined
+
+## Tasks
+
+- [ ] Task 1: Create StoryCard component with three variants
+- [ ] Task 2: Implement visual states and hover effects
+- [ ] Task 3: Add Task count indicator and quick actions
+- [ ] Task 4: Optimize with React.memo and replace existing Story cards
+
+**Progress**: 0/4 tasks completed
+
+## Estimated Time
+
+1 day (8 hours)
+
+---
+
+**Created**: 2025-11-05 by Frontend Agent
diff --git a/docs/plans/sprint_4_story_6.md b/docs/plans/sprint_4_story_6.md
new file mode 100644
index 0000000..5bc3dec
--- /dev/null
+++ b/docs/plans/sprint_4_story_6.md
@@ -0,0 +1,58 @@
+---
+story_id: sprint_4_story_6
+sprint: sprint_4
+priority: P2
+status: not_started
+story_points: 3
+estimated_days: 2
+created_date: 2025-11-05
+assignee: Frontend Team
+---
+
+# Story 6: Kanban Story Creation Enhancement (Optional)
+
+**Sprint**: Sprint 4
+**Priority**: P2 (Optional - Stretch Goal)
+**Estimated**: 2 days
+**Owner**: Frontend Team
+
+## Description
+
+Add contextual Story creation directly from Epic cards in the Kanban board. This allows users to create Stories without leaving the Kanban view, maintaining context and improving workflow efficiency.
+
+## User Story
+
+**As a** product manager,
+**I want** to create Stories directly from Epic cards in Kanban,
+**So that** I can quickly add Stories while planning without leaving the board view.
+
+## Acceptance Criteria
+
+- [ ] Hovering over Epic card shows "+ Add Story" button
+- [ ] Clicking button opens inline Story form below Epic card
+- [ ] Form is context-bound (Epic pre-selected, read-only)
+- [ ] Created Story appears in correct Kanban column by status
+- [ ] Epic Story count updates in real-time
+- [ ] Form slide-in animation smooth and intuitive
+- [ ] Can cancel or close form easily (Cancel button, outside click, ESC key)
+
+## Tasks
+
+- [ ] Task 1: Enhance Epic card with "+ Add Story" action on hover
+- [ ] Task 2: Create inline Story form for Kanban context
+- [ ] Task 3: Implement form slide-in animation
+- [ ] Task 4: Integrate real-time Epic Story count updates
+
+**Progress**: 0/4 tasks completed
+
+## Estimated Time
+
+2 days (16 hours)
+
+## Notes
+
+**Status**: Optional stretch goal. Implement only if Stories 1-5 complete ahead of schedule. If time is tight, defer to future sprint.
+
+---
+
+**Created**: 2025-11-05 by Frontend Agent