final QA: add error boundaries, run backfill

Add error.tsx files for all route segments (/, /map, /trends,
/demand, /generation) with retry buttons. Backfill script ran
successfully: ~30K electricity demand records, ~253K generation
mix records, and 233 commodity price records across all 7 regions.

src/app/demand/error.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { Button } from '@/components/ui/button.js';
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card.js';
+import { AlertCircle } from 'lucide-react';
+
+export default function DemandError({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
+  return (
+    <div className="flex items-center justify-center px-6 py-16">
+      <Card className="max-w-md">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-destructive">
+            <AlertCircle className="h-5 w-5" />
+            Demand data failed to load
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm text-muted-foreground">
+            {error.message || 'An unexpected error occurred while loading demand analysis.'}
+          </p>
+        </CardContent>
+        <CardFooter>
+          <Button variant="outline" onClick={reset}>
+            Try again
+          </Button>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+}

src/app/error.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { Button } from '@/components/ui/button.js';
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card.js';
+import { AlertCircle } from 'lucide-react';
+
+export default function DashboardError({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
+  return (
+    <div className="flex items-center justify-center px-6 py-16">
+      <Card className="max-w-md">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-destructive">
+            <AlertCircle className="h-5 w-5" />
+            Something went wrong
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm text-muted-foreground">
+            {error.message || 'An unexpected error occurred while loading the dashboard.'}
+          </p>
+        </CardContent>
+        <CardFooter>
+          <Button variant="outline" onClick={reset}>
+            Try again
+          </Button>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+}

src/app/generation/error.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { Button } from '@/components/ui/button.js';
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card.js';
+import { AlertCircle } from 'lucide-react';
+
+export default function GenerationError({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
+  return (
+    <div className="flex items-center justify-center px-6 py-16">
+      <Card className="max-w-md">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-destructive">
+            <AlertCircle className="h-5 w-5" />
+            Generation data failed to load
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm text-muted-foreground">
+            {error.message || 'An unexpected error occurred while loading generation mix data.'}
+          </p>
+        </CardContent>
+        <CardFooter>
+          <Button variant="outline" onClick={reset}>
+            Try again
+          </Button>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+}

src/app/map/error.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { Button } from '@/components/ui/button.js';
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card.js';
+import { AlertCircle } from 'lucide-react';
+
+export default function MapError({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
+  return (
+    <div className="flex items-center justify-center px-6 py-16">
+      <Card className="max-w-md">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-destructive">
+            <AlertCircle className="h-5 w-5" />
+            Map failed to load
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm text-muted-foreground">
+            {error.message || 'An unexpected error occurred while loading the map.'}
+          </p>
+        </CardContent>
+        <CardFooter>
+          <Button variant="outline" onClick={reset}>
+            Try again
+          </Button>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+}

src/app/trends/error.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { Button } from '@/components/ui/button.js';
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card.js';
+import { AlertCircle } from 'lucide-react';
+
+export default function TrendsError({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
+  return (
+    <div className="flex items-center justify-center px-6 py-16">
+      <Card className="max-w-md">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-destructive">
+            <AlertCircle className="h-5 w-5" />
+            Trends failed to load
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm text-muted-foreground">
+            {error.message || 'An unexpected error occurred while loading price trends.'}
+          </p>
+        </CardContent>
+        <CardFooter>
+          <Button variant="outline" onClick={reset}>
+            Try again
+          </Button>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+}