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

* fix(dashboard): make RequestLoggerDetail loadable outside Next — CSS via globals.css, CJS/ESM interop for react18-json-view

Origin: #11703 (5684589ce7) imported `react18-json-view/src/{style,dark}.css` at
module level in RequestLoggerDetail(.sections).tsx and relied on the bundler's
default-import interop. Next is fine with both, but every test that renders the
component died on the release tip:

- node:test / tsx: ERR_UNKNOWN_FILE_EXTENSION ".css" — request-log-detail-layout,
  request-log-detail-stream, request-logger-detail-copy-all,
  request-timeline-lane-allocation (4 unit shards red on every PR).
- esbuild bundle-safety check (media-page-client-browser-bundle): cannot resolve the
  .css specifiers.
- node ESM resolves the package's CJS `main` (no `exports` map), so the default
  import is the module namespace: "Element type is invalid … got: object".

Fix at the source: the two stylesheets are @imported from src/app/globals.css
(same as material-symbols / fumadocs), and the component unwraps `mod.default ??
mod` like redisQuotaStore/keytar already do. Also adds the 5 vi strings #11703
introduced (requestLogger.detail.{collapseAllLevels,collapseOneLevel,
currentExpandLevel,expandOneLevel,expandAllLevels}) — vi has strict parity.

Refs #11703

* refactor(dashboard): move the react18-json-view interop into shared/components/jsonView.ts

RequestLoggerDetail.tsx is frozen by check:file-size (1111 lines, cannot grow); the
inline interop pushed it to 1118. One tiny module serves both components and keeps
the CSS-import warning in a single place.

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

@@ -11264,6 +11264,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;