- {submitting ? "Signing in…" : "Sign in"}
+ {submitting ? t("signing_in") : t("sign_in")}
diff --git a/panel/src/pages/MyServers.tsx b/panel/src/pages/MyServers.tsx
index b51243e..2cbb78e 100644
--- a/panel/src/pages/MyServers.tsx
+++ b/panel/src/pages/MyServers.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
import { Card, CardContent } from "@/components/ui/card";
import { ServerCard } from "@/components/ServerCard";
import { Loading, ErrorState, EmptyState } from "@/components/States";
@@ -10,14 +11,15 @@ import { useAsync, useConfig } from "@/lib/hooks";
export function MyServers() {
const cfg = useConfig();
const { data, error, loading, reload } = useAsync(() => api.myServers(), []);
+ const { t } = useTranslation("servers");
const servers = data ?? [];
return (
-
My servers
+
{t("my_servers_title")}
- Wake, stop, or claim the servers you can manage.
+ {t("my_servers_subtitle")}
@@ -26,11 +28,11 @@ export function MyServers() {
) : error ? (
) : !cfg ? (
-
+
) : servers.length === 0 ? (
) : (
@@ -42,9 +44,7 @@ export function MyServers() {
- Servers and game types are provisioned and managed by the platform. You
- claim a node to operate it; raw cluster config is never exposed here
- (spec §15).
+ {t("my_servers_footer")}
diff --git a/panel/src/pages/ServerConsole.tsx b/panel/src/pages/ServerConsole.tsx
index a2c5b7b..bcf4265 100644
--- a/panel/src/pages/ServerConsole.tsx
+++ b/panel/src/pages/ServerConsole.tsx
@@ -1,5 +1,6 @@
import { Link, useParams } from "react-router-dom";
import { ArrowLeft, Terminal, Moon, ShieldAlert, HelpCircle, type LucideIcon } from "lucide-react";
+import { useTranslation } from "react-i18next";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { PhaseBadge } from "@/components/PhaseBadge";
@@ -15,37 +16,38 @@ import type { Phase } from "@/lib/types";
// Stopped/Failed/Stopping each get their own honest line rather than an empty
// console. `default` covers Unknown plus any future phase the backend may emit
// that the panel hasn't modelled yet — the screen stays informative regardless.
-function notStreamingCopy(phase: Phase): { icon: LucideIcon; title: string; body: string } {
+function useNotStreamingCopy(phase: Phase): { icon: LucideIcon; title: string; body: string } {
+ const { t } = useTranslation("servers");
switch (phase) {
case "Stopped":
return {
icon: Moon,
- title: "Server is asleep",
- body: "Wake it to boot a pod — the live console attaches automatically the moment it starts up.",
+ title: t("server_asleep_title"),
+ body: t("server_asleep_body"),
};
case "Stopping":
return {
icon: Moon,
- title: "Server is shutting down",
- body: "The pod is terminating, so the live console has detached. It will be asleep in a moment.",
+ title: t("server_shutting_down_title"),
+ body: t("server_shutting_down_body"),
};
case "Failed":
return {
icon: ShieldAlert,
- title: "Server failed to start",
- body: "No pod is running, so there is nothing to stream. Wake it to retry; the console attaches once a pod comes back up.",
+ title: t("server_failed_title"),
+ body: t("server_failed_body"),
};
default:
return {
icon: HelpCircle,
- title: "Console is offline",
- body: "The live console attaches automatically as soon as the server is running.",
+ title: t("console_offline_title"),
+ body: t("console_offline_body"),
};
}
}
function NotStreaming({ phase }: { phase: Phase }) {
- const { icon: Icon, title, body } = notStreamingCopy(phase);
+ const { icon: Icon, title, body } = useNotStreamingCopy(phase);
return (
@@ -60,6 +62,7 @@ function NotStreaming({ phase }: { phase: Phase }) {
export function ServerConsole() {
const { name = "" } = useParams();
const cfg = useConfig();
+ const { t } = useTranslation("servers");
const { data, error, loading, reload } = useAsync(
() => api.status(name),
[name],
@@ -78,7 +81,7 @@ export function ServerConsole() {
to="/servers"
className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground"
>
-
My servers
+
{t("my_servers_breadcrumb")}
{loading && !data ? (
@@ -106,11 +109,11 @@ export function ServerConsole() {
size="sm"
onClick={() => api.stop(name).then(reload)}
>
- Stop
+ {t("stop")}
) : (
)}
@@ -119,12 +122,10 @@ export function ServerConsole() {
- Console
+ {t("console_card_title")}
- Live, read-only output streamed from the running pod over SSE
- (spec §8). Commands run through a separate path — the panel never
- holds an RCON password.
+ {t("console_card_desc")}
diff --git a/panel/src/pages/admin/AdminHome.tsx b/panel/src/pages/admin/AdminHome.tsx
index 632aefb..f2dffce 100644
--- a/panel/src/pages/admin/AdminHome.tsx
+++ b/panel/src/pages/admin/AdminHome.tsx
@@ -1,5 +1,6 @@
import { Link } from "react-router-dom";
import { ServerCog, Boxes, ShieldCheck } from "lucide-react";
+import { useTranslation } from "react-i18next";
import { Card, CardContent } from "@/components/ui/card";
import { useTier } from "@/lib/tier";
@@ -7,33 +8,34 @@ import { useTier } from "@/lib/tier";
// content/server-admin surfaces. It deliberately states the four-power boundary
// so an admin never expects cluster-lifecycle levers here — those stay kubectl/CRD.
-const LINKS = [
- {
- to: "/admin/servers",
- icon: ServerCog,
- title: "Servers",
- body: "Create platform servers from the structured §15 form and manage the ones you operate.",
- },
- {
- to: "/admin/images",
- icon: Boxes,
- title: "Images",
- body: "The platform image whitelist — the value space the create form draws from.",
- },
-];
-
export function AdminHome() {
const { identity } = useTier();
+ const { t } = useTranslation("admin");
+
+ const LINKS = [
+ {
+ to: "/admin/servers",
+ icon: ServerCog,
+ title: t("servers"),
+ body: t("servers_desc"),
+ },
+ {
+ to: "/admin/images",
+ icon: Boxes,
+ title: t("images"),
+ body: t("images_desc"),
+ },
+ ];
return (
-
Admin
+
{t("title")}
- Server & content administration
- {identity?.email ? ` · signed in as ${identity.email}` : ""}.
+ {t("subtitle")}
+ {identity?.email ? t("signed_in_as", { email: identity.email }) : ""}.
@@ -54,11 +56,9 @@ export function AdminHome() {
- Cluster scaling, RBAC, Secrets and control-plane lifecycle are{" "}
- kubectl / CRD operations and are
- intentionally not available from the panel — the four-power separation
- (build / runtime / operator / app) is preserved. This is a window onto the
- platform, not a lever for operator power.
+ {t("footer_pre")}
+ {t("footer_kubectl")}
+ {t("footer_post")}
diff --git a/panel/src/pages/admin/ImageAdmin.tsx b/panel/src/pages/admin/ImageAdmin.tsx
index f216e89..81a9adc 100644
--- a/panel/src/pages/admin/ImageAdmin.tsx
+++ b/panel/src/pages/admin/ImageAdmin.tsx
@@ -1,4 +1,5 @@
import { Boxes, CheckCircle2, CircleSlash } from "lucide-react";
+import { useTranslation } from "react-i18next";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Loading, ErrorState, EmptyState } from "@/components/States";
@@ -11,17 +12,16 @@ import { useAsync } from "@/lib/hooks";
// added, so this page surfaces the whitelist honestly and labels the missing
// mutation rather than shipping dead buttons.
export function ImageAdmin() {
+ const { t } = useTranslation("admin");
const { data, error, loading, reload } = useAsync(() => api.listImages(), []);
const images = data ?? [];
return (
-
Images
+
{t("images_title")}
- The platform image whitelist. Only enabled images can back a new server.
- Editing the whitelist from the Web is auditable (spec §14) — the mutation
- routes are a pending admin-tier slice, so this view is read-only for now.
+ {t("images_subtitle")}
@@ -31,8 +31,8 @@ export function ImageAdmin() {
) : images.length === 0 ? (
) : (
@@ -50,11 +50,11 @@ export function ImageAdmin() {
{img.enabled ? (
- enabled
+ {t("enabled")}
) : (
- disabled
+ {t("disabled")}
)}
diff --git a/panel/src/pages/admin/ServerAdmin.tsx b/panel/src/pages/admin/ServerAdmin.tsx
index 21e81ff..37306e2 100644
--- a/panel/src/pages/admin/ServerAdmin.tsx
+++ b/panel/src/pages/admin/ServerAdmin.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
import { Card, CardContent } from "@/components/ui/card";
import { ServerCard } from "@/components/ServerCard";
import { CreateServerDialog } from "@/components/CreateServerDialog";
@@ -17,16 +18,17 @@ import { useAsync, useConfig } from "@/lib/hooks";
export function ServerAdmin() {
const cfg = useConfig();
const { data, error, loading, reload } = useAsync(() => api.myServers(), []);
+ const { t } = useTranslation("admin");
+ const { t: ts } = useTranslation("servers");
const servers = data ?? [];
return (
-
Servers
+
{t("servers")}
- Create platform servers from the structured form and manage the ones
- you operate.
+ {t("server_admin_subtitle")}
{cfg &&
}
@@ -37,11 +39,11 @@ export function ServerAdmin() {
) : error ? (
) : !cfg ? (
-
+
) : servers.length === 0 ? (
) : (
@@ -53,10 +55,7 @@ export function ServerAdmin() {
- Server creation goes through the structured form only — the platform maps
- your choices onto a vetted Kubernetes spec. Raw cluster config (host
- networking, host paths, arbitrary images, privileged pods) is never
- expressible here (spec §15).
+ {ts("server_admin_footer")}
diff --git a/panel/src/pages/ops/FleetTable.tsx b/panel/src/pages/ops/FleetTable.tsx
index 71f4d85..52abdeb 100644
--- a/panel/src/pages/ops/FleetTable.tsx
+++ b/panel/src/pages/ops/FleetTable.tsx
@@ -1,4 +1,5 @@
import { Network } from "lucide-react";
+import { useTranslation } from "react-i18next";
import { PendingBackend } from "@/components/States";
// FleetTable is the SysAdmin-Side cluster-wide server list: ALL servers with
@@ -6,21 +7,22 @@ import { PendingBackend } from "@/components/States";
// fleet-wide GET /admin/servers read, which is the next Oracle-verifiable backend
// slice. Honest placeholder until that lands — no fabricated rows.
export function FleetTable() {
+ const { t } = useTranslation("ops");
return (
-
Fleet
+
{t("fleet_title")}
- Every server on the platform — phase, owner, capacity.
+ {t("fleet_subtitle")}
);
diff --git a/panel/src/pages/ops/OpsOverview.tsx b/panel/src/pages/ops/OpsOverview.tsx
index 90091b4..862cc86 100644
--- a/panel/src/pages/ops/OpsOverview.tsx
+++ b/panel/src/pages/ops/OpsOverview.tsx
@@ -1,5 +1,6 @@
import { Link } from "react-router-dom";
import { Gauge, Network, ServerOff } from "lucide-react";
+import { useTranslation } from "react-i18next";
import { Card, CardContent } from "@/components/ui/card";
import { PendingBackend } from "@/components/States";
@@ -11,14 +12,15 @@ import { PendingBackend } from "@/components/States";
// does not exist yet — that is a separate Oracle-verifiable backend slice. Until
// then this surface is honest about the gap rather than charting fake data.
export function OpsOverview() {
+ const { t } = useTranslation("ops");
return (
-
SysAdmin
+
{t("title")}
- Platform observability cockpit — a window, not a lever.
+ {t("subtitle")}
@@ -26,17 +28,17 @@ export function OpsOverview() {
- Cluster-wide fleet
+ {t("cluster_wide_fleet")}
- Open fleet table →
+ {t("open_fleet_table")}
@@ -45,10 +47,9 @@ export function OpsOverview() {
- Control-plane scaling, RBAC, Secrets and cluster lifecycle are{" "}
- kubectl / CRD operations and are not
- reachable from here. SysAdmin-Side is observability only — the
- four-power separation (build / runtime / operator / app) is preserved.
+ {t("footer_pre")}
+ {t("footer_kubectl")}
+ {t("footer_post")}
diff --git a/panel/vite.config.ts b/panel/vite.config.ts
index a7516f9..b43ecbc 100644
--- a/panel/vite.config.ts
+++ b/panel/vite.config.ts
@@ -21,5 +21,8 @@ export default defineConfig(async ({ mode }) => {
"/api": { target: "http://localhost:8080", changeOrigin: true },
},
},
+ test: {
+ setupFiles: ["./vitest.setup.ts"],
+ },
};
});
diff --git a/panel/vitest.setup.ts b/panel/vitest.setup.ts
new file mode 100644
index 0000000..22f56de
--- /dev/null
+++ b/panel/vitest.setup.ts
@@ -0,0 +1,4 @@
+import i18next from "i18next";
+import "./src/i18n";
+
+i18next.changeLanguage("en-US");