translate keys and restructure roles and users

messages/en-US.json

@@ -1936,6 +1936,62 @@
     "aiResourceAliasRequired": "Alias is required for inference resources",
     "aiResourceDomainConfiguration": "Domain configuration",
     "aiResourceDomainConfigurationDescription": "Choose the domain clients will use to reach this inference resource.",
+    "aiUsageAnalyticsTitle": "AI Usage Analytics",
+    "aiUsageAnalyticsDescription": "Analyze AI gateway cost, token usage, and activity across providers, resources, roles, and users",
+    "aiUsageTabOverview": "Overview",
+    "aiUsageTabProviders": "Providers",
+    "aiUsageTabResources": "Resources",
+    "aiUsageTabUsersRoles": "Users & Roles",
+    "aiUsageFilterProvider": "Provider",
+    "aiUsageFilterModel": "Model",
+    "aiUsageFilterResource": "Resource",
+    "aiUsageFilterRole": "Role",
+    "aiUsageFilterUser": "User",
+    "aiUsageFilterAllProviders": "All Providers",
+    "aiUsageFilterAllModels": "All Models",
+    "aiUsageFilterAllResources": "All Resources",
+    "aiUsageFilterAllRoles": "All Roles",
+    "aiUsageFilterAllUsers": "All Users",
+    "aiUsageResetFilters": "Reset Filters",
+    "aiUsageRefresh": "Refresh",
+    "aiUsageTokenTypePrompt": "Prompt",
+    "aiUsageTokenTypeCacheRead": "Cache read",
+    "aiUsageTokenTypeCacheWrite": "Cache write",
+    "aiUsageTokenTypeCompletion": "Completion",
+    "aiUsageTokenTypeReasoning": "Reasoning",
+    "aiUsageRequests": "Requests",
+    "aiUsageCost": "Cost",
+    "aiUsageTokens": "Tokens",
+    "aiUsageOther": "Other",
+    "aiUsageTotalRequests": "Total Requests",
+    "aiUsageTotalTokens": "Total Tokens",
+    "aiUsageTotalCost": "Total Cost",
+    "aiUsageEstimated": "Estimated",
+    "aiUsageRequestVolume": "Request Volume",
+    "aiUsageTokenUsage": "Token Usage",
+    "aiUsageModelCost": "Model Cost",
+    "aiUsageModelTokens": "Model Tokens",
+    "aiUsageTopModels": "Top Models",
+    "aiUsageTopProviders": "Top Providers",
+    "aiUsageProviderCost": "Provider Cost",
+    "aiUsageProviderTokenUsage": "Provider Token Usage",
+    "aiUsageTopResources": "Top Resources",
+    "aiUsageResourceCost": "Resource Cost",
+    "aiUsageResourceTokenUsage": "Resource Token Usage",
+    "aiUsageResourceTypePublic": "Resource",
+    "aiUsageResourceTypeSite": "Site resource",
+    "aiUsageNoResource": "No resource",
+    "aiUsageRolesTab": "Roles",
+    "aiUsageUsersTab": "Users",
+    "aiUsageTopRoles": "Top Roles",
+    "aiUsageRoleCost": "Role Cost",
+    "aiUsageRoleTokenUsage": "Role Token Usage",
+    "aiUsageTopUsers": "Top Users",
+    "aiUsageUserCost": "User Cost",
+    "aiUsageUserTokenUsage": "User Token Usage",
+    "aiUsageUnknownUser": "Unknown user",
+    "aiUsageLoading": "Loading...",
+    "aiUsageNoData": "No data",
     "resourceBudgetSettings": "Budget",
     "resourceBudgetSettingsDescription": "Configure how this inference resource restricts usage based on spending or token limits",
     "sidebarApiKeys": "API Keys",

src/app/[orgId]/settings/logs/ai-usage/page.tsx

@@ -1,10 +1,14 @@
 import { AiUsageAnalyticsData } from "@app/components/AiUsageAnalyticsData";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
 import type { Metadata } from "next";
+import { getTranslations } from "next-intl/server";
 
-export const metadata: Metadata = {
+export async function generateMetadata(): Promise<Metadata> {
-    title: "AI Usage Analytics"
+    const t = await getTranslations();
-};
+    return {
+        title: t("aiUsageAnalyticsTitle")
+    };
+}
 
 export interface AiUsageAnalyticsPageProps {
     params: Promise<{ orgId: string }>;
@@ -14,12 +18,13 @@ export default async function AiUsageAnalyticsPage(
     props: AiUsageAnalyticsPageProps
 ) {
     const orgId = (await props.params).orgId;
+    const t = await getTranslations();
 
     return (
         <>
             <SettingsSectionTitle
-                title="AI Usage Analytics"
+                title={t("aiUsageAnalyticsTitle")}
-                description="Analyze AI gateway cost, token usage, and activity across providers, resources, roles, and users"
+                description={t("aiUsageAnalyticsDescription")}
             />
 
             <div className="container mx-auto max-w-12xl">

src/components/AiUsageAnalyticsData.tsx

@@ -8,6 +8,7 @@ import {
 } from "@app/lib/queries";
 import { useIsFetching, useQuery, useQueryClient } from "@tanstack/react-query";
 import { RefreshCw, XIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { DateRangePicker, type DateTimeValue } from "./DateTimePicker";
 import { Button } from "./ui/button";
@@ -35,6 +36,7 @@ export type AiUsageAnalyticsDataProps = {
 const AI_USAGE_ANALYTICS_QUERY_PREFIX = ["AI_USAGE_ANALYTICS"];
 
 export function AiUsageAnalyticsData(props: AiUsageAnalyticsDataProps) {
+    const t = useTranslations();
     const searchParams = useSearchParams();
     const path = usePathname();
     const router = useRouter();
@@ -139,10 +141,10 @@ export function AiUsageAnalyticsData(props: AiUsageAnalyticsDataProps) {
     }));
 
     const tabs: TabItem[] = [
-        { title: "Overview", href: "#" },
+        { title: t("aiUsageTabOverview"), href: "#" },
-        { title: "Provider Usage", href: "#" },
+        { title: t("aiUsageTabProviders"), href: "#" },
-        { title: "Resources", href: "#" },
+        { title: t("aiUsageTabResources"), href: "#" },
-        { title: "Users & Roles", href: "#" }
+        { title: t("aiUsageTabUsersRoles"), href: "#" }
     ];
 
     return (
@@ -172,42 +174,42 @@ export function AiUsageAnalyticsData(props: AiUsageAnalyticsDataProps) {
                         <div className="flex flex-wrap items-end gap-2">
                             <FilterSelect
                                 id="providerId"
-                                label="Provider"
+                                label={t("aiUsageFilterProvider")}
                                 value={filters.providerId?.toString()}
                                 options={providerOptions}
-                                placeholder="All Providers"
+                                placeholder={t("aiUsageFilterAllProviders")}
                                 onValueChange={(v) => setFilter("providerId", v)}
                             />
                             <FilterSelect
                                 id="model"
-                                label="Model"
+                                label={t("aiUsageFilterModel")}
                                 value={filters.model}
                                 options={modelOptions}
-                                placeholder="All Models"
+                                placeholder={t("aiUsageFilterAllModels")}
                                 onValueChange={(v) => setFilter("model", v)}
                             />
                             <FilterSelect
                                 id="resourceId"
-                                label="Resource"
+                                label={t("aiUsageFilterResource")}
                                 value={filters.resourceId?.toString()}
                                 options={resourceOptions}
-                                placeholder="All Resources"
+                                placeholder={t("aiUsageFilterAllResources")}
                                 onValueChange={(v) => setFilter("resourceId", v)}
                             />
                             <FilterSelect
                                 id="roleId"
-                                label="Role"
+                                label={t("aiUsageFilterRole")}
                                 value={filters.roleId?.toString()}
                                 options={roleOptions}
-                                placeholder="All Roles"
+                                placeholder={t("aiUsageFilterAllRoles")}
                                 onValueChange={(v) => setFilter("roleId", v)}
                             />
                             <FilterSelect
                                 id="userId"
-                                label="User"
+                                label={t("aiUsageFilterUser")}
                                 value={filters.userId}
                                 options={userOptions}
-                                placeholder="All Users"
+                                placeholder={t("aiUsageFilterAllUsers")}
                                 onValueChange={(v) => setFilter("userId", v)}
                             />
 
@@ -218,7 +220,7 @@ export function AiUsageAnalyticsData(props: AiUsageAnalyticsDataProps) {
                                     className="gap-2"
                                 >
                                     <XIcon className="size-4" />
-                                    Reset Filters
+                                    {t("aiUsageResetFilters")}
                                 </Button>
                             )}
                         </div>
@@ -243,7 +245,7 @@ export function AiUsageAnalyticsData(props: AiUsageAnalyticsDataProps) {
                                     isFetching && "animate-spin"
                                 )}
                             />
-                            Refresh
+                            {t("aiUsageRefresh")}
                         </Button>
                     </div>
                 </CardHeader>

src/components/ai-usage-analytics/OverviewTab.tsx

@@ -3,6 +3,7 @@
 import { useQuery } from "@tanstack/react-query";
 import { aiUsageAnalyticsQueries } from "@app/lib/queries";
 import type { AiUsageAnalyticsFilters } from "@app/lib/queries";
+import { useTranslations } from "next-intl";
 import { Card, CardContent, CardHeader } from "@app/components/ui/card";
 import {
     InfoSection,
@@ -24,15 +25,8 @@ type OverviewTabProps = {
     filters: AiUsageAnalyticsFilters;
 };
 
-const TOKEN_TYPE_LABELS: Record<string, string> = {
-    promptTokens: "Prompt",
-    cacheReadTokens: "Cache read",
-    cacheWriteTokens: "Cache write",
-    completionTokens: "Completion",
-    reasoningTokens: "Reasoning"
-};
-
 export function OverviewTab(props: OverviewTabProps) {
+    const t = useTranslations();
     const { data, isLoading } = useQuery(
         aiUsageAnalyticsQueries.overview({
             orgId: props.orgId,
@@ -40,8 +34,16 @@ export function OverviewTab(props: OverviewTabProps) {
         })
     );
 
+    const TOKEN_TYPE_LABELS: Record<string, string> = {
+        promptTokens: t("aiUsageTokenTypePrompt"),
+        cacheReadTokens: t("aiUsageTokenTypeCacheRead"),
+        cacheWriteTokens: t("aiUsageTokenTypeCacheWrite"),
+        completionTokens: t("aiUsageTokenTypeCompletion"),
+        reasoningTokens: t("aiUsageTokenTypeReasoning")
+    };
+
     const requestsSeries = [
-        { key: "requests", label: "Requests", color: SERIES_COLORS[0] }
+        { key: "requests", label: t("aiUsageRequests"), color: SERIES_COLORS[0] }
     ];
     const tokensSeries = Object.keys(TOKEN_TYPE_LABELS).map((key, i) => ({
         key,
@@ -49,16 +51,18 @@ export function OverviewTab(props: OverviewTabProps) {
         color: SERIES_COLORS[i % SERIES_COLORS.length]
     }));
     const costSeries = [
-        { key: "cost", label: "Cost", color: SERIES_COLORS[0] }
+        { key: "cost", label: t("aiUsageCost"), color: SERIES_COLORS[0] }
     ];
 
     const modelCostSeries = buildSeriesFromData(
         data?.modelCostPerDay ?? [],
-        (key) => key
+        (key) => key,
+        t("aiUsageOther")
     );
     const modelTokensSeries = buildSeriesFromData(
         data?.modelTokensPerDay ?? [],
-        (key) => key
+        (key) => key,
+        t("aiUsageOther")
     );
 
     const topModels: TopEntity[] = (data?.topModels ?? []).map((m) => ({
@@ -75,7 +79,9 @@ export function OverviewTab(props: OverviewTabProps) {
                 <CardHeader>
                     <InfoSections cols={4}>
                         <InfoSection>
-                            <InfoSectionTitle>Total Requests</InfoSectionTitle>
+                            <InfoSectionTitle>
+                                {t("aiUsageTotalRequests")}
+                            </InfoSectionTitle>
                             <InfoSectionContent>
                                 {data
                                     ? compactNumberFormatter.format(
@@ -85,7 +91,9 @@ export function OverviewTab(props: OverviewTabProps) {
                             </InfoSectionContent>
                         </InfoSection>
                         <InfoSection>
-                            <InfoSectionTitle>Total Tokens</InfoSectionTitle>
+                            <InfoSectionTitle>
+                                {t("aiUsageTotalTokens")}
+                            </InfoSectionTitle>
                             <InfoSectionContent>
                                 {data
                                     ? compactNumberFormatter.format(
@@ -95,13 +103,17 @@ export function OverviewTab(props: OverviewTabProps) {
                             </InfoSectionContent>
                         </InfoSection>
                         <InfoSection>
-                            <InfoSectionTitle>Total Cost</InfoSectionTitle>
+                            <InfoSectionTitle>
+                                {t("aiUsageTotalCost")}
+                            </InfoSectionTitle>
                             <InfoSectionContent>
                                 {data ? formatCost(data.totalCost) : "--"}
                             </InfoSectionContent>
                         </InfoSection>
                         <InfoSection>
-                            <InfoSectionTitle>Estimated</InfoSectionTitle>
+                            <InfoSectionTitle>
+                                {t("aiUsageEstimated")}
+                            </InfoSectionTitle>
                             <InfoSectionContent>
                                 {data
                                     ? `${Math.round(data.estimatedPercent)}%`
@@ -114,11 +126,9 @@ export function OverviewTab(props: OverviewTabProps) {
 
             <div className="grid lg:grid-cols-3 gap-5">
                 <Card>
-                    <CardHeader>
+                    <CardContent className="p-6">
-                        <h3 className="font-semibold">Request Volume</h3>
-                    </CardHeader>
-                    <CardContent>
                         <ToggleableTrendChart
+                            title={t("aiUsageRequestVolume")}
                             data={data?.requestsPerDay ?? []}
                             series={requestsSeries}
                             isLoading={isLoading}
@@ -126,11 +136,9 @@ export function OverviewTab(props: OverviewTabProps) {
                     </CardContent>
                 </Card>
                 <Card>
-                    <CardHeader>
+                    <CardContent className="p-6">
-                        <h3 className="font-semibold">Token Usage</h3>
-                    </CardHeader>
-                    <CardContent>
                         <ToggleableTrendChart
+                            title={t("aiUsageTokenUsage")}
                             data={data?.tokensPerDay ?? []}
                             series={tokensSeries}
                             isLoading={isLoading}
@@ -138,11 +146,9 @@ export function OverviewTab(props: OverviewTabProps) {
                     </CardContent>
                 </Card>
                 <Card>
-                    <CardHeader>
+                    <CardContent className="p-6">
-                        <h3 className="font-semibold">Cost</h3>
-                    </CardHeader>
-                    <CardContent>
                         <ToggleableTrendChart
+                            title={t("aiUsageCost")}
                             data={data?.costPerDay ?? []}
                             series={costSeries}
                             isLoading={isLoading}
@@ -154,11 +160,9 @@ export function OverviewTab(props: OverviewTabProps) {
 
             <div className="grid lg:grid-cols-2 gap-5">
                 <Card>
-                    <CardHeader>
+                    <CardContent className="p-6">
-                        <h3 className="font-semibold">Model Cost</h3>
-                    </CardHeader>
-                    <CardContent>
                         <ToggleableTrendChart
+                            title={t("aiUsageModelCost")}
                             data={data?.modelCostPerDay ?? []}
                             series={modelCostSeries}
                             isLoading={isLoading}
@@ -167,11 +171,9 @@ export function OverviewTab(props: OverviewTabProps) {
                     </CardContent>
                 </Card>
                 <Card>
-                    <CardHeader>
+                    <CardContent className="p-6">
-                        <h3 className="font-semibold">Model Tokens</h3>
-                    </CardHeader>
-                    <CardContent>
                         <ToggleableTrendChart
+                            title={t("aiUsageModelTokens")}
                             data={data?.modelTokensPerDay ?? []}
                             series={modelTokensSeries}
                             isLoading={isLoading}
@@ -182,13 +184,13 @@ export function OverviewTab(props: OverviewTabProps) {
 
             <Card>
                 <CardHeader>
-                    <h3 className="font-semibold">Top Models</h3>
+                    <h3 className="font-semibold">{t("aiUsageTopModels")}</h3>
                 </CardHeader>
                 <CardContent>
                     <TopEntitiesList
                         entities={topModels}
                         isLoading={isLoading}
-                        nameColumnLabel="Model"
+                        nameColumnLabel={t("aiUsageFilterModel")}
                     />
                 </CardContent>
             </Card>

src/components/ai-usage-analytics/ProvidersTab.tsx

@@ -3,6 +3,7 @@
 import { useQuery } from "@tanstack/react-query";
 import { aiUsageAnalyticsQueries } from "@app/lib/queries";
 import type { AiUsageAnalyticsFilters } from "@app/lib/queries";
+import { useTranslations } from "next-intl";
 import { Card, CardContent, CardHeader } from "@app/components/ui/card";
 import { ToggleableTrendChart } from "./ToggleableTrendChart";
 import { TopEntitiesList, type TopEntity } from "./TopEntitiesList";
@@ -14,6 +15,7 @@ type ProvidersTabProps = {
 };
 
 export function ProvidersTab(props: ProvidersTabProps) {
+    const t = useTranslations();
     const { data, isLoading } = useQuery(
         aiUsageAnalyticsQueries.providers({
             orgId: props.orgId,
@@ -29,11 +31,13 @@ export function ProvidersTab(props: ProvidersTabProps) {
 
     const costSeries = buildSeriesFromData(
         data?.providerCostPerDay ?? [],
-        labelFor
+        labelFor,
+        t("aiUsageOther")
     );
     const tokensSeries = buildSeriesFromData(
         data?.providerTokensPerDay ?? [],
-        labelFor
+        labelFor,
+        t("aiUsageOther")
     );
 
     const topProviders: TopEntity[] = (data?.topProviders ?? []).map((p) => ({
@@ -48,24 +52,22 @@ export function ProvidersTab(props: ProvidersTabProps) {
         <div className="flex flex-col gap-5">
             <Card>
                 <CardHeader>
-                    <h3 className="font-semibold">Top Providers</h3>
+                    <h3 className="font-semibold">{t("aiUsageTopProviders")}</h3>
                 </CardHeader>
                 <CardContent>
                     <TopEntitiesList
                         entities={topProviders}
                         isLoading={isLoading}
-                        nameColumnLabel="Provider"
+                        nameColumnLabel={t("aiUsageFilterProvider")}
                     />
                 </CardContent>
             </Card>
 
             <div className="grid lg:grid-cols-2 gap-5">
                 <Card>
-                    <CardHeader>
+                    <CardContent className="p-6">
-                        <h3 className="font-semibold">Provider Cost</h3>
-                    </CardHeader>
-                    <CardContent>
                         <ToggleableTrendChart
+                            title={t("aiUsageProviderCost")}
                             data={data?.providerCostPerDay ?? []}
                             series={costSeries}
                             isLoading={isLoading}
@@ -74,11 +76,9 @@ export function ProvidersTab(props: ProvidersTabProps) {
                     </CardContent>
                 </Card>
                 <Card>
-                    <CardHeader>
+                    <CardContent className="p-6">
-                        <h3 className="font-semibold">Provider Token Usage</h3>
-                    </CardHeader>
-                    <CardContent>
                         <ToggleableTrendChart
+                            title={t("aiUsageProviderTokenUsage")}
                             data={data?.providerTokensPerDay ?? []}
                             series={tokensSeries}
                             isLoading={isLoading}

src/components/ai-usage-analytics/ResourcesTab.tsx

@@ -3,6 +3,7 @@
 import { useQuery } from "@tanstack/react-query";
 import { aiUsageAnalyticsQueries } from "@app/lib/queries";
 import type { AiUsageAnalyticsFilters } from "@app/lib/queries";
+import { useTranslations } from "next-intl";
 import { Card, CardContent, CardHeader } from "@app/components/ui/card";
 import { ToggleableTrendChart } from "./ToggleableTrendChart";
 import { TopEntitiesList, type TopEntity } from "./TopEntitiesList";
@@ -13,13 +14,15 @@ type ResourcesTabProps = {
     filters: AiUsageAnalyticsFilters;
 };
 
-function resourceTypeLabel(type: "public" | "site" | null) {
-    if (type === "public") return "Resource";
-    if (type === "site") return "Site resource";
-    return undefined;
-}
-
 export function ResourcesTab(props: ResourcesTabProps) {
+    const t = useTranslations();
+
+    function resourceTypeLabel(type: "public" | "site" | null) {
+        if (type === "public") return t("aiUsageResourceTypePublic");
+        if (type === "site") return t("aiUsageResourceTypeSite");
+        return undefined;
+    }
+
     const { data, isLoading } = useQuery(
         aiUsageAnalyticsQueries.resources({
             orgId: props.orgId,
@@ -32,20 +35,22 @@ export function ResourcesTab(props: ResourcesTabProps) {
         nameByKey.set(r.key, r.name ?? r.key);
     }
     const labelFor = (key: string) =>
-        key === "none" ? "No resource" : (nameByKey.get(key) ?? key);
+        key === "none" ? t("aiUsageNoResource") : (nameByKey.get(key) ?? key);
 
     const costSeries = buildSeriesFromData(
         data?.resourceCostPerDay ?? [],
-        labelFor
+        labelFor,
+        t("aiUsageOther")
     );
     const tokensSeries = buildSeriesFromData(
         data?.resourceTokensPerDay ?? [],
-        labelFor
+        labelFor,
+        t("aiUsageOther")
     );
 
     const topResources: TopEntity[] = (data?.topResources ?? []).map((r) => ({
         key: r.key,
-        label: r.name ?? (r.key === "none" ? "No resource" : r.key),
+        label: r.name ?? (r.key === "none" ? t("aiUsageNoResource") : r.key),
         sublabel: resourceTypeLabel(r.type),
         requests: r.requests,
         totalTokens: r.totalTokens,
@@ -56,24 +61,22 @@ export function ResourcesTab(props: ResourcesTabProps) {
         <div className="flex flex-col gap-5">
             <Card>
                 <CardHeader>
-                    <h3 className="font-semibold">Top Resources</h3>
+                    <h3 className="font-semibold">{t("aiUsageTopResources")}</h3>
                 </CardHeader>
                 <CardContent>
                     <TopEntitiesList
                         entities={topResources}
                         isLoading={isLoading}
-                        nameColumnLabel="Resource"
+                        nameColumnLabel={t("aiUsageFilterResource")}
                     />
                 </CardContent>
             </Card>
 
             <div className="grid lg:grid-cols-2 gap-5">
                 <Card>
-                    <CardHeader>
+                    <CardContent className="p-6">
-                        <h3 className="font-semibold">Resource Cost</h3>
-                    </CardHeader>
-                    <CardContent>
                         <ToggleableTrendChart
+                            title={t("aiUsageResourceCost")}
                             data={data?.resourceCostPerDay ?? []}
                             series={costSeries}
                             isLoading={isLoading}
@@ -82,11 +85,9 @@ export function ResourcesTab(props: ResourcesTabProps) {
                     </CardContent>
                 </Card>
                 <Card>
-                    <CardHeader>
+                    <CardContent className="p-6">
-                        <h3 className="font-semibold">Resource Token Usage</h3>
-                    </CardHeader>
-                    <CardContent>
                         <ToggleableTrendChart
+                            title={t("aiUsageResourceTokenUsage")}
                             data={data?.resourceTokensPerDay ?? []}
                             series={tokensSeries}
                             isLoading={isLoading}

src/components/ai-usage-analytics/ToggleableTrendChart.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from "react";
 import { cn } from "@app/lib/cn";
+import { useTranslations } from "next-intl";
 import { BarChart3, LineChart as LineChartIcon, LoaderIcon } from "lucide-react";
 import {
     Bar,
@@ -34,6 +35,7 @@ export interface TrendChartRow {
 }
 
 type ToggleableTrendChartProps = {
+    title: string;
     data: TrendChartRow[];
     series: TrendSeries[];
     isLoading?: boolean;
@@ -48,6 +50,7 @@ const compactFormatter = new Intl.NumberFormat(undefined, {
 });
 
 export function ToggleableTrendChart(props: ToggleableTrendChartProps) {
+    const t = useTranslations();
     const [chartType, setChartType] = useState<"bar" | "line">("bar");
 
     const valueFormatter = props.valueFormatter ?? compactFormatter.format;
@@ -61,25 +64,28 @@ export function ToggleableTrendChart(props: ToggleableTrendChartProps) {
 
     return (
         <div className={cn("relative flex flex-col gap-2", props.className)}>
-            <div className="flex justify-end gap-1">
+            <div className="flex items-center justify-between gap-2">
-                <Button
+                <h3 className="font-semibold">{props.title}</h3>
-                    type="button"
+                <div className="flex gap-1">
-                    size="sm"
+                    <Button
-                    variant={chartType === "bar" ? "secondary" : "ghost"}
+                        type="button"
-                    onClick={() => setChartType("bar")}
+                        size="sm"
-                    className="gap-1.5 px-2"
+                        variant={chartType === "bar" ? "secondary" : "ghost"}
-                >
+                        onClick={() => setChartType("bar")}
-                    <BarChart3 className="size-3.5" />
+                        className="gap-1.5 px-2"
-                </Button>
+                    >
-                <Button
+                        <BarChart3 className="size-3.5" />
-                    type="button"
+                    </Button>
-                    size="sm"
+                    <Button
-                    variant={chartType === "line" ? "secondary" : "ghost"}
+                        type="button"
-                    onClick={() => setChartType("line")}
+                        size="sm"
-                    className="gap-1.5 px-2"
+                        variant={chartType === "line" ? "secondary" : "ghost"}
-                >
+                        onClick={() => setChartType("line")}
-                    <LineChartIcon className="size-3.5" />
+                        className="gap-1.5 px-2"
-                </Button>
+                    >
+                        <LineChartIcon className="size-3.5" />
+                    </Button>
+                </div>
             </div>
 
             {!hasData ? (
@@ -87,10 +93,10 @@ export function ToggleableTrendChart(props: ToggleableTrendChartProps) {
                     {props.isLoading ? (
                         <>
                             <LoaderIcon className="size-4 animate-spin" />
-                            Loading...
+                            {t("aiUsageLoading")}
                         </>
                     ) : (
-                        "No data"
+                        t("aiUsageNoData")
                     )}
                 </div>
             ) : (

src/components/ai-usage-analytics/TopEntitiesList.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { LoaderIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
 import { compactNumberFormatter, formatCost } from "./shared";
 
 export type TopEntity = {
@@ -20,6 +21,7 @@ type TopEntitiesListProps = {
 };
 
 export function TopEntitiesList(props: TopEntitiesListProps) {
+    const t = useTranslations();
     const totalCost = props.entities.reduce(
         (sum, e) => sum + (e.costUsd ?? 0),
         0
@@ -30,9 +32,15 @@ export function TopEntitiesList(props: TopEntitiesListProps) {
             {props.entities.length > 0 && (
                 <div className="grid grid-cols-12 text-sm text-muted-foreground font-semibold h-4">
                     <div className="col-span-5">{props.nameColumnLabel}</div>
-                    <div className="col-span-2 text-end">Requests</div>
+                    <div className="col-span-2 text-end">
-                    <div className="col-span-2 text-end">Tokens</div>
+                        {t("aiUsageRequests")}
-                    <div className="col-span-2 text-end">Cost</div>
+                    </div>
+                    <div className="col-span-2 text-end">
+                        {t("aiUsageTokens")}
+                    </div>
+                    <div className="col-span-2 text-end">
+                        {t("aiUsageCost")}
+                    </div>
                     <div className="col-span-1 text-end">%</div>
                 </div>
             )}
@@ -42,10 +50,10 @@ export function TopEntitiesList(props: TopEntitiesListProps) {
                         {props.isLoading ? (
                             <>
                                 <LoaderIcon className="size-4 animate-spin" />
-                                Loading...
+                                {t("aiUsageLoading")}
                             </>
                         ) : (
-                            (props.emptyLabel ?? "No data")
+                            (props.emptyLabel ?? t("aiUsageNoData"))
                         )}
                     </div>
                 )}

src/components/ai-usage-analytics/UsersRolesTab.tsx

@@ -3,7 +3,9 @@
 import { useQuery } from "@tanstack/react-query";
 import { aiUsageAnalyticsQueries } from "@app/lib/queries";
 import type { AiUsageAnalyticsFilters } from "@app/lib/queries";
+import { useTranslations } from "next-intl";
 import { Card, CardContent, CardHeader } from "@app/components/ui/card";
+import { HorizontalTabs, type TabItem } from "@app/components/HorizontalTabs";
 import { ToggleableTrendChart } from "./ToggleableTrendChart";
 import { TopEntitiesList, type TopEntity } from "./TopEntitiesList";
 import { buildSeriesFromData, formatCost } from "./shared";
@@ -16,6 +18,7 @@ type UsersRolesTabProps = {
 const UNKNOWN_USER_KEY = "unknown";
 
 export function UsersRolesTab(props: UsersRolesTabProps) {
+    const t = useTranslations();
     const { data, isLoading } = useQuery(
         aiUsageAnalyticsQueries.usersRoles({
             orgId: props.orgId,
@@ -38,24 +41,28 @@ export function UsersRolesTab(props: UsersRolesTabProps) {
     }
     const userLabelFor = (key: string) =>
         key === UNKNOWN_USER_KEY
-            ? "Unknown user"
+            ? t("aiUsageUnknownUser")
             : (userEmailByKey.get(key) ?? key);
 
     const roleCostSeries = buildSeriesFromData(
         data?.roleCostPerDay ?? [],
-        roleLabelFor
+        roleLabelFor,
+        t("aiUsageOther")
     );
     const roleTokensSeries = buildSeriesFromData(
         data?.roleTokensPerDay ?? [],
-        roleLabelFor
+        roleLabelFor,
+        t("aiUsageOther")
     );
     const userCostSeries = buildSeriesFromData(
         data?.userCostPerDay ?? [],
-        userLabelFor
+        userLabelFor,
+        t("aiUsageOther")
     );
     const userTokensSeries = buildSeriesFromData(
         data?.userTokensPerDay ?? [],
-        userLabelFor
+        userLabelFor,
+        t("aiUsageOther")
     );
 
     const topRoles: TopEntity[] = (data?.topRoles ?? []).map((r) => ({
@@ -68,35 +75,39 @@ export function UsersRolesTab(props: UsersRolesTabProps) {
 
     const topUsers: TopEntity[] = (data?.topUsers ?? []).map((u) => ({
         key: u.userId ?? UNKNOWN_USER_KEY,
-        label: u.email ?? u.userId ?? "Unknown user",
+        label: u.email ?? u.userId ?? t("aiUsageUnknownUser"),
         requests: u.requests,
         totalTokens: u.totalTokens,
         costUsd: u.costUsd
     }));
 
+    const tabs: TabItem[] = [
+        { title: t("aiUsageRolesTab"), href: "#" },
+        { title: t("aiUsageUsersTab"), href: "#" }
+    ];
+
     return (
-        <div className="flex flex-col gap-8">
+        <HorizontalTabs items={tabs} clientSide>
             <div className="flex flex-col gap-5">
-                <h3 className="font-semibold text-muted-foreground">Roles</h3>
                 <Card>
                     <CardHeader>
-                        <h3 className="font-semibold">Top Roles</h3>
+                        <h3 className="font-semibold">
+                            {t("aiUsageTopRoles")}
+                        </h3>
                     </CardHeader>
                     <CardContent>
                         <TopEntitiesList
                             entities={topRoles}
                             isLoading={isLoading}
-                            nameColumnLabel="Role"
+                            nameColumnLabel={t("aiUsageFilterRole")}
                         />
                     </CardContent>
                 </Card>
                 <div className="grid lg:grid-cols-2 gap-5">
                     <Card>
-                        <CardHeader>
+                        <CardContent className="p-6">
-                            <h3 className="font-semibold">Role Cost</h3>
-                        </CardHeader>
-                        <CardContent>
                             <ToggleableTrendChart
+                                title={t("aiUsageRoleCost")}
                                 data={data?.roleCostPerDay ?? []}
                                 series={roleCostSeries}
                                 isLoading={isLoading}
@@ -105,11 +116,9 @@ export function UsersRolesTab(props: UsersRolesTabProps) {
                         </CardContent>
                     </Card>
                     <Card>
-                        <CardHeader>
+                        <CardContent className="p-6">
-                            <h3 className="font-semibold">Role Token Usage</h3>
-                        </CardHeader>
-                        <CardContent>
                             <ToggleableTrendChart
+                                title={t("aiUsageRoleTokenUsage")}
                                 data={data?.roleTokensPerDay ?? []}
                                 series={roleTokensSeries}
                                 isLoading={isLoading}
@@ -120,26 +129,25 @@ export function UsersRolesTab(props: UsersRolesTabProps) {
             </div>
 
             <div className="flex flex-col gap-5">
-                <h3 className="font-semibold text-muted-foreground">Users</h3>
                 <Card>
                     <CardHeader>
-                        <h3 className="font-semibold">Top Users</h3>
+                        <h3 className="font-semibold">
+                            {t("aiUsageTopUsers")}
+                        </h3>
                     </CardHeader>
                     <CardContent>
                         <TopEntitiesList
                             entities={topUsers}
                             isLoading={isLoading}
-                            nameColumnLabel="User"
+                            nameColumnLabel={t("aiUsageFilterUser")}
                         />
                     </CardContent>
                 </Card>
                 <div className="grid lg:grid-cols-2 gap-5">
                     <Card>
-                        <CardHeader>
+                        <CardContent className="p-6">
-                            <h3 className="font-semibold">User Cost</h3>
-                        </CardHeader>
-                        <CardContent>
                             <ToggleableTrendChart
+                                title={t("aiUsageUserCost")}
                                 data={data?.userCostPerDay ?? []}
                                 series={userCostSeries}
                                 isLoading={isLoading}
@@ -148,11 +156,9 @@ export function UsersRolesTab(props: UsersRolesTabProps) {
                         </CardContent>
                     </Card>
                     <Card>
-                        <CardHeader>
+                        <CardContent className="p-6">
-                            <h3 className="font-semibold">User Token Usage</h3>
-                        </CardHeader>
-                        <CardContent>
                             <ToggleableTrendChart
+                                title={t("aiUsageUserTokenUsage")}
                                 data={data?.userTokensPerDay ?? []}
                                 series={userTokensSeries}
                                 isLoading={isLoading}
@@ -161,6 +167,6 @@ export function UsersRolesTab(props: UsersRolesTabProps) {
                     </Card>
                 </div>
             </div>
-        </div>
+        </HorizontalTabs>
     );
 }

src/components/ai-usage-analytics/shared.ts

@@ -18,7 +18,8 @@ export const OTHER_KEY = "other";
 // top-list needed. Assigns one categorical color per key, "other" last.
 export function buildSeriesFromData(
     data: Array<Record<string, number | string>>,
-    labelFor: (key: string) => string
+    labelFor: (key: string) => string,
+    otherLabel = "Other"
 ): TrendSeries[] {
     const keys = new Set<string>();
     for (const row of data) {
@@ -37,7 +38,7 @@ export function buildSeriesFromData(
 
     const hasOther = data.some((row) => OTHER_KEY in row);
     if (hasOther) {
-        series.push({ key: OTHER_KEY, label: "Other", color: OTHER_COLOR });
+        series.push({ key: OTHER_KEY, label: otherLabel, color: OTHER_COLOR });
     }
 
     return series;

src/components/ui/chart.tsx

@@ -57,7 +57,11 @@ const ChartContainer = React.forwardRef<
                 {...props}
             >
                 <ChartStyle id={chartId} config={config} />
-                <RechartsPrimitive.ResponsiveContainer minWidth={0} minHeight={0}>
+                <RechartsPrimitive.ResponsiveContainer
+                    minWidth={0}
+                    minHeight={0}
+                    initialDimension={{ width: 520, height: 256 }}
+                >
                     {children}
                 </RechartsPrimitive.ResponsiveContainer>
             </div>