feat: localise Hub Settings and ModelBanner

Routes every string in the moderator pages through the dictionary and reworks the Settings status message so error vs success is tracked as a boolean rather than by sniffing English substrings. The Hub charts now read their fill and stroke colours from the active CSS theme tokens so recharts re-tints when the user toggles dark mode.

frontend/src/components/ModelBanner.tsx

@@ -1,25 +1,30 @@
 import { useEffect, useState } from "react";
 import { getModelInfo } from "../api/client";
+import { useI18n } from "../i18n/I18nContext";
 
 export function ModelBanner() {
+  const { t } = useI18n();
   const [banner, setBanner] = useState<string | null>(null);
 
   useEffect(() => {
+    const fallback = t.modelBanner.current("Meta-Feature Stacking", "0.805", "2.54");
     getModelInfo()
       .then((info) => {
-        const text =
-          (info as { display_banner?: string }).display_banner ??
-          (info.name?.includes("Meta-Feature Stacking")
-            ? "Currently using: Meta-Feature Stacking Model (F1: 0.805, Gap: 2.54%)"
-            : null);
-        setBanner(text);
+        const apiBanner = (info as { display_banner?: string }).display_banner;
+        if (apiBanner) {
+          setBanner(apiBanner);
+          return;
+        }
+        if (info.name?.includes("Meta-Feature Stacking")) {
+          setBanner(fallback);
+          return;
+        }
+        setBanner(null);
       })
       .catch(() => {
-        setBanner(
-          "Currently using: Meta-Feature Stacking Model (F1: 0.805, Gap: 2.54%)"
-        );
+        setBanner(fallback);
       });
-  }, []);
+  }, [t]);
 
   if (!banner) return null;
 

frontend/src/pages/HubPage.tsx

@@ -1,3 +1,4 @@
+import { useMemo } from "react";
 import {
   Bar,
   BarChart,
@@ -10,18 +11,39 @@ import {
   YAxis,
 } from "recharts";
 import { useApp } from "../context/AppContext";
+import { useTheme } from "../context/ThemeContext";
+import { useI18n } from "../i18n/I18nContext";
 
-const COLORS = ["#2ba640", "#ff4e45"];
+function cssVar(name: string, fallback: string): string {
+  if (typeof window === "undefined") return fallback;
+  return (
+    getComputedStyle(document.documentElement).getPropertyValue(name).trim() ||
+    fallback
+  );
+}
 
 export function HubPage() {
   const { hubHistory, threshold } = useApp();
+  const { theme } = useTheme();
+  const { t } = useI18n();
+
+  const colors = useMemo(
+    () => ({
+      safe: cssVar("--safe", "#2f8f3e"),
+      toxic: cssVar("--toxic", "#c2331f"),
+      accent: cssVar("--accent", "#d83d2c"),
+      muted: cssVar("--muted", "#6b6256"),
+    }),
+    [theme]
+  );
 
   const toxic = hubHistory.filter((h) => h.score >= threshold).length;
   const safe = hubHistory.length - toxic;
   const pieData = [
-    { name: "Safe", value: safe || 1 },
-    { name: "Toxic", value: toxic || 0 },
+    { name: t.hub.safe, value: safe || 1 },
+    { name: t.hub.toxic, value: toxic || 0 },
   ];
+  const pieColors = [colors.safe, colors.toxic];
 
   const barData = hubHistory.slice(0, 12).map((h, i) => ({
     name: `#${i + 1}`,
@@ -30,30 +52,30 @@ export function HubPage() {
 
   return (
     <div className="hub-page">
-      <h1>Moderator Hub</h1>
+      <h1>{t.hub.title}</h1>
       <div className="hub-cards">
         <div className="hub-stat">
-          <span className="stat-label">Threshold</span>
+          <span className="stat-label">{t.hub.threshold}</span>
           <span className="stat-value">{threshold.toFixed(2)}</span>
         </div>
         <div className="hub-stat">
-          <span className="stat-label">Events logged</span>
+          <span className="stat-label">{t.hub.eventsLogged}</span>
           <span className="stat-value">{hubHistory.length}</span>
         </div>
         <div className="hub-stat">
-          <span className="stat-label">Toxic (session)</span>
+          <span className="stat-label">{t.hub.toxicSession}</span>
           <span className="stat-value">{toxic}</span>
         </div>
       </div>
 
       <div className="hub-charts">
         <div className="chart-box">
-          <h2>Safe vs Toxic</h2>
+          <h2>{t.hub.safeVsToxic}</h2>
           <ResponsiveContainer width="100%" height={220}>
             <PieChart>
               <Pie data={pieData} dataKey="value" nameKey="name" cx="50%" cy="50%" outerRadius={80}>
                 {pieData.map((_, i) => (
-                  <Cell key={i} fill={COLORS[i % COLORS.length]} />
+                  <Cell key={i} fill={pieColors[i % pieColors.length]} />
                 ))}
               </Pie>
               <Tooltip />
@@ -61,33 +83,33 @@ export function HubPage() {
           </ResponsiveContainer>
         </div>
         <div className="chart-box">
-          <h2>Recent scores (%)</h2>
+          <h2>{t.hub.recentScores}</h2>
           <ResponsiveContainer width="100%" height={220}>
             <BarChart data={barData}>
-              <XAxis dataKey="name" stroke="#aaa" />
-              <YAxis stroke="#aaa" domain={[0, 100]} />
+              <XAxis dataKey="name" stroke={colors.muted} />
+              <YAxis stroke={colors.muted} domain={[0, 100]} />
               <Tooltip />
-              <Bar dataKey="score" fill="#3ea6ff" />
+              <Bar dataKey="score" fill={colors.accent} />
             </BarChart>
           </ResponsiveContainer>
         </div>
       </div>
 
       <div className="hub-table-wrap">
-        <h2>Recent actions</h2>
+        <h2>{t.hub.recentActions}</h2>
         <table className="hub-table">
           <thead>
             <tr>
-              <th>User</th>
-              <th>Comment</th>
-              <th>Score</th>
-              <th>Action</th>
+              <th>{t.hub.colUser}</th>
+              <th>{t.hub.colComment}</th>
+              <th>{t.hub.colScore}</th>
+              <th>{t.hub.colAction}</th>
             </tr>
           </thead>
           <tbody>
             {hubHistory.length === 0 ? (
               <tr>
-                <td colSpan={4}>Post comments on the Watch page to populate history.</td>
+                <td colSpan={4}>{t.hub.emptyHistory}</td>
               </tr>
             ) : (
               hubHistory.map((h, i) => (

frontend/src/pages/SettingsPage.tsx

@@ -1,17 +1,20 @@
 import { useEffect, useState } from "react";
 import { getModelInfo, getModelsStatus, predict, setModel } from "../api/client";
 import { useApp } from "../context/AppContext";
+import { useI18n } from "../i18n/I18nContext";
 import type { ModelStatusEntry } from "../types/api";
 
 export function SettingsPage() {
   const { threshold, setThreshold } = useApp();
+  const { t } = useI18n();
   const [modelStatus, setModelStatus] = useState<ModelStatusEntry[]>([]);
   const [active, setActive] = useState("");
-  const [testText, setTestText] = useState("You are an idiot");
+  const [testText, setTestText] = useState<string>(() => t.settings.defaultTestText);
   const [testResult, setTestResult] = useState<string | null>(null);
   const [testError, setTestError] = useState<string | null>(null);
   const [testing, setTesting] = useState(false);
   const [message, setMessage] = useState<string | null>(null);
+  const [messageIsError, setMessageIsError] = useState(false);
   const [switching, setSwitching] = useState(false);
 
   const loadStatus = () => {
@@ -20,11 +23,15 @@ export function SettingsPage() {
         setModelStatus(r.models);
         setActive(r.active);
       })
-      .catch(() => setMessage("Could not load model status"));
+      .catch(() => {
+        setMessage(t.settings.couldNotLoadStatus);
+        setMessageIsError(true);
+      });
   };
 
   useEffect(() => {
     loadStatus();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   useEffect(() => {
@@ -35,22 +42,26 @@ export function SettingsPage() {
   const switchModel = async (name: string) => {
     const entry = modelStatus.find((m) => m.name === name);
     if (entry && !entry.available) {
-      setMessage(entry.reason ?? "Model unavailable");
+      setMessage(entry.reason ?? "");
+      setMessageIsError(true);
       return;
     }
     setMessage(null);
+    setMessageIsError(false);
     setSwitching(true);
     try {
       await setModel(name);
       setActive(name);
-      setMessage(`Active model: ${name}`);
+      setMessage(t.settings.activeModelMsg(name));
+      setMessageIsError(false);
       const info = await getModelInfo();
       if (info.recommended_threshold != null) {
         setThreshold(info.recommended_threshold);
       }
       loadStatus();
     } catch (e) {
-      setMessage(e instanceof Error ? e.message : "Failed to switch model");
+      setMessage(e instanceof Error ? e.message : t.settings.failedSwitch);
+      setMessageIsError(true);
       loadStatus();
     } finally {
       setSwitching(false);
@@ -63,9 +74,14 @@ export function SettingsPage() {
     setTestError(null);
     try {
       const r = await predict(testText, threshold);
-      setTestResult(`${r.status} — ${Math.round(r.probability * 100)}% toxic`);
+      setTestResult(
+        t.settings.testResult(
+          r.is_toxic ? t.badges.toxic : t.badges.safe,
+          String(Math.round(r.probability * 100))
+        )
+      );
     } catch (e) {
-      setTestError(e instanceof Error ? e.message : "Analysis failed");
+      setTestError(e instanceof Error ? e.message : t.settings.analysisFailed);
     } finally {
       setTesting(false);
     }
@@ -73,22 +89,13 @@ export function SettingsPage() {
 
   return (
     <div className="settings-page">
-      <h1>Settings</h1>
+      <h1>{t.settings.title}</h1>
       <section className="settings-card">
-        <h2>Active model</h2>
-        <p className="production-model-note">
-          Default: <strong>Meta-Feature Stacking (Production)</strong> (F1 0.805, gap 2.54%).
-          Baselines: <strong>LR + TF-IDF</strong> (F1 0.758) and{" "}
-          <strong>Frozen Toxic-BERT</strong> (F1 0.790, gap 0.16%).
-        </p>
-        <p className="hint">
-          Production and frozen BERT need <code>uv sync --extra hf</code> (or Docker{" "}
-          <code>INSTALL_HF=1</code>). LR baseline uses joblib only. First transformer load may
-          download weights (~1 min).
-        </p>
-        {switching && (
-          <p className="hint">Switching model… production may take up to a minute on first load.</p>
-        )}
+        <h2>{t.settings.activeModel}</h2>
+        <p className="production-model-note">{t.settings.productionNote("0.805", "2.54")}</p>
+        <p className="production-model-note">{t.settings.baselinesNote("0.758", "0.790", "0.16")}</p>
+        <p className="hint">{t.settings.installHint}</p>
+        {switching && <p className="hint">{t.settings.switching}</p>}
         <div className="model-list">
           {modelStatus.map((m) => (
             <label
@@ -112,14 +119,14 @@ export function SettingsPage() {
           ))}
         </div>
         {message && (
-          <p className={message.includes("Failed") || message.includes("Install") ? "error-text" : "settings-msg"}>
+          <p className={messageIsError ? "error-text" : "settings-msg"}>
             {message}
           </p>
         )}
       </section>
 
       <section className="settings-card">
-        <h2>Toxicity threshold</h2>
+        <h2>{t.settings.thresholdTitle}</h2>
         <input
           type="range"
           min={0.1}
@@ -128,11 +135,13 @@ export function SettingsPage() {
           value={threshold}
           onChange={(e) => setThreshold(Number(e.target.value))}
         />
-        <p>{threshold.toFixed(2)} — comments at or above this probability are <strong>Toxic</strong>.</p>
+        <p>
+          {threshold.toFixed(2)} — {t.settings.thresholdNote}
+        </p>
       </section>
 
       <section className="settings-card">
-        <h2>Quick test</h2>
+        <h2>{t.settings.quickTest}</h2>
         <textarea value={testText} onChange={(e) => setTestText(e.target.value)} rows={2} />
         <button
           type="button"
@@ -140,7 +149,7 @@ export function SettingsPage() {
           disabled={testing || !testText.trim()}
           onClick={() => void runTest()}
         >
-          {testing ? "Analyzing…" : "Analyze"}
+          {testing ? t.settings.analyzing : t.settings.analyze}
         </button>
         {testResult && <p className="settings-msg">{testResult}</p>}
         {testError && <p className="error-text">{testError}</p>}