style(frontend): organize imports alphabetically and improve code formatting

services/frontend/src/App.tsx

@@ -103,9 +103,7 @@ export default function App() {
         const username = msg.username || msg.user_id || "unknown";
         const severity = msg.ai_severity || "";
         const categories = msg.ai_categories || "";
-        const brief =
+        const brief = msg.ai_analysis?.slice(0, 80) ?? "Message flagged by AI";
-          msg.ai_analysis?.slice(0, 80) ??
-          "Message flagged by AI";
         window.dispatchEvent(
           new CustomEvent("moderation_alert", {
             detail: { type: status, username, severity, categories, brief },

services/frontend/src/entities/guild/types.ts

@@ -1 +1 @@
-export { Guild, Channel } from "../../shared/api/client";
+export { Channel, Guild } from "../../shared/api/client";

services/frontend/src/entities/media/types.ts

@@ -1 +1 @@
-export { MediaMode, MediaItem, MediaState } from "../../shared/api/client";
+export { MediaItem, MediaMode, MediaState } from "../../shared/api/client";

services/frontend/src/entities/voice/types.ts

@@ -1 +1 @@
-export { VoiceStatus, ActiveSpeaker } from "../../shared/api/client";
+export { ActiveSpeaker, VoiceStatus } from "../../shared/api/client";

services/frontend/src/features/live/components/ActiveSpeakers.tsx

@@ -1,6 +1,5 @@
 import type { ActiveSpeaker } from "../../../shared/api/client";
-import { Skeleton } from "../../../shared/ui";
+import { EmptyStateMascot, Skeleton } from "../../../shared/ui";
-import { EmptyStateMascot } from "../../../shared/ui";
 
 interface ActiveSpeakersProps {
   speakers: ActiveSpeaker[];

services/frontend/src/features/live/components/MusicSubPanel.tsx

@@ -66,7 +66,11 @@ export function MusicSubPanel({
         </span>
       </div>
       <div className="flex flex-wrap gap-2">
-        <Button className="bg-[#7EC8E3] text-white hover:bg-[#7EC8E3]/80" disabled={loading || !source.trim()} onClick={submit}>
+        <Button
+          className="bg-[#7EC8E3] text-white hover:bg-[#7EC8E3]/80"
+          disabled={loading || !source.trim()}
+          onClick={submit}
+        >
           <Music2 className="mr-1.5 h-4 w-4" /> Queue
         </Button>
         <Button variant="secondary" disabled={loading} onClick={onSkip}>

services/frontend/src/features/live/components/RecordingsSubPanel.tsx

@@ -2,8 +2,8 @@
 
 import { Download, Mic } from "lucide-react";
 import { useEffect, useState } from "react";
-import { Badge, Button, EmptyStateMascot, Skeleton } from "../../../shared/ui";
 import { formatBytes, formatDate } from "../../../shared/lib/utils";
+import { Badge, Button, EmptyStateMascot, Skeleton } from "../../../shared/ui";
 
 interface VoiceRecording {
   id: string;
@@ -92,9 +92,7 @@ export function RecordingsSubPanel() {
   }
 
   if (recordings.length === 0) {
-    return (
+    return <EmptyStateMascot variant="sleeping" message="No recordings yet~" />;
-      <EmptyStateMascot variant="sleeping" message="No recordings yet~" />
-    );
   }
 
   return (

services/frontend/src/features/live/components/ScreenSubPanel.tsx

@@ -32,7 +32,11 @@ export function ScreenSubPanel({
         placeholder="Screen share URL or local file path"
       />
       <div className="flex flex-wrap gap-2">
-        <Button className="bg-[#7EC8E3] text-white hover:bg-[#7EC8E3]/80" disabled={loading || !source.trim()} onClick={submit}>
+        <Button
+          className="bg-[#7EC8E3] text-white hover:bg-[#7EC8E3]/80"
+          disabled={loading || !source.trim()}
+          onClick={submit}
+        >
           <MonitorUp className="mr-1.5 h-4 w-4" /> Start
         </Button>
         <Button variant="secondary" disabled={loading} onClick={onSkip}>

services/frontend/src/features/live/components/VoiceConnectionCard.tsx

@@ -56,7 +56,9 @@ export function VoiceConnectionCard({
             />
           </div>
           <div className="space-y-2">
-            <label className="text-sm font-medium text-foreground">Voice Channel</label>
+            <label className="text-sm font-medium text-foreground">
+              Voice Channel
+            </label>
             <Select
               value={selectedChannel}
               onChange={(e) => onChannelChange(e.target.value)}

services/frontend/src/features/messages/components/ImageGrid.tsx

@@ -1,5 +1,5 @@
-import type { MessageRecord } from "../../../shared/api/client";
 import { parseMetadata } from "../../../entities/message/types";
+import type { MessageRecord } from "../../../shared/api/client";
 import { EmptyStateMascot } from "../../../widgets/mascot/ChibiMascot";
 
 interface ImageItem {
@@ -68,9 +68,7 @@ export function ImageGrid({ messages }: { messages: MessageRecord[] }) {
   }
 
   if (images.length === 0) {
-    return (
+    return <EmptyStateMascot variant="thinking" message="No images yet~" />;
-      <EmptyStateMascot variant="thinking" message="No images yet~" />
-    );
   }
 
   return (

services/frontend/src/features/messages/components/MessageCard.tsx

@@ -10,9 +10,9 @@ import {
   Trash2,
 } from "lucide-react";
 import { Fragment, useMemo, useState } from "react";
+import { parseMetadata } from "../../../entities/message/types";
 import type { MessageRecord } from "../../../shared/api/client";
 import { Badge, Button, Skeleton } from "../../../shared/ui";
-import { parseMetadata } from "../../../entities/message/types";
 
 const CUSTOM_EMOJI_REGEX = /<(a)?:([a-zA-Z0-9_]+):(\d+)>/g;
 
@@ -134,9 +134,7 @@ export function MessageCard({
   const confidence =
     message.ai_confidence ?? message.ai_moderation_score ?? null;
   const [isReanalyzing, setIsReanalyzing] = useState(false);
-  const [showAnalysis, setShowAnalysis] = useState(
+  const [showAnalysis, setShowAnalysis] = useState(aiStatus === "flagged");
-    aiStatus === "flagged",
-  );
 
   // Build a human-readable analysis summary from categories + confidence + severity
   const analysisSummary = useMemo(() => {
@@ -178,9 +176,7 @@ export function MessageCard({
       className={`group rounded-2xl border bg-white shadow-sm transition-all hover:border-primary/30 hover:shadow-md ${
         compact ? "px-4 py-1.5" : "p-4"
       } ${
-        message.deleted_at
+        message.deleted_at ? "border-red-200 opacity-60" : "border-primary/20"
-          ? "border-red-200 opacity-60"
-          : "border-primary/20"
       }`}
     >
       <div className={`flex ${compact ? "gap-2" : "gap-3"}`}>

services/frontend/src/features/messages/components/MessageFeed.tsx

@@ -1,13 +1,10 @@
 import { motion } from "framer-motion";
 import { useEffect, useMemo, useRef } from "react";
 import type { MessageRecord } from "../../../shared/api/client";
-import {
+import { cardItem, cardStagger } from "../../../shared/hooks/useFramerStagger";
-  cardStagger,
-  cardItem,
-} from "../../../shared/hooks/useFramerStagger";
 import { ScrollArea } from "../../../shared/ui";
-import { MessageCard, MessageCardSkeleton } from "./MessageCard";
 import { EmptyStateMascot } from "../../../widgets/mascot/ChibiMascot";
+import { MessageCard, MessageCardSkeleton } from "./MessageCard";
 
 export interface MessageFeedProps {
   messages: MessageRecord[];

services/frontend/src/features/messages/hooks/useMessages.ts

@@ -1,6 +1,10 @@
 import { useCallback, useRef, useState } from "react";
 import type { MessageRecord } from "../../../shared/api/client";
-import { listMessages, reanalyzeErrorBatch, reanalyzeMessage } from "../../../shared/api/client";
+import {
+  listMessages,
+  reanalyzeErrorBatch,
+  reanalyzeMessage,
+} from "../../../shared/api/client";
 
 const PAGE_SIZE = 100;
 
@@ -91,28 +95,25 @@ export function useMessages() {
     await reanalyzeMessage(id);
   }, []);
 
-  const reanalyzeAllErrors = useCallback(
+  const reanalyzeAllErrors = useCallback(async (): Promise<number> => {
-    async (): Promise<number> => {
+    // Optimistically mark all error messages as pending
-      // Optimistically mark all error messages as pending
+    setMessages((prev) =>
-      setMessages((prev) =>
+      prev.map((message) =>
-        prev.map((message) =>
+        message.ai_status === "error"
-          message.ai_status === "error"
+          ? {
-            ? {
+              ...message,
-                ...message,
+              ai_status: "pending" as const,
-                ai_status: "pending" as const,
+              ai_error: null,
-                ai_error: null,
+              ai_analysis: null,
-                ai_analysis: null,
+            }
-              }
+          : message,
-            : message,
+      ),
-        ),
+    );
-      );
+    const { count } = await reanalyzeErrorBatch({
-      const { count } = await reanalyzeErrorBatch({
+      guildId: currentGuild.current ?? undefined,
-        guildId: currentGuild.current ?? undefined,
+    });
-      });
+    return count;
-      return count;
+  }, []);
-    },
-    [],
-  );
 
   return {
     messages,

services/frontend/src/features/messages/index.tsx

@@ -1,7 +1,8 @@
+import { motion } from "framer-motion";
 import { Filter, RotateCw, Search, X } from "lucide-react";
 import { useMemo, useState } from "react";
-import { motion } from "framer-motion";
 import type { MessageRecord } from "../../shared/api/client";
+import { cardItem, cardStagger } from "../../shared/hooks/useFramerStagger";
 import {
   Badge,
   Button,
@@ -15,7 +16,6 @@ import {
   TabsList,
   TabsTrigger,
 } from "../../shared/ui";
-import { cardStagger, cardItem } from "../../shared/hooks/useFramerStagger";
 import { ImageGrid } from "./components/ImageGrid";
 import { MessageFeed } from "./components/MessageFeed";
 
@@ -109,9 +109,7 @@ export function MessagesPanel({
             {guildName && (
               <p className="text-sm text-muted-foreground">
                 Monitoring all text channels in{" "}
-                <span className="font-medium text-foreground">
+                <span className="font-medium text-foreground">{guildName}</span>
-                  {guildName}
-                </span>
               </p>
             )}
           </CardHeader>
@@ -129,7 +127,10 @@ export function MessagesPanel({
           variants={cardItem}
           className="flex flex-wrap items-center gap-2"
         >
-          <Badge variant="outline" className="text-xs border-primary/40 text-primary">
+          <Badge
+            variant="outline"
+            className="text-xs border-primary/40 text-primary"
+          >
             {stats.total} total{hasMore && !showSearch ? "+" : ""}
           </Badge>
           <Badge
@@ -150,11 +151,17 @@ export function MessagesPanel({
           >
             {stats.error} error
           </Badge>
-          <Badge variant="outline" className="text-xs text-muted-foreground border-border">
+          <Badge
+            variant="outline"
+            className="text-xs text-muted-foreground border-border"
+          >
             {stats.pending} pending
           </Badge>
           {stats.deleted > 0 && (
-            <Badge variant="outline" className="text-xs bg-red-100 text-red-700 border-red-200">
+            <Badge
+              variant="outline"
+              className="text-xs bg-red-100 text-red-700 border-red-200"
+            >
               {stats.deleted} deleted
             </Badge>
           )}
@@ -222,9 +229,7 @@ export function MessagesPanel({
             <RotateCw
               className={`mr-1.5 h-3.5 w-3.5 ${retryingAll ? "animate-spin" : ""}`}
             />
-            {retryingAll
+            {retryingAll ? "Retrying..." : `Retry All Errors (${stats.error})`}
-              ? "Retrying..."
-              : `Retry All Errors (${stats.error})`}
           </Button>
         )}
         {retriedCount !== null && (
@@ -235,27 +240,21 @@ export function MessagesPanel({
         )}
         <div className="ml-auto flex items-center gap-1.5">
           <Filter className="h-4 w-4 text-primary" />
-          {(
+          {(["all", "clean", "flagged", "error", "pending"] as AiFilter[]).map(
-            [
+            (f) => (
-              "all",
+              <button
-              "clean",
+                key={f}
-              "flagged",
+                onClick={() => setAiFilter(f)}
-              "error",
+                className={`rounded-full px-3 py-1 text-xs font-medium transition-all ${
-              "pending",
+                  aiFilter === f
-            ] as AiFilter[]
+                    ? "bg-primary text-primary-foreground shadow-sm"
-          ).map((f) => (
+                    : "text-muted-foreground hover:text-foreground hover:bg-primary-soft"
-            <button
+                }`}
-              key={f}
+              >
-              onClick={() => setAiFilter(f)}
+                {f}
-              className={`rounded-full px-3 py-1 text-xs font-medium transition-all ${
+              </button>
-                aiFilter === f
+            ),
-                  ? "bg-primary text-primary-foreground shadow-sm"
+          )}
-                  : "text-muted-foreground hover:text-foreground hover:bg-primary-soft"
-              }`}
-            >
-              {f}
-            </button>
-          ))}
         </div>
       </motion.div>
 

services/frontend/src/shared/ui/badge.tsx

@@ -11,8 +11,7 @@ type BadgeVariant =
 
 const variants: Record<BadgeVariant, string> = {
   default: "border-transparent bg-primary text-primary-foreground",
-  secondary:
+  secondary: "border-transparent bg-muted text-muted-foreground",
-    "border-transparent bg-muted text-muted-foreground",
   destructive: "border-transparent bg-[#FCA5A5] text-red-800",
   outline: "border-border text-foreground",
   success: "border-transparent bg-[#BBF7D0] text-green-800",

services/frontend/src/shared/ui/button.tsx

@@ -11,12 +11,10 @@ type ButtonVariant =
 type ButtonSize = "default" | "sm" | "lg" | "icon";
 
 const variants: Record<ButtonVariant, string> = {
-  default:
+  default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-    "bg-primary text-primary-foreground shadow hover:bg-primary/90",
   secondary: "bg-[#FFB7C5] text-[#1a1a2e] hover:bg-[#FFB7C5]/80",
   destructive: "bg-[#FCA5A5] text-[#1a1a2e] hover:bg-[#FCA5A5]/80",
-  outline:
+  outline: "border border-border bg-white hover:bg-primary-soft",
-    "border border-border bg-white hover:bg-primary-soft",
   ghost: "hover:bg-primary-soft",
 };
 

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

@@ -1,5 +1,6 @@
 // ─── Shared UI barrel export ────────────────────────────────────────────────
 
+export { EmptyStateMascot } from "../../widgets/mascot/ChibiMascot";
 export { Badge } from "./badge";
 export { Button } from "./button";
 export {
@@ -16,4 +17,3 @@ export { Select } from "./select";
 export { Skeleton } from "./skeleton";
 export { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs";
 export { ToastProvider, useToast } from "./toast";
-export { EmptyStateMascot } from "../../widgets/mascot/ChibiMascot";

services/frontend/src/shared/ui/toast.tsx

@@ -87,7 +87,9 @@ function ToastContainer() {
           )}
           onClick={() => removeToast(toast.id)}
         >
-          <span className="text-base leading-none">{typeIcons[toast.type]}</span>
+          <span className="text-base leading-none">
+            {typeIcons[toast.type]}
+          </span>
           <span>{toast.message}</span>
         </div>
       ))}

services/frontend/src/widgets/Sidebar.tsx

@@ -59,8 +59,7 @@ export function Sidebar({
                   : "text-muted-foreground hover:bg-primary-soft/40 hover:text-primary/80",
               )}
               onMouseEnter={(e) => {
-                e.currentTarget.style.transform =
+                e.currentTarget.style.transform = "translateX(2px) scale(1.1)";
-                  "translateX(2px) scale(1.1)";
               }}
               onMouseLeave={(e) => {
                 e.currentTarget.style.transform = "translateX(0) scale(1)";

services/frontend/src/widgets/particles/ParticleBackground.tsx

@@ -45,13 +45,20 @@ function createPetals(count: number): PetalData[] {
   }));
 }
 
-function Petal({ data, mouseRef }: { data: PetalData; mouseRef: React.RefObject<{ x: number; y: number } | null> }) {
+function Petal({
+  data,
+  mouseRef,
+}: {
+  data: PetalData;
+  mouseRef: React.RefObject<{ x: number; y: number } | null>;
+}) {
   const meshRef = useRef(null);
 
   useFrame((_state, delta) => {
-    const mesh = meshRef.current as unknown as
+    const mesh = meshRef.current as unknown as {
-      | { position: { x: number; y: number; z: number }; rotation: { z: number; x: number } }
+      position: { x: number; y: number; z: number };
-      | null;
+      rotation: { z: number; x: number };
+    } | null;
     if (!mesh) return;
 
     // Slow drift downward