feat: complete v0.4.0 implementation - Reports, Charts, Comparison, Dark Mode

Backend (@backend-dev):
- ReportService with PDF/CSV generation (reportlab, pandas)
- Report API endpoints (POST, GET, DELETE, download with rate limiting)
- Professional PDF templates with branding and tables
- Storage management with auto-cleanup

Frontend (@frontend-dev):
- Recharts integration: CostBreakdown, TimeSeries, ComparisonBar
- Scenario comparison: multi-select, compare page with side-by-side layout
- Reports UI: generation form, list with status badges, download
- Dark/Light mode: ThemeProvider, toggle, CSS variables
- Responsive design for all components

QA (@qa-engineer):
- E2E testing setup with Playwright
- 100 test cases across 7 spec files
- Visual regression baselines
- CI/CD workflow configuration
- ES modules fixes

Documentation:
- Add todo.md with testing checklist and future roadmap
- Update kickoff prompt for v0.4.0

27 tasks completed, 100% v0.4.0 delivery

Closes: v0.4.0 milestone

frontend/src/components/charts/CostBreakdown.tsx

@@ -31,6 +31,30 @@ function getServiceColor(service: string): string {
   return SERVICE_COLORS[normalized] || SERVICE_COLORS.default;
 }
 
+// Tooltip component defined outside main component
+interface CostTooltipProps {
+  active?: boolean;
+  payload?: Array<{ payload: CostBreakdownType }>;
+}
+
+function CostTooltip({ active, payload }: CostTooltipProps) {
+  if (active && payload && payload.length) {
+    const item = payload[0].payload;
+    return (
+      <div className="rounded-lg border bg-popover p-3 shadow-md">
+        <p className="font-medium text-popover-foreground">{item.service}</p>
+        <p className="text-sm text-muted-foreground">
+          Cost: {formatCurrency(item.cost_usd)}
+        </p>
+        <p className="text-sm text-muted-foreground">
+          Percentage: {item.percentage.toFixed(1)}%
+        </p>
+      </div>
+    );
+  }
+  return null;
+}
+
 export function CostBreakdownChart({
   data,
   title = 'Cost Breakdown',
@@ -54,51 +78,6 @@ export function CostBreakdownChart({
 
   const totalCost = filteredData.reduce((sum, item) => sum + item.cost_usd, 0);
 
-  const CustomTooltip = ({ active, payload }: { active?: boolean; payload?: Array<{ name: string; value: number; payload: CostBreakdownType }> }) => {
-    if (active && payload && payload.length) {
-      const item = payload[0].payload;
-      return (
-        <div className="rounded-lg border bg-popover p-3 shadow-md">
-          <p className="font-medium text-popover-foreground">{item.service}</p>
-          <p className="text-sm text-muted-foreground">
-            Cost: {formatCurrency(item.cost_usd)}
-          </p>
-          <p className="text-sm text-muted-foreground">
-            Percentage: {item.percentage.toFixed(1)}%
-          </p>
-        </div>
-      );
-    }
-    return null;
-  };
-
-  const CustomLegend = () => {
-    return (
-      <div className="flex flex-wrap justify-center gap-4 mt-4">
-        {data.map((item) => {
-          const isHidden = hiddenServices.has(item.service);
-          return (
-            <button
-              key={item.service}
-              onClick={() => toggleService(item.service)}
-              className={`flex items-center gap-2 text-sm transition-opacity hover:opacity-80 ${
-                isHidden ? 'opacity-40' : 'opacity-100'
-              }`}
-            >
-              <span
-                className="h-3 w-3 rounded-full"
-                style={{ backgroundColor: getServiceColor(item.service) }}
-              />
-              <span className="text-muted-foreground">
-                {item.service} ({item.percentage.toFixed(1)}%)
-              </span>
-            </button>
-          );
-        })}
-      </div>
-    );
-  };
-
   return (
     <Card className="w-full">
       <CardHeader className="pb-2">
@@ -133,11 +112,32 @@ export function CostBreakdownChart({
                   />
                 ))}
               </Pie>
-              <Tooltip content={<CustomTooltip />} />
+              <Tooltip content={<CostTooltip />} />
             </PieChart>
           </ResponsiveContainer>
         </div>
-        <CustomLegend />
+        <div className="flex flex-wrap justify-center gap-4 mt-4">
+          {data.map((item) => {
+            const isHidden = hiddenServices.has(item.service);
+            return (
+              <button
+                key={item.service}
+                onClick={() => toggleService(item.service)}
+                className={`flex items-center gap-2 text-sm transition-opacity hover:opacity-80 ${
+                  isHidden ? 'opacity-40' : 'opacity-100'
+                }`}
+              >
+                <span
+                  className="h-3 w-3 rounded-full"
+                  style={{ backgroundColor: getServiceColor(item.service) }}
+                />
+                <span className="text-muted-foreground">
+                  {item.service} ({item.percentage.toFixed(1)}%)
+                </span>
+              </button>
+            );
+          })}
+        </div>
       </CardContent>
     </Card>
   );