alchemist/web/src/pages/500.astro

---
import Layout from "../layouts/Layout.astro";
import { AlertTriangle } from "lucide-react";

interface Props {
  error: unknown;
}

const { error } = Astro.props;
---

<Layout title="Alchemist | Server Error">
    <div class="min-h-screen bg-helios-background flex items-center justify-center p-6 pb-24">
        <div class="max-w-md w-full flex flex-col items-center text-center">
            <div class="w-16 h-16 rounded-full bg-helios-red/10 flex items-center justify-center mb-6">
                <AlertTriangle className="w-8 h-8 text-helios-red" />
            </div>
            
            <h1 class="text-3xl font-bold text-white mb-3">500 Server Error</h1>
            <p class="text-helios-text mb-8">
                Alchemist encountered an internal error. Please check the backend logs.
            </p>
            
            {error instanceof Error ? (
              <div class="bg-black/50 border border-white/5 rounded-lg p-4 mb-8 w-full overflow-auto text-left">
                  <p class="text-helios-red/90 font-mono text-sm break-words">{error.message}</p>
              </div>
            ) : null}

            <a
                href="/"
                class="px-6 py-2.5 bg-helios-orange hover:bg-helios-orange/90 text-white font-medium rounded-md transition-colors"
            >
                Return to Dashboard
            </a>
        </div>
    </div>
</Layout>