first commit

frontend/components/ui/error-card.tsx

@@ -0,0 +1,54 @@
+import { AlertTriangle, RefreshCw } from "lucide-react";
+import { Card, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface ErrorCardProps {
+  message?: string;
+  onRetry?: () => void;
+  className?: string;
+  /** Render as a compact inline row instead of a full card */
+  inline?: boolean;
+}
+
+export function ErrorCard({
+  message = "Failed to load data.",
+  onRetry,
+  className,
+  inline = false,
+}: ErrorCardProps) {
+  if (inline) {
+    return (
+      <div className={cn("flex items-center gap-2 text-sm text-muted-foreground", className)}>
+        <AlertTriangle className="w-4 h-4 text-amber-400 shrink-0" />
+        <span>{message}</span>
+        {onRetry && (
+          <button
+            onClick={onRetry}
+            className="text-xs underline underline-offset-2 hover:text-foreground transition-colors"
+          >
+            Retry
+          </button>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <Card className={cn("border-destructive/30 bg-destructive/5", className)}>
+      <CardContent className="flex flex-col items-center justify-center gap-3 py-10 text-center">
+        <AlertTriangle className="w-8 h-8 text-destructive/70" />
+        <div>
+          <p className="text-sm font-medium text-foreground">Something went wrong</p>
+          <p className="text-xs text-muted-foreground mt-1">{message}</p>
+        </div>
+        {onRetry && (
+          <Button variant="outline" size="sm" onClick={onRetry} className="gap-2 mt-1">
+            <RefreshCw className="w-3.5 h-3.5" />
+            Try again
+          </Button>
+        )}
+      </CardContent>
+    </Card>
+  );
+}