diff --git a/src/app/globals.css b/src/app/globals.css
index e3d5a6b7680..16ea6b0b4be 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -8,6 +8,10 @@
    The bundled @font-face uses family "Material Symbols Outlined", matching the
    .material-symbols-outlined rule defined later in this file. */
 @import "material-symbols/outlined.css";
+/* react18-json-view (request/response JSON tree in RequestLoggerDetail) — imported here
+   instead of in the component so node:test / esbuild never see a .css import. */
+@import "react18-json-view/src/style.css";
+@import "react18-json-view/src/dark.css";
 @source "../../node_modules/fumadocs-ui/css/generated/*.css";
 
 /* Keep Tailwind v4 from scanning the entire repository. The UI lives in the
diff --git a/src/i18n/messages/vi.json b/src/i18n/messages/vi.json
index e27b280bb38..e2323ef9861 100644
--- a/src/i18n/messages/vi.json
+++ b/src/i18n/messages/vi.json
@@ -11253,6 +11253,11 @@
     "detail": {
       "collapse": "Thu gọn {title}",
       "expand": "Mở rộng {title}",
+      "collapseAllLevels": "Thu gọn tất cả",
+      "collapseOneLevel": "Thu gọn một cấp",
+      "currentExpandLevel": "Cấp mở rộng hiện tại",
+      "expandOneLevel": "Mở rộng một cấp",
+      "expandAllLevels": "Mở rộng tất cả",
       "copyTitle": "Sao chép {title}",
       "copied": "Đã sao chép!",
       "copy": "Sao chép",
diff --git a/src/shared/components/RequestLoggerDetail.sections.tsx b/src/shared/components/RequestLoggerDetail.sections.tsx
index 3c0f10f3452..4a8d79ea6a1 100644
--- a/src/shared/components/RequestLoggerDetail.sections.tsx
+++ b/src/shared/components/RequestLoggerDetail.sections.tsx
@@ -2,9 +2,7 @@
 
 import { useState, useEffect, useRef, useMemo } from "react";
 import { useTranslations } from "next-intl";
-import JsonView from "react18-json-view";
-import "react18-json-view/src/style.css";
-import "react18-json-view/src/dark.css";
+import { JsonView } from "@/shared/components/jsonView";
 import { ChatBubble } from "@/app/(dashboard)/dashboard/tools/traffic-inspector/components/chat/ChatBubble";
 import { buildRequestTurns, buildResponseTurns } from "@/mitm/inspector/conversationNormalizer";
 import type { InterceptedRequest, NormalizedTurn } from "@/mitm/inspector/types";
diff --git a/src/shared/components/RequestLoggerDetail.tsx b/src/shared/components/RequestLoggerDetail.tsx
index 45fd9214e6b..57a7e5c59eb 100644
--- a/src/shared/components/RequestLoggerDetail.tsx
+++ b/src/shared/components/RequestLoggerDetail.tsx
@@ -2,9 +2,7 @@
 
 import { useState, useEffect, useMemo, useRef } from "react";
 import { useLocale, useTranslations } from "next-intl";
-import JsonView from "react18-json-view";
-import "react18-json-view/src/style.css";
-import "react18-json-view/src/dark.css";
+import { JsonView } from "@/shared/components/jsonView";
 import {
   PROVIDER_COLORS,
   getHttpStatusStyle as getStatusStyle,
diff --git a/src/shared/components/jsonView.ts b/src/shared/components/jsonView.ts
new file mode 100644
index 00000000000..5e9d4ed57c1
--- /dev/null
+++ b/src/shared/components/jsonView.ts
@@ -0,0 +1,9 @@
+import JsonViewModule from "react18-json-view";
+
+// react18-json-view ships no `exports` map: bundlers take the ESM `module` build and hand
+// over the component, but node ESM (node:test) resolves the CJS `main`, where the default
+// import is the whole module namespace. Same interop as redisQuotaStore / keytar-reader.
+// Its stylesheets are @imported from src/app/globals.css — never import CSS here or in the
+// components (node:test and the browser-bundle check cannot load .css).
+export const JsonView = ((JsonViewModule as unknown as { default?: typeof JsonViewModule })
+  .default ?? JsonViewModule) as typeof JsonViewModule;