spb/polyllm

1"use client";2import * as React from "react";3import Link from "next/link";4import { RotateCcw } from "lucide-react";5import { Logo } from "@/components/brand/logo";6import { Button } from "@/components/ui/button";78export default function GlobalError({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {9  React.useEffect(() => {10    // Surface in the console for debugging; the user only sees a friendly message.11    console.error(error);12  }, [error]);1314  return (15    <div className="relative flex min-h-dvh flex-col overflow-x-clip">16      <div aria-hidden className="dot-grid pointer-events-none absolute inset-0 opacity-60 [mask-image:radial-gradient(ellipse_70%_60%_at_50%_40%,black_10%,transparent_100%)] dark:opacity-40" />17      <header className="relative z-10 flex h-14 items-center px-5 sm:px-8">18        <Link href="/" aria-label="PolyLLM home" className="rounded-md">19          <Logo size={24} />20        </Link>21      </header>22      <main className="relative z-10 flex flex-1 items-center justify-center px-5 pb-16">23        <div className="max-w-md text-center animate-fade-up">24          <p className="font-mono text-[12px] uppercase tracking-[0.16em] text-fg-subtle">Something broke</p>25          <h1 className="mt-3 text-balance text-4xl font-semibold leading-none tracking-tight sm:text-5xl">We hit an unexpected error.</h1>26          <p className="mt-4 text-pretty text-[15px] leading-7 text-fg-muted">Your conversations and keys are safe. Try again; if it keeps happening, reload the page or come back in a minute.</p>27          <div className="mt-8 flex flex-col items-center justify-center gap-2 sm:flex-row">28            <Button size="lg" className="w-full sm:w-auto" onClick={() => reset()}>29              <RotateCcw />30              Try again31            </Button>32            <Button asChild size="lg" variant="outline" className="w-full sm:w-auto">33              <Link href="/app/chat">Open PolyLLM</Link>34            </Button>35          </div>36          {error.digest ? (37            <p className="mt-8 font-mono text-[11px] text-fg-subtle">38              Reference: <span className="select-all">{error.digest}</span>39            </p>40          ) : null}41        </div>42      </main>43    </div>44  );45}46