feat(ui): overhaul frontend with IMPHNEN visual identity

- Update CSS foundation: HSL→oklch color tokens, Poppins font, new utilities
- Replace Three.js sakura particles with CSS glow orbs
- Rebrand Header with IMPHNEN logo and gradient text
- Update all UI components (Button, Card, Badge, Input, Select, Tabs, Toast)
- Apply IMPHNEN design patterns (glass, gradient, grid) to layout
- Remove all hardcoded #7EC8E3/#FFB7C5/#FCA5A5 references
- Standardize rounded-xl across all components
- Replace emoji toasts with Lucide icons

Co-Authored-By: Claude <noreply@anthropic.com>

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

@@ -18,12 +18,12 @@ export function ActiveSpeakers({ speakers }: ActiveSpeakersProps) {
         return (
           <div
             key={key}
-            className="flex items-center gap-3 rounded-xl border border-sky-200 bg-white p-3"
+            className="flex items-center gap-3 rounded-xl border border-border bg-card p-3"
           >
             <img
               src={s.avatar}
               alt=""
-              className="h-8 w-8 rounded-full object-cover ring-2 ring-[#7EC8E3]/40"
+              className="h-8 w-8 rounded-full object-cover ring-2 ring-primary/30"
             />
             <div className="min-w-0">
               <div className="truncate text-sm font-medium">{s.username}</div>

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

@@ -21,10 +21,10 @@ export function AudioVisualizer({ levels }: AudioVisualizerProps) {
     const barWidth = width / levels.length;
     const maxBarHeight = height * 0.85;
 
-    // Sky-blue to pink gradient
+    // IMPHNEN blue gradient
     const gradient = ctx.createLinearGradient(0, 0, 0, height);
-    gradient.addColorStop(0, "#7EC8E3");
-    gradient.addColorStop(1, "#FFB7C5");
+    gradient.addColorStop(0, "#23a1eb");
+    gradient.addColorStop(1, "#3eb0f2");
 
     for (let i = 0; i < levels.length; i++) {
       const level = levels[i];
@@ -54,7 +54,7 @@ export function AudioVisualizer({ levels }: AudioVisualizerProps) {
         ref={canvasRef}
         width={512}
         height={128}
-        className="w-full rounded-xl bg-sky-50/30"
+        className="w-full rounded-lg bg-primary/5"
         style={{ height: "128px" }}
       />
     </div>

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

@@ -43,7 +43,7 @@ export function MusicSubPanel({
   };
 
   return (
-    <div className="rounded-2xl border border-sky-200 bg-white p-4 shadow-md space-y-4">
+    <div className="rounded-xl border border-border bg-card p-4 shadow-sm space-y-4">
       <Input
         value={source}
         onChange={(e) => setSource(e.target.value)}
@@ -51,7 +51,7 @@ export function MusicSubPanel({
         placeholder="YouTube URL, Spotify track, or search terms"
       />
       <div className="flex items-center gap-3">
-        <Volume2 className="h-4 w-4 shrink-0 text-[#7EC8E3]" />
+        <Volume2 className="h-4 w-4 shrink-0 text-primary" />
         <input
           type="range"
           min={0}
@@ -59,18 +59,14 @@ export function MusicSubPanel({
           step={1}
           value={draftVolume}
           onChange={(e) => setDraftVolume(Number(e.target.value))}
-          className="h-2 w-full cursor-pointer accent-[#7EC8E3]"
+          className="h-2 w-full cursor-pointer accent-primary"
         />
         <span className="w-10 shrink-0 text-right text-sm tabular-nums text-muted-foreground">
           {draftVolume}%
         </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 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/NowPlaying.tsx

@@ -11,10 +11,10 @@ export function NowPlaying({ current, queue }: NowPlayingProps) {
   if (!current) return null;
 
   return (
-    <div className="rounded-2xl border border-sky-200 bg-white shadow-md">
+    <div className="rounded-xl border border-border bg-card shadow-sm">
       <div className="p-4">
         <div className="flex items-center gap-3">
-          <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-[#7EC8E3]/15 text-[#7EC8E3]">
+          <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
             {current.mode === "screen" ? (
               <MonitorUp className="h-5 w-5" />
             ) : (
@@ -34,15 +34,15 @@ export function NowPlaying({ current, queue }: NowPlayingProps) {
       </div>
 
       {queue.length > 0 && (
-        <div className="border-t border-sky-100 p-4">
+        <div className="border-t border-border p-4">
           <div className="mb-2 text-sm font-medium">Queue ({queue.length})</div>
           <div className="space-y-1.5">
             {queue.map((item, i) => (
               <div
                 key={`${item.source}-${i}`}
-                className="flex items-center gap-3 rounded-lg border-l-2 border-l-[#7EC8E3] border border-sky-200 bg-white p-2.5 text-sm"
+                className="flex items-center gap-3 rounded-lg border-l-2 border-l-primary border-border bg-card p-2.5 text-sm"
               >
-                <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-[#7EC8E3]/15 text-xs font-medium text-[#7EC8E3]">
+                <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-primary/10 text-xs font-medium text-primary">
                   {i + 1}
                 </span>
                 <div className="min-w-0">

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

@@ -42,7 +42,7 @@ export function RecordingsSubPanel() {
         {[1, 2, 3].map((i) => (
           <div
             key={i}
-            className="flex items-center gap-4 rounded-xl border border-sky-200 bg-white p-4"
+            className="flex items-center gap-4 rounded-xl border border-border bg-card p-4"
           >
             <Skeleton className="h-10 w-10 rounded-xl" />
             <div className="flex-1 space-y-2">
@@ -83,7 +83,7 @@ export function RecordingsSubPanel() {
           key={rec.id}
           className="flex items-center gap-4 rounded-xl border border-sky-200 bg-white p-4"
         >
-          <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-[#7EC8E3]/15 text-[#7EC8E3]">
+          <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
             <Mic className="h-5 w-5" />
           </div>
           <div className="min-w-0 flex-1">
@@ -120,7 +120,7 @@ export function RecordingsSubPanel() {
                 href={rec.download_url}
                 target="_blank"
                 rel="noreferrer"
-                className="rounded-lg bg-[#7EC8E3] px-3 py-1.5 text-sm font-medium text-white hover:bg-[#7EC8E3]/80"
+                className="rounded-lg bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:bg-primary/90"
               >
                 <Download className="h-4 w-4" />
               </a>

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

@@ -24,7 +24,7 @@ export function ScreenSubPanel({
   };
 
   return (
-    <div className="rounded-2xl border border-sky-200 bg-white p-4 shadow-md space-y-4">
+    <div className="rounded-xl border border-border bg-card p-4 shadow-sm space-y-4">
       <Input
         value={source}
         onChange={(e) => setSource(e.target.value)}
@@ -32,11 +32,7 @@ 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 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

@@ -36,10 +36,10 @@ export function VoiceConnectionCard({
   onStreamingToggle,
 }: VoiceConnectionCardProps) {
   return (
-    <div className="rounded-2xl border border-sky-200 bg-white shadow-md">
+    <div className="rounded-xl border border-border bg-card shadow-sm">
       <div className="p-6">
         <h3 className="flex items-center gap-2 text-lg font-semibold tracking-tight">
-          <Radio className="h-5 w-5 text-[#7EC8E3]" /> Voice Bridge
+          <Radio className="h-5 w-5 text-primary" /> Voice Bridge
         </h3>
         <p className="mt-1 text-sm text-muted-foreground">
           Join a Discord voice channel, listen, and transmit audio.
@@ -75,7 +75,7 @@ export function VoiceConnectionCard({
           <Button
             disabled={!selectedGuild || !selectedChannel || voiceLoading}
             onClick={onJoin}
-            className="bg-[#7EC8E3] text-white hover:bg-[#7EC8E3]/80"
+            className="bg-primary text-primary-foreground hover:bg-primary/90"
           >
             {status.connected ? "Reconnect" : "Join Voice"}
           </Button>

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

@@ -12,7 +12,7 @@ interface ImageItem {
 function kindBadge(kind: ImageItem["kind"]): string {
   switch (kind) {
     case "sticker":
-      return "bg-pink-100 text-pink-700 border-pink-200";
+      return "bg-primary/10 text-primary border-primary/20";
     case "attachment":
       return "bg-primary-soft text-primary border-primary/30";
     case "embed":
@@ -82,7 +82,7 @@ export function ImageGrid({ messages }: { messages: MessageRecord[] }) {
             href={image.url}
             target="_blank"
             rel="noreferrer"
-            className="group overflow-hidden rounded-2xl border border-primary/20 bg-white shadow-sm transition-all hover:border-primary/40 hover:shadow-md"
+            className="group overflow-hidden rounded-xl border border-primary/20 bg-white shadow-sm transition-all hover:border-primary/40 hover:shadow-md"
           >
             <div className="relative aspect-video overflow-hidden">
               {image.kind === "sticker" ? (

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

@@ -376,8 +376,8 @@ export function MessageCard({ messages, onReanalyze }: MessageCardProps) {
 
   return (
     <article
-      className={`group rounded-2xl border bg-white shadow-sm transition-all hover:border-primary/30 hover:shadow-md ${
-        firstMsg.deleted_at ? "border-red-200 opacity-60" : "border-primary/20"
+      className={`group rounded-xl border bg-card shadow-sm transition-all hover:border-primary/30 hover:shadow-md ${
+        firstMsg.deleted_at ? "border-red-200 opacity-60" : "border-border"
       }`}
     >
       <div className="flex gap-3 p-4">
@@ -437,7 +437,7 @@ export function MessageCard({ messages, onReanalyze }: MessageCardProps) {
 
 export function MessageCardSkeleton() {
   return (
-    <article className="rounded-2xl border border-primary/20 bg-white p-4 shadow-sm">
+    <article className="rounded-xl border border-border bg-card p-4 shadow-sm">
       <div className="flex gap-3">
         <Skeleton className="h-10 w-10 shrink-0 rounded-full" />
         <div className="min-w-0 flex-1 space-y-3">

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

@@ -103,7 +103,7 @@ export function MessagesPanel({
       animate="animate"
     >
       <motion.div variants={cardItem}>
-        <Card className="border-primary/20">
+        <Card>
           <CardHeader>
             <CardTitle className="text-primary">Messages</CardTitle>
             {guildName && (
@@ -141,7 +141,7 @@ export function MessagesPanel({
           </Badge>
           <Badge
             variant="outline"
-            className="text-xs bg-pink-100 text-pink-700 border-pink-200"
+            className="text-xs bg-primary/10 text-primary border-primary/20"
           >
             {stats.flagged} flagged
           </Badge>
@@ -224,7 +224,7 @@ export function MessagesPanel({
                 setRetryingAll(false);
               }
             }}
-            className="rounded-xl bg-pink-100 text-pink-700 hover:bg-pink-200 border-pink-200"
+            className="rounded-xl bg-destructive/10 text-destructive hover:bg-destructive/20 border-destructive/20"
           >
             <RotateCw
               className={`mr-1.5 h-3.5 w-3.5 ${retryingAll ? "animate-spin" : ""}`}
@@ -248,7 +248,7 @@ export function MessagesPanel({
                 className={`rounded-full px-3 py-1 text-xs font-medium transition-all ${
                   aiFilter === f
                     ? "bg-primary text-primary-foreground shadow-sm"
-                    : "text-muted-foreground hover:text-foreground hover:bg-primary-soft"
+                    : "text-muted-foreground hover:text-foreground hover:bg-accent"
                 }`}
               >
                 {f}

services/frontend/src/features/tuner/components/CorrectionHistory.tsx

@@ -27,7 +27,14 @@ function CorrectionRow({
   entry,
   index,
 }: {
-  entry: { id: string; created_at: number; original_flags: string; corrected_flags: string; content_snippet: string; correction_notes: string | null };
+  entry: {
+    id: string;
+    created_at: number;
+    original_flags: string;
+    corrected_flags: string;
+    content_snippet: string;
+    correction_notes: string | null;
+  };
   index: number;
 }) {
   const originalFlags = parseFlags(entry.original_flags);
@@ -45,7 +52,11 @@ function CorrectionRow({
       <td className="py-3 pr-4">
         <div className="flex flex-wrap gap-1">
           {originalFlags.map((f) => (
-            <Badge key={f} variant="destructive" className="text-[10px] capitalize">
+            <Badge
+              key={f}
+              variant="destructive"
+              className="text-[10px] capitalize"
+            >
               {f.replace(/_/g, " ")}
             </Badge>
           ))}
@@ -53,13 +64,20 @@ function CorrectionRow({
       </td>
       <td className="py-3 pr-4">
         {isCleared ? (
-          <Badge variant="success" className="text-[10px] bg-emerald-100 text-emerald-800 border-emerald-200">
+          <Badge
+            variant="success"
+            className="text-[10px] bg-emerald-100 text-emerald-800 border-emerald-200"
+          >
             Cleared
           </Badge>
         ) : (
           <div className="flex flex-wrap gap-1">
             {correctedFlags.map((f) => (
-              <Badge key={f} variant="outline" className="text-[10px] capitalize">
+              <Badge
+                key={f}
+                variant="outline"
+                className="text-[10px] capitalize"
+              >
                 {f.replace(/_/g, " ")}
               </Badge>
             ))}
@@ -77,23 +95,24 @@ function CorrectionRow({
 }
 
 export function CorrectionHistoryContent() {
-  const { entries, loading, loadingMore, error, hasMore, loadMore, refetch } = useCorrectionHistory();
+  const { entries, loading, loadingMore, error, hasMore, loadMore, refetch } =
+    useCorrectionHistory();
 
   if (loading) {
     return (
       <div className="space-y-3">
-        <Skeleton className="h-12 rounded-2xl" />
-        <Skeleton className="h-12 rounded-2xl" />
-        <Skeleton className="h-12 rounded-2xl" />
-        <Skeleton className="h-12 rounded-2xl" />
-        <Skeleton className="h-12 rounded-2xl" />
+        <Skeleton className="h-12 rounded-xl" />
+        <Skeleton className="h-12 rounded-xl" />
+        <Skeleton className="h-12 rounded-xl" />
+        <Skeleton className="h-12 rounded-xl" />
+        <Skeleton className="h-12 rounded-xl" />
       </div>
     );
   }
 
   if (error) {
     return (
-      <Card className="rounded-2xl border-red-200 bg-red-50">
+      <Card className="rounded-xl border-red-200 bg-red-50">
         <CardContent className="flex items-center gap-3 py-6">
           <AlertCircle className="h-5 w-5 shrink-0 text-red-500" />
           <p className="flex-1 text-sm text-red-700">{error}</p>
@@ -112,11 +131,12 @@ export function CorrectionHistoryContent() {
 
   if (entries.length === 0) {
     return (
-      <Card className="rounded-2xl">
+      <Card className="rounded-xl">
         <CardContent className="flex flex-col items-center py-12">
           <EmptyStateMascot />
           <p className="mt-4 text-sm text-muted-foreground text-center max-w-md">
-            No corrections submitted yet. Use the Submit tab to record your first correction.
+            No corrections submitted yet. Use the Submit tab to record your
+            first correction.
           </p>
         </CardContent>
       </Card>
@@ -124,7 +144,7 @@ export function CorrectionHistoryContent() {
   }
 
   return (
-    <Card className="rounded-2xl">
+    <Card className="rounded-xl">
       <CardHeader>
         <CardTitle className="text-sm font-medium text-muted-foreground">
           Correction History
@@ -159,7 +179,9 @@ export function CorrectionHistoryContent() {
               disabled={loadingMore}
               className="gap-1.5 text-xs"
             >
-              <ChevronDown className={`h-3.5 w-3.5 transition-transform ${loadingMore ? "animate-bounce" : ""}`} />
+              <ChevronDown
+                className={`h-3.5 w-3.5 transition-transform ${loadingMore ? "animate-bounce" : ""}`}
+              />
               {loadingMore ? "Loading..." : "Load More"}
             </Button>
           </div>

services/frontend/src/features/tuner/components/CorrectionStats.tsx

@@ -10,7 +10,15 @@ import {
 } from "../../../shared/ui";
 import { EmptyStateMascot } from "../../../shared/ui";
 
-function FlagsBar({ flag, count, max }: { flag: string; count: number; max: number }) {
+function FlagsBar({
+  flag,
+  count,
+  max,
+}: {
+  flag: string;
+  count: number;
+  max: number;
+}) {
   const pct = max > 0 ? (count / max) * 100 : 0;
   return (
     <div className="flex items-center gap-3">
@@ -20,7 +28,7 @@ function FlagsBar({ flag, count, max }: { flag: string; count: number; max: numb
       <div className="flex-1">
         <div className="h-2.5 rounded-full bg-primary/10">
           <motion.div
-            className="h-2.5 rounded-full bg-gradient-to-r from-[#7EC8E3] to-pink-400"
+            className="h-2.5 rounded-full bg-gradient-to-r from-primary to-blue-400"
             initial={{ width: 0 }}
             animate={{ width: `${pct}%` }}
             transition={{ duration: 0.8, ease: "easeOut" }}
@@ -40,16 +48,16 @@ export function CorrectionStatsContent() {
   if (loading) {
     return (
       <div className="grid gap-4 md:grid-cols-3">
-        <Skeleton className="h-32 rounded-2xl" />
-        <Skeleton className="h-32 rounded-2xl" />
-        <Skeleton className="h-32 rounded-2xl" />
+        <Skeleton className="h-32 rounded-xl" />
+        <Skeleton className="h-32 rounded-xl" />
+        <Skeleton className="h-32 rounded-xl" />
       </div>
     );
   }
 
   if (error) {
     return (
-      <Card className="rounded-2xl border-red-200 bg-red-50">
+      <Card className="rounded-xl border-red-200 bg-red-50">
         <CardContent className="flex items-center gap-3 py-6">
           <AlertCircle className="h-5 w-5 shrink-0 text-red-500" />
           <p className="flex-1 text-sm text-red-700">{error}</p>
@@ -68,11 +76,12 @@ export function CorrectionStatsContent() {
 
   if (!stats || stats.total_corrections === 0) {
     return (
-      <Card className="rounded-2xl">
+      <Card className="rounded-xl">
         <CardContent className="flex flex-col items-center py-12">
           <EmptyStateMascot />
           <p className="mt-4 text-sm text-muted-foreground text-center max-w-md">
-            No corrections yet. When admins correct false positives, statistics will appear here.
+            No corrections yet. When admins correct false positives, statistics
+            will appear here.
           </p>
         </CardContent>
       </Card>
@@ -97,7 +106,7 @@ export function CorrectionStatsContent() {
             animate: { opacity: 1, y: 0, transition: { duration: 0.4 } },
           }}
         >
-          <Card className="rounded-2xl">
+          <Card className="rounded-xl">
             <CardHeader className="pb-2">
               <CardTitle className="text-sm font-medium text-muted-foreground">
                 Total Corrections
@@ -117,7 +126,7 @@ export function CorrectionStatsContent() {
             animate: { opacity: 1, y: 0, transition: { duration: 0.4 } },
           }}
         >
-          <Card className="rounded-2xl">
+          <Card className="rounded-xl">
             <CardHeader className="pb-2">
               <CardTitle className="text-sm font-medium text-muted-foreground">
                 Last 7 Days
@@ -134,7 +143,7 @@ export function CorrectionStatsContent() {
 
       {/* Flags bar chart */}
       {stats.by_flag.length > 0 && (
-        <Card className="rounded-2xl">
+        <Card className="rounded-xl">
           <CardHeader>
             <CardTitle className="text-sm font-medium text-muted-foreground">
               Most Corrected Flags

services/frontend/src/features/tuner/components/SubmitCorrection.tsx

@@ -67,7 +67,10 @@ export function SubmitCorrectionContent() {
         content_snippet: contentSnippet.trim(),
       });
 
-      addToast("Correction submitted — the AI prompt will learn from this.", "success");
+      addToast(
+        "Correction submitted — the AI prompt will learn from this.",
+        "success",
+      );
 
       // Reset form
       setMessageId("");
@@ -86,14 +89,14 @@ export function SubmitCorrectionContent() {
       transition={{ duration: 0.4 }}
       className="max-w-2xl"
     >
-      <Card className="rounded-2xl">
+      <Card className="rounded-xl">
         <CardHeader>
           <CardTitle className="text-sm font-medium text-muted-foreground">
             Submit Correction
           </CardTitle>
           <CardDescription className="text-xs">
-            Record a false positive — a message that was incorrectly flagged by AI moderation.
-            This helps the system learn and improve accuracy.
+            Record a false positive — a message that was incorrectly flagged by
+            AI moderation. This helps the system learn and improve accuracy.
           </CardDescription>
         </CardHeader>
         <CardContent className="space-y-4">
@@ -134,10 +137,20 @@ export function SubmitCorrectionContent() {
                 placeholder="e.g. sexual_deviation"
                 value={flagInput}
                 onChange={(e) => setFlagInput(e.target.value)}
-                onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault(); addFlag(); } }}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") {
+                    e.preventDefault();
+                    addFlag();
+                  }
+                }}
                 className="flex-1"
               />
-              <Button variant="outline" size="sm" onClick={addFlag} type="button">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={addFlag}
+                type="button"
+              >
                 Add
               </Button>
             </div>

services/frontend/src/features/tuner/hooks/useCorrections.ts

@@ -27,7 +27,9 @@ export function useCorrectionStats() {
     }
   }, []);
 
-  useEffect(() => { fetch().catch(() => undefined); }, [fetch]);
+  useEffect(() => {
+    fetch().catch(() => undefined);
+  }, [fetch]);
 
   return { stats, loading, error, refetch: fetch };
 }
@@ -51,7 +53,9 @@ export function useCorrectionHistory() {
       cursorRef.current = result.nextCursor;
       hasMoreRef.current = result.nextCursor !== null;
     } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to load corrections");
+      setError(
+        err instanceof Error ? err.message : "Failed to load corrections",
+      );
     } finally {
       setLoading(false);
     }
@@ -61,7 +65,10 @@ export function useCorrectionHistory() {
     if (!cursorRef.current || loadingMore) return;
     setLoadingMore(true);
     try {
-      const result = await listCorrections({ limit: 20, cursor: cursorRef.current });
+      const result = await listCorrections({
+        limit: 20,
+        cursor: cursorRef.current,
+      });
       setEntries((prev) => [...prev, ...result.data]);
       cursorRef.current = result.nextCursor;
       hasMoreRef.current = result.nextCursor !== null;
@@ -72,9 +79,19 @@ export function useCorrectionHistory() {
     }
   }, [loadingMore]);
 
-  useEffect(() => { fetchInitial().catch(() => undefined); }, [fetchInitial]);
+  useEffect(() => {
+    fetchInitial().catch(() => undefined);
+  }, [fetchInitial]);
 
-  return { entries, loading, loadingMore, error, hasMore: hasMoreRef.current, loadMore, refetch: fetchInitial };
+  return {
+    entries,
+    loading,
+    loadingMore,
+    error,
+    hasMore: hasMoreRef.current,
+    loadMore,
+    refetch: fetchInitial,
+  };
 }
 
 // ─── Submit ─────────────────────────────────────────────────────────────────
@@ -84,28 +101,32 @@ export function useSubmitCorrection() {
   const [error, setError] = useState<string | null>(null);
   const [success, setSuccess] = useState<CorrectionEntry | null>(null);
 
-  const submit = useCallback(async (data: {
-    message_id: string;
-    original_flags: string[];
-    corrected_flags: string[];
-    correction_notes?: string;
-    content_snippet: string;
-  }) => {
-    setSubmitting(true);
-    setError(null);
-    setSuccess(null);
-    try {
-      const result = await submitCorrection(data);
-      setSuccess(result);
-      return result;
-    } catch (err) {
-      const msg = err instanceof Error ? err.message : "Failed to submit correction";
-      setError(msg);
-      throw err;
-    } finally {
-      setSubmitting(false);
-    }
-  }, []);
+  const submit = useCallback(
+    async (data: {
+      message_id: string;
+      original_flags: string[];
+      corrected_flags: string[];
+      correction_notes?: string;
+      content_snippet: string;
+    }) => {
+      setSubmitting(true);
+      setError(null);
+      setSuccess(null);
+      try {
+        const result = await submitCorrection(data);
+        setSuccess(result);
+        return result;
+      } catch (err) {
+        const msg =
+          err instanceof Error ? err.message : "Failed to submit correction";
+        setError(msg);
+        throw err;
+      } finally {
+        setSubmitting(false);
+      }
+    },
+    [],
+  );
 
   const reset = useCallback(() => {
     setError(null);

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

@@ -1,9 +1,4 @@
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "../../shared/ui";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../shared/ui";
 import { CorrectionStatsContent } from "./components/CorrectionStats";
 import { CorrectionHistoryContent } from "./components/CorrectionHistory";
 import { SubmitCorrectionContent } from "./components/SubmitCorrection";