fix(dashboard): make RequestLoggerDetail loadable outside Next — CSS via globals.css + CJS/ESM interop (#11703 base-reds)

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

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",

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";

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,

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;