fix(frontend): handle API errors gracefully

frontend/src/app/categories/page.tsx

@@ -2,7 +2,20 @@ import { getCategories } from "@/lib/api";
 import Link from "next/link";
 
 export default async function CategoriesPage() {
-  const { items: categories } = await getCategories();
+  let categories;
+  try {
+    const response = await getCategories();
+    categories = response.items;
+  } catch {
+    return (
+      <div className="space-y-6">
+        <h1 className="text-3xl font-bold">Categories</h1>
+        <p className="text-[var(--muted-foreground)]">
+          Unable to load categories. Please try again later.
+        </p>
+      </div>
+    );
+  }
 
   return (
     <div className="space-y-6">

frontend/src/app/patterns/page.tsx

@@ -2,7 +2,20 @@ import { getPatterns } from "@/lib/api";
 import Link from "next/link";
 
 export default async function PatternsPage() {
-  const { items: patterns } = await getPatterns();
+  let patterns;
+  try {
+    const response = await getPatterns();
+    patterns = response.items;
+  } catch {
+    return (
+      <div className="space-y-6">
+        <h1 className="text-3xl font-bold">Algorithmic Patterns</h1>
+        <p className="text-[var(--muted-foreground)]">
+          Unable to load patterns. Please try again later.
+        </p>
+      </div>
+    );
+  }
 
   return (
     <div className="space-y-6">