- thinking
+ {" "}
+ {ui("thinking")}{" "}
{m.thinkingContent}
@@ -397,11 +545,13 @@ function MessageCard({ m }: { m: Message }) {
export default function ChatAdminPage() {
return (
-
-
+
);
diff --git a/apps/web/src/app/(dashboard)/admin/dns-config-panel.tsx b/apps/web/src/app/(dashboard)/admin/dns-config-panel.tsx
index 655d65f7..474c21af 100644
--- a/apps/web/src/app/(dashboard)/admin/dns-config-panel.tsx
+++ b/apps/web/src/app/(dashboard)/admin/dns-config-panel.tsx
@@ -1,7 +1,18 @@
"use client";
+import { useUiText } from "@/i18n/use-ui-text";
import { useEffect, useState } from "react";
-import { Globe, Loader2, CheckCircle2, AlertCircle, Sparkles, Trash2, KeyRound, ChevronDown, ChevronRight } from "lucide-react";
+import {
+ Globe,
+ Loader2,
+ CheckCircle2,
+ AlertCircle,
+ Sparkles,
+ Trash2,
+ KeyRound,
+ ChevronDown,
+ ChevronRight,
+} from "lucide-react";
import { apiFetch } from "@/lib/api";
interface CfTokenStatus {
@@ -64,11 +75,16 @@ interface AutoWildcardResponse {
function planLabel(plan: string): string {
switch (plan) {
- case "free": return "Free";
- case "pro": return "Pro";
- case "business": return "Business";
- case "enterprise": return "Enterprise";
- default: return "Unknown";
+ case "free":
+ return "Free";
+ case "pro":
+ return "Pro";
+ case "business":
+ return "Business";
+ case "enterprise":
+ return "Enterprise";
+ default:
+ return "Unknown";
}
}
@@ -87,6 +103,8 @@ function validateWildcard(hostname: string, zoneName: string): string | null {
}
export function DnsConfigPanel() {
+ const ui = useUiText();
+
const [mode, setMode] = useState("per_publish");
const [defaulted, setDefaulted] = useState(true);
const [loading, setLoading] = useState(true);
@@ -97,7 +115,8 @@ export function DnsConfigPanel() {
const [diagnostics, setDiagnostics] = useState(null);
const [diagnosticsError, setDiagnosticsError] = useState(null);
const [autoSetupRunning, setAutoSetupRunning] = useState(false);
- const [autoSetupResult, setAutoSetupResult] = useState(null);
+ const [autoSetupResult, setAutoSetupResult] =
+ useState(null);
// Custom-wildcard inputs (US-002).
const [wildcardHostname, setWildcardHostname] = useState("");
@@ -108,7 +127,9 @@ export function DnsConfigPanel() {
const [deleting, setDeleting] = useState(null);
// Optional CF token override (R5).
- const [cfTokenStatus, setCfTokenStatus] = useState(null);
+ const [cfTokenStatus, setCfTokenStatus] = useState(
+ null,
+ );
const [tokenSectionOpen, setTokenSectionOpen] = useState(false);
const [pastedToken, setPastedToken] = useState("");
const [tokenSaving, setTokenSaving] = useState(false);
@@ -128,7 +149,11 @@ export function DnsConfigPanel() {
setMode(modeRes.value.mode);
setDefaulted(modeRes.value.defaulted);
} else {
- setError(modeRes.reason instanceof Error ? modeRes.reason.message : "Failed to load DNS config");
+ setError(
+ modeRes.reason instanceof Error
+ ? modeRes.reason.message
+ : ui("Failed to load DNS config"),
+ );
}
if (diagRes.status === "fulfilled") {
setDiagnostics(diagRes.value);
@@ -137,10 +162,15 @@ export function DnsConfigPanel() {
// otherwise fall back to the server-recommended *.${DOABLE_DOMAIN}
// so first-time users on free + apex still get a one-click experience.
setWildcardHostname(
- diagRes.value.configuredWildcard ?? diagRes.value.recommendedWildcard,
+ diagRes.value.configuredWildcard ??
+ diagRes.value.recommendedWildcard,
);
} else {
- setDiagnosticsError(diagRes.reason instanceof Error ? diagRes.reason.message : "Failed to load DNS diagnostics");
+ setDiagnosticsError(
+ diagRes.reason instanceof Error
+ ? diagRes.reason.message
+ : ui("Failed to load DNS diagnostics"),
+ );
}
if (tokenRes.status === "fulfilled") {
setCfTokenStatus(tokenRes.value);
@@ -152,8 +182,10 @@ export function DnsConfigPanel() {
if (!cancelled) setLoading(false);
}
})();
- return () => { cancelled = true; };
- }, []);
+ return () => {
+ cancelled = true;
+ };
+ }, [ui]);
async function refreshTokenStatus() {
try {
@@ -178,7 +210,9 @@ export function DnsConfigPanel() {
setPastedToken("");
await Promise.all([refreshTokenStatus(), refreshDiagnostics()]);
} catch (err) {
- setTokenError(err instanceof Error ? err.message : "Failed to save token");
+ setTokenError(
+ err instanceof Error ? err.message : ui("Failed to save token"),
+ );
} finally {
setTokenSaving(false);
}
@@ -191,7 +225,9 @@ export function DnsConfigPanel() {
await apiFetch("/admin/dns-mode/cf-token", { method: "DELETE" });
await Promise.all([refreshTokenStatus(), refreshDiagnostics()]);
} catch (err) {
- setTokenError(err instanceof Error ? err.message : "Failed to remove token");
+ setTokenError(
+ err instanceof Error ? err.message : ui("Failed to remove token"),
+ );
} finally {
setTokenSaving(false);
}
@@ -211,7 +247,8 @@ export function DnsConfigPanel() {
if (autoSetupRunning || saving) return false;
if (hostnameError) return false;
if (diagnostics.canAutoSetup) return true;
- if (diagnostics.reason === "free-plan-multilevel" && acmOverride) return true;
+ if (diagnostics.reason === "free-plan-multilevel" && acmOverride)
+ return true;
return false;
})();
@@ -230,7 +267,7 @@ export function DnsConfigPanel() {
setSavedAt(Date.now());
} catch (err) {
setMode(previous);
- setError(err instanceof Error ? err.message : "Failed to save");
+ setError(err instanceof Error ? err.message : ui("Failed to save"));
} finally {
setSaving(false);
}
@@ -238,10 +275,16 @@ export function DnsConfigPanel() {
async function refreshDiagnostics() {
try {
- const fresh = await apiFetch("/admin/dns-mode/diagnostics");
+ const fresh = await apiFetch(
+ "/admin/dns-mode/diagnostics",
+ );
setDiagnostics(fresh);
} catch (err) {
- setDiagnosticsError(err instanceof Error ? err.message : "Failed to refresh diagnostics");
+ setDiagnosticsError(
+ err instanceof Error
+ ? err.message
+ : ui("Failed to refresh diagnostics"),
+ );
}
}
@@ -255,10 +298,13 @@ export function DnsConfigPanel() {
if (wildcardHostname) body.wildcardHostname = wildcardHostname;
if (acmOverride) body.acmOverride = true;
- const res = await apiFetch("/admin/dns-mode/auto-wildcard", {
- method: "POST",
- body: JSON.stringify(body),
- });
+ const res = await apiFetch(
+ "/admin/dns-mode/auto-wildcard",
+ {
+ method: "POST",
+ body: JSON.stringify(body),
+ },
+ );
setAutoSetupResult(res);
setMode("wildcard");
setDefaulted(false);
@@ -284,7 +330,11 @@ export function DnsConfigPanel() {
await refreshDiagnostics();
setConfirmingDelete(null);
} catch (err) {
- setError(err instanceof Error ? err.message : `Failed to delete ${hostname}`);
+ setError(
+ err instanceof Error
+ ? err.message
+ : ui("Failed to delete {v0}", { v0: hostname }),
+ );
} finally {
setDeleting(null);
}
@@ -306,15 +356,22 @@ export function DnsConfigPanel() {
-
DNS for Published Sites
+
+ {ui("DNS for Published Sites")}
+
- Each publish either gets its own Cloudflare CNAME, or rides on a wildcard CNAME we set up for you.
+ {" "}
+ {ui(
+ "Each publish either gets its own Cloudflare CNAME, or rides on a wildcard CNAME we set up for you.",
+ )}{" "}
- {saving &&
}
+ {saving && (
+
+ )}
{savedAt && !saving && !error && (
-
)}
@@ -322,9 +379,13 @@ export function DnsConfigPanel() {
{diagnostics && (
- Zone:
- {diagnostics.zoneName || "—"}
- {planLabel(diagnostics.plan)}
+ {ui("Zone:")}
+
+ {diagnostics.zoneName || "—"}
+
+
+ {planLabel(diagnostics.plan)}
+
{diagnostics.acmStatus === "enabled"
- ? "ACM enabled"
+ ? ui("ACM enabled")
: diagnostics.acmStatus === "absent"
- ? "No ACM"
- : "ACM status unknown"}
+ ? ui("No ACM")
+ : ui("ACM status unknown")}
- Publish domain:
- {diagnostics.publishDomain || "—"}
+
+ {ui("Publish domain:")}
+
+
+ {diagnostics.publishDomain || "—"}
+
{diagnostics.existingWildcard && (
{diagnostics.existingWildcard.hostname}
+
+ {diagnostics.existingWildcard.hostname}
+
{" → "}
- {diagnostics.existingWildcard.target}
+
+ {diagnostics.existingWildcard.target}
+
)}
@@ -361,7 +432,8 @@ export function DnsConfigPanel() {
{diagnosticsError && (
- Could not load Cloudflare zone diagnostics: {diagnosticsError}
+ {" "}
+ {ui("Could not load Cloudflare zone diagnostics:")} {diagnosticsError}
)}
@@ -376,15 +448,30 @@ export function DnsConfigPanel() {
}`}
>
- Per-publish CNAME
- Default
+
+ {ui("Per-publish CNAME")}
+
+
+ {ui("Default")}
+
- Every publish calls the Cloudflare API to create one CNAME per subdomain.
- Lets multiple doable servers coexist under the same zone using
- {" "}{`-.${zoneName}`} hostnames covered by Universal SSL.
- Requires CF_API_TOKEN, CF_ZONE_ID, and CLOUDFLARED_TUNNEL_ID.
+ {" "}
+ {ui(
+ "Every publish calls the Cloudflare API to create one CNAME per subdomain. Lets multiple doable servers coexist under the same zone using",
+ )}{" "}
+ {`-.${zoneName}`} {" "}
+ {ui("hostnames covered by Universal SSL. Requires")}{" "}
+ CF_API_TOKEN,{" "}
+ CF_ZONE_ID
+ {ui(", and")}{" "}
+ CLOUDFLARED_TUNNEL_ID.
@@ -396,35 +483,56 @@ export function DnsConfigPanel() {
}`}
>
- Wildcard CNAME (auto-configured)
+
+ {ui("Wildcard CNAME (auto-configured)")}
+
- Skip the per-publish API call — all publishes resolve via one wildcard CNAME pointing to your tunnel.
- We'll create the record on your zone with the Cloudflare token from{" "}
+ {" "}
+ {ui(
+ "Skip the per-publish API call — all publishes resolve via one wildcard CNAME pointing to your tunnel. We'll create the record on your zone with the Cloudflare token from",
+ )}{" "}
cloudflared tunnel login.
- Free plan + apex: {" "}
- *.{zoneName} works out of the box (Universal SSL).
+ {ui("Free plan + apex:")} {" "}
+ *.{zoneName}{" "}
+ {ui("works out of the box (Universal SSL).")}{" "}
- Free plan + multi-level: {" "}
- *.<sub>.{zoneName} needs Advanced Certificate Manager.
+
+ {ui("Free plan + multi-level:")}
+ {" "}
+ *.<sub>.{zoneName}{" "}
+ {ui("needs Advanced Certificate Manager.")}{" "}
- Paid ACM: pick any{" "}
- *.<anything>.{zoneName} and tick the override below if our token can't see your ACM packs.
+ {ui("Paid ACM:")} {" "}
+ {ui("pick any")}{" "}
+ *.<anything>.{zoneName}{" "}
+ {ui(
+ "and tick the override below if our token can't see your ACM packs.",
+ )}{" "}
-
Wildcard hostname
+
+ {ui("Wildcard hostname")}
+
setWildcardHostname(e.target.value.toLowerCase().trim())}
+ onChange={(e) =>
+ setWildcardHostname(e.target.value.toLowerCase().trim())
+ }
placeholder={`*.${zoneName}`}
disabled={autoSetupRunning}
className="mb-1 w-full rounded-md border border-border bg-background px-2 py-1 font-mono text-[11px] text-foreground focus:border-blue-500 focus:outline-none disabled:opacity-50"
@@ -443,9 +551,12 @@ export function DnsConfigPanel() {
className="mt-0.5 h-3.5 w-3.5"
/>
- I have Advanced Certificate Manager on this zone.
- Auto-detection can't read ACM status with the tunnel OAuth token, so tick this if you've already
- enabled ACM and want to create a multi-level wildcard.
+
+ {ui("I have Advanced Certificate Manager")}
+ {" "}
+ {ui(
+ "on this zone. Auto-detection can't read ACM status with the tunnel OAuth token, so tick this if you've already enabled ACM and want to create a multi-level wildcard.",
+ )}{" "}
)}
@@ -456,49 +567,71 @@ export function DnsConfigPanel() {
disabled={!buttonEnabled}
className="inline-flex items-center gap-1.5 rounded-md border border-blue-500 bg-blue-500/10 px-2.5 py-1 text-[11px] font-medium text-blue-300 hover:bg-blue-500/20 disabled:cursor-not-allowed disabled:border-border disabled:bg-secondary disabled:text-muted-foreground"
>
- {autoSetupRunning ?
:
}
+ {autoSetupRunning ? (
+
+ ) : (
+
+ )}
{autoSetupRunning
- ? "Configuring…"
+ ? ui("Configuring…")
: mode === "wildcard" && diagnostics?.existingWildcard
- ? "Re-verify wildcard"
- : "Auto-configure wildcard"}
+ ? ui("Re-verify wildcard")
+ : ui("Auto-configure wildcard")}
- {diagnostics && !diagnostics.canAutoSetup && !(isFreePlanMultilevel && acmOverride) && (
-
- {diagnostics.message}
-
- )}
+ {diagnostics &&
+ !diagnostics.canAutoSetup &&
+ !(isFreePlanMultilevel && acmOverride) && (
+
+ {diagnostics.message}
+
+ )}
{autoSetupResult && (
- {autoSetupResult.created ? "Created" : autoSetupResult.updated ? "Updated" : "Confirmed"}
- {" "}{autoSetupResult.wildcardHostname} → {autoSetupResult.target}
- {autoSetupResult.acmOverrideApplied && " (ACM override applied)"}
+ {autoSetupResult.created
+ ? ui("Created")
+ : autoSetupResult.updated
+ ? ui("Updated")
+ : ui("Confirmed")}{" "}
+
+ {autoSetupResult.wildcardHostname}
+ {" "}
+ → {autoSetupResult.target}
+ {autoSetupResult.acmOverrideApplied &&
+ " (ACM override applied)"}
)}
- {mode === "wildcard" && diagnostics && diagnostics.allWildcards.length === 0 && (
-
-
-
- No wildcard CNAME currently active on this zone. {" "}
- Publishes will fail until you auto-configure one above, or switch back to per-publish mode.
-
-
-
+
+
+
+ {ui("No wildcard CNAME currently active on this zone.")}
+ {" "}
+ {ui(
+ "Publishes will fail until you auto-configure one above, or switch back to per-publish mode.",
+ )}{" "}
+
+
+
- Existing wildcards on {diagnostics.zoneName || "this zone"}
+ {" "}
+ {ui("Existing wildcards on")}{" "}
+ {diagnostics.zoneName || ui("this zone")}
{diagnostics.allWildcards.map((w) => {
@@ -509,22 +642,33 @@ export function DnsConfigPanel() {
key={w.hostname}
className="flex flex-wrap items-center gap-2 rounded-md border border-border bg-secondary/30 px-2.5 py-1.5 text-[11px]"
>
- {w.hostname}
+
+ {w.hostname}
+
→
- {w.target}
- {w.modifiedOn.slice(0, 10)}
+
+ {w.target}
+
+
+ {w.modifiedOn.slice(0, 10)}
+
{isConfirming ? (
<>
- Delete {w.hostname}? Publishes pointing to it stop resolving.
+
+ {ui("Delete")} {w.hostname}
+ {ui("? Publishes pointing to it stop resolving.")}
+
deleteWildcard(w.hostname)}
disabled={isDeleting}
className="inline-flex items-center gap-1 rounded-md border border-red-500 bg-red-500/10 px-2 py-0.5 text-[11px] font-medium text-red-300 hover:bg-red-500/20 disabled:cursor-not-allowed"
>
- {isDeleting ?
- Cancel
+ {" "}
+ {ui("Cancel")}{" "}
) : (
@@ -542,8 +687,7 @@ export function DnsConfigPanel() {
disabled={deleting !== null}
className="inline-flex items-center gap-1 rounded-md border border-border bg-secondary px-2 py-0.5 text-[11px] font-medium text-muted-foreground hover:border-red-500 hover:text-red-300 disabled:cursor-not-allowed"
>
-
@@ -560,19 +704,29 @@ export function DnsConfigPanel() {
onClick={() => setTokenSectionOpen((v) => !v)}
className="flex w-full items-center gap-2 text-left text-[11px] text-muted-foreground hover:text-foreground"
>
- {tokenSectionOpen ? Cloudflare API token (optional)
+
+ {ui("Cloudflare API token (optional)")}
+
{cfTokenStatus?.source === "platform_settings"
- ? `Using custom token ****${cfTokenStatus.tokenSuffix}`
+ ? ui("Using custom token ****{v0}", {
+ v0: cfTokenStatus.tokenSuffix,
+ })
: cfTokenStatus?.source === "env"
- ? `Using cert.pem OAuth token ****${cfTokenStatus.tokenSuffix}`
- : "No CF token configured"}
+ ? ui("Using cert.pem OAuth token ****{v0}", {
+ v0: cfTokenStatus.tokenSuffix,
+ })
+ : ui("No CF token configured")}
{cfTokenStatus?.hasSslScope && (
-
)}
@@ -583,19 +737,35 @@ export function DnsConfigPanel() {
- KEK mismatch. {" "}
- The stored token can't be decrypted under the current{" "}
- DOABLE_KEK (likely a backup restore with a stale{" "}
- .env). The cert.pem fallback is keeping DNS ops working, but ACM detection is degraded. Re-paste the token below, or click Remove override to drop the stale row.
+ {ui("KEK mismatch.")} {" "}
+ {ui("The stored token can't be decrypted under the current")}{" "}
+ DOABLE_KEK{" "}
+ {ui("(likely a backup restore with a stale")}{" "}
+ .env
+ {ui(
+ "). The cert.pem fallback is keeping DNS ops working, but ACM detection is degraded. Re-paste the token below, or click",
+ )}{" "}
+ {ui("Remove override")} {" "}
+ {ui("to drop the stale row.")}{" "}
)}
- Strictly optional. {" "}
- DNS auto-configure, wildcard create/delete, and per-publish CNAMEs all work fine with the cert.pem token from{" "}
- cloudflared tunnel login alone. Adding a custom token only unlocks accurate ACM detection so the badge above can flip from{" "}
- ACM status unknown to ACM enabled or{" "}
- No ACM .
+
+ {ui("Strictly optional.")}
+ {" "}
+ {ui(
+ "DNS auto-configure, wildcard create/delete, and per-publish CNAMEs all work fine with the cert.pem token from",
+ )}{" "}
+ cloudflared tunnel login{" "}
+ {ui(
+ "alone. Adding a custom token only unlocks accurate ACM detection so the badge above can flip from",
+ )}{" "}
+ {ui("ACM status unknown")} {" "}
+ {ui("to")}{" "}
+ {ui("ACM enabled")} {" "}
+ {ui("or")}{" "}
+ {ui("No ACM")} .
- Open Cloudflare API Tokens
-
- {" "}→ Create Token → Create Custom Token. Add exactly these zone permissions:
+ {" "}
+ {ui("Open Cloudflare API Tokens")}{" "}
+ {" "}
+ {ui(
+ "→ Create Token → Create Custom Token. Add exactly these zone permissions:",
+ )}{" "}
- Zone → DNS → Edit
- Zone → Zone → Read
- Zone → SSL and Certificates → Read
+
+ {ui("Zone → DNS →")}{" "}
+ {ui("Edit")}
+
+
+ {ui("Zone → Zone →")}{" "}
+ {ui("Read")}
+
+
+ {ui("Zone → SSL and Certificates →")}{" "}
+ {ui("Read")}
+
- Scope to your specific zone ({zoneName}) under "Zone Resources". Then paste the token here.
+ {" "}
+ {ui("Scope to your specific zone (")}
+ {zoneName}
+ {ui(') under "Zone Resources". Then paste the token here.')}{" "}
@@ -622,7 +807,7 @@ export function DnsConfigPanel() {
type="password"
value={pastedToken}
onChange={(e) => setPastedToken(e.target.value)}
- placeholder="Paste a Cloudflare API token…"
+ placeholder={ui("Paste a Cloudflare API token…")}
disabled={tokenSaving}
className="flex-1 rounded-md border border-border bg-background px-2 py-1 font-mono text-[11px] text-foreground focus:border-blue-500 focus:outline-none disabled:opacity-50"
/>
@@ -632,17 +817,21 @@ export function DnsConfigPanel() {
disabled={!pastedToken.trim() || tokenSaving}
className="inline-flex items-center gap-1 rounded-md border border-blue-500 bg-blue-500/10 px-2.5 py-1 text-[11px] font-medium text-blue-300 hover:bg-blue-500/20 disabled:cursor-not-allowed disabled:border-border disabled:bg-secondary disabled:text-muted-foreground"
>
- {tokenSaving ?
- Remove override
+ {" "}
+ {ui("Remove override")}{" "}
)}
@@ -659,10 +848,14 @@ export function DnsConfigPanel() {
{diagnostics && (
- Heads up: {" "}
- A *.{zoneName} CNAME can point to exactly one tunnel — running multiple
- doable servers on the same zone requires Cloudflare Advanced Certificate Manager so each environment can
- have its own multi-level wildcard (e.g. *.staging.{zoneName} and{" "}
+
+ {ui("Heads up:")}
+ {" "}
+ {ui("A")} *.{zoneName}{" "}
+ {ui(
+ "CNAME can point to exactly one tunnel — running multiple doable servers on the same zone requires Cloudflare Advanced Certificate Manager so each environment can have its own multi-level wildcard (e.g.",
+ )}{" "}
+ *.staging.{zoneName} {ui("and")}{" "}
*.prod.{zoneName}).
@@ -672,17 +865,29 @@ export function DnsConfigPanel() {
{defaulted && !error && !autoSetupResult && (
- No setting persisted yet — using the per-publish default.
- {" "}Selecting an option or auto-configuring wildcard will save it for future publishes.
+ {" "}
+ {ui(
+ "No setting persisted yet — using the per-publish default.",
+ )}{" "}
+ {ui(
+ "Selecting an option or auto-configuring wildcard will save it for future publishes.",
+ )}{" "}
)}
{error && (
- {error}
+ {ui(error)}
{error.includes("migration 081") && (
- <> Run migration 081_platform_settings.sql against the DB.
+ <>
+ {" "}
+ {ui("Run")}{" "}
+
+ migration 081_platform_settings.sql
+ {" "}
+ {ui("against the DB.")}
+
)}
diff --git a/apps/web/src/app/(dashboard)/admin/email-panel.tsx b/apps/web/src/app/(dashboard)/admin/email-panel.tsx
index 0db5e3aa..b2fae153 100644
--- a/apps/web/src/app/(dashboard)/admin/email-panel.tsx
+++ b/apps/web/src/app/(dashboard)/admin/email-panel.tsx
@@ -1,4 +1,5 @@
"use client";
+import { useUiText } from "@/i18n/use-ui-text";
import { useState, useEffect, useCallback } from "react";
import {
@@ -100,6 +101,8 @@ const SMTP_SERVICES = [
// ─── Email Settings Panel ────────────────────────────────────
export function EmailPanel() {
+ const ui = useUiText();
+
const [config, setConfig] = useState
(null);
const [stats, setStats] = useState(null);
const [loading, setLoading] = useState(true);
@@ -107,7 +110,10 @@ export function EmailPanel() {
const [testing, setTesting] = useState(false);
const [verifying, setVerifying] = useState(false);
const [deleting, setDeleting] = useState(false);
- const [testResult, setTestResult] = useState<{ ok: boolean; message: string } | null>(null);
+ const [testResult, setTestResult] = useState<{
+ ok: boolean;
+ message: string;
+ } | null>(null);
// Form state
const [formProvider, setFormProvider] = useState("smtp");
@@ -126,21 +132,25 @@ export function EmailPanel() {
const loadConfig = useCallback(async () => {
try {
- const res = await apiFetch<{ data: EmailConfig | null }>("/admin/email/config");
+ const res = await apiFetch<{ data: EmailConfig | null }>(
+ "/admin/email/config",
+ );
setConfig(res.data);
} catch (e) {
- console.error("Failed to load email config:", e);
+ console.error(ui("Failed to load email config:"), e);
}
- }, []);
+ }, [ui]);
const loadStats = useCallback(async () => {
try {
- const res = await apiFetch<{ data: QueueStats }>("/admin/email/queue-stats");
+ const res = await apiFetch<{ data: QueueStats }>(
+ "/admin/email/queue-stats",
+ );
setStats(res.data);
} catch (e) {
- console.error("Failed to load queue stats:", e);
+ console.error(ui("Failed to load queue stats:"), e);
}
- }, []);
+ }, [ui]);
useEffect(() => {
Promise.all([loadConfig(), loadStats()]).finally(() => setLoading(false));
@@ -150,7 +160,10 @@ export function EmailPanel() {
useEffect(() => {
const params = new URLSearchParams(window.location.search);
if (params.get("gmail") === "connected") {
- setTestResult({ ok: true, message: "Gmail connected successfully via OAuth!" });
+ setTestResult({
+ ok: true,
+ message: "Gmail connected successfully via OAuth!",
+ });
// Clean URL
const url = new URL(window.location.href);
url.searchParams.delete("gmail");
@@ -173,7 +186,9 @@ export function EmailPanel() {
if (formProvider === "smtp") {
const isCustom = smtpService === "Custom (manual SMTP)";
body.credentials = {
- ...(isCustom ? { host: smtpHost, port: smtpPort } : { service: smtpService }),
+ ...(isCustom
+ ? { host: smtpHost, port: smtpPort }
+ : { service: smtpService }),
user: smtpUser,
pass: smtpPass,
};
@@ -181,12 +196,21 @@ export function EmailPanel() {
body.credentials = { apiKey: resendApiKey };
}
- await apiFetch("/admin/email/config", { method: "POST", body: JSON.stringify(body) });
- setTestResult({ ok: true, message: "Email provider saved! Send a test email to verify." });
+ await apiFetch("/admin/email/config", {
+ method: "POST",
+ body: JSON.stringify(body),
+ });
+ setTestResult({
+ ok: true,
+ message: "Email provider saved! Send a test email to verify.",
+ });
setEditing(false);
await loadConfig();
} catch (e) {
- setTestResult({ ok: false, message: e instanceof Error ? e.message : "Failed to save" });
+ setTestResult({
+ ok: false,
+ message: e instanceof Error ? e.message : ui("Failed to save"),
+ });
} finally {
setSaving(false);
}
@@ -196,10 +220,20 @@ export function EmailPanel() {
setTesting(true);
setTestResult(null);
try {
- const res = await apiFetch<{ success: boolean }>("/admin/email/test", { method: "POST" });
- setTestResult({ ok: res.success, message: res.success ? "Test email sent! Check your inbox." : "Failed to send test email." });
+ const res = await apiFetch<{ success: boolean }>("/admin/email/test", {
+ method: "POST",
+ });
+ setTestResult({
+ ok: res.success,
+ message: res.success
+ ? "Test email sent! Check your inbox."
+ : ui("Failed to send test email."),
+ });
} catch (e) {
- setTestResult({ ok: false, message: e instanceof Error ? e.message : "Test failed" });
+ setTestResult({
+ ok: false,
+ message: e instanceof Error ? e.message : "Test failed",
+ });
} finally {
setTesting(false);
}
@@ -209,31 +243,58 @@ export function EmailPanel() {
setVerifying(true);
setTestResult(null);
try {
- const res = await apiFetch<{ verified: boolean; error?: string; message?: string }>("/admin/email/verify", { method: "POST" });
+ const res = await apiFetch<{
+ verified: boolean;
+ error?: string;
+ message?: string;
+ }>("/admin/email/verify", { method: "POST" });
if (res.verified) {
- setTestResult({ ok: true, message: res.message ?? "Provider connection verified!" });
+ setTestResult({
+ ok: true,
+ message: res.message ?? "Provider connection verified!",
+ });
} else {
- setTestResult({ ok: false, message: res.error ?? "Verification failed" });
+ setTestResult({
+ ok: false,
+ message: res.error ?? "Verification failed",
+ });
}
await loadConfig();
} catch (e) {
- setTestResult({ ok: false, message: e instanceof Error ? e.message : "Verification failed" });
+ setTestResult({
+ ok: false,
+ message: e instanceof Error ? e.message : "Verification failed",
+ });
} finally {
setVerifying(false);
}
}
async function handleDelete() {
- if (!confirm("Remove email configuration? The system will fall back to environment variable settings.")) return;
+ if (
+ !confirm(
+ ui(
+ "Remove email configuration? The system will fall back to environment variable settings.",
+ ),
+ )
+ )
+ return;
setDeleting(true);
setTestResult(null);
try {
await apiFetch("/admin/email/config", { method: "DELETE" });
setConfig(null);
setEditing(false);
- setTestResult({ ok: true, message: "Configuration removed. Falling back to environment variables." });
+ setTestResult({
+ ok: true,
+ message:
+ "Configuration removed. Falling back to environment variables.",
+ });
} catch (e) {
- setTestResult({ ok: false, message: e instanceof Error ? e.message : "Failed to delete" });
+ setTestResult({
+ ok: false,
+ message: e instanceof Error ? e.message : ui("Failed to delete"),
+ });
} finally {
setDeleting(false);
}
@@ -241,10 +302,16 @@ export function EmailPanel() {
async function handleGmailConnect() {
try {
- const res = await apiFetch<{ url: string }>("/admin/email/google/auth-url");
+ const res = await apiFetch<{ url: string }>(
+ "/admin/email/google/auth-url",
+ );
window.location.href = res.url;
} catch (e) {
- setTestResult({ ok: false, message: e instanceof Error ? e.message : "Failed to start Gmail OAuth" });
+ setTestResult({
+ ok: false,
+ message:
+ e instanceof Error ? e.message : ui("Failed to start Gmail OAuth"),
+ });
}
}
@@ -281,12 +348,18 @@ export function EmailPanel() {
{/* Status Banner */}
{testResult && (
-
- {testResult.ok ?
:
}
+
+ {testResult.ok ? (
+
)}
@@ -300,18 +373,23 @@ export function EmailPanel() {
-
{config.label}
-
{config.provider.toUpperCase()} — {config.from_address}
+
+ {config.label}
+
+
+ {config.provider.toUpperCase()} — {config.from_address}
+
{config.verified ? (
-
) : (
-
)}
{Object.entries(config.credentials).map(([key, val]) => (
-
{key}
-
{val}
+
+ {key}
+
+
+ {val}
+
))}
-
- {testing ?
+ {testing ? (
+
-
- {verifying ?
+ {verifying ? (
+
-
- Change Provider
+
+ {" "}
+ {ui("Change Provider")}{" "}
-
- {deleting ?
+ {deleting ? (
+
- {config ? "Update Email Provider" : "Configure Email Provider"}
+ {config
+ ? ui("Update Email Provider")
+ : ui("Configure Email Provider")}
@@ -367,7 +482,10 @@ export function EmailPanel() {
{(["smtp", "resend", "google"] as const).map((p) => (
{ setFormProvider(p); setTestResult(null); }}
+ onClick={() => {
+ setFormProvider(p);
+ setTestResult(null);
+ }}
className={`rounded-lg border p-3 text-left transition-colors ${
formProvider === p
? "border-brand-500 bg-brand-600/10"
@@ -375,12 +493,18 @@ export function EmailPanel() {
}`}
>
- {p === "smtp" ? "SMTP" : p === "resend" ? "Resend" : "Gmail (OAuth)"}
+ {p === "smtp"
+ ? ui("SMTP")
+ : p === "resend"
+ ? ui("Resend")
+ : ui("Gmail (OAuth)")}
- {p === "smtp" ? "Gmail, SendGrid, Mailgun, SES, and 20+ providers"
- : p === "resend" ? "Modern email API with great deliverability"
- : "One-click Google account connection"}
+ {p === "smtp"
+ ? ui("Gmail, SendGrid, Mailgun, SES, and 20+ providers")
+ : p === "resend"
+ ? ui("Modern email API with great deliverability")
+ : ui("One-click Google account connection")}
))}
@@ -390,17 +514,46 @@ export function EmailPanel() {
{formProvider === "google" ? (
- Connect your Google account with one click. This uses OAuth so your password is never shared.
- Only the gmail.send permission is requested.
+ {" "}
+ {ui(
+ "Connect your Google account with one click. This uses OAuth so your password is never shared. Only the",
+ )}{" "}
+ gmail.send{" "}
+ {ui("permission is requested.")}{" "}
{/* Google brand button — uses Google's official brand colors (intentional pure white). */}
-
-
+
+ {" "}
+ {ui("Connect Google Account")}{" "}
{config && (
- setEditing(false)} variant="outline" className="text-xs border-border text-muted-foreground hover:bg-secondary">
- Cancel
+ setEditing(false)}
+ variant="outline"
+ className="text-xs border-border text-muted-foreground hover:bg-secondary"
+ >
+ {" "}
+ {ui("Cancel")}{" "}
)}
@@ -409,17 +562,29 @@ export function EmailPanel() {
- Label
+
+ {ui("Label")}
+
-
From Address
+
+ {ui("From Address")}
+
setFormFromAddress(e.target.value)}
+ type="text"
+ value={formFromAddress}
+ onChange={(e) => setFormFromAddress(e.target.value)}
placeholder="Doable
"
className="w-full rounded-md bg-background border border-input text-sm text-foreground px-3 py-2 outline-none focus:border-brand-500 placeholder:text-muted-foreground"
/>
@@ -429,36 +594,74 @@ export function EmailPanel() {
{formProvider === "smtp" && (
<>
- Service
+
+ {ui("Service")}
+
setSmtpService(e.target.value)}
+ value={smtpService}
+ onChange={(e) => setSmtpService(e.target.value)}
className="w-full rounded-md bg-background border border-input text-sm text-foreground px-3 py-2 outline-none focus:border-brand-500"
>
- {SMTP_SERVICES.map((s) => {s} )}
+ {SMTP_SERVICES.map((s) => (
+
+ {s}
+
+ ))}
{smtpService === "Custom (manual SMTP)" && (
)}
@@ -466,19 +669,40 @@ export function EmailPanel() {
{formProvider === "resend" && (
- API Key
-
+ {ui("API Key")}
+
+
)}
-
- {saving ?
+ {saving ? (
+
{config && (
- setEditing(false)} variant="outline" className="text-xs border-border text-muted-foreground hover:bg-secondary">
- Cancel
+ setEditing(false)}
+ variant="outline"
+ className="text-xs border-border text-muted-foreground hover:bg-secondary"
+ >
+ {" "}
+ {ui("Cancel")}{" "}
)}
@@ -492,26 +716,34 @@ export function EmailPanel() {
-
No email provider configured in the database
+
+ {ui("No email provider configured in the database")}
+
- {config === null ? "Using environment variable fallback (if configured)" : ""}
+ {config === null
+ ? ui("Using environment variable fallback (if configured)")
+ : ""}
-
-
+
)}
{/* Queue Stats & Management */}
- {stats && (
-
- All credentials are encrypted at rest using AES-256. The email queue retries failed sends with exponential backoff (up to 5 attempts).
- After exhausting retries, emails move to the dead-letter queue for manual review.
+ {" "}
+ {ui(
+ "All credentials are encrypted at rest using AES-256. The email queue retries failed sends with exponential backoff (up to 5 attempts). After exhausting retries, emails move to the dead-letter queue for manual review.",
+ )}{" "}
);
@@ -528,9 +760,13 @@ const STATUS_COLORS: Record
= {
};
function StatusBadge({ status }: { status: string }) {
+ const ui = useUiText();
+
return (
-
- {status === "dead" ? "dead letter" : status}
+
+ {status === "dead" ? ui("dead letter") : status}
);
}
@@ -548,31 +784,51 @@ function timeAgo(dateStr: string): string {
// ─── Email Queue Manager ─────────────────────────────────────
-function EmailQueueManager({ stats, onStatsChange }: { stats: QueueStats; onStatsChange: () => void }) {
+function EmailQueueManager({
+ stats,
+ onStatsChange,
+}: {
+ stats: QueueStats;
+ onStatsChange: () => void;
+}) {
+ const ui = useUiText();
+
const [items, setItems] = useState([]);
- const [pagination, setPagination] = useState({ page: 1, limit: 25, total: 0 });
+ const [pagination, setPagination] = useState({
+ page: 1,
+ limit: 25,
+ total: 0,
+ });
const [filterStatus, setFilterStatus] = useState(null);
const [loading, setLoading] = useState(false);
const [expanded, setExpanded] = useState(false);
const [selectedItem, setSelectedItem] = useState(null);
const [actionLoading, setActionLoading] = useState(null);
- const hasItems = stats.pending + stats.processing + stats.sent + stats.failed + stats.dead > 0;
+ const hasItems =
+ stats.pending + stats.processing + stats.sent + stats.failed + stats.dead >
+ 0;
- const loadQueue = useCallback(async (page = 1, status: string | null = filterStatus) => {
- setLoading(true);
- try {
- const params = new URLSearchParams({ page: String(page), limit: "25" });
- if (status) params.set("status", status);
- const res = await apiFetch<{ data: QueueItem[]; pagination: Pagination }>(`/admin/email/queue?${params}`);
- setItems(res.data);
- setPagination(res.pagination);
- } catch (e) {
- console.error("Failed to load queue:", e);
- } finally {
- setLoading(false);
- }
- }, [filterStatus]);
+ const loadQueue = useCallback(
+ async (page = 1, status: string | null = filterStatus) => {
+ setLoading(true);
+ try {
+ const params = new URLSearchParams({ page: String(page), limit: "25" });
+ if (status) params.set("status", status);
+ const res = await apiFetch<{
+ data: QueueItem[];
+ pagination: Pagination;
+ }>(`/admin/email/queue?${params}`);
+ setItems(res.data);
+ setPagination(res.pagination);
+ } catch (e) {
+ console.error(ui("Failed to load queue:"), e);
+ } finally {
+ setLoading(false);
+ }
+ },
+ [ui, filterStatus],
+ );
useEffect(() => {
if (expanded) loadQueue(1, filterStatus);
@@ -590,20 +846,30 @@ function EmailQueueManager({ stats, onStatsChange }: { stats: QueueStats; onStat
}
async function handleRetryAll(status: string) {
- if (!confirm(`Retry all ${status} emails? They will be reset to pending.`)) return;
+ if (
+ !confirm(
+ ui("Retry all {v0} emails? They will be reset to pending.", {
+ v0: status,
+ }),
+ )
+ )
+ return;
setActionLoading(`retry-all-${status}`);
try {
- const res = await apiFetch<{ count: number }>(`/admin/email/queue/retry-all?status=${status}`, { method: "POST" });
+ const res = await apiFetch<{ count: number }>(
+ `/admin/email/queue/retry-all?status=${status}`,
+ { method: "POST" },
+ );
await loadQueue(1);
onStatsChange();
- alert(`${res.count} email(s) queued for retry.`);
+ alert(ui("{v0} email(s) queued for retry.", { v0: res.count }));
} finally {
setActionLoading(null);
}
}
async function handleDelete(id: string) {
- if (!confirm("Delete this email permanently?")) return;
+ if (!confirm(ui("Delete this email permanently?"))) return;
setActionLoading(id);
try {
await apiFetch(`/admin/email/queue/${id}`, { method: "DELETE" });
@@ -616,13 +882,23 @@ function EmailQueueManager({ stats, onStatsChange }: { stats: QueueStats; onStat
async function handlePurge(status: string) {
const label = status === "dead" ? "dead letter" : status;
- if (!confirm(`Permanently delete ALL ${label} emails? This cannot be undone.`)) return;
+ if (
+ !confirm(
+ ui("Permanently delete ALL {v0} emails? This cannot be undone.", {
+ v0: label,
+ }),
+ )
+ )
+ return;
setActionLoading(`purge-${status}`);
try {
- const res = await apiFetch<{ count: number }>(`/admin/email/queue?status=${status}`, { method: "DELETE" });
+ const res = await apiFetch<{ count: number }>(
+ `/admin/email/queue?status=${status}`,
+ { method: "DELETE" },
+ );
await loadQueue(1);
onStatsChange();
- alert(`${res.count} email(s) deleted.`);
+ alert(ui("{v0} email(s) deleted.", { v0: res.count }));
} finally {
setActionLoading(null);
}
@@ -630,14 +906,19 @@ function EmailQueueManager({ stats, onStatsChange }: { stats: QueueStats; onStat
async function handleViewDetail(id: string) {
try {
- const res = await apiFetch<{ data: QueueItem }>(`/admin/email/queue/${id}`);
+ const res = await apiFetch<{ data: QueueItem }>(
+ `/admin/email/queue/${id}`,
+ );
setSelectedItem(res.data);
} catch (e) {
- console.error("Failed to load email detail:", e);
+ console.error(ui("Failed to load email detail:"), e);
}
}
- const totalPages = Math.max(1, Math.ceil(pagination.total / pagination.limit));
+ const totalPages = Math.max(
+ 1,
+ Math.ceil(pagination.total / pagination.limit),
+ );
return (
@@ -645,31 +926,65 @@ function EmailQueueManager({ stats, onStatsChange }: { stats: QueueStats; onStat
-
-
+
{hasItems && (
{ setExpanded(!expanded); setSelectedItem(null); }}
+ onClick={() => {
+ setExpanded(!expanded);
+ setSelectedItem(null);
+ }}
variant="ghost"
className="h-7 px-2.5 text-xs text-muted-foreground hover:text-foreground"
>
- {expanded ? "Collapse" : "Manage"}
+ {expanded ? ui("Collapse") : ui("Manage")}
)}
- {([
- { label: "Pending", value: stats.pending, color: "text-amber-400", key: "pending" },
- { label: "Processing", value: stats.processing, color: "text-blue-400", key: "processing" },
- { label: "Sent", value: stats.sent, color: "text-emerald-400", key: "sent" },
- { label: "Failed", value: stats.failed, color: "text-red-400", key: "failed" },
- { label: "Dead Letter", value: stats.dead, color: "text-muted-foreground", key: "dead" },
- ] as const).map((s) => (
+ {(
+ [
+ {
+ label: ui("Pending"),
+ value: stats.pending,
+ color: "text-amber-400",
+ key: "pending",
+ },
+ {
+ label: ui("Processing"),
+ value: stats.processing,
+ color: "text-blue-400",
+ key: "processing",
+ },
+ {
+ label: ui("Sent"),
+ value: stats.sent,
+ color: "text-emerald-400",
+ key: "sent",
+ },
+ {
+ label: ui("Failed"),
+ value: stats.failed,
+ color: "text-red-400",
+ key: "failed",
+ },
+ {
+ label: ui("Dead Letter"),
+ value: stats.dead,
+ color: "text-muted-foreground",
+ key: "dead",
+ },
+ ] as const
+ ).map((s) => (
{
@@ -701,17 +1016,32 @@ function EmailQueueManager({ stats, onStatsChange }: { stats: QueueStats; onStat
onClick={() => setSelectedItem(null)}
className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
>
-
{["failed", "dead"].includes(selectedItem.status) && (
- handleRetry(selectedItem.id)} disabled={actionLoading === selectedItem.id} variant="outline" className="h-7 text-xs gap-1 border-border text-foreground">
- {actionLoading === selectedItem.id ? handleRetry(selectedItem.id)}
+ disabled={actionLoading === selectedItem.id}
+ variant="outline"
+ className="h-7 text-xs gap-1 border-border text-foreground"
+ >
+ {actionLoading === selectedItem.id ? (
+
)}
- handleDelete(selectedItem.id)} disabled={actionLoading === selectedItem.id} variant="outline" className="h-7 text-xs gap-1 border-red-800/50 text-red-400 hover:bg-red-900/20">
- handleDelete(selectedItem.id)}
+ disabled={actionLoading === selectedItem.id}
+ variant="outline"
+ className="h-7 text-xs gap-1 border-red-800/50 text-red-400 hover:bg-red-900/20"
+ >
+
@@ -719,18 +1049,72 @@ function EmailQueueManager({ stats, onStatsChange }: { stats: QueueStats; onStat
Attempt {selectedItem.attempts}/{selectedItem.max_attempts}
+
+ {ui("Attempt")} {selectedItem.attempts}/
+ {selectedItem.max_attempts}
+
-
{selectedItem.subject}
+
+ {selectedItem.subject}
+
-
To: {selectedItem.to_address}
-
From: {selectedItem.from_address ?? "—"}
-
Created: {new Date(selectedItem.created_at).toLocaleString()}
- {selectedItem.sent_at &&
Sent: {new Date(selectedItem.sent_at).toLocaleString()}
}
- {selectedItem.next_retry_at && selectedItem.status === "failed" && (
-
Next retry: {new Date(selectedItem.next_retry_at).toLocaleString()}
+
+ {ui("To:")} {" "}
+
+ {selectedItem.to_address}
+
+
+
+ {ui("From:")} {" "}
+
+ {selectedItem.from_address ?? "—"}
+
+
+
+
+ {ui("Created:")}
+ {" "}
+
+ {new Date(selectedItem.created_at).toLocaleString(
+ ui.locale,
+ )}
+
+
+ {selectedItem.sent_at && (
+
+
+ {ui("Sent:")}
+ {" "}
+
+ {new Date(selectedItem.sent_at).toLocaleString(
+ ui.locale,
+ )}
+
+
+ )}
+ {selectedItem.next_retry_at &&
+ selectedItem.status === "failed" && (
+
+
+ {ui("Next retry:")}
+ {" "}
+
+ {new Date(selectedItem.next_retry_at).toLocaleString(
+ ui.locale,
+ )}
+
+
+ )}
+ {selectedItem.template && (
+
+
+ {ui("Template:")}
+ {" "}
+
+ {selectedItem.template}
+
+
)}
- {selectedItem.template &&
Template: {selectedItem.template}
}
{selectedItem.last_error && (
@@ -742,13 +1126,15 @@ function EmailQueueManager({ stats, onStatsChange }: { stats: QueueStats; onStat
{/* HTML Preview */}
{selectedItem.html && (
-
Preview
+
+ {ui("Preview")}
+
@@ -761,48 +1147,70 @@ function EmailQueueManager({ stats, onStatsChange }: { stats: QueueStats; onStat
- {filterStatus ? `Showing ${filterStatus}` : "All emails"} · {pagination.total} total
+ {filterStatus
+ ? ui("Showing {v0}", { v0: filterStatus })
+ : ui("All emails")}{" "}
+ · {pagination.total} {ui("total")}{" "}
{filterStatus && (
- setFilterStatus(null)} className="text-[10px] text-muted-foreground hover:text-foreground underline">
- clear filter
+ setFilterStatus(null)}
+ className="text-[10px] text-muted-foreground hover:text-foreground underline"
+ >
+ {" "}
+ {ui("clear filter")}{" "}
)}
- {(stats.failed > 0 && (filterStatus === "failed" || !filterStatus)) && (
- handleRetryAll("failed")}
- disabled={actionLoading === "retry-all-failed"}
- variant="outline"
- className="h-6 text-[10px] gap-1 border-border text-muted-foreground px-2"
- >
- {actionLoading === "retry-all-failed" ?
- )}
- {(stats.dead > 0 && (filterStatus === "dead" || !filterStatus)) && (
- handleRetryAll("dead")}
- disabled={actionLoading === "retry-all-dead"}
- variant="outline"
- className="h-6 text-[10px] gap-1 border-border text-muted-foreground px-2"
- >
- {actionLoading === "retry-all-dead" ?
- )}
- {filterStatus && ["sent", "dead", "failed"].includes(filterStatus) && (
- handlePurge(filterStatus)}
- disabled={actionLoading === `purge-${filterStatus}`}
- variant="outline"
- className="h-6 text-[10px] gap-1 border-red-800/50 text-red-400 px-2 hover:bg-red-900/20"
- >
- {actionLoading === `purge-${filterStatus}` ?
- )}
+ {stats.failed > 0 &&
+ (filterStatus === "failed" || !filterStatus) && (
+ handleRetryAll("failed")}
+ disabled={actionLoading === "retry-all-failed"}
+ variant="outline"
+ className="h-6 text-[10px] gap-1 border-border text-muted-foreground px-2"
+ >
+ {actionLoading === "retry-all-failed" ? (
+
+ )}
+ {stats.dead > 0 &&
+ (filterStatus === "dead" || !filterStatus) && (
+ handleRetryAll("dead")}
+ disabled={actionLoading === "retry-all-dead"}
+ variant="outline"
+ className="h-6 text-[10px] gap-1 border-border text-muted-foreground px-2"
+ >
+ {actionLoading === "retry-all-dead" ? (
+
+ )}
+ {filterStatus &&
+ ["sent", "dead", "failed"].includes(filterStatus) && (
+ handlePurge(filterStatus)}
+ disabled={actionLoading === `purge-${filterStatus}`}
+ variant="outline"
+ className="h-6 text-[10px] gap-1 border-red-800/50 text-red-400 px-2 hover:bg-red-900/20"
+ >
+ {actionLoading === `purge-${filterStatus}` ? (
+
+ )}
@@ -814,31 +1222,51 @@ function EmailQueueManager({ stats, onStatsChange }: { stats: QueueStats; onStat
) : items.length === 0 ? (
No emails {filterStatus ? `with status "${filterStatus}"` : "in queue"}
+
+ {ui("No emails")}{" "}
+ {filterStatus
+ ? ui('with status "{v0}"', { v0: filterStatus })
+ : ui("in queue")}
+
) : (
{items.map((item) => (
-
+
{item.subject}
+
+ {item.subject}
+
→ {item.to_address}
- {item.attempts}/{item.max_attempts} attempts }
+
+
+ {item.attempts > 0 && (
+
+ {item.attempts}/{item.max_attempts}{" "}
+ {ui("attempts")}
+
+ )}
{item.last_error && (
-
{item.last_error}
+
+ {item.last_error}
+
)}
handleViewDetail(item.id)}
className="rounded p-1 text-muted-foreground hover:text-foreground hover:bg-secondary/80"
- title="View details"
+ title={ui("View details")}
>
@@ -847,16 +1275,20 @@ function EmailQueueManager({ stats, onStatsChange }: { stats: QueueStats; onStat
onClick={() => handleRetry(item.id)}
disabled={actionLoading === item.id}
className="rounded p-1 text-muted-foreground hover:text-amber-400 hover:bg-secondary/80"
- title="Retry"
+ title={ui("Retry")}
>
- {actionLoading === item.id ?
:
}
+ {actionLoading === item.id ? (
+
+ ) : (
+
+ )}
)}
handleDelete(item.id)}
disabled={actionLoading === item.id}
className="rounded p-1 text-muted-foreground hover:text-red-400 hover:bg-secondary/80"
- title="Delete"
+ title={ui("Delete")}
>
@@ -870,7 +1302,8 @@ function EmailQueueManager({ stats, onStatsChange }: { stats: QueueStats; onStat
{totalPages > 1 && (
- Page {pagination.page} of {totalPages}
+ {" "}
+ {ui("Page")} {pagination.page} {ui("of")} {totalPages}
(null);
const [loading, setLoading] = useState(true);
const [selected, setSelected] = useState(null);
@@ -65,7 +81,9 @@ export function EmbeddingProviderPanel() {
const [model, setModel] = useState("");
const [apiKey, setApiKey] = useState("");
const [showKey, setShowKey] = useState(false);
- const [saveState, setSaveState] = useState<"idle" | "saving" | "saved" | "error">("idle");
+ const [saveState, setSaveState] = useState<
+ "idle" | "saving" | "saved" | "error"
+ >("idle");
const [errorMsg, setErrorMsg] = useState(null);
const [dims, setDims] = useState(null);
@@ -76,7 +94,7 @@ export function EmbeddingProviderPanel() {
setStatus(res.data);
if (res.data.configured) {
// Preselect matching tile so the form is pre-populated.
- const tile = PRESETS.find((p) =>
+ const tile = i18n_PRESETS.find((p) =>
res.data.baseUrl ? p.defaultBaseUrl === res.data.baseUrl : false,
);
if (tile) {
@@ -84,13 +102,15 @@ export function EmbeddingProviderPanel() {
setBaseUrl(res.data.baseUrl ?? tile.defaultBaseUrl);
setModel(res.data.model ?? tile.defaultModel);
} else {
- setSelected(PRESETS[2]!);
+ setSelected(i18n_PRESETS[2]!);
setBaseUrl(res.data.baseUrl ?? "");
setModel(res.data.model ?? "");
}
}
} catch (err) {
- setErrorMsg(err instanceof Error ? err.message : "Failed to load status");
+ setErrorMsg(
+ err instanceof Error ? err.message : ui("Failed to load status"),
+ );
} finally {
setLoading(false);
}
@@ -112,7 +132,9 @@ export function EmbeddingProviderPanel() {
if (!selected) return;
if (!apiKey.trim() || !baseUrl.trim() || !model.trim()) {
setSaveState("error");
- setErrorMsg("Provider, base URL, model and API key are all required.");
+ setErrorMsg(
+ ui("Provider, base URL, model and API key are all required."),
+ );
return;
}
setSaveState("saving");
@@ -136,7 +158,7 @@ export function EmbeddingProviderPanel() {
await loadStatus();
} catch (err) {
setSaveState("error");
- setErrorMsg(err instanceof Error ? err.message : "Failed to save");
+ setErrorMsg(err instanceof Error ? err.message : ui("Failed to save"));
}
}
@@ -157,17 +179,21 @@ export function EmbeddingProviderPanel() {
- Platform Embedding Model
+ {" "}
+ {ui("Platform Embedding Model")}{" "}
- Set once — every workspace inherits this for chatbots, semantic
- search and RAG. End users of generated apps never see this UI;
- they just prompt the AI to build a chatbot.
+ {" "}
+ {ui(
+ "Set once — every workspace inherits this for chatbots, semantic search and RAG. End users of generated apps never see this UI; they just prompt the AI to build a chatbot.",
+ )}{" "}
{status?.configured ? (
-
Configured
+
+ {ui("Configured")}
+
· {status.model} · {status.baseUrl}
@@ -176,7 +202,10 @@ export function EmbeddingProviderPanel() {
- Not configured — calls to /__doable/ai/embed will return EMBEDDING_NOT_CONFIGURED
+ {" "}
+ {ui(
+ "Not configured — calls to /__doable/ai/embed will return EMBEDDING_NOT_CONFIGURED",
+ )}{" "}
)}
@@ -186,9 +215,11 @@ export function EmbeddingProviderPanel() {
-
Pick provider
+
+ {ui("Pick provider")}
+
- {PRESETS.map((p) => (
+ {i18n_PRESETS.map((p) => (
{p.name}
- {p.description}
+
+ {p.description}
+
))}
@@ -209,19 +242,25 @@ export function EmbeddingProviderPanel() {
{selected && (
- Base URL
+
+ {ui("Base URL")}
+
@@ -238,7 +278,13 @@ export function EmbeddingProviderPanel() {
type={showKey ? "text" : "password"}
value={apiKey}
onChange={(e) => setApiKey(e.target.value)}
- placeholder={status?.configured ? "Leave blank to keep current key (replace any to update)" : "Paste API key"}
+ placeholder={
+ status?.configured
+ ? ui(
+ "Leave blank to keep current key (replace any to update)",
+ )
+ : ui("Paste API key")
+ }
autoComplete="new-password"
autoCorrect="off"
spellCheck={false}
@@ -250,18 +296,26 @@ export function EmbeddingProviderPanel() {
className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
tabIndex={-1}
>
- {showKey ?
:
}
+ {showKey ? (
+
+ ) : (
+
+ )}
- Embedding model
+
+ {ui("Embedding model")}
+
@@ -269,27 +323,39 @@ export function EmbeddingProviderPanel() {
{saveState === "error" && errorMsg && (
- {errorMsg}
+ {ui(errorMsg)}
)}
{saveState === "saved" && (
- Saved {dims ? `(${dims}-dim vectors)` : ""}
+ {" "}
+ {ui("Saved")}{" "}
+ {dims ? ui("({v0}-dim vectors)", { v0: dims }) : ""}
)}
{saveState === "idle" && (
- Validates with a probe call before persisting.
+ {" "}
+ {ui("Validates with a probe call before persisting.")}{" "}
)}
- {saveState === "saving" ?
diff --git a/apps/web/src/app/(dashboard)/admin/frameworks-panel.tsx b/apps/web/src/app/(dashboard)/admin/frameworks-panel.tsx
index a35fb3d2..e4a37ded 100644
--- a/apps/web/src/app/(dashboard)/admin/frameworks-panel.tsx
+++ b/apps/web/src/app/(dashboard)/admin/frameworks-panel.tsx
@@ -1,4 +1,5 @@
"use client";
+import { useUiText } from "@/i18n/use-ui-text";
import { useState, useEffect, useCallback } from "react";
import { apiFetch } from "@/lib/api";
@@ -19,8 +20,11 @@ const FRAMEWORK_ICONS: Record
= {
};
export function FrameworksPanel() {
+ const ui = useUiText();
+
const [frameworks, setFrameworks] = useState([]);
- const [defaultFramework, setDefaultFramework] = useState("vite-react");
+ const [defaultFramework, setDefaultFramework] =
+ useState("vite-react");
const [loading, setLoading] = useState(true);
const [saving, setSaving] = useState(false);
const [error, setError] = useState(null);
@@ -29,39 +33,50 @@ export function FrameworksPanel() {
const load = useCallback(async () => {
setLoading(true);
try {
- const res = await apiFetch<{ frameworks: FrameworkInfo[]; defaultFramework: string }>("/admin/frameworks");
+ const res = await apiFetch<{
+ frameworks: FrameworkInfo[];
+ defaultFramework: string;
+ }>("/admin/frameworks");
setFrameworks(res.frameworks);
setDefaultFramework(res.defaultFramework);
} catch (err) {
- setError("Failed to load framework settings");
+ setError(ui("Failed to load framework settings"));
} finally {
setLoading(false);
}
- }, []);
+ }, [ui]);
- useEffect(() => { load(); }, [load]);
+ useEffect(() => {
+ load();
+ }, [load]);
- const handleToggle = useCallback(async (id: string) => {
- const updated = frameworks.map((f) =>
- f.id === id ? { ...f, enabled: !f.enabled } : f
- );
- // Must have at least one enabled
- if (updated.filter((f) => f.enabled).length === 0) {
- setError("At least one framework must remain enabled");
- setTimeout(() => setError(null), 3000);
- return;
- }
- setFrameworks(updated);
- await save(updated, defaultFramework);
- }, [frameworks, defaultFramework]);
-
- const handleSetDefault = useCallback(async (id: string) => {
- // Can only set default to an enabled framework
- const fw = frameworks.find((f) => f.id === id);
- if (!fw?.enabled) return;
- setDefaultFramework(id);
- await save(frameworks, id);
- }, [frameworks]);
+ const handleToggle = useCallback(
+ async (id: string) => {
+ const updated = frameworks.map((f) =>
+ f.id === id ? { ...f, enabled: !f.enabled } : f,
+ );
+ // Must have at least one enabled
+ if (updated.filter((f) => f.enabled).length === 0) {
+ setError(ui("At least one framework must remain enabled"));
+ setTimeout(() => setError(null), 3000);
+ return;
+ }
+ setFrameworks(updated);
+ await save(updated, defaultFramework);
+ },
+ [ui, frameworks, defaultFramework],
+ );
+
+ const handleSetDefault = useCallback(
+ async (id: string) => {
+ // Can only set default to an enabled framework
+ const fw = frameworks.find((f) => f.id === id);
+ if (!fw?.enabled) return;
+ setDefaultFramework(id);
+ await save(frameworks, id);
+ },
+ [frameworks],
+ );
const save = async (fws: FrameworkInfo[], defFw: string) => {
setSaving(true);
@@ -76,10 +91,10 @@ export function FrameworksPanel() {
defaultFramework: defFw,
}),
});
- setSuccess("Framework settings saved");
+ setSuccess(ui("Framework settings saved"));
setTimeout(() => setSuccess(null), 3000);
} catch {
- setError("Failed to save framework settings");
+ setError(ui("Failed to save framework settings"));
} finally {
setSaving(false);
}
@@ -97,9 +112,14 @@ export function FrameworksPanel() {
-
Project Frameworks
+
+ {ui("Project Frameworks")}
+
- Control which project types users can create. Disabled frameworks won't appear in the project creation dialog.
+ {" "}
+ {ui(
+ "Control which project types users can create. Disabled frameworks won't appear in the project creation dialog.",
+ )}{" "}
{saving &&
}
@@ -107,7 +127,7 @@ export function FrameworksPanel() {
{error && (
- {error}
+ {ui(error)}
)}
{success && (
@@ -129,18 +149,27 @@ export function FrameworksPanel() {
}`}
>
-
+
- {fw.name}
- ({fw.category})
+
+ {fw.name}
+
+
+ ({ui(fw.category)})
+
{fw.isDefault && fw.enabled && (
- Default
+ {" "}
+ {ui("Default")}{" "}
)}
-
{fw.description}
+
+ {ui(fw.description)}
+
@@ -150,7 +179,8 @@ export function FrameworksPanel() {
onClick={() => handleSetDefault(fw.id)}
className="text-xs text-muted-foreground hover:text-foreground transition-colors"
>
- Set as default
+ {" "}
+ {ui("Set as default")}{" "}
)}
- Changes take effect immediately. Existing projects using a disabled framework will continue to work,
- but new projects cannot be created with it.
+ {" "}
+ {ui(
+ "Changes take effect immediately. Existing projects using a disabled framework will continue to work, but new projects cannot be created with it.",
+ )}{" "}
);
diff --git a/apps/web/src/app/(dashboard)/admin/mfa-panel.tsx b/apps/web/src/app/(dashboard)/admin/mfa-panel.tsx
index d267c8ab..ee7f4415 100644
--- a/apps/web/src/app/(dashboard)/admin/mfa-panel.tsx
+++ b/apps/web/src/app/(dashboard)/admin/mfa-panel.tsx
@@ -1,7 +1,12 @@
"use client";
+import { useUiText } from "@/i18n/use-ui-text";
import { useCallback, useEffect, useState } from "react";
-import { apiAdminListMfaUsers, apiAdminResetUserMfa, type AdminMfaUserRow } from "@/lib/api";
+import {
+ apiAdminListMfaUsers,
+ apiAdminResetUserMfa,
+ type AdminMfaUserRow,
+} from "@/lib/api";
import { Button } from "@/components/ui/button";
import {
Dialog,
@@ -21,6 +26,8 @@ import { AlertTriangle, Loader2, ShieldCheck } from "lucide-react";
* Resets are audit-logged via admin_audit_log (action="mfa.reset").
*/
export function AdminMfaPanel() {
+ const ui = useUiText();
+
const [rows, setRows] = useState
(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
@@ -36,12 +43,12 @@ export function AdminMfaPanel() {
setError(
err && typeof err === "object" && "body" in err
? (err as { body: { error: string } }).body.error
- : "Failed to load MFA users",
+ : ui("Failed to load MFA users"),
);
} finally {
setLoading(false);
}
- }, []);
+ }, [ui]);
useEffect(() => {
void refresh();
@@ -53,9 +60,14 @@ export function AdminMfaPanel() {
-
User MFA status
+
+ {ui("User MFA status")}
+
- MFA is optional and user-controlled. Use the reset action only when a user has lost access to both their authenticator app and recovery codes.
+ {" "}
+ {ui(
+ "MFA is optional and user-controlled. Use the reset action only when a user has lost access to both their authenticator app and recovery codes.",
+ )}{" "}
@@ -64,16 +76,16 @@ export function AdminMfaPanel() {
{error && (
)}
- User
- Enrolled
- Last used
- Recovery
+ {ui("User")}
+ {ui("Enrolled")}
+ {ui("Last used")}
+ {ui("Recovery")}
{loading && (
@@ -82,46 +94,58 @@ export function AdminMfaPanel() {
)}
{!loading && rows && rows.length === 0 && (
- No users have enabled MFA yet.
+ {" "}
+ {ui("No users have enabled MFA yet.")}{" "}
)}
- {!loading && rows && rows.map((r) => (
-
-
-
- {r.displayName ?? r.email.split("@")[0]}
-
-
{r.email}
-
-
- {r.verifiedAt ? new Date(r.verifiedAt).toLocaleDateString() : "—"}
-
-
- {r.lastUsedAt ? new Date(r.lastUsedAt).toLocaleDateString() : "never"}
-
-
-
- {r.unusedRecoveryCodes} left
+ {!loading &&
+ rows &&
+ rows.map((r) => (
+
+
+
+ {r.displayName ?? r.email.split("@")[0]}
+
+
+ {r.email}
+
+
+
+ {r.verifiedAt
+ ? new Date(r.verifiedAt).toLocaleDateString(ui.locale)
+ : "—"}
-
setResetTarget(r)}
- >
- Reset
-
+
+ {r.lastUsedAt
+ ? new Date(r.lastUsedAt).toLocaleDateString(ui.locale)
+ : ui("never")}
+
+
+
+ {r.unusedRecoveryCodes} {ui("left")}{" "}
+
+ setResetTarget(r)}
+ >
+ {" "}
+ {ui("Reset")}{" "}
+
+
- ))}
+ ))}
{ if (!open) setResetTarget(null); }}
+ onOpenChange={(open) => {
+ if (!open) setResetTarget(null);
+ }}
onDone={refresh}
/>
@@ -137,6 +161,8 @@ function ResetMfaDialog({
onOpenChange: (open: boolean) => void;
onDone: () => void;
}) {
+ const ui = useUiText();
+
const [busy, setBusy] = useState(false);
const [error, setError] = useState
(null);
@@ -156,7 +182,7 @@ function ResetMfaDialog({
setError(
err && typeof err === "object" && "body" in err
? (err as { body: { error: string } }).body.error
- : "Failed to reset MFA",
+ : ui("Failed to reset MFA"),
);
} finally {
setBusy(false);
@@ -167,22 +193,36 @@ function ResetMfaDialog({
- Reset MFA for {target?.email}?
+
+ {ui("Reset MFA for")} {target?.email}?
+
- This will remove all MFA factors and recovery codes for this user, and sign them out of every active session. They will be able to sign in with just their password until they enroll again.
+ {" "}
+ {ui(
+ "This will remove all MFA factors and recovery codes for this user, and sign them out of every active session. They will be able to sign in with just their password until they enroll again.",
+ )}{" "}
{error && (
)}
- onOpenChange(false)}>Cancel
-
- {busy ? onOpenChange(false)}>
+ {ui("Cancel")}
+
+
+ {busy ? (
+
diff --git a/apps/web/src/app/(dashboard)/admin/moderation/page.tsx b/apps/web/src/app/(dashboard)/admin/moderation/page.tsx
index 26ea5ed1..af8dda49 100644
--- a/apps/web/src/app/(dashboard)/admin/moderation/page.tsx
+++ b/apps/web/src/app/(dashboard)/admin/moderation/page.tsx
@@ -1,4 +1,5 @@
"use client";
+import { useUiText } from "@/i18n/use-ui-text";
import { useEffect, useState, useCallback } from "react";
import Link from "next/link";
@@ -66,6 +67,8 @@ interface ReportItem {
}
export default function ModerationPage() {
+ const ui = useUiText();
+
const router = useRouter();
const { isPlatformAdmin, loading: adminLoading } = usePlatformAdmin();
const [tab, setTab] = useState("queue");
@@ -73,14 +76,20 @@ export default function ModerationPage() {
const [reports, setReports] = useState([]);
const [loading, setLoading] = useState(false);
const [busyId, setBusyId] = useState(null);
- const [decisionNotes, setDecisionNotes] = useState>({});
+ const [decisionNotes, setDecisionNotes] = useState>(
+ {},
+ );
const refresh = useCallback(async () => {
setLoading(true);
try {
const [q, r] = await Promise.all([
- apiFetch<{ data: QueueItem[]; total: number }>("/admin/marketplace/moderation/queue?status=pending"),
- apiFetch<{ data: ReportItem[]; total: number }>("/admin/marketplace/reports?status=open"),
+ apiFetch<{ data: QueueItem[]; total: number }>(
+ "/admin/marketplace/moderation/queue?status=pending",
+ ),
+ apiFetch<{ data: ReportItem[]; total: number }>(
+ "/admin/marketplace/reports?status=open",
+ ),
]);
setQueue(q.data);
setReports(r.data);
@@ -132,9 +141,15 @@ export default function ModerationPage() {
return (
-
Platform admin access required
-
router.push("/dashboard")}>
-
+ {ui("Platform admin access required")}
+
+ router.push("/dashboard")}
+ >
+
);
@@ -148,23 +163,38 @@ export default function ModerationPage() {
href="/admin"
className="inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors"
>
-
-
- Review listings flagged for moderator approval and respond to community reports.
+ {" "}
+ {ui(
+ "Review listings flagged for moderator approval and respond to community reports.",
+ )}{" "}
{/* Tabs */}
- {([
- { id: "queue", label: "Review queue", Icon: Inbox, badge: queue.length },
- { id: "reports", label: "Reports", Icon: Flag, badge: reports.length },
- ] as const).map((t) => {
+ {(
+ [
+ {
+ id: "queue",
+ label: ui("Review queue"),
+ Icon: Inbox,
+ badge: queue.length,
+ },
+ {
+ id: "reports",
+ label: ui("Reports"),
+ Icon: Flag,
+ badge: reports.length,
+ },
+ ] as const
+ ).map((t) => {
const active = tab === t.id;
return (
) : tab === "queue" ? (
queue.length === 0 ? (
-
{queue.map((item) => (
-
+
@@ -209,18 +245,21 @@ export default function ModerationPage() {
href={`/marketplace/${item.listing_slug}`}
target="_blank"
className="text-muted-foreground hover:text-foreground"
- title="Open listing in new tab"
+ title={ui("Open listing in new tab")}
>
- by {item.publisher_name} · v{item.version} · submitted{" "}
- {new Date(item.submitted_at).toLocaleString()}
+ {" "}
+ {ui("by")} {item.publisher_name} {ui("· v")}
+ {item.version} {ui("· submitted")}{" "}
+ {new Date(item.submitted_at).toLocaleString(ui.locale)}
-
Needs review
+
{" "}
+ {ui("Needs review")}{" "}
@@ -230,32 +269,54 @@ export default function ModerationPage() {
{item.manifest_summary && (
-
)}
- {item.manifest_summary?.permissions && item.manifest_summary.permissions.length > 0 && (
-
-
Permissions:
-
- {item.manifest_summary.permissions.map((p) => (
-
- •
- {p}
-
- ))}
-
-
+
+ {ui("Permissions:")}
+
+
+ {item.manifest_summary.permissions.map((p) => (
+
+ •
+ {p}
+
+ ))}
+
+