feat(03-03): module loader utility with category page and lazy cards

- Create module-loader.ts with MODULE_REGISTRY mapping slugs to dynamic imports (ssr:false)
- Create [category] page fetching active modules from API, filtering by category
- Create ModuleCard component with icon, name, description, and link to expanded view
- Add i18n keys for modules namespace (de + en)

apps/web/src/app/(portal)/modules/[category]/components/ModuleCard.tsx

@@ -0,0 +1,107 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+import Link from 'next/link';
+
+/**
+ * Module metadata passed to the card for rendering.
+ */
+export interface ModuleCardProps {
+  name: string;
+  slug: string;
+  description: Record<string, string>;
+  icon?: string;
+  category: string;
+}
+
+/**
+ * Default icon mapping for known module icons.
+ * Renders inline SVG to avoid external icon library dependency.
+ */
+function ModuleIcon({ icon }: { icon?: string }) {
+  // Globe icon for domain-related modules
+  if (icon === 'Globe') {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="text-primary"
+      >
+        <circle cx="12" cy="12" r="10" />
+        <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" />
+        <path d="M2 12h20" />
+      </svg>
+    );
+  }
+
+  // Default puzzle-piece icon for generic modules
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="text-primary"
+    >
+      <path d="M19.439 7.85c-.049.322.059.648.289.878l1.568 1.568c.47.47.706 1.087.706 1.704s-.235 1.233-.706 1.704l-1.611 1.611a.98.98 0 0 1-.837.276c-.47-.07-.802-.48-.968-.925a2.501 2.501 0 1 0-3.214 3.214c.446.166.855.497.925.968a.979.979 0 0 1-.276.837l-1.61 1.61a2.404 2.404 0 0 1-1.705.707 2.402 2.402 0 0 1-1.704-.706l-1.568-1.568a1.026 1.026 0 0 0-.877-.29c-.493.074-.84.504-1.02.968a2.5 2.5 0 1 1-3.237-3.237c.464-.18.894-.527.967-1.02a1.026 1.026 0 0 0-.289-.877l-1.568-1.568A2.402 2.402 0 0 1 1.998 12c0-.617.236-1.234.706-1.704L4.315 8.685a.98.98 0 0 1 .837-.276c.47.07.802.48.968.925a2.501 2.501 0 1 0 3.214-3.214c-.446-.166-.855-.497-.925-.968a.979.979 0 0 1 .276-.837l1.61-1.61a2.404 2.404 0 0 1 1.705-.707c.617 0 1.234.236 1.704.706l1.568 1.568c.23.23.556.338.877.29.493-.074.84-.504 1.02-.968a2.5 2.5 0 1 1 3.237 3.237c-.464.18-.894.527-.967 1.02Z" />
+    </svg>
+  );
+}
+
+/**
+ * Module card for the category grid view.
+ *
+ * Displays module name, localized description, icon, and a link
+ * to the expanded module view. Per D-05a: uniform card appearance,
+ * compact, looks good even with a single module.
+ */
+export function ModuleCard({ name, slug, description, icon, category }: ModuleCardProps) {
+  const t = useTranslations('modules');
+  const locale = (typeof window !== 'undefined' && document.documentElement.lang) || 'de';
+  const localizedDescription = description[locale] || description.en || description.de || '';
+
+  return (
+    <Link
+      href={`/modules/${category}/${slug}`}
+      className="group block"
+    >
+      <div className="rounded-lg border border-border bg-card p-5 shadow-sm transition-all hover:shadow-md hover:border-primary/30 group-focus-visible:ring-2 group-focus-visible:ring-ring group-focus-visible:ring-offset-2">
+        {/* Header: icon + name */}
+        <div className="flex items-start gap-3 mb-3">
+          <div className="rounded-md bg-muted p-2.5 shrink-0">
+            <ModuleIcon icon={icon} />
+          </div>
+          <div className="min-w-0">
+            <h3 className="font-semibold text-base leading-tight truncate">
+              {name}
+            </h3>
+          </div>
+        </div>
+
+        {/* Description */}
+        <p className="text-sm text-muted-foreground line-clamp-2 mb-4">
+          {localizedDescription}
+        </p>
+
+        {/* Footer: open link */}
+        <div className="flex justify-end">
+          <span className="text-sm font-medium text-primary group-hover:underline">
+            {t('openModule')}
+          </span>
+        </div>
+      </div>
+    </Link>
+  );
+}

apps/web/src/app/(portal)/modules/[category]/page.tsx

@@ -0,0 +1,145 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+import { useParams } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { ModuleCard, type ModuleCardProps } from './components/ModuleCard';
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001';
+
+/**
+ * Module data shape from the API response.
+ */
+interface ApiModule {
+  id: string;
+  name: string;
+  slug: string;
+  category: string;
+  description: Record<string, string> | string;
+  icon?: string;
+  version: string;
+}
+
+/**
+ * Format a category slug for display.
+ * Replaces hyphens with spaces and capitalizes each word.
+ */
+function formatCategoryName(category: string): string {
+  return category
+    .split('-')
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ');
+}
+
+/**
+ * Category page — displays activated module cards in a grid.
+ *
+ * Fetches active modules for the current tenant from the API,
+ * filters by the category from the URL param, and renders a
+ * responsive card grid. Per D-04: category page groups all
+ * modules of that category.
+ *
+ * T-03-10: API filters by tenant's active modules — inactive
+ * modules are never returned, cards never rendered.
+ */
+export default function CategoryPage() {
+  const params = useParams<{ category: string }>();
+  const category = params.category;
+  const t = useTranslations('modules');
+
+  const [modules, setModules] = useState<ModuleCardProps[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    async function fetchModules() {
+      try {
+        const response = await fetch(`${API_URL}/modules/active`, {
+          credentials: 'include',
+        });
+
+        if (!response.ok) {
+          setModules([]);
+          return;
+        }
+
+        const data: ApiModule[] = await response.json();
+
+        // Filter by category and map to card props
+        const categoryModules = data
+          .filter((mod) => mod.category === category)
+          .map((mod): ModuleCardProps => ({
+            name: mod.name,
+            slug: mod.slug,
+            description:
+              typeof mod.description === 'string'
+                ? { en: mod.description }
+                : (mod.description ?? {}),
+            icon: mod.icon,
+            category: mod.category,
+          }));
+
+        setModules(categoryModules);
+      } catch {
+        setModules([]);
+      } finally {
+        setIsLoading(false);
+      }
+    }
+
+    fetchModules();
+  }, [category]);
+
+  const categoryTitle = formatCategoryName(category);
+
+  return (
+    <div className="space-y-6 p-6">
+      {/* Header */}
+      <div>
+        <h1 className="text-2xl font-bold tracking-tight">
+          {t('categoryTitle', { category: categoryTitle })}
+        </h1>
+      </div>
+
+      {/* Loading state */}
+      {isLoading && (
+        <div className="flex items-center justify-center py-12">
+          <div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" />
+        </div>
+      )}
+
+      {/* Module grid */}
+      {!isLoading && modules.length > 0 && (
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+          {modules.map((mod) => (
+            <ModuleCard key={mod.slug} {...mod} />
+          ))}
+        </div>
+      )}
+
+      {/* Empty state */}
+      {!isLoading && modules.length === 0 && (
+        <div className="flex flex-col items-center justify-center py-16 text-center">
+          <div className="rounded-lg bg-muted p-4 mb-4">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="48"
+              height="48"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              className="text-muted-foreground"
+            >
+              <path d="M19.439 7.85c-.049.322.059.648.289.878l1.568 1.568c.47.47.706 1.087.706 1.704s-.235 1.233-.706 1.704l-1.611 1.611a.98.98 0 0 1-.837.276c-.47-.07-.802-.48-.968-.925a2.501 2.501 0 1 0-3.214 3.214c.446.166.855.497.925.968a.979.979 0 0 1-.276.837l-1.61 1.61a2.404 2.404 0 0 1-1.705.707 2.402 2.402 0 0 1-1.704-.706l-1.568-1.568a1.026 1.026 0 0 0-.877-.29c-.493.074-.84.504-1.02.968a2.5 2.5 0 1 1-3.237-3.237c.464-.18.894-.527.967-1.02a1.026 1.026 0 0 0-.289-.877l-1.568-1.568A2.402 2.402 0 0 1 1.998 12c0-.617.236-1.234.706-1.704L4.315 8.685a.98.98 0 0 1 .837-.276c.47.07.802.48.968.925a2.501 2.501 0 1 0 3.214-3.214c-.446-.166-.855-.497-.925-.968a.979.979 0 0 1 .276-.837l1.61-1.61a2.404 2.404 0 0 1 1.705-.707c.617 0 1.234.236 1.704.706l1.568 1.568c.23.23.556.338.877.29.493-.074.84-.504 1.02-.968a2.5 2.5 0 1 1 3.237 3.237c-.464.18-.894.527-.967 1.02Z" />
+            </svg>
+          </div>
+          <p className="text-lg text-muted-foreground">
+            {t('noModules')}
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}

apps/web/src/lib/module-loader.ts

@@ -0,0 +1,66 @@
+/**
+ * Module Loader — Lazy-loading registry for Tessera modules.
+ *
+ * Maps module slugs to dynamically imported components.
+ * Only modules listed in MODULE_REGISTRY will have their code loaded;
+ * inactive/unregistered modules never trigger an import (MOD-04).
+ *
+ * Security: Only whitelisted slugs are resolved — arbitrary slugs
+ * from URL params return null (T-03-09).
+ */
+
+import dynamic from 'next/dynamic';
+import type { ComponentType } from 'react';
+
+/**
+ * Registry entry for a module's lazy-loaded components.
+ */
+interface ModuleRegistryEntry {
+  /** Main module page component (loaded on demand) */
+  component: ComponentType;
+  /** Optional card component for category grid view */
+  cardComponent?: ComponentType;
+}
+
+/**
+ * Module registry mapping slugs to lazy-loaded components.
+ *
+ * To register a new module, add its slug and dynamic imports here.
+ * Components are only fetched when React renders them (code-splitting).
+ */
+export const MODULE_REGISTRY: Record<string, ModuleRegistryEntry> = {
+  domaincheck: {
+    component: dynamic(
+      () => import('@/app/(portal)/modules/domaincheck/page'),
+      { ssr: false },
+    ),
+  },
+};
+
+/**
+ * Load the main component for a module by slug.
+ *
+ * @param slug - Module slug (e.g., 'domaincheck')
+ * @returns The dynamic component, or null if the slug is not registered
+ */
+export function loadModuleComponent(
+  slug: string,
+): ComponentType | null {
+  const entry = MODULE_REGISTRY[slug];
+  return entry?.component ?? null;
+}
+
+/**
+ * Load the card component for a module by slug.
+ *
+ * Falls back to null if no card component is registered.
+ *
+ * @param slug - Module slug (e.g., 'domaincheck')
+ * @returns The card component, or null if not available
+ */
+export function loadModuleCard(
+  slug: string,
+): ComponentType | null {
+  const entry = MODULE_REGISTRY[slug];
+  return entry?.cardComponent ?? null;
+}

apps/web/src/messages/de.json

@@ -135,6 +135,14 @@
     "de": "Deutsch",
     "en": "English"
   },
+  "modules": {
+    "categoryTitle": "Module: {category}",
+    "openModule": "Oeffnen",
+    "noModules": "Keine aktiven Module in dieser Kategorie",
+    "notFound": "Modul nicht gefunden",
+    "notFoundDescription": "Das angeforderte Modul existiert nicht oder ist nicht aktiviert.",
+    "backToCategory": "Zurueck zur Kategorie"
+  },
   "domaincheck": {
     "title": "Domaincheck",
     "description": "Pruefe ob eine Domain verfuegbar ist",

apps/web/src/messages/en.json

@@ -134,6 +134,14 @@
     "de": "Deutsch",
     "en": "English"
   },
+  "modules": {
+    "categoryTitle": "Modules: {category}",
+    "openModule": "Open",
+    "noModules": "No active modules in this category",
+    "notFound": "Module not found",
+    "notFoundDescription": "The requested module does not exist or is not activated.",
+    "backToCategory": "Back to category"
+  },
   "domaincheck": {
     "title": "Domain Check",
     "description": "Check if a domain is available",