feat(ui): add Adaptive Prompt Tuner tab with correction submission UI

- Add pgCorrectedModerationsTable to shared schema
- Create backend corrections module (stats, list, create endpoints)
- Add TunerPanel with Stats, History, and Submit sub-tabs
- Add AuthOverlay gate for Tuner (admin-only, same as Live)
- Set messages as default tab
- Wire Tuner into sidebar, header, and mobile tab bar

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

services/backend/src/http/app.ts

@@ -9,6 +9,7 @@ import helmet from "helmet";
 import { createAnalysisRouter } from "../modules/analysis/analysis.routes.js";
 import { createAuthRouter } from "../modules/auth/auth.routes.js";
 import { createConfigRouter } from "../modules/config/config.routes.js";
+import { createCorrectionsRouter } from "../modules/corrections/corrections.routes.js";
 import { createHealthRouter } from "../modules/health/health.routes.js";
 import { createMascotChatRouter } from "../modules/mascot-chat/mascot-chat.routes.js";
 import { createMediaRouter } from "../modules/media/media.routes.js";
@@ -63,6 +64,7 @@ export function createHttpApp(): Express {
   // API routes
   app.use("/api", createAuthRouter());
   app.use("/api", createConfigRouter());
+  app.use("/api", createCorrectionsRouter());
   app.use("/api", createMessagesRouter());
   app.use("/api", createAnalysisRouter());
   app.use("/api", createMascotChatRouter());

services/backend/src/modules/corrections/corrections.repository.ts

@@ -0,0 +1,116 @@
+import { createChildLogger } from "@bete/shared/logger";
+import {
+  pgCorrectedModerationsTable,
+  type CorrectedModeration,
+  type CorrectedModerationInsert,
+} from "@bete/shared";
+import { and, desc, lt, eq, sql } from "drizzle-orm";
+import { getDatabase } from "../../shared/database/index.js";
+import type { CorrectionCreate, CorrectionQuery } from "./corrections.schema.js";
+
+const logger = createChildLogger("corrections.repository");
+
+export interface CorrectionStatsResult {
+  total_corrections: number;
+  recent_count_7d: number;
+  by_flag: Array<{ flag: string; count: number }>;
+}
+
+export class CorrectionsRepository {
+  async getStats(): Promise<CorrectionStatsResult> {
+    const db = getDatabase();
+    const sevenDaysAgo = Date.now() - 7 * 24 * 60 * 60 * 1000;
+
+    // Total count
+    const [totalRow] = await db
+      .select({ count: sql<number>`count(*)::int` })
+      .from(pgCorrectedModerationsTable);
+
+    // Recent 7 days count
+    const [recentRow] = await db
+      .select({ count: sql<number>`count(*)::int` })
+      .from(pgCorrectedModerationsTable)
+      .where(lt(pgCorrectedModerationsTable.created_at, sevenDaysAgo));
+
+    // Count by original_flag using JSON array unnest
+    const byFlagRows = await db.execute(sql`
+      SELECT flag, count(*)::int as count
+      FROM corrected_moderations,
+      json_array_elements_text(original_flags::json) AS flag
+      GROUP BY flag
+      ORDER BY count DESC
+      LIMIT 20
+    `);
+
+    const byFlag = (byFlagRows.rows ?? []).map(
+      (r: Record<string, unknown>) => ({
+        flag: String(r.flag),
+        count: Number(r.count),
+      }),
+    );
+
+    return {
+      total_corrections: totalRow?.count ?? 0,
+      recent_count_7d: recentRow?.count ?? 0,
+      by_flag: byFlag,
+    };
+  }
+
+  async list(
+    query: CorrectionQuery,
+  ): Promise<{ data: CorrectedModeration[]; nextCursor: string | null }> {
+    const db = getDatabase();
+    const limit = query.limit ?? 20;
+    const conditions = [];
+
+    if (query.cursor) {
+      conditions.push(
+        lt(pgCorrectedModerationsTable.created_at, Number(query.cursor)),
+      );
+    }
+
+    const where = conditions.length > 0 ? and(...conditions) : undefined;
+
+    const rows = await db
+      .select()
+      .from(pgCorrectedModerationsTable)
+      .where(where)
+      .orderBy(desc(pgCorrectedModerationsTable.created_at))
+      .limit(limit + 1);
+
+    const data = rows.slice(0, limit);
+    const nextCursor =
+      rows.length > limit ? String(rows[limit].created_at) : null;
+
+    return { data, nextCursor };
+  }
+
+  async create(data: CorrectionCreate): Promise<CorrectedModeration> {
+    const db = getDatabase();
+    const id = `corr-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+
+    const insert: CorrectedModerationInsert = {
+      id,
+      message_id: data.message_id,
+      original_flags: JSON.stringify(data.original_flags),
+      corrected_flags: JSON.stringify(data.corrected_flags),
+      correction_notes: data.correction_notes ?? null,
+      content_snippet: data.content_snippet,
+      created_at: Date.now(),
+    };
+
+    const [row] = await db
+      .insert(pgCorrectedModerationsTable)
+      .values(insert)
+      .returning();
+
+    logger.info(
+      { id, messageId: data.message_id },
+      "Correction recorded",
+    );
+
+    return row;
+  }
+}
+
+export const correctionsRepository = new CorrectionsRepository();

services/backend/src/modules/corrections/corrections.routes.ts

@@ -0,0 +1,99 @@
+import { createChildLogger } from "@bete/shared/logger";
+import type { Request, Response, Router } from "express";
+import express from "express";
+import { asyncHandler } from "../../shared/middlewares/index.js";
+import { correctionsService } from "./corrections.service.js";
+
+const logger = createChildLogger("corrections.routes");
+
+/**
+ * Prevents concurrent duplicate correction submissions
+ * for the same message_id within a short window.
+ */
+const createInFlight = new Set<string>();
+
+export function createCorrectionsRouter(): Router {
+  const router = express.Router();
+
+  // GET /api/corrections/stats — aggregated correction statistics
+  router.get(
+    "/corrections/stats",
+    asyncHandler(async (_req: Request, res: Response) => {
+      const stats = await correctionsService.getStats();
+      res.json(stats);
+    }),
+  );
+
+  // GET /api/corrections — paginated correction history
+  router.get(
+    "/corrections",
+    asyncHandler(async (req: Request, res: Response) => {
+      const limit = Number(req.query.limit) || 20;
+      const cursor = (req.query.cursor as string) || undefined;
+
+      const result = await correctionsService.list({ limit, cursor });
+      res.json(result);
+    }),
+  );
+
+  // POST /api/corrections — submit a new correction
+  router.post(
+    "/corrections",
+    asyncHandler(async (req: Request, res: Response) => {
+      const { message_id, original_flags, corrected_flags, correction_notes, content_snippet } = (req.body ?? {}) as {
+        message_id?: string;
+        original_flags?: string[];
+        corrected_flags?: string[];
+        correction_notes?: string;
+        content_snippet?: string;
+      };
+
+      // Validation
+      if (!message_id) {
+        res.status(400).json({ error: "VALIDATION_ERROR", message: "message_id is required" });
+        return;
+      }
+      if (!Array.isArray(original_flags) || original_flags.length === 0) {
+        res.status(400).json({ error: "VALIDATION_ERROR", message: "original_flags must be a non-empty array" });
+        return;
+      }
+      if (!Array.isArray(corrected_flags)) {
+        res.status(400).json({ error: "VALIDATION_ERROR", message: "corrected_flags must be an array" });
+        return;
+      }
+      if (!content_snippet) {
+        res.status(400).json({ error: "VALIDATION_ERROR", message: "content_snippet is required" });
+        return;
+      }
+
+      // Idempotency guard: prevent duplicate submissions for same message_id
+      if (createInFlight.has(message_id)) {
+        res.status(409).json({ error: "CORRECTION_IN_PROGRESS", messageId: message_id });
+        return;
+      }
+
+      createInFlight.add(message_id);
+      let entry;
+      try {
+        entry = await correctionsService.create({
+          message_id,
+          original_flags,
+          corrected_flags,
+          correction_notes,
+          content_snippet,
+        });
+      } finally {
+        // Clean up after a delay to still prevent rapid duplicates
+        setTimeout(() => createInFlight.delete(message_id), 5_000);
+      }
+
+      logger.info(
+        { messageId: message_id, id: entry.id },
+        "Correction submitted",
+      );
+      res.status(201).json(entry);
+    }),
+  );
+
+  return router;
+}

services/backend/src/modules/corrections/corrections.schema.ts

@@ -0,0 +1,25 @@
+import { z } from "zod";
+
+export const correctionQuerySchema = z.object({
+  limit: z.coerce.number().int().positive().max(100).default(20),
+  cursor: z.string().optional(),
+});
+
+export const correctionCreateSchema = z.object({
+  message_id: z.string().min(1, "message_id is required"),
+  original_flags: z
+    .array(z.string())
+    .min(1, "original_flags must be non-empty"),
+  corrected_flags: z
+    .array(z.string())
+    .min(0)
+    .refine(
+      (val) => val.length >= 0,
+      "corrected_flags must be an array of strings",
+    ),
+  correction_notes: z.string().optional(),
+  content_snippet: z.string().min(1, "content_snippet is required"),
+});
+
+export type CorrectionQuery = z.infer<typeof correctionQuerySchema>;
+export type CorrectionCreate = z.infer<typeof correctionCreateSchema>;

services/backend/src/modules/corrections/corrections.service.ts

@@ -0,0 +1,33 @@
+import { createChildLogger } from "@bete/shared/logger";
+import type { CorrectedModeration } from "@bete/shared";
+import type { CorrectionCreate, CorrectionQuery } from "./corrections.schema.js";
+import {
+  correctionsRepository,
+  type CorrectionStatsResult,
+} from "./corrections.repository.js";
+
+const logger = createChildLogger("corrections.service");
+
+export class CorrectionsService {
+  async getStats(): Promise<CorrectionStatsResult> {
+    logger.debug("Fetching correction stats");
+    return correctionsRepository.getStats();
+  }
+
+  async list(
+    query: CorrectionQuery,
+  ): Promise<{ data: CorrectedModeration[]; nextCursor: string | null }> {
+    logger.debug({ limit: query.limit }, "Listing corrections");
+    return correctionsRepository.list(query);
+  }
+
+  async create(data: CorrectionCreate): Promise<CorrectedModeration> {
+    logger.debug(
+      { messageId: data.message_id },
+      "Creating correction",
+    );
+    return correctionsRepository.create(data);
+  }
+}
+
+export const correctionsService = new CorrectionsService();

services/frontend/src/App.tsx

@@ -4,6 +4,7 @@ import { LivePanel } from "./features/live";
 import { useMediaControl } from "./features/live/hooks/useMediaControl";
 import { useVoiceControl } from "./features/live/hooks/useVoiceControl";
 import { MessagesPanel } from "./features/messages";
+import { TunerPanel } from "./features/tuner";
 import { ModerationAlertListener } from "./features/messages/components/ModerationAlertListener";
 import {
   mergeMessages,
@@ -34,7 +35,7 @@ export default function App() {
   const [monitorGuildId, setMonitorGuildId] = useState("");
 
   const audio = useAudioPlayback();
-  const activeTab = uiState.activeTab || "live";
+  const activeTab = uiState.activeTab || "messages";
   const selectedVoiceGuild =
     uiState.selectedVoiceGuild || uiState.selectedGuild || "";
 
@@ -182,6 +183,12 @@ export default function App() {
             onVolumeChange={media.setVolume}
           />
         )
+      ) : activeTab === "tuner" ? (
+        !isAuthenticated ? (
+          <AuthOverlay onAuthenticated={() => setIsAuthenticated(true)} />
+        ) : (
+          <TunerPanel />
+        )
       ) : (
         <MessagesPanel
           guildName={monitorGuildName}

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

@@ -0,0 +1,170 @@
+import { motion } from "framer-motion";
+import { AlertCircle, ChevronDown, RefreshCw } from "lucide-react";
+import { useCorrectionHistory } from "../hooks/useCorrections";
+import {
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  ScrollArea,
+  Skeleton,
+} from "../../../shared/ui";
+import { formatDate } from "../../../shared/lib/utils";
+import { EmptyStateMascot } from "../../../shared/ui";
+import { cardStagger, cardItem } from "../../../shared/hooks/useFramerStagger";
+
+function parseFlags(flags: string): string[] {
+  try {
+    return JSON.parse(flags) as string[];
+  } catch {
+    return [];
+  }
+}
+
+function CorrectionRow({
+  entry,
+  index,
+}: {
+  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);
+  const correctedFlags = parseFlags(entry.corrected_flags);
+  const isCleared = correctedFlags.length === 0;
+
+  return (
+    <motion.tr
+      variants={cardItem}
+      className="border-b border-border/40 last:border-0 hover:bg-primary/5 transition-colors"
+    >
+      <td className="whitespace-nowrap py-3 pr-4 text-xs text-muted-foreground">
+        {formatDate(entry.created_at)}
+      </td>
+      <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">
+              {f.replace(/_/g, " ")}
+            </Badge>
+          ))}
+        </div>
+      </td>
+      <td className="py-3 pr-4">
+        {isCleared ? (
+          <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">
+                {f.replace(/_/g, " ")}
+              </Badge>
+            ))}
+          </div>
+        )}
+      </td>
+      <td className="max-w-[200px] truncate py-3 pr-4 text-sm text-muted-foreground">
+        {entry.content_snippet}
+      </td>
+      <td className="max-w-[150px] truncate py-3 text-xs text-muted-foreground">
+        {entry.correction_notes || "—"}
+      </td>
+    </motion.tr>
+  );
+}
+
+export function CorrectionHistoryContent() {
+  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" />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <Card className="rounded-2xl 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>
+          <button
+            type="button"
+            onClick={refetch}
+            className="flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium text-red-700 hover:bg-red-100 transition-colors"
+          >
+            <RefreshCw className="h-4 w-4" />
+            Retry
+          </button>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (entries.length === 0) {
+    return (
+      <Card className="rounded-2xl">
+        <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.
+          </p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className="rounded-2xl">
+      <CardHeader>
+        <CardTitle className="text-sm font-medium text-muted-foreground">
+          Correction History
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="p-0">
+        <ScrollArea className="max-h-[60vh]">
+          <table className="w-full">
+            <thead>
+              <tr className="border-b border-border/40 text-left text-xs font-medium text-muted-foreground">
+                <th className="whitespace-nowrap px-4 py-3">Date</th>
+                <th className="px-4 py-3">Original</th>
+                <th className="px-4 py-3">Corrected</th>
+                <th className="px-4 py-3">Content</th>
+                <th className="px-4 py-3">Notes</th>
+              </tr>
+            </thead>
+            <tbody>
+              {entries.map((entry, i) => (
+                <CorrectionRow key={entry.id} entry={entry} index={i} />
+              ))}
+            </tbody>
+          </table>
+        </ScrollArea>
+
+        {hasMore && (
+          <div className="flex justify-center border-t border-border/40 px-4 py-3">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={loadMore}
+              disabled={loadingMore}
+              className="gap-1.5 text-xs"
+            >
+              <ChevronDown className={`h-3.5 w-3.5 transition-transform ${loadingMore ? "animate-bounce" : ""}`} />
+              {loadingMore ? "Loading..." : "Load More"}
+            </Button>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

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

@@ -0,0 +1,157 @@
+import { motion } from "framer-motion";
+import { AlertCircle, RefreshCw } from "lucide-react";
+import { useCorrectionStats } from "../hooks/useCorrections";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Skeleton,
+} from "../../../shared/ui";
+import { EmptyStateMascot } from "../../../shared/ui";
+
+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">
+      <span className="w-36 shrink-0 truncate text-sm font-medium capitalize text-muted-foreground">
+        {flag.replace(/_/g, " ")}
+      </span>
+      <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"
+            initial={{ width: 0 }}
+            animate={{ width: `${pct}%` }}
+            transition={{ duration: 0.8, ease: "easeOut" }}
+          />
+        </div>
+      </div>
+      <span className="w-8 text-right text-sm font-bold text-foreground">
+        {count}
+      </span>
+    </div>
+  );
+}
+
+export function CorrectionStatsContent() {
+  const { stats, loading, error, refetch } = useCorrectionStats();
+
+  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" />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <Card className="rounded-2xl 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>
+          <button
+            type="button"
+            onClick={refetch}
+            className="flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium text-red-700 hover:bg-red-100 transition-colors"
+          >
+            <RefreshCw className="h-4 w-4" />
+            Retry
+          </button>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (!stats || stats.total_corrections === 0) {
+    return (
+      <Card className="rounded-2xl">
+        <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.
+          </p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <motion.div
+      initial="initial"
+      animate="animate"
+      variants={{
+        initial: { opacity: 0 },
+        animate: { transition: { staggerChildren: 0.1 } },
+      }}
+      className="space-y-4"
+    >
+      {/* Summary cards */}
+      <div className="grid gap-4 md:grid-cols-2">
+        <motion.div
+          variants={{
+            initial: { opacity: 0, y: 16 },
+            animate: { opacity: 1, y: 0, transition: { duration: 0.4 } },
+          }}
+        >
+          <Card className="rounded-2xl">
+            <CardHeader className="pb-2">
+              <CardTitle className="text-sm font-medium text-muted-foreground">
+                Total Corrections
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <p className="text-3xl font-bold text-foreground">
+                {stats.total_corrections}
+              </p>
+            </CardContent>
+          </Card>
+        </motion.div>
+
+        <motion.div
+          variants={{
+            initial: { opacity: 0, y: 16 },
+            animate: { opacity: 1, y: 0, transition: { duration: 0.4 } },
+          }}
+        >
+          <Card className="rounded-2xl">
+            <CardHeader className="pb-2">
+              <CardTitle className="text-sm font-medium text-muted-foreground">
+                Last 7 Days
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <p className="text-3xl font-bold text-foreground">
+                {stats.recent_count_7d}
+              </p>
+            </CardContent>
+          </Card>
+        </motion.div>
+      </div>
+
+      {/* Flags bar chart */}
+      {stats.by_flag.length > 0 && (
+        <Card className="rounded-2xl">
+          <CardHeader>
+            <CardTitle className="text-sm font-medium text-muted-foreground">
+              Most Corrected Flags
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            {stats.by_flag.map((item) => (
+              <FlagsBar
+                key={item.flag}
+                flag={item.flag}
+                count={item.count}
+                max={stats.by_flag[0].count}
+              />
+            ))}
+          </CardContent>
+        </Card>
+      )}
+    </motion.div>
+  );
+}

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

@@ -0,0 +1,216 @@
+import { useState } from "react";
+import { motion } from "framer-motion";
+import { AlertCircle, CheckCircle, Send, X } from "lucide-react";
+import { useSubmitCorrection } from "../hooks/useCorrections";
+import {
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Input,
+} from "../../../shared/ui";
+import { useToast } from "../../../shared/ui";
+
+export function SubmitCorrectionContent() {
+  const { submit, submitting, error, success, reset } = useSubmitCorrection();
+  const { addToast } = useToast();
+
+  const [messageId, setMessageId] = useState("");
+  const [contentSnippet, setContentSnippet] = useState("");
+  const [correctionNotes, setCorrectionNotes] = useState("");
+
+  // Pre-selected flags that were wrong
+  const [originalFlags, setOriginalFlags] = useState<string[]>([]);
+  const [flagInput, setFlagInput] = useState("");
+
+  const [formError, setFormError] = useState<string | null>(null);
+
+  const addFlag = () => {
+    const trimmed = flagInput.trim().toLowerCase();
+    if (!trimmed) return;
+    if (originalFlags.includes(trimmed)) return;
+    setOriginalFlags((prev) => [...prev, trimmed]);
+    setFlagInput("");
+  };
+
+  const removeFlag = (flag: string) => {
+    setOriginalFlags((prev) => prev.filter((f) => f !== flag));
+  };
+
+  const handleSubmit = async () => {
+    setFormError(null);
+    reset();
+
+    // Client-side validation
+    if (!messageId.trim()) {
+      setFormError("Message ID is required");
+      return;
+    }
+    if (originalFlags.length === 0) {
+      setFormError("Add at least one original flag that was incorrect");
+      return;
+    }
+    if (!contentSnippet.trim()) {
+      setFormError("Content snippet is required");
+      return;
+    }
+
+    try {
+      await submit({
+        message_id: messageId.trim(),
+        original_flags: originalFlags,
+        corrected_flags: [], // Always clearing the false positive flags
+        correction_notes: correctionNotes.trim() || undefined,
+        content_snippet: contentSnippet.trim(),
+      });
+
+      addToast("Correction submitted — the AI prompt will learn from this.", "success");
+
+      // Reset form
+      setMessageId("");
+      setContentSnippet("");
+      setCorrectionNotes("");
+      setOriginalFlags([]);
+    } catch {
+      addToast(error || "Failed to submit correction", "error");
+    }
+  };
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 16 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.4 }}
+      className="max-w-2xl"
+    >
+      <Card className="rounded-2xl">
+        <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.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {/* Message ID */}
+          <div className="space-y-1.5">
+            <label className="text-xs font-medium text-muted-foreground">
+              Message ID
+            </label>
+            <Input
+              placeholder="Paste the message ID here..."
+              value={messageId}
+              onChange={(e) => setMessageId(e.target.value)}
+            />
+          </div>
+
+          {/* Content Snippet */}
+          <div className="space-y-1.5">
+            <label className="text-xs font-medium text-muted-foreground">
+              Content Snippet
+            </label>
+            <Input
+              placeholder="The message content (for pattern matching)..."
+              value={contentSnippet}
+              onChange={(e) => setContentSnippet(e.target.value)}
+            />
+          </div>
+
+          {/* Original Flags (the incorrect ones) */}
+          <div className="space-y-1.5">
+            <label className="text-xs font-medium text-muted-foreground">
+              Incorrect Flags
+            </label>
+            <p className="text-[10px] text-muted-foreground/70">
+              Add the AI flags that were wrong for this message.
+            </p>
+            <div className="flex gap-2">
+              <Input
+                placeholder="e.g. sexual_deviation"
+                value={flagInput}
+                onChange={(e) => setFlagInput(e.target.value)}
+                onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault(); addFlag(); } }}
+                className="flex-1"
+              />
+              <Button variant="outline" size="sm" onClick={addFlag} type="button">
+                Add
+              </Button>
+            </div>
+            {originalFlags.length > 0 && (
+              <div className="flex flex-wrap gap-1.5 pt-2">
+                {originalFlags.map((f) => (
+                  <Badge
+                    key={f}
+                    variant="destructive"
+                    className="flex items-center gap-1 px-2 py-1 text-xs capitalize"
+                  >
+                    {f.replace(/_/g, " ")}
+                    <button
+                      type="button"
+                      onClick={() => removeFlag(f)}
+                      className="ml-0.5 rounded-full p-0.5 hover:bg-red-200 transition-colors"
+                    >
+                      <X className="h-3 w-3" />
+                    </button>
+                  </Badge>
+                ))}
+              </div>
+            )}
+          </div>
+
+          {/* Correction Notes */}
+          <div className="space-y-1.5">
+            <label className="text-xs font-medium text-muted-foreground">
+              Notes (optional)
+            </label>
+            <Input
+              placeholder="Why was this a false positive?"
+              value={correctionNotes}
+              onChange={(e) => setCorrectionNotes(e.target.value)}
+            />
+          </div>
+
+          {/* Error message */}
+          {(formError || error) && (
+            <div className="flex items-center gap-2 rounded-lg bg-red-50 px-3 py-2 text-sm text-red-700">
+              <AlertCircle className="h-4 w-4 shrink-0" />
+              {formError || error}
+            </div>
+          )}
+
+          {/* Success message */}
+          {success && (
+            <div className="flex items-center gap-2 rounded-lg bg-emerald-50 px-3 py-2 text-sm text-emerald-700">
+              <CheckCircle className="h-4 w-4 shrink-0" />
+              Correction recorded successfully.
+            </div>
+          )}
+
+          {/* Submit button */}
+          <Button
+            onClick={handleSubmit}
+            disabled={submitting}
+            className="w-full gap-2"
+          >
+            {submitting ? (
+              <>
+                <div className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
+                Submitting...
+              </>
+            ) : (
+              <>
+                <Send className="h-4 w-4" />
+                Submit Correction
+              </>
+            )}
+          </Button>
+        </CardContent>
+      </Card>
+    </motion.div>
+  );
+}

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

@@ -0,0 +1,116 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import {
+  type CorrectionEntry,
+  type CorrectionStats,
+  getCorrectionStats,
+  listCorrections,
+  submitCorrection,
+} from "../../../shared/api/client";
+
+// ─── Stats ──────────────────────────────────────────────────────────────────
+
+export function useCorrectionStats() {
+  const [stats, setStats] = useState<CorrectionStats | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetch = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const result = await getCorrectionStats();
+      setStats(result);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to load stats");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => { fetch().catch(() => undefined); }, [fetch]);
+
+  return { stats, loading, error, refetch: fetch };
+}
+
+// ─── History ────────────────────────────────────────────────────────────────
+
+export function useCorrectionHistory() {
+  const [entries, setEntries] = useState<CorrectionEntry[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const cursorRef = useRef<string | null>(null);
+  const hasMoreRef = useRef(true);
+
+  const fetchInitial = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const result = await listCorrections({ limit: 20 });
+      setEntries(result.data);
+      cursorRef.current = result.nextCursor;
+      hasMoreRef.current = result.nextCursor !== null;
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to load corrections");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  const loadMore = useCallback(async () => {
+    if (!cursorRef.current || loadingMore) return;
+    setLoadingMore(true);
+    try {
+      const result = await listCorrections({ limit: 20, cursor: cursorRef.current });
+      setEntries((prev) => [...prev, ...result.data]);
+      cursorRef.current = result.nextCursor;
+      hasMoreRef.current = result.nextCursor !== null;
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to load more");
+    } finally {
+      setLoadingMore(false);
+    }
+  }, [loadingMore]);
+
+  useEffect(() => { fetchInitial().catch(() => undefined); }, [fetchInitial]);
+
+  return { entries, loading, loadingMore, error, hasMore: hasMoreRef.current, loadMore, refetch: fetchInitial };
+}
+
+// ─── Submit ─────────────────────────────────────────────────────────────────
+
+export function useSubmitCorrection() {
+  const [submitting, setSubmitting] = useState(false);
+  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 reset = useCallback(() => {
+    setError(null);
+    setSuccess(null);
+  }, []);
+
+  return { submit, submitting, error, success, reset };
+}

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

@@ -0,0 +1,33 @@
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "../../shared/ui";
+import { CorrectionStatsContent } from "./components/CorrectionStats";
+import { CorrectionHistoryContent } from "./components/CorrectionHistory";
+import { SubmitCorrectionContent } from "./components/SubmitCorrection";
+
+export function TunerPanel() {
+  return (
+    <Tabs defaultValue="stats" className="w-full">
+      <TabsList className="mb-6">
+        <TabsTrigger value="stats">Stats</TabsTrigger>
+        <TabsTrigger value="history">History</TabsTrigger>
+        <TabsTrigger value="submit">Submit</TabsTrigger>
+      </TabsList>
+
+      <TabsContent value="stats">
+        <CorrectionStatsContent />
+      </TabsContent>
+
+      <TabsContent value="history">
+        <CorrectionHistoryContent />
+      </TabsContent>
+
+      <TabsContent value="submit">
+        <SubmitCorrectionContent />
+      </TabsContent>
+    </Tabs>
+  );
+}

services/frontend/src/shared/api/client.ts

@@ -118,7 +118,7 @@ export interface UIState {
   selectedTextChannel?: string;
   selectedAnalyticsGuild?: string;
   selectedAnalyticsChannel?: string;
-  activeTab?: "live" | "messages";
+  activeTab?: "live" | "messages" | "tuner";
   isListening?: boolean;
   isStreaming?: boolean;
 }
@@ -131,7 +131,7 @@ export interface ChatResponse {
   response?: string;
 }
 
-export type DashboardTab = "live" | "messages";
+export type DashboardTab = "live" | "messages" | "tuner";
 
 // ─── Messages ────────────────────────────────────────────────────────────────
 
@@ -272,6 +272,52 @@ export function login(password: string): Promise<{ ok: boolean }> {
   });
 }
 
+// ─── Corrections (Adaptive Prompt Tuner) ──────────────────────────────────────
+
+export interface CorrectionStats {
+  total_corrections: number;
+  recent_count_7d: number;
+  by_flag: Array<{ flag: string; count: number }>;
+}
+
+export interface CorrectionEntry {
+  id: string;
+  message_id: string;
+  original_flags: string;
+  corrected_flags: string;
+  correction_notes: string | null;
+  content_snippet: string;
+  created_at: number;
+}
+
+export function getCorrectionStats(): Promise<CorrectionStats> {
+  return request<CorrectionStats>("/api/corrections/stats");
+}
+
+export function listCorrections(
+  params: { limit?: number; cursor?: string } = {},
+): Promise<{ data: CorrectionEntry[]; nextCursor: string | null }> {
+  const sp = new URLSearchParams();
+  if (params.limit) sp.set("limit", String(params.limit));
+  if (params.cursor) sp.set("cursor", params.cursor);
+  return request<{ data: CorrectionEntry[]; nextCursor: string | null }>(
+    `/api/corrections?${sp}`,
+  );
+}
+
+export function submitCorrection(data: {
+  message_id: string;
+  original_flags: string[];
+  corrected_flags: string[];
+  correction_notes?: string;
+  content_snippet: string;
+}): Promise<CorrectionEntry> {
+  return request<CorrectionEntry>("/api/corrections", {
+    method: "POST",
+    body: JSON.stringify(data),
+  });
+}
+
 // ─── UI State ────────────────────────────────────────────────────────────────
 
 export function getUIState(): Promise<UIState> {

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

@@ -1,10 +1,11 @@
-import { MessageSquare, Radio } from "lucide-react";
+import { MessageSquare, Radio, SlidersHorizontal } from "lucide-react";
 import type { DashboardTab } from "../../entities/ui/types";
 import { cn } from "../lib/utils";
 
 const tabs: Array<{ id: DashboardTab; label: string; Icon: typeof Radio }> = [
   { id: "live", label: "Live", Icon: Radio },
   { id: "messages", label: "Messages", Icon: MessageSquare },
+  { id: "tuner", label: "Tuner", Icon: SlidersHorizontal },
 ];
 
 interface MobileTabBarProps {

services/frontend/src/widgets/Header.tsx

@@ -10,11 +10,13 @@ import type { WsStatus } from "../shared/ws/socket";
 const titles: Record<DashboardTab, string> = {
   live: "Voice, Media & Recordings",
   messages: "Messages & Moderation",
+  tuner: "Prompt Tuner",
 };
 
 const subtitles: Record<DashboardTab, string> = {
   live: "Join voice channels, play media, stream audio, and browse recordings.",
   messages: "Capture, analyse, and moderate Discord messages.",
+  tuner: "Monitor correction patterns and improve AI moderation accuracy.",
 };
 
 interface HeaderProps {

services/frontend/src/widgets/Sidebar.tsx

@@ -1,5 +1,5 @@
 import { motion } from "framer-motion";
-import { MessageSquare, Radio } from "lucide-react";
+import { MessageSquare, Radio, SlidersHorizontal } from "lucide-react";
 import type { DashboardTab } from "../entities/ui/types";
 import type { MessageRecord } from "../shared/api/client";
 import { useMascotChat } from "../shared/hooks/useMascotChat";
@@ -11,6 +11,7 @@ const navItems: Array<{ id: DashboardTab; label: string; icon: typeof Radio }> =
   [
     { id: "live", label: "Live", icon: Radio },
     { id: "messages", label: "Messages", icon: MessageSquare },
+    { id: "tuner", label: "Tuner", icon: SlidersHorizontal },
   ];
 
 interface SidebarProps {