Which direction fits your commit philosophy better?

services/frontend/src/features/analytics/components/ActivityChart.tsx

@@ -35,7 +35,7 @@ export function ActivityChart({ hourly, loading }: ActivityChartProps) {
   });
 
   return (
-    <Card className="col-span-1 lg:col-span-2 glass border-white/5">
+    <Card className="col-span-1 lg:col-span-2">
       <CardHeader className="pb-2">
         <CardTitle className="text-sm font-semibold">
           Aktivitas per Jam
@@ -46,9 +46,8 @@ export function ActivityChart({ hourly, loading }: ActivityChartProps) {
       </CardHeader>
       <CardContent>
         <div className="space-y-3">
-          <div className="grid grid-cols-4 gap-2 text-[10px] uppercase tracking-wider text-muted-foreground">
+          <div className="grid grid-cols-3 gap-2 text-[10px] uppercase tracking-wider text-muted-foreground">
             <span>Clean</span>
-            <span>Warned</span>
             <span>Flagged</span>
             <span>Error</span>
           </div>
@@ -56,13 +55,12 @@ export function ActivityChart({ hourly, loading }: ActivityChartProps) {
             {data.map((bucket) => {
               const total = Math.max(bucket.total, 1);
               const clean = bucket.clean / total;
-              const warned = bucket.warned / total;
               const flagged = bucket.flagged / total;
               const error = bucket.error / total;
               return (
                 <div
                   key={bucket.hour}
-                  className="grid gap-1 rounded-xl border border-border bg-background/50 p-3"
+                  className="grid gap-1 rounded-xl border border-sky-100 bg-white p-3"
                 >
                   <div className="flex items-center justify-between text-[11px] text-muted-foreground">
                     <span className="font-medium text-foreground">
@@ -70,21 +68,17 @@ export function ActivityChart({ hourly, loading }: ActivityChartProps) {
                     </span>
                     <span>{bucket.total} pesan</span>
                   </div>
-                  <div className="flex h-3 overflow-hidden rounded-full bg-muted">
+                  <div className="flex h-3 overflow-hidden rounded-full bg-sky-50">
                     <div
-                      className="bg-emerald-500/80"
+                      className="bg-gradient-to-r from-primary to-pink-300"
                       style={{ width: `${clean * 100}%` }}
                     />
                     <div
-                      className="bg-amber-500/80"
+                      className="bg-accent/70"
-                      style={{ width: `${warned * 100}%` }}
-                    />
-                    <div
-                      className="bg-red-500/80"
                       style={{ width: `${flagged * 100}%` }}
                     />
                     <div
-                      className="bg-orange-500/80"
+                      className="bg-orange-300/70"
                       style={{ width: `${error * 100}%` }}
                     />
                   </div>
@@ -100,8 +94,8 @@ export function ActivityChart({ hourly, loading }: ActivityChartProps) {
 
 function LoadingBox() {
   return (
-    <Card className="col-span-1 flex h-65 items-center justify-center text-sm text-muted-foreground lg:col-span-2 glass border-white/5">
+    <Card className="col-span-1 flex h-65 items-center justify-center text-sm text-muted-foreground lg:col-span-2">
-      <span className="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
+      <span className="h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent" />
       <span className="ml-2">Memuat data...</span>
     </Card>
   );
@@ -109,7 +103,7 @@ function LoadingBox() {
 
 function EmptyBox({ text }: { text: string }) {
   return (
-    <Card className="col-span-1 flex h-65 items-center justify-center text-sm text-muted-foreground lg:col-span-2 glass border-white/5">
+    <Card className="col-span-1 flex h-65 items-center justify-center text-sm text-muted-foreground lg:col-span-2">
       {text}
     </Card>
   );

services/frontend/src/features/analytics/components/ControlBar.tsx

@@ -38,7 +38,7 @@ export function ControlBar({
     <Card>
       <CardHeader className="pb-3">
         <CardTitle className="flex items-center gap-2 text-lg">
-          <BarChart3 className="h-5 w-5 text-muted-foreground" />
+          <BarChart3 className="h-5 w-5 text-primary" />
           Analisis Moderasi
         </CardTitle>
         <CardDescription>
@@ -46,7 +46,7 @@ export function ControlBar({
             <>
               Pantau statistik, tren topik, dan aktivitas user di seluruh
               channel{" "}
-              <span className="font-medium text-foreground">{guildName}</span>.
+              <span className="font-medium text-primary">{guildName}</span>.
             </>
           ) : (
             "Pantau statistik, tren topik, dan aktivitas user."
@@ -55,16 +55,16 @@ export function ControlBar({
       </CardHeader>
       <CardContent>
         <div className="flex flex-wrap items-center gap-3">
-          <div className="flex items-center gap-1 rounded-md bg-muted p-0.5">
+          <div className="flex items-center gap-1 rounded-xl bg-sky-50 p-0.5 ring-1 ring-sky-200/50">
             {TIME_RANGES.map((tr) => (
               <button
                 key={tr.value}
                 type="button"
                 onClick={() => onHoursChange(tr.value)}
                 className={cn(
-                  "rounded-sm px-2.5 py-1 text-xs font-medium transition-colors",
+                  "rounded-lg px-2.5 py-1 text-xs font-medium transition-all",
                   hours === tr.value
-                    ? "bg-background text-foreground shadow-sm"
+                    ? "bg-primary text-white shadow-sm"
                     : "text-muted-foreground hover:text-foreground",
                 )}
               >
@@ -77,11 +77,11 @@ export function ControlBar({
             disabled={isFetching}
             variant="outline"
             size="sm"
-            className="ml-auto shrink-0"
+            className="ml-auto shrink-0 rounded-xl border-primary/40 text-primary hover:bg-primary/10 hover:text-primary"
           >
             {isFetching ? (
               <span className="flex items-center gap-1.5">
-                <span className="h-3 w-3 animate-spin rounded-full border-2 border-current border-t-transparent" />
+                <span className="h-3 w-3 animate-spin rounded-full border-2 border-primary border-t-transparent" />
                 Memuat...
               </span>
             ) : (

services/frontend/src/features/analytics/components/SummaryCards.tsx

@@ -27,6 +27,16 @@ export function SummaryCards({
       ? Math.round((messages.flagged / messages.total) * 100)
       : 0;
 
+  const icons: Record<string, string> = {
+    "Total Pesan": "💬",
+    "Rata-rata/jam": "📊",
+    Clean: "✅",
+    Flagged: "🚩",
+    Pending: "⏳",
+    "User Aktif": "👤",
+    Channel: "📡",
+  };
+
   const cards = [
     {
       label: "Total Pesan",
@@ -41,38 +51,43 @@ export function SummaryCards({
     {
       label: "Clean",
       value: cleanPct > 0 ? `${cleanPct}%` : "—",
-      accent: "text-emerald-400",
+      accent: "text-primary",
     },
     {
       label: "Flagged",
       value: flaggedPct > 0 ? `${flaggedPct}%` : "—",
-      accent: "text-red-400",
+      accent: "text-accent",
     },
     {
       label: "Pending",
       value: formatNum(messages?.pending),
-      accent: "text-slate-400",
+      accent: "text-muted-foreground",
     },
     {
       label: "User Aktif",
       value: formatNum(activeUsersCount),
-      accent: "text-violet-400",
+      accent: "text-primary",
     },
     {
       label: "Channel",
       value: formatNum(totalChannels),
-      accent: "text-blue-400",
+      accent: "text-primary",
     },
   ];
 
   return (
     <div className="grid grid-cols-2 gap-2 sm:grid-cols-4 lg:grid-cols-8">
       {cards.map((card) => (
-        <Card key={card.label} className="overflow-hidden glass border-white/5">
+        <Card key={card.label} className="overflow-hidden">
           <CardContent className="p-3">
+            <div className="flex items-center gap-1.5">
+              <span className="flex h-5 w-5 items-center justify-center rounded-full bg-primary/10 text-[10px]">
+                {icons[card.label] ?? "📋"}
+              </span>
               <div className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
                 {card.label}
               </div>
+            </div>
             <div
               className={cn(
                 "mt-1 font-mono text-lg font-bold tabular-nums",

services/frontend/src/features/analytics/components/TrendChart.tsx

@@ -43,10 +43,9 @@ export function TrendChart({ trend, loading }: TrendChartProps) {
       <CardContent>
         <div className="space-y-4">
           <div className="flex flex-wrap gap-3 text-[10px] uppercase tracking-wider text-muted-foreground">
-            <LegendDot color="bg-blue-500" label="Total" />
+            <LegendDot color="bg-primary" label="Total" />
-            <LegendDot color="bg-emerald-500" label="Clean" />
+            <LegendDot color="bg-emerald-400" label="Clean" />
-            <LegendDot color="bg-amber-500" label="Warned" />
+            <LegendDot color="bg-accent" label="Flagged" />
-            <LegendDot color="bg-red-500" label="Flagged" />
           </div>
 
           <div className="overflow-hidden rounded-2xl border border-border bg-background/50 p-4">

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

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { motion } from "framer-motion";
 import { ActivityChart } from "./components/ActivityChart";
 import { ControlBar } from "./components/ControlBar";
 import { Heatmap } from "./components/Heatmap";
@@ -8,6 +9,8 @@ import { TrendChart } from "./components/TrendChart";
 import { UserTable } from "./components/UserTable";
 import { ViolatorTable } from "./components/ViolatorTable";
 import { useAnalytics } from "./hooks/useAnalytics";
+import { cardStagger, cardItem } from "../../shared/hooks/useFramerStagger";
+import { EmptyStateMascot } from "../../widgets/mascot/ChibiMascot";
 
 interface AnalyticsPanelProps {
   guildId: string;
@@ -43,7 +46,7 @@ export function AnalyticsPanel({ guildId, guildName }: AnalyticsPanelProps) {
 
   if (error && !analyticsMessages) {
     return (
-      <div className="rounded-lg border border-red-500/30 bg-red-500/5 p-4 text-sm text-red-300">
+      <div className="rounded-2xl border border-red-300/40 bg-red-50/60 p-6 text-sm text-red-600 shadow-sm">
         {error}
       </div>
     );
@@ -51,16 +54,18 @@ export function AnalyticsPanel({ guildId, guildName }: AnalyticsPanelProps) {
 
   if (!guildId) {
     return (
-      <div className="flex min-h-[300px] flex-col items-center justify-center gap-3 rounded-lg border border-dashed p-8">
+      <EmptyStateMascot variant="thinking" message="Menunggu konfigurasi guild..." />
-        <p className="text-sm text-muted-foreground">
-          Menunggu konfigurasi guild...
-        </p>
-      </div>
     );
   }
 
   return (
-    <div className="flex flex-col gap-4">
+    <motion.div
+      className="flex flex-col gap-4"
+      variants={cardStagger}
+      initial="initial"
+      animate="animate"
+    >
+      <motion.div variants={cardItem}>
         <ControlBar
           guildName={guildName}
           hours={hours}
@@ -71,26 +76,39 @@ export function AnalyticsPanel({ guildId, guildName }: AnalyticsPanelProps) {
             refreshViolators();
           }}
         />
+      </motion.div>
+      <motion.div variants={cardItem}>
         <SummaryCards
           messages={analyticsMessages}
           activeUsersCount={activeUsersCount}
           totalChannels={totalChannels}
           loading={loading}
         />
+      </motion.div>
+      <motion.div variants={cardItem}>
         <div className="grid grid-cols-3 gap-4">
           <ActivityChart hourly={hourly} loading={loading} />
           <div className="col-span-1">
             <TopicList topics={topics} loading={loading} />
           </div>
         </div>
-      {hours >= 48 && <TrendChart trend={trend} loading={loading} />}
+      </motion.div>
+      {hours >= 48 && (
+        <motion.div variants={cardItem}>
+          <TrendChart trend={trend} loading={loading} />
+        </motion.div>
+      )}
+      <motion.div variants={cardItem}>
         <div className="grid grid-cols-3 gap-4">
           <Heatmap cells={heatmap} loading={loading} />
           <div className="col-span-1">
             <UserTable users={topUsers} loading={loading} />
           </div>
         </div>
+      </motion.div>
+      <motion.div variants={cardItem}>
         <ViolatorTable users={violators} loading={loading} />
-    </div>
+      </motion.div>
+    </motion.div>
   );
 }

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

@@ -1,6 +1,7 @@
 import { Lock } from "lucide-react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { login } from "../../shared/api/client";
+import { useGsapTransition } from "../../shared/hooks/useGsapTransition";
 import {
   Button,
   Card,
@@ -10,6 +11,7 @@ import {
   CardTitle,
   Input,
 } from "../../shared/ui";
+import { ChibiMascot } from "../../widgets/mascot/ChibiMascot";
 
 interface AuthOverlayProps {
   onAuthenticated: () => void;
@@ -19,6 +21,11 @@ export function AuthOverlay({ onAuthenticated }: AuthOverlayProps) {
   const [password, setPassword] = useState("");
   const [error, setError] = useState<string | null>(null);
   const [loading, setLoading] = useState(false);
+  const { pageRef, animateIn } = useGsapTransition("auth");
+
+  useEffect(() => {
+    animateIn();
+  }, [animateIn]);
 
   const handleSubmit = async (e: { preventDefault: () => void }) => {
     e.preventDefault();
@@ -36,12 +43,15 @@ export function AuthOverlay({ onAuthenticated }: AuthOverlayProps) {
   };
 
   return (
-    <div className="flex items-center justify-center p-4">
+    <div ref={pageRef} className="flex items-center justify-center p-4">
-      <Card className="w-full max-w-md">
+      <Card className="w-full max-w-md border-primary/30 shadow-lg shadow-primary/10">
         <CardHeader className="text-center">
-          <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-primary/10 text-primary">
+          <div className="mx-auto mb-4 flex items-center justify-center gap-3">
+            <div className="flex h-12 w-12 items-center justify-center rounded-full bg-primary/10 text-primary">
               <Lock className="h-6 w-6" />
             </div>
+            <ChibiMascot variant="peeking" size="sm" />
+          </div>
           <CardTitle>Admin Access Required</CardTitle>
           <CardDescription>
             Enter the admin password to access Voice and Media controls.

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

@@ -1,5 +1,6 @@
 import type { ActiveSpeaker } from "../../../shared/api/client";
 import { Skeleton } from "../../../shared/ui";
+import { EmptyStateMascot } from "../../../widgets/mascot/ChibiMascot";
 
 interface ActiveSpeakersProps {
   speakers: ActiveSpeaker[];
@@ -8,9 +9,7 @@ interface ActiveSpeakersProps {
 export function ActiveSpeakers({ speakers }: ActiveSpeakersProps) {
   if (speakers.length === 0) {
     return (
-      <div className="rounded-xl border border-dashed border-border p-6 text-center text-sm text-muted-foreground">
+      <EmptyStateMascot variant="sleeping" message="No active speakers~" />
-        No active speakers.
-      </div>
     );
   }
 
@@ -22,16 +21,18 @@ export function ActiveSpeakers({ speakers }: ActiveSpeakersProps) {
         return (
           <div
             key={key}
-            className="flex items-center gap-3 rounded-xl border border-border bg-background/60 p-3"
+            className="flex items-center gap-3 rounded-xl border border-sky-200 bg-white p-3"
           >
             <img
               src={s.avatar}
               alt=""
-              className="h-8 w-8 rounded-full object-cover"
+              className="h-8 w-8 rounded-full object-cover ring-2 ring-[#7EC8E3]/40"
             />
             <div className="min-w-0">
               <div className="truncate text-sm font-medium">{s.username}</div>
-              <div className="text-xs text-emerald-300">Speaking</div>
+              <div className="text-xs font-medium text-emerald-700">
+                Speaking
+              </div>
             </div>
           </div>
         );

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

@@ -21,20 +21,21 @@ export function AudioVisualizer({ levels }: AudioVisualizerProps) {
     const barWidth = width / levels.length;
     const maxBarHeight = height * 0.85;
 
+    // Sky-blue to pink gradient
+    const gradient = ctx.createLinearGradient(0, 0, 0, height);
+    gradient.addColorStop(0, "#7EC8E3");
+    gradient.addColorStop(1, "#FFB7C5");
+
     for (let i = 0; i < levels.length; i++) {
       const level = levels[i];
       const barHeight = Math.min(maxBarHeight, level * maxBarHeight);
       const x = i * barWidth;
       const y = height - barHeight;
 
-      // Gradient color based on level
+      ctx.fillStyle = gradient;
-      const hue = 199 - level * 199;
-      const saturation = 89;
-      const lightness = 48 + level * 20;
-      ctx.fillStyle = `hsl(${hue}, ${saturation}%, ${lightness}%)`;
 
-      // Rounded bar
+      // More rounded bar
-      const radius = barWidth * 0.3;
+      const radius = barWidth * 0.4;
       ctx.beginPath();
       ctx.moveTo(x + radius, y);
       ctx.lineTo(x + barWidth - radius, y);
@@ -53,7 +54,7 @@ export function AudioVisualizer({ levels }: AudioVisualizerProps) {
         ref={canvasRef}
         width={512}
         height={128}
-        className="w-full rounded-xl bg-muted/30"
+        className="w-full rounded-xl bg-sky-50/30"
         style={{ height: "128px" }}
       />
     </div>

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

@@ -36,10 +36,10 @@ export function VoiceConnectionCard({
   onStreamingToggle,
 }: VoiceConnectionCardProps) {
   return (
-    <div className="rounded-2xl border border-border bg-card shadow-sm">
+    <div className="rounded-2xl border border-sky-200 bg-white shadow-md">
       <div className="p-6">
         <h3 className="flex items-center gap-2 text-lg font-semibold tracking-tight">
-          <Radio className="h-5 w-5" /> Voice Bridge
+          <Radio className="h-5 w-5 text-[#7EC8E3]" /> Voice Bridge
         </h3>
         <p className="mt-1 text-sm text-muted-foreground">
           Join a Discord voice channel, listen, and transmit audio.
@@ -47,7 +47,7 @@ export function VoiceConnectionCard({
 
         <div className="mt-4 grid gap-4 md:grid-cols-2">
           <div className="space-y-2">
-            <label className="text-sm font-medium">Guild</label>
+            <label className="text-sm font-medium text-foreground">Guild</label>
             <Select
               value={selectedGuild}
               onChange={(e) => onGuildChange(e.target.value)}
@@ -56,7 +56,7 @@ export function VoiceConnectionCard({
             />
           </div>
           <div className="space-y-2">
-            <label className="text-sm font-medium">Voice Channel</label>
+            <label className="text-sm font-medium text-foreground">Voice Channel</label>
             <Select
               value={selectedChannel}
               onChange={(e) => onChannelChange(e.target.value)}
@@ -73,6 +73,7 @@ export function VoiceConnectionCard({
           <Button
             disabled={!selectedGuild || !selectedChannel || voiceLoading}
             onClick={onJoin}
+            className="bg-[#7EC8E3] text-white hover:bg-[#7EC8E3]/80"
           >
             {status.connected ? "Reconnect" : "Join Voice"}
           </Button>
@@ -91,7 +92,7 @@ export function VoiceConnectionCard({
             {isListening ? "Stop Listening" : "Listen"}
           </Button>
           <Button
-            variant={isStreaming ? "destructive" : "default"}
+            variant={isStreaming ? "secondary" : "outline"}
             onClick={onStreamingToggle}
           >
             <Radio className="mr-1.5 h-4 w-4" />{" "}

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

@@ -1,5 +1,6 @@
 // ─── Live Panel — thin composition layer ────────────────────────────────────
 
+import { motion } from "framer-motion";
 import { Mic, MonitorUp, Music2 } from "lucide-react";
 import type {
   ActiveSpeaker,
@@ -8,6 +9,7 @@ import type {
   MediaState,
   VoiceStatus,
 } from "../../shared/api/client";
+import { cardItem, cardStagger } from "../../shared/hooks/useFramerStagger";
 import {
   Card,
   CardContent,
@@ -78,7 +80,13 @@ export function LivePanel({
   onVolumeChange,
 }: LivePanelProps) {
   return (
-    <div className="grid gap-6">
+    <motion.div
+      variants={cardStagger}
+      initial="initial"
+      animate="animate"
+      className="grid gap-6"
+    >
+      <motion.div variants={cardItem}>
         <VoiceConnectionCard
           guilds={guilds}
           voiceChannels={voiceChannels}
@@ -95,8 +103,12 @@ export function LivePanel({
           onListenToggle={onListenToggle}
           onStreamingToggle={onStreamingToggle}
         />
+      </motion.div>
 
-      <div className="grid gap-6 xl:grid-cols-[1fr_320px]">
+      <motion.div
+        variants={cardItem}
+        className="grid gap-6 xl:grid-cols-[1fr_320px]"
+      >
         <Card>
           <CardHeader className="pb-3">
             <CardTitle className="text-base">Live Audio</CardTitle>
@@ -113,10 +125,13 @@ export function LivePanel({
             <ActiveSpeakers speakers={activeSpeakers} />
           </CardContent>
         </Card>
-      </div>
+      </motion.div>
 
+      <motion.div variants={cardItem}>
         <NowPlaying current={mediaState.current} queue={mediaState.queue} />
+      </motion.div>
 
+      <motion.div variants={cardItem}>
         <Tabs defaultValue="music">
           <TabsList className="grid w-full grid-cols-3">
             <TabsTrigger value="music">
@@ -151,6 +166,7 @@ export function LivePanel({
             <RecordingsSubPanel />
           </TabsContent>
         </Tabs>
-    </div>
+      </motion.div>
+    </motion.div>
   );
 }