hosting-frontend/openspec/changes/complete-all-tasks-with-tests/tasks.md

# Implementation Tasks: Complete All Remaining OpenSpec Tasks with 90%+ Coverage

## 📋 Overview
- **Total Tasks**: 51 remaining OpenSpec tasks + 20 testing infrastructure tasks = **71 total**
- **Coverage Target**: 90%+ across all production code
- **Timeline Estimate**: 17 days (parallel execution possible)
- **Testing Strategy**: Every code change includes unit + feature tests with validation

---

## 🚀 Phase 1: Testing Infrastructure Setup (Days 1-2)

### 1.1 Jest Configuration & Dependencies
- [ ] 1.1.1 Install Jest, @testing-library/react, @testing-library/jest-dom dependencies
  - **TEST**: Run `npm test -- --listTests` and verify test runner works
- [ ] 1.1.2 Install TypeScript testing types (@types/jest, ts-jest)
  - **TEST**: Verify `jest.config.js` with `ts-jest` preset
- [ ] 1.1.3 Create jest.config.js with Next.js configuration
  - **TEST**: Run `npm test -- jest.config.js --validate-config`
- [ ] 1.1.4 Install coverage reporting tools (nyc, coverage reporters)
  - **TEST**: Run `npm test -- --coverage` and verify report generation

### 1.2 Test Setup & Utilities
- [ ] 1.2.1 Create `__tests__/setup.ts` with global test configuration
  - **TEST**: Verify setup.ts runs without errors during `npm test`
- [ ] 1.2.2 Create mock factory for api-client.ts in `__tests__/mocks/api-client.ts`
  - **TEST**: Write 3 unit tests verifying mock returns expected responses
- [ ] 1.2.3 Create Next.js router mock in `__tests__/mocks/next-router.ts`
  - **TEST**: Write 2 unit tests for useRouter hook mocking
- [ ] 1.2.4 Create test utilities in `__tests__/utils/test-helpers.ts`
  - **TEST**: Write helper tests (renderWithProviders, createMockPortfolio, etc.)
- [ ] 1.2.5 Create fixture/mock data in `__tests__/fixtures/mock-data.ts`
  - **TEST**: Verify mock data is valid and parseable
- [ ] 1.2.6 Configure environment variables for tests (.env.test)
  - **TEST**: Verify `process.env.NEXT_PUBLIC_API_URL` loads in tests

### 1.3 Coverage Reporting
- [ ] 1.3.1 Configure Jest coverage thresholds (90% global minimum)
  - **TEST**: Run `npm test -- --coverage` and verify threshold enforcement
- [ ] 1.3.2 Add coverage scripts to package.json
  - **TEST**: Verify `npm run test:coverage` command works
- [ ] 1.3.3 Create coverage report excludes for infrastructure code
  - **TEST**: Verify .next/, node_modules/, etc. excluded from coverage
- [ ] 1.3.4 Set up coverage CI/CD check (fail if <90%)
  - **TEST**: Manually verify threshold enforcement in CI/CD

---

## 🧪 Phase 2: Core Module Tests (Days 3-5)

### 2.1 API Client Tests
- [ ] 2.1.1 Write unit tests for `lib/api-client.ts` - get/post/put/delete methods
  - **UNIT TESTS**: 8 tests for HTTP methods + error handling
  - **TEST VALIDATION**: Coverage >90% for api-client.ts
- [ ] 2.1.2 Write unit tests for error handling and 401 logout
  - **UNIT TESTS**: 6 tests for error scenarios and token expiration
  - **TEST VALIDATION**: All error paths covered
- [ ] 2.1.3 Write unit tests for Bearer token injection
  - **UNIT TESTS**: 4 tests for token headers and missing token handling
  - **TEST VALIDATION**: All token scenarios covered
- [ ] 2.1.4 Write integration tests for API client with real response mocking
  - **INTEGRATION TESTS**: 5 tests simulating API responses
  - **TEST VALIDATION**: Run full test suite, verify no regressions

### 2.2 Authentication Context & Hooks Tests
- [ ] 2.2.1 Write unit tests for `components/auth/auth-provider.tsx`
  - **UNIT TESTS**: 10 tests for login, logout, token management
  - **TEST VALIDATION**: Coverage >90% for AuthProvider
- [ ] 2.2.2 Write unit tests for `hooks/use-auth.ts` custom hook
  - **UNIT TESTS**: 8 tests for hook initialization, state updates, callbacks
  - **TEST VALIDATION**: All hook behaviors covered
- [ ] 2.2.3 Write integration tests for authentication flow
  - **INTEGRATION TESTS**: 6 tests for complete login → redirect → useAuth cycle
  - **TEST VALIDATION**: Full auth flow tested end-to-end

### 2.3 Form & Validation Tests
- [ ] 2.3.1 Write unit tests for form validation utilities (email, password)
  - **UNIT TESTS**: 12 tests for validators (valid/invalid cases)
  - **TEST VALIDATION**: Coverage >90% for validation utils
- [ ] 2.3.2 Write component tests for login form submission
  - **COMPONENT TESTS**: 8 tests for form interaction, validation display, API calls
  - **TEST VALIDATION**: All form states and edge cases tested
- [ ] 2.3.3 Write component tests for register form
  - **COMPONENT TESTS**: 10 tests for multi-field validation, password confirmation
  - **TEST VALIDATION**: All registration scenarios covered

### 2.4 Portfolio Management Tests
- [ ] 2.4.1 Write unit tests for portfolio hooks (`use-portfolios` hook)
  - **UNIT TESTS**: 12 tests for fetch, create, update, delete, state management
  - **TEST VALIDATION**: Coverage >90% for portfolio hook
- [ ] 2.4.2 Write component tests for portfolio creation form
  - **COMPONENT TESTS**: 8 tests for form input, validation, submission
  - **TEST VALIDATION**: All portfolio creation scenarios tested
- [ ] 2.4.3 Write component tests for file upload functionality
  - **COMPONENT TESTS**: 10 tests for file selection, progress, error handling
  - **TEST VALIDATION**: Upload flow fully tested

---

## 🎨 Phase 3: Component Tests (Days 6-8)

### 3.1 Layout & Page Components
- [ ] 3.1.1 Write component tests for root layout (`app/layout.tsx`)
  - **COMPONENT TESTS**: 6 tests for provider setup, metadata, global styles
  - **TEST VALIDATION**: Layout renders correctly with all providers
- [ ] 3.1.2 Write component tests for landing page (`app/page.tsx`)
  - **COMPONENT TESTS**: 10 tests for hero, CTA, example portfolio link
  - **TEST VALIDATION**: All landing page features tested
- [ ] 3.1.3 Write component tests for dashboard page
  - **COMPONENT TESTS**: 12 tests for portfolio list, creation form, upload
  - **TEST VALIDATION**: Full dashboard user flow tested

### 3.2 Launch UI Component Tests
- [ ] 3.2.1 Write component tests for Navbar with authentication states
  - **COMPONENT TESTS**: 8 tests for authenticated/unauthenticated rendering, navigation
  - **TEST VALIDATION**: All navbar states covered
- [ ] 3.2.2 Write component tests for Hero component
  - **COMPONENT TESTS**: 6 tests for content rendering, CTA button interaction
  - **TEST VALIDATION**: Hero component works in isolation
- [ ] 3.2.3 Write component tests for FAQ component
  - **COMPONENT TESTS**: 8 tests for accordion expand/collapse, multiple open
  - **TEST VALIDATION**: FAQ interaction patterns tested
- [ ] 3.2.4 Write component tests for Footer component
  - **COMPONENT TESTS**: 4 tests for link rendering, copyright info
  - **TEST VALIDATION**: Footer displays correctly

### 3.3 Accessibility Tests
- [ ] 3.3.1 Write accessibility tests with axe-core for all pages
  - **A11Y TESTS**: 5 tests for WCAG 2.1 AA compliance per page
  - **TEST VALIDATION**: No accessibility violations detected
- [ ] 3.3.2 Write keyboard navigation tests (Tab, Enter, Escape keys)
  - **A11Y TESTS**: 8 tests for keyboard accessibility across components
  - **TEST VALIDATION**: All interactive elements keyboard accessible
- [ ] 3.3.3 Write screen reader tests (ARIA labels, roles, announcements)
  - **A11Y TESTS**: 10 tests for semantic HTML and ARIA attributes
  - **TEST VALIDATION**: Screen reader support verified

---

## 🎯 Phase 4: Feature Implementation (Days 9-12)

### 4.1 Launch UI Component Integration (migrate-to-nextjs-launchui: 3.2-3.10)
- [ ] 4.1.1 Copy Launch UI Navbar component to `/components/launch-ui/navbar.tsx`
  - **FEATURE TEST**: Component renders, links navigate correctly
  - **A11Y TEST**: Keyboard and screen reader accessible
  - **UNIT TEST**: Coverage >90%
- [ ] 4.1.2 Copy Launch UI Hero component to `/components/launch-ui/hero.tsx`
  - **FEATURE TEST**: Hero displays correctly with CTA button
  - **RESPONSIVE TEST**: Mobile and desktop layouts work
  - **UNIT TEST**: Coverage >90%
- [ ] 4.1.3 Copy Launch UI Items component for feature showcase
  - **FEATURE TEST**: Items grid displays with proper spacing
  - **RESPONSIVE TEST**: Columns stack on mobile
  - **UNIT TEST**: Coverage >90%
- [ ] 4.1.4 Copy Launch UI Logos component for partner/client logos
  - **FEATURE TEST**: Logo grid displays correctly
  - **RESPONSIVE TEST**: Logo scaling works on all viewports
  - **UNIT TEST**: Coverage >90%
- [ ] 4.1.5 Copy Launch UI FAQ component with accordion
  - **FEATURE TEST**: Accordion expand/collapse works, multiple items open
  - **A11Y TEST**: Keyboard navigation, ARIA roles present
  - **UNIT TEST**: Coverage >90%
- [ ] 4.1.6 Copy Launch UI Stats component for metrics display
  - **FEATURE TEST**: Stats numbers display with animations
  - **RESPONSIVE TEST**: Layout adapts to viewport
  - **UNIT TEST**: Coverage >90%
- [ ] 4.1.7 Copy Launch UI CTA component for call-to-action
  - **FEATURE TEST**: CTA button links to signup/login
  - **RESPONSIVE TEST**: CTA visible and clickable on mobile
  - **UNIT TEST**: Coverage >90%
- [ ] 4.1.8 Copy Launch UI Footer component
  - **FEATURE TEST**: Footer links, copyright, social icons display
  - **RESPONSIVE TEST**: Footer layout adapts to mobile
  - **UNIT TEST**: Coverage >90%
- [ ] 4.1.9 Customize Navbar with app-specific navigation links
  - **FEATURE TEST**: Navigation routes work correctly (Home, Login, Register, Dashboard)
  - **UNIT TEST**: Coverage >90%
  - **TEST VALIDATION**: Full navbar integration test

### 4.2 Landing Page Enhancements (migrate-to-nextjs-launchui: 5.3-5.9)
- [ ] 4.2.1 Add Items component to landing page for feature showcase
  - **FEATURE TEST**: Items render with correct data and spacing
  - **INTEGRATION TEST**: Items display alongside other components
- [ ] 4.2.2 Add Logos component for partner/client display
  - **FEATURE TEST**: Logos render with proper alignment
  - **RESPONSIVE TEST**: Logo grid responsive on all viewports
- [ ] 4.2.3 Add FAQ component with portfolio hosting questions
  - **FEATURE TEST**: FAQ content renders, accordion works
  - **A11Y TEST**: FAQ keyboard accessible
- [ ] 4.2.4 Add Stats component for platform metrics
  - **FEATURE TEST**: Stats display with animations
  - **RESPONSIVE TEST**: Stats layout adapts to mobile
- [ ] 4.2.5 Implement loading states for example portfolio
  - **FEATURE TEST**: Loading indicator shows, then example displays
  - **TEST VALIDATION**: Error handling tested
- [ ] 4.2.6 Complete landing page with all Launch UI components
  - **INTEGRATION TEST**: Full landing page renders without errors
  - **RESPONSIVE TEST**: Landing page responsive at all breakpoints
  - **UNIT TEST**: Overall landing page coverage >90%

### 4.3 Mobile & Responsive Design (migrate-to-nextjs-launchui: 10.2-10.3)
- [ ] 4.3.1 Implement mobile menu toggle for Navbar
  - **FEATURE TEST**: Mobile menu opens/closes, links navigate
  - **RESPONSIVE TEST**: Menu visible on <768px viewports
  - **A11Y TEST**: Menu keyboard accessible
- [ ] 4.3.2 Ensure Launch UI components adapt to mobile layouts
  - **RESPONSIVE TEST**: Grid/flex layouts stack on mobile
  - **RESPONSIVE TEST**: Text and buttons resize appropriately
  - **UNIT TEST**: Responsive test coverage >90%

### 4.4 SEO & Metadata Optimization (migrate-to-nextjs-launchui: 11.2-11.6)
- [ ] 4.4.1 Add JSON-LD structured data for landing page (Schema.org)
  - **SEO TEST**: Validate JSON-LD with schema.org validator
  - **UNIT TEST**: Structured data test coverage >90%
- [ ] 4.4.2 Create robots.txt at public root
  - **SEO TEST**: Verify robots.txt loads and parses correctly
- [ ] 4.4.3 Create sitemap.xml at public root
  - **SEO TEST**: Verify sitemap.xml valid and includes all routes
  - **UNIT TEST**: Sitemap generation test coverage >90%
- [ ] 4.4.4 Implement canonical URL tags on all pages
  - **SEO TEST**: Verify canonical URLs correct on each page
  - **UNIT TEST**: Canonical URL generation test coverage >90%
- [ ] 4.4.5 Add Twitter Card and enhanced Open Graph metadata
  - **SEO TEST**: Verify OG tags present on all pages
  - **UNIT TEST**: Metadata generation test coverage >90%

### 4.5 Performance Optimization (migrate-to-nextjs-launchui: 12.3-12.7)
- [ ] 4.5.1 Run Next.js bundle analyzer to identify large modules
  - **PERF TEST**: Run `npm run analyze` and identify bottlenecks
  - **VALIDATION**: Document top 5 largest modules
- [ ] 4.5.2 Implement lazy loading for non-critical components
  - **PERF TEST**: Verify lazy components load on demand
  - **UNIT TEST**: Lazy loading test coverage >90%
- [ ] 4.5.3 Configure Cache-Control headers for static assets
  - **PERF TEST**: Verify cache headers in production build
  - **VALIDATION**: Test caching with curl or DevTools
- [ ] 4.5.4 Run Lighthouse audit and address performance issues
  - **PERF TEST**: Generate Lighthouse report, target >90 score
  - **VALIDATION**: Compare before/after performance metrics

---

## 🔄 Phase 5: CI/CD & Deployment (Days 13-15)

### 5.1 CI/CD Pipeline Integration (fix-dockerfile-nextjs: 6.1-6.4)
- [ ] 5.1.1 Create/update CI/CD workflow for Docker builds
  - **CI TEST**: Pipeline executes successfully on code push
  - **VALIDATION**: Docker build completes in <5min
- [ ] 5.1.2 Add image size check to CI/CD (fail if >250MB)
  - **CI TEST**: Pipeline fails when image exceeds 250MB
  - **VALIDATION**: Add test that would trigger failure, verify it does
- [ ] 5.1.3 Add health check test to CI/CD (curl /api/health if available)
  - **CI TEST**: Health check test runs and passes
  - **VALIDATION**: Modify health check endpoint, verify test catches it
- [ ] 5.1.4 Update container registry push commands in CI/CD
  - **CI TEST**: Image successfully pushed to registry
  - **VALIDATION**: Verify image appears in registry with correct tag

### 5.2 Production Environment Configuration
- [ ] 5.2.1 Configure production environment variables (.env.production)
  - **ENV TEST**: Verify NEXT_PUBLIC_API_URL points to production API
  - **VALIDATION**: Load env vars, verify correct values
- [ ] 5.2.2 Update Dockerfile for optimized production build
  - **DOCKER TEST**: Build image successfully, verify size <250MB
  - **VALIDATION**: Run container, test health endpoint
- [ ] 5.2.3 Configure Next.js production settings in next.config.js
  - **CONFIG TEST**: Verify production optimizations enabled
  - **VALIDATION**: Check built .next directory for optimizations
- [ ] 5.2.4 Set up monitoring and error tracking (Sentry or CloudWatch)
  - **MONITORING TEST**: Verify errors logged to monitoring service
  - **VALIDATION**: Trigger test error, verify it appears in dashboard

### 5.3 Deployment Testing
- [ ] 5.3.1 Deploy to staging environment
  - **DEPLOYMENT TEST**: Staging deployment successful
  - **VALIDATION**: Verify all pages accessible, forms work
- [ ] 5.3.2 Run smoke tests on staging deployment
  - **SMOKE TEST**: Key user flows work (login, portfolio list, create)
  - **VALIDATION**: All critical paths functional
- [ ] 5.3.3 Validate health checks and monitoring on staging
  - **HEALTH TEST**: Health endpoint responds correctly
  - **MONITORING TEST**: Metrics appear in monitoring dashboard
- [ ] 5.3.4 Test rollback procedure
  - **ROLLBACK TEST**: Simulate rollback to previous version
  - **VALIDATION**: Previous version deploys and functions correctly

---

## ✅ Phase 6: Validation & Final Testing (Days 16-17)

### 6.1 Performance Benchmarking (migrate-to-nextjs-launchui: 15.2-15.4)
- [ ] 6.1.1 Measure Core Web Vitals (FCP, LCP, TTI)
  - **PERF TEST**: Run Lighthouse on production build
  - **VALIDATION**: FCP <1.0s, LCP <1.5s, TTI <2.0s
- [ ] 6.1.2 Compare performance vs. Angular version
  - **COMPARISON TEST**: Benchmark same user flows in both versions
  - **VALIDATION**: Next.js version meets or exceeds performance
- [ ] 6.1.3 Run load testing (basic traffic spike simulation)
  - **LOAD TEST**: Simulate 100+ concurrent users
  - **VALIDATION**: Response times stable, no errors under load

### 6.2 Accessibility Compliance (migrate-to-nextjs-launchui: 15.3)
- [ ] 6.2.1 Run WCAG 2.1 AA accessibility audit with axe-core
  - **A11Y TEST**: Run `npm run audit:a11y` on all pages
  - **VALIDATION**: Zero critical/serious violations, <5 minor issues
- [ ] 6.2.2 Manual keyboard navigation testing
  - **KEYBOARD TEST**: Navigate entire app with Tab, Enter, Escape
  - **VALIDATION**: All interactive elements reachable and operable
- [ ] 6.2.3 Test with screen reader (VoiceOver, NVDA simulation)
  - **SCREEN READER TEST**: Test page reading with accessibility tools
  - **VALIDATION**: Content reads logically, form labels clear

### 6.3 Coverage Validation
- [ ] 6.3.1 Generate final test coverage report
  - **COVERAGE TEST**: Run `npm run test:coverage`
  - **VALIDATION**: Global coverage ≥90% across all production code
- [ ] 6.3.2 Verify all high-risk modules covered
  - **COVERAGE TEST**: Review coverage for: api-client, auth-provider, forms
  - **VALIDATION**: auth, API, forms all >90% coverage
- [ ] 6.3.3 Ensure no untested code paths in critical flows
  - **CODE REVIEW TEST**: Manual review of test cases vs code branches
  - **VALIDATION**: All error paths and edge cases covered

### 6.4 UAT & Browser Compatibility (migrate-to-nextjs-launchui: 15.2, 15.8-15.10)
- [ ] 6.4.1 Test on Chrome latest (desktop and mobile)
  - **BROWSER TEST**: All features work on Chrome latest
  - **VALIDATION**: No console errors, rendering correct
- [ ] 6.4.2 Test on Firefox latest
  - **BROWSER TEST**: All features work on Firefox latest
  - **VALIDATION**: No console errors, rendering correct
- [ ] 6.4.3 Test on Safari latest (macOS and iOS)
  - **BROWSER TEST**: All features work on Safari latest
  - **VALIDATION**: No console errors, rendering correct
- [ ] 6.4.4 Test on Edge latest
  - **BROWSER TEST**: All features work on Edge latest
  - **VALIDATION**: No console errors, rendering correct
- [ ] 6.4.5 User acceptance testing (if stakeholders available)
  - **UAT TEST**: Stakeholders verify key user flows
  - **VALIDATION**: Sign-off from business team

### 6.5 Documentation & Archival
- [ ] 6.5.1 Update README.md with testing instructions
  - **DOC TEST**: Follow README to run tests successfully
  - **VALIDATION**: `npm test`, `npm run test:coverage` work as documented
- [ ] 6.5.2 Update README with deployment procedures
  - **DOC TEST**: Follow deployment steps in staging
  - **VALIDATION**: Deployment successful following docs
- [ ] 6.5.3 Document testing patterns and best practices
  - **VALIDATION**: Testing guide complete with examples
- [ ] 6.5.4 Mark all tasks complete in both OpenSpec changes
  - [ ] Update migrate-to-nextjs-launchui tasks.md - all [x]
  - [ ] Update fix-dockerfile-nextjs tasks.md - all [x]
- [ ] 6.5.5 Archive both OpenSpec changes
  - **ARCHIVE TEST**: Run `openspec archive migrate-to-nextjs-launchui --yes`
  - **ARCHIVE TEST**: Run `openspec archive fix-dockerfile-nextjs --yes`
  - **VALIDATION**: Changes moved to archive/, specs updated

---

## 📊 Implementation Summary

### Breakdown by Phase
| Phase | Tasks | Days | Focus | Testing |
|-------|-------|------|-------|---------|
| 1 | 6 | 2 | Testing infrastructure | Jest setup validation |
| 2 | 14 | 3 | Core modules | 90%+ coverage, unit/integration |
| 3 | 22 | 3 | Components | Feature tests, accessibility |
| 4 | 21 | 4 | Features & optimization | Full feature coverage, perf tests |
| 5 | 12 | 3 | CI/CD & deployment | Pipeline, environment validation |
| 6 | 13 | 2 | Final validation | Performance, UAT, archival |

### Testing Strategy Summary
✅ **Every task includes**: Unit test + feature test + validation checklist
✅ **Coverage Requirements**: Each module/component must have >90% coverage
✅ **Test Types**: Unit, integration, component, accessibility, performance, e2e
✅ **Continuous Validation**: Run full test suite after each phase (`npm test`)
✅ **CI/CD Integration**: All tests run in pipeline, enforce coverage thresholds

### Critical Success Criteria
1. ✅ All 51 OpenSpec tasks completed with [x] marking
2. ✅ Test coverage ≥90% across all production code (verified by CI/CD)
3. ✅ All tests passing (0 failures)
4. ✅ Production build successful, bundle size ≤500KB
5. ✅ Core Web Vitals targets met (FCP <1.0s, LCP <1.5s, TTI <2.0s)
6. ✅ WCAG 2.1 AA compliance verified
7. ✅ Staging deployment successful
8. ✅ Both OpenSpec changes archived

---

## 🧪 Testing Instructions (For All Developers)

### Pre-Implementation Checklist
Before starting any task, ensure:
```bash
# 1. Pull latest changes
git pull origin main

# 2. Install dependencies
npm install

# 3. Run full test suite to establish baseline
npm run test:coverage

# 4. Record baseline coverage for comparison
# Example: "Baseline coverage: 45% - API client, auth context"
```

### During Implementation
1. **Write Code First**: Implement feature or fix
2. **Write Tests Immediately**: Don't wait until end
   - Unit tests for logic
   - Component tests for UI
   - Integration tests for API calls
3. **Run Tests Locally**: Before committing
   ```bash
   npm test -- --testPathPattern=component-name
   npm run test:coverage -- --testPathPattern=component-name
   ```
4. **Verify Coverage**: Target >90% for modified files
   ```bash
   npm run test:coverage -- --testPathPattern=component-name --coverage
   ```

### After Implementation
1. **Full Test Suite**: Run all tests before commit
   ```bash
   npm test
   npm run test:coverage
   ```
2. **Verify Coverage Threshold**: Should increase or maintain
   ```bash
   npm run test:coverage
   # Check: "Global Coverage" line shows ≥90%
   ```
3. **Commit Message**: Include test statistics
   ```
   feat(navbar): add Launch UI Navbar component

   - Implemented Navbar with responsive mobile menu
   - Added 8 component tests (100% coverage)
   - Added 3 accessibility tests (keyboard, ARIA)
   - Test coverage: navbar.tsx 100%
   ```

### Validation Checklist After Each Task
- [ ] **Code compiles**: `npm run build` succeeds
- [ ] **Tests pass**: `npm test` shows all passing
- [ ] **Coverage met**: `npm run test:coverage` shows ≥90% for modified code
- [ ] **No console errors**: Check DevTools while testing locally
- [ ] **Accessible**: Use axe DevTools to check for violations
- [ ] **Responsive**: Test on mobile (375px) and desktop (1440px)
- [ ] **Git clean**: `git status` shows only intended changes

### CI/CD Validation
All tests must pass in CI/CD before merging:
- ✅ Linting passes: `npm run lint`
- ✅ TypeScript compiles: `npm run build`
- ✅ Tests pass: `npm test -- --ci`
- ✅ Coverage ≥90%: `npm test -- --coverage`
- ✅ Accessibility checks: `npm run audit:a11y`

---

## 🎯 Task Completion Tracking

Use this checklist as you progress:
- [ ] Phase 1 complete: Testing infrastructure ready (Day 2)
- [ ] Phase 2 complete: Core modules >90% covered (Day 5)
- [ ] Phase 3 complete: All components tested (Day 8)
- [ ] Phase 4 complete: Features implemented & tested (Day 12)
- [ ] Phase 5 complete: CI/CD & deployment ready (Day 15)
- [ ] Phase 6 complete: Final validation passed (Day 17)
- [ ] All 51 OpenSpec tasks marked [x]
- [ ] Coverage report shows ≥90% global coverage
- [ ] Both changes archived in openspec/changes/archive/

---

**Next Step**: After this proposal is approved, we'll execute Phase 1 (testing infrastructure) first, then proceed sequentially through all phases with continuous test validation at each step.