fix(i18n): preserve remaining Vietnamese localization (#7935)

* fix(i18n): preserve remaining Vietnamese localization

* chore(quality): rebaseline file-size cap for 9 dashboard components (i18n wiring)

Restoring the Vietnamese localization on 9 dashboard components (useTranslations
wiring + t()/tc() call-site swaps for previously hardcoded strings) grows each
file by a small, irreducible amount. Bumps the frozen file-size-baseline.json
caps to match, with a justification entry per the project's own ratchet policy.

Co-authored-by: diegosouzapw <8016841+diegosouzapw@users.noreply.github.com>

* fix(i18n): wire weekday localization + add missing qwen CLI description

Two gaps left by this PR's own new contract tests, caught while
reconciling the branch against the release tip:

- CostOverviewTab.tsx added formatWeekdayLabel() but never called it;
  the Weekly Usage Pattern chart still showed raw English day
  abbreviations regardless of locale. Now maps weeklyPattern rows
  through it before handing them to WeeklyPatternCard.
- cliTools.toolDescriptions was missing an entry for "qwen" (a
  baseUrlSupport:"full" tool) in both en.json and vi.json, failing
  the PR's own cli-catalog-display-contract.test.ts.

Covered by the PR's existing tests/unit/dashboard-localization-contract.test.ts
and tests/unit/cli-catalog-display-contract.test.ts (both now pass).

Co-authored-by: diegosouzapw <8016841+diegosouzapw@users.noreply.github.com>

* i18n(vi): backfill the 4 proxySubscription keys #7299 added to en.json

#7299 (proxy subscriptions) merged while this branch was rebasing, adding
settings.proxySubscriptionsTab and settings.proxySubscription.error.{LOCAL_CORE_ENDPOINT_INVALID,
NEEDS_CORE_NOT_CONFIGURED,NO_USABLE_NODES} to en.json. This PR's own
i18n-vi-completeness contract asserts full en↔vi key parity, so the merge of the
current release tip surfaced them as missing. Adds the Vietnamese translations,
keeping the SS/VMess/Trojan/VLESS/SOCKS5 technical terms verbatim.

Co-authored-by: diegosouzapw <8016841+diegosouzapw@users.noreply.github.com>

---------

Co-authored-by: nguyenha935 <208228297+nguyenha935@users.noreply.github.com>
Co-authored-by: Diego Rodrigues de Sa e Souza <diegosouza.pw@gmail.com>
Co-authored-by: diegosouzapw <8016841+diegosouzapw@users.noreply.github.com>
Co-authored-by: nguyenha935 <nguyenha935@users.noreply.github.com>

tests/unit/ui/CompressionHub-patch-only.test.tsx

@@ -17,6 +17,8 @@ import React from "react";
 import { act } from "react";
 import { createRoot } from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { NextIntlClientProvider } from "next-intl";
+import messages from "../../../src/i18n/messages/en.json";
 
 // ── Mocks ─────────────────────────────────────────────────────────────────────
 
@@ -43,9 +45,7 @@ import CompressionHub from "../../../src/app/(dashboard)/dashboard/context/combo
 // ── Helpers ───────────────────────────────────────────────────────────────────
 
 function getLastPutBody(): Record<string, unknown> | null {
-  const putCall = [...fetchCalls].reverse().find(
-    (c) => c.init?.method === "PUT"
-  );
+  const putCall = [...fetchCalls].reverse().find((c) => c.init?.method === "PUT");
   if (!putCall) return null;
   return JSON.parse(putCall.init.body as string);
 }
@@ -95,13 +95,19 @@ describe("CompressionHub — PUT sends patch only, not full settings", () => {
   });
 
   afterEach(() => {
-    act(() => { root.unmount(); });
+    act(() => {
+      root.unmount();
+    });
     document.body.removeChild(container);
   });
 
   it("sends only the changed field when activeComboId is updated", async () => {
     await act(async () => {
-      root.render(<CompressionHub />);
+      root.render(
+        <NextIntlClientProvider locale="en" messages={{ contextCombos: messages.contextCombos }}>
+          <CompressionHub />
+        </NextIntlClientProvider>
+      );
     });
 
     // Find the combo selector and change it to "c1"
@@ -131,7 +137,11 @@ describe("CompressionHub — PUT sends patch only, not full settings", () => {
 
   it("sends only the toggle field when contextEditing is toggled", async () => {
     await act(async () => {
-      root.render(<CompressionHub />);
+      root.render(
+        <NextIntlClientProvider locale="en" messages={{ contextCombos: messages.contextCombos }}>
+          <CompressionHub />
+        </NextIntlClientProvider>
+      );
     });
 
     // Find the context editing toggle button

tests/unit/ui/compression-pipeline-editor.test.tsx

@@ -7,10 +7,11 @@
 import React, { act } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { describe, it, expect, beforeEach, afterEach } from "vitest";
+import { NextIntlClientProvider } from "next-intl";
+import messages from "../../../src/i18n/messages/en.json";
 
-const { CompressionPipelineEditor } = await import(
-  "../../../src/shared/components/compression/CompressionPipelineEditor"
-);
+const { CompressionPipelineEditor } =
+  await import("../../../src/shared/components/compression/CompressionPipelineEditor");
 
 const TABLE = {
   rtk: ["standard", "aggressive"],
@@ -34,11 +35,13 @@ afterEach(() => {
 function render(steps: { engine: string; intensity?: string }[], onChange: (s: unknown) => void) {
   act(() => {
     root.render(
-      <CompressionPipelineEditor
-        steps={steps}
-        onChange={onChange}
-        engineIntensities={TABLE as unknown as Record<string, readonly string[]>}
-      />
+      <NextIntlClientProvider locale="en" messages={{ contextCombos: messages.contextCombos }}>
+        <CompressionPipelineEditor
+          steps={steps}
+          onChange={onChange}
+          engineIntensities={TABLE as unknown as Record<string, readonly string[]>}
+        />
+      </NextIntlClientProvider>
     );
   });
 }
@@ -63,7 +66,9 @@ describe("CompressionPipelineEditor (T06)", () => {
     render([{ engine: "rtk", intensity: "standard" }], (s) => {
       received = s as typeof received;
     });
-    const addBtn = container.querySelector('[data-testid="pipeline-add-step"]') as HTMLButtonElement;
+    const addBtn = container.querySelector(
+      '[data-testid="pipeline-add-step"]'
+    ) as HTMLButtonElement;
     act(() => addBtn.dispatchEvent(new MouseEvent("click", { bubbles: true })));
     expect(received).not.toBeNull();
     expect(received!.length).toBe(2);

tests/unit/ui/compressionCockpit.test.tsx

@@ -2,6 +2,8 @@
 import React, { act } from "react";
 import { createRoot } from "react-dom/client";
 import { describe, it, expect, beforeAll, beforeEach, afterEach, vi } from "vitest";
+import { NextIntlClientProvider } from "next-intl";
+import messages from "../../../src/i18n/messages/en.json";
 import type { CompressionRunModel } from "@/app/(dashboard)/dashboard/compression/studio/compressionFlowModel";
 
 // ── Polyfill ResizeObserver (required by ReactFlow) ───────────────────────
@@ -41,7 +43,14 @@ function mount(ui: React.ReactElement): HTMLElement {
   containers.push(container);
   const root = createRoot(container);
   act(() => {
-    root.render(ui);
+    root.render(
+      <NextIntlClientProvider
+        locale="en"
+        messages={{ compressionStudio: messages.compressionStudio }}
+      >
+        {ui}
+      </NextIntlClientProvider>
+    );
   });
   return container;
 }

tests/unit/ui/compressionHub-active-selector.test.tsx

@@ -2,6 +2,8 @@
 import React, { act } from "react";
 import { createRoot } from "react-dom/client";
 import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
+import { NextIntlClientProvider } from "next-intl";
+import messages from "../../../src/i18n/messages/en.json";
 
 const containers: HTMLElement[] = [];
 const roots: Array<{ unmount: () => void }> = [];
@@ -13,13 +15,19 @@ function mount(ui: React.ReactElement): HTMLElement {
   const root = createRoot(container);
   roots.push(root);
   act(() => {
-    root.render(ui);
+    root.render(
+      <NextIntlClientProvider locale="en" messages={{ contextCombos: messages.contextCombos }}>
+        {ui}
+      </NextIntlClientProvider>
+    );
   });
   return container;
 }
 
 beforeEach(() => {
-  (globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+  (
+    globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean }
+  ).IS_REACT_ACT_ENVIRONMENT = true;
 });
 
 afterEach(async () => {
@@ -89,9 +97,8 @@ function setSelectValue(select: HTMLSelectElement, value: string) {
 
 describe("CompressionHub — active-profile selector", () => {
   async function render() {
-    const { default: CompressionHub } = await import(
-      "../../../src/app/(dashboard)/dashboard/context/combos/CompressionHub"
-    );
+    const { default: CompressionHub } =
+      await import("../../../src/app/(dashboard)/dashboard/context/combos/CompressionHub");
     let container!: HTMLElement;
     await act(async () => {
       container = mount(<CompressionHub />);
@@ -103,7 +110,9 @@ describe("CompressionHub — active-profile selector", () => {
   it("renders the active-profile select with Default + each named combo", async () => {
     setupFetchMock();
     const container = await render();
-    const select = container.querySelector('[data-testid="active-profile-select"]') as HTMLSelectElement | null;
+    const select = container.querySelector(
+      '[data-testid="active-profile-select"]'
+    ) as HTMLSelectElement | null;
     expect(select).toBeTruthy();
     expect(container.textContent).toContain("Default (from panel)");
     expect(container.textContent).toContain("RTK only");
@@ -112,7 +121,9 @@ describe("CompressionHub — active-profile selector", () => {
   it("changing the select to a combo PUTs activeComboId === that id", async () => {
     const { puts } = setupFetchMock();
     const container = await render();
-    const select = container.querySelector('[data-testid="active-profile-select"]') as HTMLSelectElement;
+    const select = container.querySelector(
+      '[data-testid="active-profile-select"]'
+    ) as HTMLSelectElement;
     await act(async () => {
       setSelectValue(select, "c1");
     });
@@ -128,7 +139,9 @@ describe("CompressionHub — active-profile selector", () => {
     const preview = () => container.querySelector('[data-testid="active-profile-preview"]');
     expect(preview()).toBeTruthy();
     expect(preview()!.textContent).toContain("Default");
-    const select = container.querySelector('[data-testid="active-profile-select"]') as HTMLSelectElement;
+    const select = container.querySelector(
+      '[data-testid="active-profile-select"]'
+    ) as HTMLSelectElement;
     await act(async () => {
       setSelectValue(select, "c1");
     });

tests/unit/ui/compressionHub-context-editing.test.tsx

@@ -2,6 +2,8 @@
 import React, { act } from "react";
 import { createRoot } from "react-dom/client";
 import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
+import { NextIntlClientProvider } from "next-intl";
+import messages from "../../../src/i18n/messages/en.json";
 
 // ── Helpers ───────────────────────────────────────────────────────────────
 
@@ -15,7 +17,11 @@ function mountInContainer(ui: React.ReactElement): HTMLElement {
   const root = createRoot(container);
   roots.push(root);
   act(() => {
-    root.render(ui);
+    root.render(
+      <NextIntlClientProvider locale="en" messages={{ contextCombos: messages.contextCombos }}>
+        {ui}
+      </NextIntlClientProvider>
+    );
   });
   return container;
 }
@@ -139,9 +145,6 @@ describe("CompressionHub — Context Editing", () => {
     });
     await flush();
 
-    // CompressionHub deliberately does NOT use useTranslations (see the
-    // hydration note at the top of CompressionHub.tsx) — its strings are
-    // literal English text, exactly like EngineConfigPage.
     const text = container.textContent ?? "";
     expect(text).toContain("Provider-delegated compression");
     expect(text).toContain("Context Editing (Claude)");

tests/unit/ui/compressionHub.test.tsx

@@ -2,6 +2,8 @@
 import React, { act } from "react";
 import { createRoot } from "react-dom/client";
 import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
+import { NextIntlClientProvider } from "next-intl";
+import messages from "../../../src/i18n/messages/en.json";
 
 // ── Helpers ───────────────────────────────────────────────────────────────
 
@@ -15,7 +17,11 @@ function mountInContainer(ui: React.ReactElement): HTMLElement {
   const root = createRoot(container);
   roots.push(root);
   act(() => {
-    root.render(ui);
+    root.render(
+      <NextIntlClientProvider locale="en" messages={{ contextCombos: messages.contextCombos }}>
+        {ui}
+      </NextIntlClientProvider>
+    );
   });
   return container;
 }
@@ -119,58 +125,62 @@ describe("CompressionHub", () => {
   // that the master toggle/mode selector/reorder buttons no longer render, is
   // covered by compressionHub-active-selector.test.tsx.
 
-  it("INVARIANT #1: no per-layer control issues a PUT/POST to /api/context/combos/default", { timeout: 20000 }, async () => {
-    const comboWrites: { method: string }[] = [];
-    const json = (body: unknown, status = 200) =>
-      new Response(JSON.stringify(body), {
-        status,
-        headers: { "Content-Type": "application/json" },
-      });
-    vi.spyOn(globalThis, "fetch").mockImplementation(
-      async (input: RequestInfo | URL, init?: RequestInit) => {
-        const url = input.toString();
-        if (url.includes("/api/context/combos/default")) {
-          if (init?.method === "PUT" || init?.method === "POST") {
-            comboWrites.push({ method: init.method });
+  it(
+    "INVARIANT #1: no per-layer control issues a PUT/POST to /api/context/combos/default",
+    { timeout: 20000 },
+    async () => {
+      const comboWrites: { method: string }[] = [];
+      const json = (body: unknown, status = 200) =>
+        new Response(JSON.stringify(body), {
+          status,
+          headers: { "Content-Type": "application/json" },
+        });
+      vi.spyOn(globalThis, "fetch").mockImplementation(
+        async (input: RequestInfo | URL, init?: RequestInit) => {
+          const url = input.toString();
+          if (url.includes("/api/context/combos/default")) {
+            if (init?.method === "PUT" || init?.method === "POST") {
+              comboWrites.push({ method: init.method });
+            }
+            return json({ id: "default", name: "Default", pipeline: [{ engine: "rtk" }] });
           }
-          return json({ id: "default", name: "Default", pipeline: [{ engine: "rtk" }] });
+          if (url.includes("/api/settings/compression")) {
+            return json({ enabled: true, defaultMode: "stacked" });
+          }
+          if (url.includes("/api/compression/engines")) {
+            return json(enginePayload());
+          }
+          if (url.includes("/api/context/combos") || url.includes("/api/combos")) {
+            return json({ combos: [] });
+          }
+          if (url.includes("/api/compression/language-packs")) {
+            return json({ packs: [] });
+          }
+          return json({}, 404);
         }
-        if (url.includes("/api/settings/compression")) {
-          return json({ enabled: true, defaultMode: "stacked" });
-        }
-        if (url.includes("/api/compression/engines")) {
-          return json(enginePayload());
-        }
-        if (url.includes("/api/context/combos") || url.includes("/api/combos")) {
-          return json({ combos: [] });
-        }
-        if (url.includes("/api/compression/language-packs")) {
-          return json({ packs: [] });
-        }
-        return json({}, 404);
-      }
-    );
+      );
 
-    const { default: CompressionHub } =
-      await import("../../../src/app/(dashboard)/dashboard/context/combos/CompressionHub");
+      const { default: CompressionHub } =
+        await import("../../../src/app/(dashboard)/dashboard/context/combos/CompressionHub");
 
-    let container!: HTMLElement;
-    await act(async () => {
-      container = mountInContainer(<CompressionHub />);
-    });
-    await flush();
-
-    // Click every on/off switch in the Hub (master + any layer controls that remain).
-    const switches = Array.from(container.querySelectorAll('[role="switch"]'));
-    for (const sw of switches) {
+      let container!: HTMLElement;
       await act(async () => {
-        (sw as HTMLElement).click();
+        container = mountInContainer(<CompressionHub />);
       });
       await flush();
-    }
 
-    expect(comboWrites).toHaveLength(0);
-  });
+      // Click every on/off switch in the Hub (master + any layer controls that remain).
+      const switches = Array.from(container.querySelectorAll('[role="switch"]'));
+      for (const sw of switches) {
+        await act(async () => {
+          (sw as HTMLElement).click();
+        });
+        await flush();
+      }
+
+      expect(comboWrites).toHaveLength(0);
+    }
+  );
 });
 
 describe("CompressionCombosPageClient", () => {

tests/unit/ui/compressionPanel.test.tsx

@@ -2,16 +2,14 @@
 import React, { act } from "react";
 import { createRoot } from "react-dom/client";
 import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
-import {
-  ENGINE_IDS,
-  engineMeta,
-} from "../../../open-sse/services/compression/engineCatalog.ts";
+import { ENGINE_IDS } from "../../../open-sse/services/compression/engineCatalog.ts";
 
 // i18n does not resolve to a real locale in vitest/jsdom, so mock next-intl to echo
-// the key. This test therefore asserts ONLY on i18n-independent strings: catalog
-// labels/descriptions, engine ids, data-testid hooks, and the PUT request body.
+// the key. This test therefore asserts on translation keys, engine ids,
+// data-testid hooks, and the PUT request body.
 vi.mock("next-intl", () => ({
-  useTranslations: () => (key: string) => key,
+  useTranslations: () => (key: string, values?: Record<string, unknown>) =>
+    values ? `${key} ${Object.values(values).join(" ")}` : key,
   useLocale: () => "en",
 }));
 
@@ -125,9 +123,8 @@ function setupFetchMock(): { puts: CapturedPut[] } {
 describe("CompressionPanel", () => {
   it("renders a row for every engine id in the catalog", async () => {
     setupFetchMock();
-    const { default: CompressionPanel } = await import(
-      "../../../src/app/(dashboard)/dashboard/context/settings/CompressionPanel"
-    );
+    const { default: CompressionPanel } =
+      await import("../../../src/app/(dashboard)/dashboard/context/settings/CompressionPanel");
 
     let container!: HTMLElement;
     await act(async () => {
@@ -138,16 +135,14 @@ describe("CompressionPanel", () => {
     for (const id of ENGINE_IDS) {
       const row = container.querySelector(`[data-testid="engine-row-${id}"]`);
       expect(row, `expected a row for engine "${id}"`).toBeTruthy();
-      // Catalog label/description are hardcoded English (i18n-independent).
-      expect(container.textContent).toContain(engineMeta(id).label);
+      expect(container.textContent).toContain(`compressionEngine.${id}.label`);
     }
   });
 
   it("shows the rtk level 'standard' as selected", async () => {
     setupFetchMock();
-    const { default: CompressionPanel } = await import(
-      "../../../src/app/(dashboard)/dashboard/context/settings/CompressionPanel"
-    );
+    const { default: CompressionPanel } =
+      await import("../../../src/app/(dashboard)/dashboard/context/settings/CompressionPanel");
 
     let container!: HTMLElement;
     await act(async () => {
@@ -164,9 +159,8 @@ describe("CompressionPanel", () => {
 
   it("toggling caveman PUTs engines.caveman.enabled === true", async () => {
     const { puts } = setupFetchMock();
-    const { default: CompressionPanel } = await import(
-      "../../../src/app/(dashboard)/dashboard/context/settings/CompressionPanel"
-    );
+    const { default: CompressionPanel } =
+      await import("../../../src/app/(dashboard)/dashboard/context/settings/CompressionPanel");
 
     let container!: HTMLElement;
     await act(async () => {
@@ -202,9 +196,8 @@ describe("CompressionPanel", () => {
 
   it("derived-pipeline preview reflects the enabled engines", async () => {
     setupFetchMock();
-    const { default: CompressionPanel } = await import(
-      "../../../src/app/(dashboard)/dashboard/context/settings/CompressionPanel"
-    );
+    const { default: CompressionPanel } =
+      await import("../../../src/app/(dashboard)/dashboard/context/settings/CompressionPanel");
 
     let container!: HTMLElement;
     await act(async () => {

tests/unit/ui/compressionStylesPanel.test.tsx

@@ -2,10 +2,7 @@
 import React, { act } from "react";
 import { createRoot } from "react-dom/client";
 import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
-import {
-  OUTPUT_STYLE_IDS,
-  outputStyleMeta,
-} from "../../../open-sse/services/compression/outputStyles/catalog.ts";
+import { OUTPUT_STYLE_IDS } from "../../../open-sse/services/compression/outputStyles/catalog.ts";
 
 // Locale is mutable per-test so we can exercise the locale gate (terse-cjk → zh only).
 const intl = vi.hoisted(() => ({ locale: "en" }));
@@ -28,8 +25,9 @@ function mount(ui: React.ReactElement): HTMLElement {
 }
 
 beforeEach(() => {
-  (globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT =
-    true;
+  (
+    globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean }
+  ).IS_REACT_ACT_ENVIRONMENT = true;
   intl.locale = "en";
 });
 
@@ -65,7 +63,8 @@ function setupFetchMock() {
     async (input: RequestInfo | URL, init?: RequestInit) => {
       const url = input.toString();
       const method = (init?.method ?? "GET").toUpperCase();
-      if (url.includes("/api/settings/compression/mcp-accessibility")) return json({ enabled: true });
+      if (url.includes("/api/settings/compression/mcp-accessibility"))
+        return json({ enabled: true });
       if (url.includes("/api/settings/compression")) {
         if (method === "PUT") {
           const body = JSON.parse(String(init?.body ?? "{}"));
@@ -84,9 +83,8 @@ describe("CompressionPanel output styles", () => {
   it("renders one row per catalog style", async () => {
     setupFetchMock();
     intl.locale = "zh-CN"; // a locale that matches every gated style, so all rows render
-    const { default: CompressionPanel } = await import(
-      "../../../src/app/(dashboard)/dashboard/context/settings/CompressionPanel"
-    );
+    const { default: CompressionPanel } =
+      await import("../../../src/app/(dashboard)/dashboard/context/settings/CompressionPanel");
     let container!: HTMLElement;
     await act(async () => {
       container = mount(<CompressionPanel />);
@@ -95,16 +93,15 @@ describe("CompressionPanel output styles", () => {
     for (const id of OUTPUT_STYLE_IDS) {
       const row = container.querySelector(`[data-testid="output-style-row-${id}"]`);
       expect(row, `expected a row for style "${id}"`).toBeTruthy();
-      expect(container.textContent).toContain(outputStyleMeta(id).label);
+      expect(row?.textContent).toContain(`compressionOutputStyle.${id}.label`);
     }
   });
 
   it("locale-gates terse-cjk: hidden under a non-zh locale", async () => {
     setupFetchMock();
     intl.locale = "en";
-    const { default: CompressionPanel } = await import(
-      "../../../src/app/(dashboard)/dashboard/context/settings/CompressionPanel"
-    );
+    const { default: CompressionPanel } =
+      await import("../../../src/app/(dashboard)/dashboard/context/settings/CompressionPanel");
     let container!: HTMLElement;
     await act(async () => {
       container = mount(<CompressionPanel />);
@@ -120,9 +117,8 @@ describe("CompressionPanel output styles", () => {
   it("locale-gates terse-cjk: offered under a zh locale (zh-CN base matches)", async () => {
     setupFetchMock();
     intl.locale = "zh-CN";
-    const { default: CompressionPanel } = await import(
-      "../../../src/app/(dashboard)/dashboard/context/settings/CompressionPanel"
-    );
+    const { default: CompressionPanel } =
+      await import("../../../src/app/(dashboard)/dashboard/context/settings/CompressionPanel");
     let container!: HTMLElement;
     await act(async () => {
       container = mount(<CompressionPanel />);
@@ -133,9 +129,8 @@ describe("CompressionPanel output styles", () => {
 
   it("toggling a style PUTs an outputStyles selection", async () => {
     const { puts } = setupFetchMock();
-    const { default: CompressionPanel } = await import(
-      "../../../src/app/(dashboard)/dashboard/context/settings/CompressionPanel"
-    );
+    const { default: CompressionPanel } =
+      await import("../../../src/app/(dashboard)/dashboard/context/settings/CompressionPanel");
     let container!: HTMLElement;
     await act(async () => {
       container = mount(<CompressionPanel />);

tests/unit/ui/compressionStylesTile.test.tsx

@@ -3,7 +3,10 @@ import React, { act } from "react";
 import { createRoot } from "react-dom/client";
 import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
 
-vi.mock("next-intl", () => ({ useTranslations: () => (key: string) => key }));
+vi.mock("next-intl", () => ({
+  useTranslations: () => (key: string) => key,
+  useLocale: () => "en",
+}));
 
 const containers: HTMLElement[] = [];
 const roots: Array<{ unmount: () => void }> = [];
@@ -19,8 +22,9 @@ function mount(ui: React.ReactElement): HTMLElement {
 }
 
 beforeEach(() => {
-  (globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT =
-    true;
+  (
+    globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean }
+  ).IS_REACT_ACT_ENVIRONMENT = true;
 });
 
 afterEach(async () => {
@@ -53,9 +57,8 @@ describe("CompressionStylesTile", () => {
         { status: 200, headers: { "Content-Type": "application/json" } }
       )
     );
-    const { default: CompressionStylesTile } = await import(
-      "../../../src/app/(dashboard)/dashboard/context/CompressionStylesTile"
-    );
+    const { default: CompressionStylesTile } =
+      await import("../../../src/app/(dashboard)/dashboard/context/CompressionStylesTile");
     let container!: HTMLElement;
     await act(async () => {
       container = mount(<CompressionStylesTile />);