refactor: production-essentials hardening pass

Backend: structured logger, env-validated config, graceful SIGTERM/SIGINT
shutdown, per-IP rate limiter, per-tier scheduler concurrency latch, error
context on previously-silent catches, compiled-JS Dockerfile stage.

Frontend: lib/api.ts consolidates BACKEND_URL with lazy production-required
check, root + per-segment error.tsx / not-found.tsx / loading.tsx,
generateMetadata on park and ride pages, graceful fallback when backend is
unreachable, Plausible script gated on env vars.

Infra: CI runs lint + typecheck + tests on both packages before docker build,
compose adds healthchecks, log rotation, and memory limits; .env.example
documents every variable.

Cleanup: removed empty app/api/parks/ dir and 0-byte root parks.db, moved
wait-times-urls.txt into docs/, dropped an `as any` cast.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

app/park/[id]/error.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { useEffect } from "react";
+import Link from "next/link";
+
+export default function ParkError({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
+  useEffect(() => {
+    console.error(error);
+  }, [error]);
+
+  return (
+    <main style={{ minHeight: "100vh", display: "grid", placeItems: "center", padding: 24, background: "var(--color-bg)" }}>
+      <div style={{ maxWidth: 480, textAlign: "center" }}>
+        <h1 style={{ fontSize: "1.2rem", fontWeight: 700, color: "var(--color-text)", marginBottom: 12 }}>
+          Could not load this park
+        </h1>
+        <p style={{ color: "var(--color-text-muted)", lineHeight: 1.6, fontSize: "0.9rem", marginBottom: 20 }}>
+          Try again in a moment, or head back to the calendar.
+        </p>
+        <div style={{ display: "flex", justifyContent: "center", gap: 10 }}>
+          <button
+            type="button"
+            onClick={reset}
+            style={{
+              padding: "8px 18px",
+              background: "var(--color-text)",
+              color: "var(--color-bg)",
+              border: "none",
+              borderRadius: 6,
+              fontSize: "0.85rem",
+              fontWeight: 600,
+              cursor: "pointer",
+            }}
+          >
+            Try again
+          </button>
+          <Link
+            href="/"
+            style={{
+              padding: "8px 18px",
+              background: "var(--color-surface)",
+              color: "var(--color-text)",
+              border: "1px solid var(--color-border)",
+              borderRadius: 6,
+              fontSize: "0.85rem",
+              fontWeight: 600,
+              textDecoration: "none",
+            }}
+          >
+            Back to calendar
+          </Link>
+        </div>
+      </div>
+    </main>
+  );
+}

app/park/[id]/loading.tsx

@@ -0,0 +1,35 @@
+export default function ParkLoading() {
+  return (
+    <div style={{ minHeight: "100vh", background: "var(--color-bg)" }}>
+      <header style={{
+        position: "sticky",
+        top: 0,
+        zIndex: 20,
+        background: "var(--color-bg)",
+        borderBottom: "1px solid var(--color-border)",
+        padding: "12px 24px",
+        display: "flex",
+        alignItems: "center",
+        gap: 16,
+      }}>
+        <div className="skeleton" style={{ width: 120, height: 18, borderRadius: 4 }} />
+        <div style={{ width: 1, height: 16, background: "var(--color-border)" }} />
+        <div className="skeleton" style={{ width: 180, height: 16, borderRadius: 4 }} />
+      </header>
+
+      <main style={{ padding: "24px 32px", maxWidth: 1280, margin: "0 auto", display: "flex", flexDirection: "column", gap: 40 }}>
+        <section>
+          <div className="skeleton" style={{ width: "100%", height: 320, borderRadius: 8 }} />
+        </section>
+        <section>
+          <div className="skeleton" style={{ width: 180, height: 16, borderRadius: 4, marginBottom: 16 }} />
+          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))", gap: 6 }}>
+            {Array.from({ length: 8 }).map((_, i) => (
+              <div key={i} className="skeleton" style={{ height: 36, borderRadius: 8 }} />
+            ))}
+          </div>
+        </section>
+      </main>
+    </div>
+  );
+}

app/park/[id]/page.tsx

@@ -1,3 +1,4 @@
+import type { Metadata } from "next";
 import { BackToCalendarLink } from "@/components/BackToCalendarLink";
 import { notFound } from "next/navigation";
 import { PARK_MAP } from "@/lib/parks";
@@ -6,14 +7,45 @@ import { LiveRidePanel } from "@/components/LiveRidePanel";
 import type { RideStatus, RidesFetchResult } from "@/lib/scrapers/sixflags";
 import type { LiveRidesResult } from "@/lib/scrapers/queuetimes";
 import { getTodayLocal } from "@/lib/env";
-
-const BACKEND_URL = process.env.BACKEND_URL ?? "http://localhost:3001";
+import { apiFetch } from "@/lib/api";
+import type { DayData } from "@/lib/types";
 
 interface PageProps {
   params: Promise<{ id: string }>;
   searchParams: Promise<{ month?: string }>;
 }
 
+interface CalendarMonthResponse {
+  parkId: string;
+  year: number;
+  month: number;
+  monthData: Record<string, DayData>;
+  today: string;
+}
+
+interface RidesResponse {
+  parkId: string;
+  today: string;
+  parkOpenToday: boolean;
+  withinWindow: boolean;
+  isWeatherDelay: boolean;
+  liveRides: LiveRidesResult | null;
+  scheduleFallback: RidesFetchResult | null;
+}
+
+export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
+  const { id } = await params;
+  const park = PARK_MAP.get(id);
+  if (!park) return { title: "Park not found | Thoosie Calendar" };
+  const title = `${park.name} | Thoosie Calendar`;
+  const description = `Operating hours and live ride status for ${park.name} (${park.location.city}, ${park.location.state}).`;
+  return {
+    title,
+    description,
+    openGraph: { title, description },
+  };
+}
+
 function parseMonthParam(param: string | undefined): string {
   if (param && /^\d{4}-\d{2}$/.test(param)) {
     const [y, m] = param.split("-").map(Number);
@@ -35,26 +67,25 @@ export default async function ParkPage({ params, searchParams }: PageProps) {
   const [year, month] = monthStr.split("-").map(Number);
 
   const [calendarData, ridesData] = await Promise.all([
-    fetch(`${BACKEND_URL}/api/calendar/${id}/month?month=${monthStr}`, {
-      next: { revalidate: 300 },
-    }).then((r) => r.json()),
-    fetch(`${BACKEND_URL}/api/parks/${id}/rides`, {
-      next: { revalidate: 60 },
-    }).then((r) => r.json()),
+    apiFetch<CalendarMonthResponse>(
+      `/api/calendar/${id}/month?month=${monthStr}`,
+      { revalidate: 300 },
+    ),
+    apiFetch<RidesResponse>(
+      `/api/parks/${id}/rides`,
+      { revalidate: 60 },
+    ),
   ]);
 
+  if (!calendarData) {
+    return <DataUnavailable parkName={park.name} />;
+  }
+
   const { monthData, today } = calendarData;
-  const {
-    parkOpenToday,
-    isWeatherDelay,
-    liveRides,
-    scheduleFallback: ridesResult,
-  }: {
-    parkOpenToday: boolean;
-    isWeatherDelay: boolean;
-    liveRides: LiveRidesResult | null;
-    scheduleFallback: RidesFetchResult | null;
-  } = ridesData;
+  const parkOpenToday = ridesData?.parkOpenToday ?? false;
+  const isWeatherDelay = ridesData?.isWeatherDelay ?? false;
+  const liveRides = ridesData?.liveRides ?? null;
+  const ridesResult = ridesData?.scheduleFallback ?? null;
 
   return (
     <div style={{ minHeight: "100vh", background: "var(--color-bg)" }}>
@@ -355,3 +386,18 @@ function Callout({ children }: { children: React.ReactNode }) {
     </div>
   );
 }
+
+function DataUnavailable({ parkName }: { parkName: string }) {
+  return (
+    <main style={{ minHeight: "100vh", display: "grid", placeItems: "center", padding: 24, background: "var(--color-bg)" }}>
+      <div style={{ maxWidth: 480, textAlign: "center" }}>
+        <h1 style={{ fontSize: "1.2rem", fontWeight: 700, color: "var(--color-text)", marginBottom: 12 }}>
+          {parkName} data is unavailable
+        </h1>
+        <p style={{ color: "var(--color-text-muted)", lineHeight: 1.6, fontSize: "0.9rem" }}>
+          We could not reach the backend. Refresh in a moment.
+        </p>
+      </div>
+    </main>
+  );
+}

app/park/[id]/ride/[slug]/error.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { useEffect } from "react";
+
+export default function RideError({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
+  useEffect(() => {
+    console.error(error);
+  }, [error]);
+
+  return (
+    <main style={{ minHeight: "100vh", display: "grid", placeItems: "center", padding: 24, background: "var(--color-bg)" }}>
+      <div style={{ maxWidth: 480, textAlign: "center" }}>
+        <h1 style={{ fontSize: "1.2rem", fontWeight: 700, color: "var(--color-text)", marginBottom: 12 }}>
+          Could not load ride history
+        </h1>
+        <p style={{ color: "var(--color-text-muted)", lineHeight: 1.6, fontSize: "0.9rem", marginBottom: 20 }}>
+          The backend is unreachable. Try again in a moment.
+        </p>
+        <button
+          type="button"
+          onClick={reset}
+          style={{
+            padding: "8px 18px",
+            background: "var(--color-text)",
+            color: "var(--color-bg)",
+            border: "none",
+            borderRadius: 6,
+            fontSize: "0.85rem",
+            fontWeight: 600,
+            cursor: "pointer",
+          }}
+        >
+          Try again
+        </button>
+      </div>
+    </main>
+  );
+}

app/park/[id]/ride/[slug]/loading.tsx

@@ -0,0 +1,17 @@
+export default function RideLoading() {
+  return (
+    <div style={{ minHeight: "100vh", background: "var(--color-bg)", padding: "32px 24px" }}>
+      <div style={{ maxWidth: 960, margin: "0 auto" }}>
+        <div className="skeleton" style={{ width: 160, height: 14, borderRadius: 4, marginBottom: 16 }} />
+        <div className="skeleton" style={{ width: 320, height: 28, borderRadius: 6, marginBottom: 24 }} />
+        <div className="skeleton" style={{ width: 100, height: 24, borderRadius: 999, marginBottom: 24 }} />
+        <div style={{ display: "flex", gap: 8, marginBottom: 16 }}>
+          {Array.from({ length: 3 }).map((_, i) => (
+            <div key={i} className="skeleton" style={{ width: 80, height: 32, borderRadius: 6 }} />
+          ))}
+        </div>
+        <div className="skeleton" style={{ width: "100%", height: 280, borderRadius: 8 }} />
+      </div>
+    </div>
+  );
+}

app/park/[id]/ride/[slug]/page.tsx

@@ -1,11 +1,11 @@
+import type { Metadata } from "next";
 import Link from "next/link";
 import { notFound } from "next/navigation";
 import { PARK_MAP } from "@/lib/parks";
 import UptimePill from "@/components/charts/UptimePill";
 import WaitTimeTodayChart from "@/components/charts/WaitTimeTodayChart";
 import WeeklyStatsChart from "@/components/charts/WeeklyStatsChart";
-
-const BACKEND_URL = process.env.BACKEND_URL ?? "http://localhost:3001";
+import { getBackendUrl } from "@/lib/api";
 
 type Tab = "today" | "7d" | "30d";
 
@@ -62,6 +62,20 @@ function parseTab(raw: string | undefined): Tab {
   return "today";
 }
 
+export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
+  const { id, slug } = await params;
+  const park = PARK_MAP.get(id);
+  if (!park) return { title: "Ride not found | Thoosie Calendar" };
+  const rideName = decodeURIComponent(slug).replace(/-/g, " ");
+  const title = `${rideName} — ${park.shortName} | Thoosie Calendar`;
+  const description = `Live wait time and uptime history for ${rideName} at ${park.name}.`;
+  return {
+    title,
+    description,
+    openGraph: { title, description },
+  };
+}
+
 export default async function RideDetailPage({ params, searchParams }: PageProps) {
   const { id, slug } = await params;
   const { tab: tabParam } = await searchParams;
@@ -71,9 +85,14 @@ export default async function RideDetailPage({ params, searchParams }: PageProps
 
   const tab = parseTab(tabParam);
 
-  const res = await fetch(`${BACKEND_URL}/api/parks/${id}/rides/${slug}`, {
-    next: { revalidate: 60 },
-  });
+  let res: Response;
+  try {
+    res = await fetch(`${getBackendUrl()}/api/parks/${id}/rides/${slug}`, {
+      next: { revalidate: 60 },
+    });
+  } catch {
+    return <ErrorState parkId={id} parkName={park.name} />;
+  }
 
   if (res.status === 404) {
     return <NoHistoryYet parkId={id} parkName={park.name} slug={slug} />;
@@ -83,7 +102,12 @@ export default async function RideDetailPage({ params, searchParams }: PageProps
     return <ErrorState parkId={id} parkName={park.name} />;
   }
 
-  const data: ApiResponse = await res.json();
+  let data: ApiResponse;
+  try {
+    data = (await res.json()) as ApiResponse;
+  } catch {
+    return <ErrorState parkId={id} parkName={park.name} />;
+  }
   const { ride, live, today, last7d, last30d, coverage } = data;
 
   const last30dUptime = last30d.length