feat(automod): render sticker, role & user names in moderation views

QoL lanjutan dari fix60084b3: content pesan mentah masih nampilin
snowflake (<@&roleid>, <@userid>, <:emoji:id>) di log moderasi dan
prompt LLM. Sekarang dirender ke nama yang bisa dibaca:

- Gateway capture: metadata menyimpan mentionedRoles + mentionedUsers
  (id+name) dari message.mentions, disimpan ke metadata JSON
- renderDiscordMentions(): <@&id> -> @RoleName, <@id> -> @Username,
  <:name:id> -> :name:, fallback @role/@user — dipakai di
  conversationContext (konteks LLM) dan moderationBuilders
  (getAnalysisContent) sehingga LLM lihat nama role/user beneran,
  bukan placeholder generik
- Frontend renderMessageContent() (mirror gateway) dipasang di semua
  tempat nampilin content: message-card, message-detail(-view),
  search-overlay, search-panel, users/channels section, live-stream,
  mod-queue, review list; sticker-only message tetap [Sticker: name],
  pesan teks+sticker kini ikut nampilin nama sticker
- tsc --noEmit PASS di gateway & frontend; renderDiscordMentions
  diverifikasi manual (6 kasus: role/user/emoji/unknown/plain)

services/frontend/src/components/messages/message-card.tsx

@@ -6,7 +6,7 @@ import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { Progress } from "@/components/ui/progress";
-import { safeParseJsonArray, getMessageChannelLabel } from "@/lib/format";
+import { safeParseJsonArray, getMessageChannelLabel, renderMessageContent } from "@/lib/format";
 import type { MessageRecord } from "@/lib/types";
 import { cn } from "@/lib/utils";
 import { AiStatusBadge } from "./ai-status-badge";
@@ -96,7 +96,7 @@ export function MessageCard({
                   "italic text-muted-foreground line-through",
               )}
             >
-              {msg.content}
+              {renderMessageContent(msg.content, msg.metadata)}
             </p>
             {(() => {
               const u = extractFirstImage(msg.metadata);

services/frontend/src/components/messages/message-detail-view.tsx

@@ -4,7 +4,7 @@ import { ArrowLeft, MessageSquare, MessagesSquare } from "lucide-react";
 import { GlassCard } from "@/components/glass/card";
 import { AttachmentsGrid } from "./attachments-grid";
 import { AiAnalysisPanel } from "./ai-analysis-panel";
-import { getMessageChannelLabel } from "@/lib/format";
+import { getMessageChannelLabel, renderMessageContent } from "@/lib/format";
 import type { AttachmentRecord, MessageRecord } from "@/lib/types";
 
 interface MessageDetailViewProps {
@@ -34,7 +34,7 @@ export function MessageDetailView({ message, attachments, onBack }: MessageDetai
 
       {/* Content */}
       <div className="text-sm text-text-primary/90 leading-relaxed mb-4 whitespace-pre-wrap">
-        {message.content || "(no text content)"}
+        {renderMessageContent(message.content, message.metadata) || "(no text content)"}
       </div>
 
       {/* Attachments */}

services/frontend/src/components/messages/message-detail.tsx

@@ -4,7 +4,7 @@ import { ArrowLeft, MessageSquare, MessagesSquare } from "lucide-react";
 import { GlassCard } from "@/components/glass/card";
 import { AttachmentsGrid } from "./attachments-grid";
 import { AiAnalysisPanel } from "./ai-analysis-panel";
-import { getMessageChannelLabel } from "@/lib/format";
+import { getMessageChannelLabel, renderMessageContent } from "@/lib/format";
 import type { AttachmentRecord, MessageRecord } from "@/lib/types";
 
 interface MessageDetailProps {
@@ -34,7 +34,7 @@ export function MessageDetail({ message, attachments, onBack }: MessageDetailPro
 
       {/* Content */}
       <div className="text-sm text-text-primary/90 leading-relaxed mb-4 whitespace-pre-wrap">
-        {message.content || "(no text content)"}
+        {renderMessageContent(message.content, message.metadata) || "(no text content)"}
       </div>
 
       {/* Attachments */}

services/frontend/src/components/messages/search-overlay.tsx

@@ -4,7 +4,7 @@ import { Search, X } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { messagesApi } from "@/lib/api";
-import { getMessageChannelLabel } from "@/lib/format";
+import { getMessageChannelLabel, renderMessageContent } from "@/lib/format";
 import type { MessageRecord } from "@/lib/types";
 
 interface SearchOverlayProps {
@@ -86,7 +86,7 @@ export function SearchOverlay({ open, onClose, onSelect }: SearchOverlayProps) {
                   <span className="font-medium text-text-primary">{msg.username}</span>
                   <span className="text-text-secondary/40">{getMessageChannelLabel(msg)}</span>
                 </div>
-                <p className="text-xs text-text-secondary/80 line-clamp-1 mt-0.5">{msg.content}</p>
+                <p className="text-xs text-text-secondary/80 line-clamp-1 mt-0.5">{renderMessageContent(msg.content, msg.metadata)}</p>
               </button>
             ))
           )}