feat: add error boundary, glass shimmer skeleton, empty state

- Create ErrorBoundary class component with GlassCard fallback UI
- Update LoadingSkeleton with glass shimmer animation overlay
- Update EmptyState with GlassPanel and default Inbox icon
- Add ErrorBoundary to shared components index export

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

services/frontend/src/components/shared/empty-state.tsx

@@ -1,26 +1,25 @@
+"use client";
+
 import type { LucideIcon } from "lucide-react";
+import { Inbox } from "lucide-react";
+import { GlassPanel } from "@/components/glass/panel";
 
 interface EmptyStateProps {
-  icon: LucideIcon;
-  title: string;
+  icon?: LucideIcon;
+  title?: string;
   description?: string;
 }
 
-/**
- * Consistent empty state for data-fetching pages.
- */
 export function EmptyState({
-  icon: Icon,
-  title,
-  description,
+  icon: Icon = Inbox,
+  title = "No data yet",
+  description = "Nothing to display here yet.",
 }: EmptyStateProps) {
   return (
-    <div className="flex flex-col items-center justify-center py-20 text-center">
-      <Icon className="size-10 text-muted-foreground/40 mb-3" />
-      <p className="text-sm text-muted-foreground">{title}</p>
-      {description && (
-        <p className="text-xs text-muted-foreground/60 mt-1">{description}</p>
-      )}
-    </div>
+    <GlassPanel dense className="flex flex-col items-center gap-2 py-12">
+      <Icon className="size-8 text-text-secondary/20" />
+      <p className="text-sm text-text-secondary/60">{title}</p>
+      <p className="text-xs text-text-secondary/40">{description}</p>
+    </GlassPanel>
   );
 }

services/frontend/src/components/shared/error-boundary.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { Component, type ReactNode } from "react";
+import { GlassCard } from "@/components/glass/card";
+import { AlertCircle, RefreshCw } from "lucide-react";
+
+interface Props { children: ReactNode; fallback?: ReactNode; }
+interface State { hasError: boolean; error?: Error; }
+
+export class ErrorBoundary extends Component<Props, State> {
+  state: State = { hasError: false };
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return this.props.fallback || (
+        <GlassCard variant="danger" className="flex flex-col items-center gap-2 py-8">
+          <AlertCircle className="size-6 text-destructive" />
+          <p className="text-sm text-text-secondary">{this.state.error?.message || "Something went wrong"}</p>
+          <button
+            type="button"
+            onClick={() => this.setState({ hasError: false })}
+            className="flex items-center gap-1 text-xs text-primary hover:text-primary/80 transition-colors"
+          >
+            <RefreshCw className="size-3" /> Try again
+          </button>
+        </GlassCard>
+      );
+    }
+    return this.props.children;
+  }
+}

services/frontend/src/components/shared/index.ts

@@ -1,5 +1,6 @@
 export { DetailStat } from "./detail-stat";
 export { EmptyState } from "./empty-state";
+export { ErrorBoundary } from "./error-boundary";
 export { ErrorState } from "./error-state";
 export { LoadingSkeleton } from "./loading-skeleton";
 export { StatCard } from "./stat-card";

services/frontend/src/components/shared/loading-skeleton.tsx

@@ -1,38 +1,43 @@
-import { Skeleton } from "@/components/ui/skeleton";
+"use client";
+
 import { cn } from "@/lib/utils";
 
 interface LoadingSkeletonProps {
-  /** Number of skeleton rows */
   count?: number;
-  /** Height per skeleton row */
   height?: string;
-  /** Grid layout: columns */
+  width?: string;
   columns?: number;
-  /** Additional classes */
   className?: string;
 }
 
-/**
- * Consistent loading skeleton for data-fetching pages.
- * Renders a grid of skeleton placeholders.
- */
 export function LoadingSkeleton({
   count = 4,
-  height = "h-28",
-  columns = 1,
+  height = "h-24",
+  width,
+  columns,
   className,
 }: LoadingSkeletonProps) {
-  return (
+  const items = Array.from({ length: count }, (_, i) => (
     <div
+      key={i}
       className={cn(
-        "grid gap-3",
-        columns > 1 ? "grid-cols-1 md:grid-cols-2" : "grid-cols-1",
+        "glass rounded-[var(--radius-card)] overflow-hidden",
+        height,
+        width,
         className,
       )}
     >
-      {Array.from({ length: count }, (_, i) => (
-        <Skeleton key={i} className={cn(height, "rounded-xl")} />
-      ))}
+      <div className="w-full h-full animate-shimmer" />
     </div>
-  );
+  ));
+
+  if (columns) {
+    return (
+      <div className={`grid grid-cols-1 md:grid-cols-${columns} gap-3`}>
+        {items}
+      </div>
+    );
+  }
+
+  return <div className="space-y-2">{items}</div>;
 }