feat: implement issues #5-#8 — error states, header search, delete/toggle visibility, auth-aware UI

src/app/(main)/compare/[slug]/results-client.tsx

@@ -13,7 +13,7 @@ import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import { Separator } from "@/components/ui/separator"
 import { Skeleton } from "@/components/ui/skeleton"
-import { Share2, ArrowLeft, Loader2, Trophy } from "lucide-react"
+import { Share2, ArrowLeft, Loader2, Trophy, AlertCircle } from "lucide-react"
 import Link from "next/link"
 
 interface ComparisonResultsClientProps {
@@ -32,6 +32,33 @@ export function ComparisonResultsClient({ initialData }: ComparisonResultsClient
 
   const winner = [...data.items].sort((a, b) => b.overallScore - a.overallScore)[0]
 
+  if (data.status === "failed") {
+    return (
+      <div className="max-w-2xl mx-auto p-4 space-y-6">
+        <div className="rounded-lg border border-red-200 bg-red-50 dark:border-red-900 dark:bg-red-950/30 p-6 space-y-4">
+          <div className="flex items-start gap-3">
+            <AlertCircle className="size-6 text-red-600 shrink-0 mt-0.5" />
+            <div className="space-y-2">
+              <h2 className="text-lg font-semibold text-red-800 dark:text-red-200">
+                Comparison Failed
+              </h2>
+              <p className="text-sm text-red-700 dark:text-red-300">
+                This comparison could not be completed. This may be due to a processing error or
+                invalid input.
+              </p>
+            </div>
+          </div>
+          <Link href="/compare">
+            <Button variant="outline" className="gap-2">
+              <ArrowLeft className="size-4" />
+              Try Again
+            </Button>
+          </Link>
+        </div>
+      </div>
+    )
+  }
+
   if (isResearching) {
     return (
       <div className="max-w-4xl mx-auto p-4 space-y-6">