feat: enhance canvas and node components with error handling and retry logic

- Integrated retry logic for AI image generation to handle transient errors and improve user experience.
- Updated error categorization to provide more informative feedback based on different failure scenarios.
- Enhanced node components to display retry attempts and error messages, improving visibility during image generation failures.
- Refactored canvas and node components to include retry count in status updates, ensuring accurate tracking of generation attempts.

app/(app)/canvas/[canvasId]/error.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import Link from "next/link";
+
+import { Button } from "@/components/ui/button";
+
+type CanvasErrorProps = {
+  error: Error & { digest?: string };
+  unstable_retry: () => void;
+};
+
+export default function CanvasError({ error, unstable_retry }: CanvasErrorProps) {
+  return (
+    <main className="flex h-screen w-screen items-center justify-center bg-background px-4">
+      <div className="w-full max-w-md space-y-4 rounded-xl border bg-card p-6 shadow-sm">
+        <div className="space-y-1 text-center">
+          <h1 className="text-xl font-semibold">Canvas konnte nicht geladen werden</h1>
+          <p className="text-sm text-muted-foreground">
+            Beim Laden dieses Canvas ist ein Fehler aufgetreten.
+          </p>
+          {error.digest ? (
+            <p className="text-xs text-muted-foreground/80">Fehler-ID: {error.digest}</p>
+          ) : null}
+        </div>
+
+        <div className="flex flex-col gap-2 sm:flex-row sm:justify-center">
+          <Button className="sm:flex-1" onClick={() => unstable_retry()}>
+            Erneut versuchen
+          </Button>
+          <Button asChild variant="outline" className="sm:flex-1">
+            <Link href="/dashboard">Zum Dashboard</Link>
+          </Button>
+        </div>
+      </div>
+    </main>
+  );
+}

app/(app)/canvas/[canvasId]/page.tsx

@@ -1,6 +1,7 @@
 import { notFound, redirect } from "next/navigation";
 
 import Canvas from "@/components/canvas/canvas";
+import ConnectionBanner from "@/components/canvas/connection-banner";
 import CanvasSidebar from "@/components/canvas/canvas-sidebar";
 import { api } from "@/convex/_generated/api";
 import type { Id } from "@/convex/_generated/dataModel";
@@ -50,7 +51,8 @@ export default async function CanvasPage({
   return (
     <div className="flex h-screen w-screen overflow-hidden">
       <CanvasSidebar />
-      <div className="flex-1">
+      <div className="relative flex-1">
+        <ConnectionBanner />
         <Canvas canvasId={typedCanvasId} />
       </div>
     </div>

app/error.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { useEffect } from "react";
+
+import { Button } from "@/components/ui/button";
+
+type AppErrorProps = {
+  error: Error & { digest?: string };
+  unstable_retry: () => void;
+};
+
+export default function AppError({ error, unstable_retry }: AppErrorProps) {
+  useEffect(() => {
+    const safeError = {
+      name: error.name,
+      message:
+        process.env.NODE_ENV === "development"
+          ? error.message
+          : "Unexpected application error",
+      digest: error.digest,
+    };
+
+    console.error("[app/error]", safeError);
+  }, [error]);
+
+  return (
+    <main className="flex min-h-screen items-center justify-center bg-background px-4">
+      <div className="w-full max-w-md space-y-4 rounded-xl border bg-card p-6 shadow-sm">
+        <div className="space-y-1 text-center">
+          <h1 className="text-xl font-semibold">Etwas ist schiefgelaufen</h1>
+          <p className="text-sm text-muted-foreground">
+            Wir konnten diesen Bereich nicht laden. Du kannst es direkt erneut
+            versuchen.
+          </p>
+        </div>
+
+        <Button className="w-full" onClick={() => unstable_retry()}>
+          Erneut versuchen
+        </Button>
+      </div>
+    </main>
+  );
+}

app/global-error.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+
+type GlobalErrorProps = {
+  error: Error & { digest?: string };
+  unstable_retry: () => void;
+};
+
+export default function GlobalError({
+  error,
+  unstable_retry,
+}: GlobalErrorProps) {
+  return (
+    <html lang="de" className="h-full antialiased font-sans">
+      <body className="min-h-full bg-background text-foreground">
+        <main className="flex min-h-screen items-center justify-center px-4">
+          <div className="w-full max-w-md space-y-4 rounded-xl border bg-card p-6 shadow-sm">
+            <div className="space-y-1 text-center">
+              <h1 className="text-xl font-semibold">Schwerer Fehler</h1>
+              <p className="text-sm text-muted-foreground">
+                Die Anwendung konnte nicht dargestellt werden. Lade den Bereich
+                neu, um fortzufahren.
+              </p>
+              {error.digest ? (
+                <p className="text-xs text-muted-foreground/80">
+                  Fehler-ID: {error.digest}
+                </p>
+              ) : null}
+            </div>
+
+            <Button className="w-full" onClick={() => unstable_retry()}>
+              Erneut laden
+            </Button>
+          </div>
+        </main>
+      </body>
+    </html>
+  );
+}

app/layout.tsx

@@ -3,7 +3,6 @@ import { Manrope } from "next/font/google";
 import "./globals.css";
 import { cn } from "@/lib/utils";
 import { Providers } from "@/components/providers";
-import { Toaster } from "@/components/ui/sonner";
 import { InitUser } from "@/components/init-user";
 import { getToken } from "@/lib/auth-server";
 
@@ -31,7 +30,6 @@ export default async function RootLayout({
         <Providers initialToken={initialToken}>
           <InitUser />
           {children}
-          <Toaster />
         </Providers>
       </body>
     </html>