feat: implement v0.4.0 - Reports, Charts, Comparison, Dark Mode, E2E Testing

Backend (@backend-dev):
- Add ReportService with PDF/CSV generation (reportlab, pandas)
- Implement Report API endpoints (POST, GET, DELETE, download)
- Add ReportRepository and schemas
- Configure storage with auto-cleanup (30 days)
- Rate limiting: 10 downloads/minute
- Professional PDF templates with charts support

Frontend (@frontend-dev):
- Integrate Recharts for data visualization
- Add CostBreakdown, TimeSeries, ComparisonBar charts
- Implement scenario comparison page with multi-select
- Add dark/light mode toggle with ThemeProvider
- Create Reports page with generation form and list
- Add new UI components: checkbox, dialog, tabs, label, skeleton
- Implement useComparison and useReports hooks

QA (@qa-engineer):
- Setup Playwright E2E testing framework
- Create 7 test spec files with 94 test cases
- Add visual regression testing with baselines
- Configure multi-browser testing (Chrome, Firefox, WebKit)
- Add mobile responsive tests
- Create test fixtures and helpers
- Setup GitHub Actions CI workflow

Documentation (@spec-architect):
- Create detailed kanban-v0.4.0.md with 27 tasks
- Update progress.md with v0.4.0 tracking
- Create v0.4.0 planning prompt

Features:
✅ PDF/CSV Report Generation
✅ Interactive Charts (Pie, Area, Bar)
✅ Scenario Comparison (2-4 scenarios)
✅ Dark/Light Mode Toggle
✅ E2E Test Suite (94 tests)

Dependencies added:
- Backend: reportlab, pandas, slowapi
- Frontend: recharts, date-fns, @radix-ui/react-checkbox/dialog/tabs
- Testing: @playwright/test

27 tasks completed, 100% v0.4.0 implementation

frontend/src/App.tsx

@@ -1,27 +1,34 @@
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import { QueryProvider } from './providers/QueryProvider';
+import { ThemeProvider } from './providers/ThemeProvider';
 import { Toaster } from '@/components/ui/toaster';
 import { Layout } from './components/layout/Layout';
 import { Dashboard } from './pages/Dashboard';
 import { ScenariosPage } from './pages/ScenariosPage';
 import { ScenarioDetail } from './pages/ScenarioDetail';
+import { Compare } from './pages/Compare';
+import { Reports } from './pages/Reports';
 import { NotFound } from './pages/NotFound';
 
 function App() {
   return (
-    <QueryProvider>
-      <BrowserRouter>
-        <Routes>
-          <Route path="/" element={<Layout />}>
-            <Route index element={<Dashboard />} />
-            <Route path="scenarios" element={<ScenariosPage />} />
-            <Route path="scenarios/:id" element={<ScenarioDetail />} />
-            <Route path="*" element={<NotFound />} />
-          </Route>
-        </Routes>
-      </BrowserRouter>
-      <Toaster />
-    </QueryProvider>
+    <ThemeProvider defaultTheme="system">
+      <QueryProvider>
+        <BrowserRouter>
+          <Routes>
+            <Route path="/" element={<Layout />}>
+              <Route index element={<Dashboard />} />
+              <Route path="scenarios" element={<ScenariosPage />} />
+              <Route path="scenarios/:id" element={<ScenarioDetail />} />
+              <Route path="scenarios/:id/reports" element={<Reports />} />
+              <Route path="compare" element={<Compare />} />
+              <Route path="*" element={<NotFound />} />
+            </Route>
+          </Routes>
+        </BrowserRouter>
+        <Toaster />
+      </QueryProvider>
+    </ThemeProvider>
   );
 }