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/components/charts/CostBreakdown.tsx

@@ -0,0 +1,144 @@
+import { useState } from 'react';
+import {
+  PieChart,
+  Pie,
+  Cell,
+  ResponsiveContainer,
+  Tooltip,
+} from 'recharts';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import type { CostBreakdown as CostBreakdownType } from '@/types/api';
+import { CHART_COLORS, formatCurrency } from './ChartContainer';
+
+interface CostBreakdownChartProps {
+  data: CostBreakdownType[];
+  title?: string;
+  description?: string;
+}
+
+// Map services to colors
+const SERVICE_COLORS: Record<string, string> = {
+  sqs: CHART_COLORS.sqs,
+  lambda: CHART_COLORS.lambda,
+  bedrock: CHART_COLORS.bedrock,
+  s3: CHART_COLORS.blue,
+  cloudwatch: CHART_COLORS.green,
+  default: CHART_COLORS.secondary,
+};
+
+function getServiceColor(service: string): string {
+  const normalized = service.toLowerCase().replace(/[^a-z]/g, '');
+  return SERVICE_COLORS[normalized] || SERVICE_COLORS.default;
+}
+
+export function CostBreakdownChart({
+  data,
+  title = 'Cost Breakdown',
+  description = 'Cost distribution by service',
+}: CostBreakdownChartProps) {
+  const [hiddenServices, setHiddenServices] = useState<Set<string>>(new Set());
+
+  const filteredData = data.filter((item) => !hiddenServices.has(item.service));
+
+  const toggleService = (service: string) => {
+    setHiddenServices((prev) => {
+      const next = new Set(prev);
+      if (next.has(service)) {
+        next.delete(service);
+      } else {
+        next.add(service);
+      }
+      return next;
+    });
+  };
+
+  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">
+        <CardTitle className="text-lg font-semibold">{title}</CardTitle>
+        {description && (
+          <p className="text-sm text-muted-foreground">{description}</p>
+        )}
+        <p className="text-2xl font-bold mt-2">{formatCurrency(totalCost)}</p>
+      </CardHeader>
+      <CardContent>
+        <div className="h-[300px]">
+          <ResponsiveContainer width="100%" height="100%">
+            <PieChart>
+              <Pie
+                data={filteredData}
+                cx="50%"
+                cy="45%"
+                innerRadius={60}
+                outerRadius={100}
+                paddingAngle={2}
+                dataKey="cost_usd"
+                nameKey="service"
+                animationBegin={0}
+                animationDuration={800}
+              >
+                {filteredData.map((entry) => (
+                  <Cell
+                    key={`cell-${entry.service}`}
+                    fill={getServiceColor(entry.service)}
+                    stroke="hsl(var(--card))"
+                    strokeWidth={2}
+                  />
+                ))}
+              </Pie>
+              <Tooltip content={<CustomTooltip />} />
+            </PieChart>
+          </ResponsiveContainer>
+        </div>
+        <CustomLegend />
+      </CardContent>
+    </Card>
+  );
+}