From 471a5bed00f6ded3d59e20805610b8523cfc5d4f Mon Sep 17 00:00:00 2001 From: diegosouzapw Date: Thu, 28 May 2026 17:30:04 -0300 Subject: [PATCH] refactor(inspector-ui): wire useTranslations in ConversationTab/StatsTab/StatsCharts/TimingWaterfall (M3+M4) - ConversationTab: t("conversationNotAvailable"), t("conversationNoMessages"), t("contextFingerprint") - StatsTab: adds useTranslations + t("statsNoData"); LoadingCharts sub-component uses t("loadingCharts") - StatsCharts: useTranslations for all 5 chart labels (statusDistribution, latency, totalRequests, successful, errors) - TimingWaterfall: useTranslations for t("timingProxyOverhead") and t("timingUpstreamResponse") --- .../components/shared/TimingWaterfall.tsx | 6 ++++-- .../components/tabs/ConversationTab.tsx | 9 +++------ .../components/tabs/StatsCharts.tsx | 13 ++++++++----- .../traffic-inspector/components/tabs/StatsTab.tsx | 13 +++++++++---- 4 files changed, 24 insertions(+), 17 deletions(-) diff --git a/src/app/(dashboard)/dashboard/tools/traffic-inspector/components/shared/TimingWaterfall.tsx b/src/app/(dashboard)/dashboard/tools/traffic-inspector/components/shared/TimingWaterfall.tsx index 7ff64bae6a..03ce7cf2de 100644 --- a/src/app/(dashboard)/dashboard/tools/traffic-inspector/components/shared/TimingWaterfall.tsx +++ b/src/app/(dashboard)/dashboard/tools/traffic-inspector/components/shared/TimingWaterfall.tsx @@ -1,5 +1,6 @@ "use client"; +import { useTranslations } from "next-intl"; import type { InterceptedRequest } from "@/mitm/inspector/types"; interface TimingWaterfallProps { @@ -7,6 +8,7 @@ interface TimingWaterfallProps { } export function TimingWaterfall({ request }: TimingWaterfallProps) { + const t = useTranslations("trafficInspector"); const { proxyLatencyMs, upstreamLatencyMs, totalLatencyMs } = request; const total = totalLatencyMs ?? (proxyLatencyMs ?? 0) + (upstreamLatencyMs ?? 0); @@ -16,12 +18,12 @@ export function TimingWaterfall({ request }: TimingWaterfallProps) { const segments: Array<{ label: string; ms: number; color: string }> = [ { - label: "Proxy overhead", + label: t("timingProxyOverhead"), ms: proxyLatencyMs ?? 0, color: "bg-blue-500", }, { - label: "Upstream response", + label: t("timingUpstreamResponse"), ms: upstreamLatencyMs ?? 0, color: "bg-green-500", }, diff --git a/src/app/(dashboard)/dashboard/tools/traffic-inspector/components/tabs/ConversationTab.tsx b/src/app/(dashboard)/dashboard/tools/traffic-inspector/components/tabs/ConversationTab.tsx index cb09a1baa7..6c71b2ea12 100644 --- a/src/app/(dashboard)/dashboard/tools/traffic-inspector/components/tabs/ConversationTab.tsx +++ b/src/app/(dashboard)/dashboard/tools/traffic-inspector/components/tabs/ConversationTab.tsx @@ -15,10 +15,7 @@ export function ConversationTab({ request }: ConversationTabProps) { if (!conversation) { return ( -
- Conversation data not available. This may not be an LLM request or the body - could not be parsed. -
+
{t("conversationNotAvailable")}
); } @@ -26,7 +23,7 @@ export function ConversationTab({ request }: ConversationTabProps) { if (allTurns.length === 0) { return ( -
No messages found in this request.
+
{t("conversationNoMessages")}
); } @@ -34,7 +31,7 @@ export function ConversationTab({ request }: ConversationTabProps) {
{conversation.contextKey && (
- Context fingerprint:{" "} + {t("contextFingerprint")}{" "} #{conversation.contextKey.slice(0, 12)}
)} diff --git a/src/app/(dashboard)/dashboard/tools/traffic-inspector/components/tabs/StatsCharts.tsx b/src/app/(dashboard)/dashboard/tools/traffic-inspector/components/tabs/StatsCharts.tsx index 4ba75211ba..91bdfd7c1e 100644 --- a/src/app/(dashboard)/dashboard/tools/traffic-inspector/components/tabs/StatsCharts.tsx +++ b/src/app/(dashboard)/dashboard/tools/traffic-inspector/components/tabs/StatsCharts.tsx @@ -10,6 +10,7 @@ import { LineChart, Line, } from "recharts"; +import { useTranslations } from "next-intl"; import type { InterceptedRequest } from "@/mitm/inspector/types"; interface StatsChartsProps { @@ -17,6 +18,8 @@ interface StatsChartsProps { } export default function StatsCharts({ requests }: StatsChartsProps) { + const t = useTranslations("trafficInspector"); + const statusDist = requests.reduce>((acc, r) => { const key = typeof r.status === "number" ? `${Math.floor(r.status / 100)}xx` : String(r.status); @@ -34,7 +37,7 @@ export default function StatsCharts({ requests }: StatsChartsProps) {

- Status distribution + {t("statsStatusDistribution")}

@@ -51,7 +54,7 @@ export default function StatsCharts({ requests }: StatsChartsProps) { {latencyData.length > 1 && (

- Latency (last 50 requests) + {t("statsLatency")}

@@ -75,13 +78,13 @@ export default function StatsCharts({ requests }: StatsChartsProps) {
{requests.length}
-
Total requests
+
{t("statsTotalRequests")}
{requests.filter((r) => typeof r.status === "number" && r.status < 400).length}
-
Successful
+
{t("statsSuccessful")}
@@ -92,7 +95,7 @@ export default function StatsCharts({ requests }: StatsChartsProps) { ).length }
-
Errors
+
{t("statsErrors")}
diff --git a/src/app/(dashboard)/dashboard/tools/traffic-inspector/components/tabs/StatsTab.tsx b/src/app/(dashboard)/dashboard/tools/traffic-inspector/components/tabs/StatsTab.tsx index 2392c569a2..f85745d0e1 100644 --- a/src/app/(dashboard)/dashboard/tools/traffic-inspector/components/tabs/StatsTab.tsx +++ b/src/app/(dashboard)/dashboard/tools/traffic-inspector/components/tabs/StatsTab.tsx @@ -1,6 +1,7 @@ "use client"; import dynamic from "next/dynamic"; +import { useTranslations } from "next-intl"; import type { InterceptedRequest } from "@/mitm/inspector/types"; interface StatsTabProps { @@ -10,15 +11,19 @@ interface StatsTabProps { // Recharts bundle is split via Next.js dynamic() — not included in the initial page chunk. const StatsCharts = dynamic(() => import("./StatsCharts"), { ssr: false, - loading: () =>
Loading charts…
, + loading: () => , }); +function LoadingCharts() { + const t = useTranslations("trafficInspector"); + return
{t("loadingCharts")}
; +} + export function StatsTab({ requests }: StatsTabProps) { + const t = useTranslations("trafficInspector"); if (requests.length === 0) { return ( -
- No requests yet. Start a session recording to capture data for stats. -
+
{t("statsNoData")}
); } return ;