fix: resolve frontend module resolution errors

- Remove broken DetailStat and StatCard exports from shared/index.ts
- Fix message-detail-view import to message-detail
- Create missing ai-status-badge component with status-based styling

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

services/frontend/src/app/(dashboard)/messages/page.tsx

@@ -4,7 +4,7 @@ import { useCallback, useEffect, useState } from "react";
 import { useSearchParams, useRouter } from "next/navigation";
 import { Flag, Image, Loader2, RefreshCw, Search } from "lucide-react";
 import { MessageList } from "@/components/messages/message-list";
-import { MessageDetailView } from "@/components/messages/message-detail-view";
+import { MessageDetail } from "@/components/messages/message-detail";
 import { SearchOverlay } from "@/components/messages/search-overlay";
 import { extractFirstImage } from "@/components/messages/message-card";
 import { SubNav } from "@/components/layout/sub-nav";
@@ -227,7 +227,7 @@ export default function MessagesPage() {
                   >
                     ← Back to list
                   </button>
-                  <MessageDetailView
+                  <MessageDetail
                     message={detailMessage}
                     attachments={detailAttachments}
                   />

services/frontend/src/components/messages/ai-status-badge.tsx

@@ -1,28 +1,26 @@
 "use client";
 
-import { Badge } from "@/components/ui/badge";
 import { cn } from "@/lib/utils";
 
 const STATUS_STYLES: Record<string, string> = {
-  clean:
-    "bg-emerald-500/15 text-emerald-600 dark:text-emerald-400 border-emerald-500/20",
-  warn: "bg-amber-500/15 text-amber-600 dark:text-amber-400 border-amber-500/20",
-  flagged: "bg-red-500/15 text-red-600 dark:text-red-400 border-red-500/20",
-  error: "bg-gray-500/15 text-gray-600 dark:text-gray-400 border-gray-500/20",
-  pending: "bg-cyan-500/15 text-cyan-600 dark:text-cyan-400 border-cyan-500/20",
-  processing:
-    "bg-cyan-500/15 text-cyan-600 dark:text-cyan-400 border-cyan-500/20",
+  clean: "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/20",
+  flagged: "bg-red-500/10 text-red-600 dark:text-red-400 border-red-500/20",
+  warn: "bg-amber-500/10 text-amber-600 dark:text-amber-400 border-amber-500/20",
+  pending: "bg-muted text-muted-foreground border-border",
+  processing: "bg-sky-500/10 text-sky-600 dark:text-sky-400 border-sky-500/20 animate-pulse",
+  error: "bg-destructive/10 text-destructive border-destructive/20",
 };
 
 export function AiStatusBadge({ status }: { status?: string | null }) {
-  const style = STATUS_STYLES[status ?? ""];
-  if (!style) return null;
+  if (!status) return null;
   return (
-    <Badge
-      variant="outline"
-      className={cn("text-[10px] px-1.5 py-0 h-4 font-medium", style)}
+    <span
+      className={cn(
+        "inline-flex items-center rounded-full border px-2 py-0.5 text-[10px] font-medium uppercase tracking-wider",
+        STATUS_STYLES[status] ?? "bg-muted text-muted-foreground border-border",
+      )}
     >
       {status}
-    </Badge>
+    </span>
   );
 }

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

@@ -1,6 +1,4 @@
-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";