From 11595f5f96d62aefbac57a99e089a5c99c47e4c2 Mon Sep 17 00:00:00 2001
From: Owen <owen@txv.io>
Date: Tue, 11 Aug 2026 18:02:17 -0400
Subject: [PATCH] use title case and fix colors

---
 .../routers/auditLogs/queryAiUsageResources.ts   | 14 ++++++++------
 src/components/AiUsageAnalyticsData.tsx          | 16 ++++++++--------
 .../ai-usage-analytics/OverviewTab.tsx           | 16 ++++++++--------
 .../ai-usage-analytics/ProvidersTab.tsx          |  6 +++---
 .../ai-usage-analytics/ResourcesTab.tsx          |  6 +++---
 .../ai-usage-analytics/ToggleableTrendChart.tsx  |  4 ++--
 .../ai-usage-analytics/UsersRolesTab.tsx         | 12 ++++++------
 src/components/ui/chart.tsx                      |  2 +-
 8 files changed, 39 insertions(+), 37 deletions(-)

diff --git a/server/routers/auditLogs/queryAiUsageResources.ts b/server/routers/auditLogs/queryAiUsageResources.ts
index fb2fddbc4..24bac8644 100644
--- a/server/routers/auditLogs/queryAiUsageResources.ts
+++ b/server/routers/auditLogs/queryAiUsageResources.ts
@@ -24,11 +24,13 @@ import {
 
 type Q = AiUsageAnalyticsQuery;
 
-// Composite key namespacing resourceId ("r:") vs siteResourceId ("s:") since
-// the two id spaces are independent and can overlap numerically.
+// Composite key namespacing resourceId ("r-") vs siteResourceId ("s-") since
+// the two id spaces are independent and can overlap numerically. Uses a dash
+// rather than a colon so the key stays safe to use as a CSS custom-property
+// name suffix (e.g. --color-r-1) on the client.
 function resourceKey(resourceId: number | null, siteResourceId: number | null) {
-    if (resourceId != null) return `r:${resourceId}`;
-    if (siteResourceId != null) return `s:${siteResourceId}`;
+    if (resourceId != null) return `r-${resourceId}`;
+    if (siteResourceId != null) return `s-${siteResourceId}`;
     return "none";
 }
 
@@ -113,7 +115,7 @@ async function query(data: Q) {
             .from(resources)
             .where(inArray(resources.resourceId, resourceIds));
         for (const r of resourceDetails) {
-            nameMap.set(`r:${r.resourceId}`, r.name);
+            nameMap.set(`r-${r.resourceId}`, r.name);
         }
     }
     if (siteResourceIds.length > 0) {
@@ -125,7 +127,7 @@ async function query(data: Q) {
             .from(siteResources)
             .where(inArray(siteResources.siteResourceId, siteResourceIds));
         for (const r of siteResourceDetails) {
-            nameMap.set(`s:${r.siteResourceId}`, r.name);
+            nameMap.set(`s-${r.siteResourceId}`, r.name);
         }
     }
 
diff --git a/src/components/AiUsageAnalyticsData.tsx b/src/components/AiUsageAnalyticsData.tsx
index 573dc96b1..879aff1bc 100644
--- a/src/components/AiUsageAnalyticsData.tsx
+++ b/src/components/AiUsageAnalyticsData.tsx
@@ -140,9 +140,9 @@ export function AiUsageAnalyticsData(props: AiUsageAnalyticsDataProps) {
 
     const tabs: TabItem[] = [
         { title: "Overview", href: "#" },
-        { title: "Provider usage", href: "#" },
+        { title: "Provider Usage", href: "#" },
         { title: "Resources", href: "#" },
-        { title: "Users & roles", href: "#" }
+        { title: "Users & Roles", href: "#" }
     ];
 
     return (
@@ -175,7 +175,7 @@ export function AiUsageAnalyticsData(props: AiUsageAnalyticsDataProps) {
                                 label="Provider"
                                 value={filters.providerId?.toString()}
                                 options={providerOptions}
-                                placeholder="All providers"
+                                placeholder="All Providers"
                                 onValueChange={(v) => setFilter("providerId", v)}
                             />
                             <FilterSelect
@@ -183,7 +183,7 @@ export function AiUsageAnalyticsData(props: AiUsageAnalyticsDataProps) {
                                 label="Model"
                                 value={filters.model}
                                 options={modelOptions}
-                                placeholder="All models"
+                                placeholder="All Models"
                                 onValueChange={(v) => setFilter("model", v)}
                             />
                             <FilterSelect
@@ -191,7 +191,7 @@ export function AiUsageAnalyticsData(props: AiUsageAnalyticsDataProps) {
                                 label="Resource"
                                 value={filters.resourceId?.toString()}
                                 options={resourceOptions}
-                                placeholder="All resources"
+                                placeholder="All Resources"
                                 onValueChange={(v) => setFilter("resourceId", v)}
                             />
                             <FilterSelect
@@ -199,7 +199,7 @@ export function AiUsageAnalyticsData(props: AiUsageAnalyticsDataProps) {
                                 label="Role"
                                 value={filters.roleId?.toString()}
                                 options={roleOptions}
-                                placeholder="All roles"
+                                placeholder="All Roles"
                                 onValueChange={(v) => setFilter("roleId", v)}
                             />
                             <FilterSelect
@@ -207,7 +207,7 @@ export function AiUsageAnalyticsData(props: AiUsageAnalyticsDataProps) {
                                 label="User"
                                 value={filters.userId}
                                 options={userOptions}
-                                placeholder="All users"
+                                placeholder="All Users"
                                 onValueChange={(v) => setFilter("userId", v)}
                             />
 
@@ -218,7 +218,7 @@ export function AiUsageAnalyticsData(props: AiUsageAnalyticsDataProps) {
                                     className="gap-2"
                                 >
                                     <XIcon className="size-4" />
-                                    Reset filters
+                                    Reset Filters
                                 </Button>
                             )}
                         </div>
diff --git a/src/components/ai-usage-analytics/OverviewTab.tsx b/src/components/ai-usage-analytics/OverviewTab.tsx
index 30d4478b1..1bf4dab1d 100644
--- a/src/components/ai-usage-analytics/OverviewTab.tsx
+++ b/src/components/ai-usage-analytics/OverviewTab.tsx
@@ -75,7 +75,7 @@ export function OverviewTab(props: OverviewTabProps) {
                 <CardHeader>
                     <InfoSections cols={4}>
                         <InfoSection>
-                            <InfoSectionTitle>Total requests</InfoSectionTitle>
+                            <InfoSectionTitle>Total Requests</InfoSectionTitle>
                             <InfoSectionContent>
                                 {data
                                     ? compactNumberFormatter.format(
@@ -85,7 +85,7 @@ export function OverviewTab(props: OverviewTabProps) {
                             </InfoSectionContent>
                         </InfoSection>
                         <InfoSection>
-                            <InfoSectionTitle>Total tokens</InfoSectionTitle>
+                            <InfoSectionTitle>Total Tokens</InfoSectionTitle>
                             <InfoSectionContent>
                                 {data
                                     ? compactNumberFormatter.format(
@@ -95,7 +95,7 @@ export function OverviewTab(props: OverviewTabProps) {
                             </InfoSectionContent>
                         </InfoSection>
                         <InfoSection>
-                            <InfoSectionTitle>Total cost</InfoSectionTitle>
+                            <InfoSectionTitle>Total Cost</InfoSectionTitle>
                             <InfoSectionContent>
                                 {data ? formatCost(data.totalCost) : "--"}
                             </InfoSectionContent>
@@ -115,7 +115,7 @@ export function OverviewTab(props: OverviewTabProps) {
             <div className="grid lg:grid-cols-3 gap-5">
                 <Card>
                     <CardHeader>
-                        <h3 className="font-semibold">Request volume</h3>
+                        <h3 className="font-semibold">Request Volume</h3>
                     </CardHeader>
                     <CardContent>
                         <ToggleableTrendChart
@@ -127,7 +127,7 @@ export function OverviewTab(props: OverviewTabProps) {
                 </Card>
                 <Card>
                     <CardHeader>
-                        <h3 className="font-semibold">Token usage</h3>
+                        <h3 className="font-semibold">Token Usage</h3>
                     </CardHeader>
                     <CardContent>
                         <ToggleableTrendChart
@@ -155,7 +155,7 @@ export function OverviewTab(props: OverviewTabProps) {
             <div className="grid lg:grid-cols-2 gap-5">
                 <Card>
                     <CardHeader>
-                        <h3 className="font-semibold">Model cost</h3>
+                        <h3 className="font-semibold">Model Cost</h3>
                     </CardHeader>
                     <CardContent>
                         <ToggleableTrendChart
@@ -168,7 +168,7 @@ export function OverviewTab(props: OverviewTabProps) {
                 </Card>
                 <Card>
                     <CardHeader>
-                        <h3 className="font-semibold">Model tokens</h3>
+                        <h3 className="font-semibold">Model Tokens</h3>
                     </CardHeader>
                     <CardContent>
                         <ToggleableTrendChart
@@ -182,7 +182,7 @@ export function OverviewTab(props: OverviewTabProps) {
 
             <Card>
                 <CardHeader>
-                    <h3 className="font-semibold">Top models</h3>
+                    <h3 className="font-semibold">Top Models</h3>
                 </CardHeader>
                 <CardContent>
                     <TopEntitiesList
diff --git a/src/components/ai-usage-analytics/ProvidersTab.tsx b/src/components/ai-usage-analytics/ProvidersTab.tsx
index 2187ec53f..70756d558 100644
--- a/src/components/ai-usage-analytics/ProvidersTab.tsx
+++ b/src/components/ai-usage-analytics/ProvidersTab.tsx
@@ -48,7 +48,7 @@ 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">Top Providers</h3>
                 </CardHeader>
                 <CardContent>
                     <TopEntitiesList
@@ -62,7 +62,7 @@ export function ProvidersTab(props: ProvidersTabProps) {
             <div className="grid lg:grid-cols-2 gap-5">
                 <Card>
                     <CardHeader>
-                        <h3 className="font-semibold">Provider cost</h3>
+                        <h3 className="font-semibold">Provider Cost</h3>
                     </CardHeader>
                     <CardContent>
                         <ToggleableTrendChart
@@ -75,7 +75,7 @@ export function ProvidersTab(props: ProvidersTabProps) {
                 </Card>
                 <Card>
                     <CardHeader>
-                        <h3 className="font-semibold">Provider token usage</h3>
+                        <h3 className="font-semibold">Provider Token Usage</h3>
                     </CardHeader>
                     <CardContent>
                         <ToggleableTrendChart
diff --git a/src/components/ai-usage-analytics/ResourcesTab.tsx b/src/components/ai-usage-analytics/ResourcesTab.tsx
index 39cba68d7..2bc464a74 100644
--- a/src/components/ai-usage-analytics/ResourcesTab.tsx
+++ b/src/components/ai-usage-analytics/ResourcesTab.tsx
@@ -56,7 +56,7 @@ 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">Top Resources</h3>
                 </CardHeader>
                 <CardContent>
                     <TopEntitiesList
@@ -70,7 +70,7 @@ export function ResourcesTab(props: ResourcesTabProps) {
             <div className="grid lg:grid-cols-2 gap-5">
                 <Card>
                     <CardHeader>
-                        <h3 className="font-semibold">Resource cost</h3>
+                        <h3 className="font-semibold">Resource Cost</h3>
                     </CardHeader>
                     <CardContent>
                         <ToggleableTrendChart
@@ -83,7 +83,7 @@ export function ResourcesTab(props: ResourcesTabProps) {
                 </Card>
                 <Card>
                     <CardHeader>
-                        <h3 className="font-semibold">Resource token usage</h3>
+                        <h3 className="font-semibold">Resource Token Usage</h3>
                     </CardHeader>
                     <CardContent>
                         <ToggleableTrendChart
diff --git a/src/components/ai-usage-analytics/ToggleableTrendChart.tsx b/src/components/ai-usage-analytics/ToggleableTrendChart.tsx
index 5b6c78c5e..db5d2b1b6 100644
--- a/src/components/ai-usage-analytics/ToggleableTrendChart.tsx
+++ b/src/components/ai-usage-analytics/ToggleableTrendChart.tsx
@@ -129,7 +129,7 @@ export function ToggleableTrendChart(props: ToggleableTrendChartProps) {
                                     key={s.key}
                                     dataKey={s.key}
                                     stackId="stack"
-                                    fill={`var(--color-${s.key})`}
+                                    fill={s.color}
                                     radius={2}
                                     isAnimationActive={false}
                                 />
@@ -165,7 +165,7 @@ export function ToggleableTrendChart(props: ToggleableTrendChartProps) {
                                 <Line
                                     key={s.key}
                                     dataKey={s.key}
-                                    stroke={`var(--color-${s.key})`}
+                                    stroke={s.color}
                                     strokeWidth={2}
                                     fill="transparent"
                                     isAnimationActive={false}
diff --git a/src/components/ai-usage-analytics/UsersRolesTab.tsx b/src/components/ai-usage-analytics/UsersRolesTab.tsx
index 96a814fd6..3d8d411f1 100644
--- a/src/components/ai-usage-analytics/UsersRolesTab.tsx
+++ b/src/components/ai-usage-analytics/UsersRolesTab.tsx
@@ -80,7 +80,7 @@ export function UsersRolesTab(props: UsersRolesTabProps) {
                 <h3 className="font-semibold text-muted-foreground">Roles</h3>
                 <Card>
                     <CardHeader>
-                        <h3 className="font-semibold">Top roles</h3>
+                        <h3 className="font-semibold">Top Roles</h3>
                     </CardHeader>
                     <CardContent>
                         <TopEntitiesList
@@ -93,7 +93,7 @@ export function UsersRolesTab(props: UsersRolesTabProps) {
                 <div className="grid lg:grid-cols-2 gap-5">
                     <Card>
                         <CardHeader>
-                            <h3 className="font-semibold">Role cost</h3>
+                            <h3 className="font-semibold">Role Cost</h3>
                         </CardHeader>
                         <CardContent>
                             <ToggleableTrendChart
@@ -106,7 +106,7 @@ export function UsersRolesTab(props: UsersRolesTabProps) {
                     </Card>
                     <Card>
                         <CardHeader>
-                            <h3 className="font-semibold">Role token usage</h3>
+                            <h3 className="font-semibold">Role Token Usage</h3>
                         </CardHeader>
                         <CardContent>
                             <ToggleableTrendChart
@@ -123,7 +123,7 @@ export function UsersRolesTab(props: UsersRolesTabProps) {
                 <h3 className="font-semibold text-muted-foreground">Users</h3>
                 <Card>
                     <CardHeader>
-                        <h3 className="font-semibold">Top users</h3>
+                        <h3 className="font-semibold">Top Users</h3>
                     </CardHeader>
                     <CardContent>
                         <TopEntitiesList
@@ -136,7 +136,7 @@ export function UsersRolesTab(props: UsersRolesTabProps) {
                 <div className="grid lg:grid-cols-2 gap-5">
                     <Card>
                         <CardHeader>
-                            <h3 className="font-semibold">User cost</h3>
+                            <h3 className="font-semibold">User Cost</h3>
                         </CardHeader>
                         <CardContent>
                             <ToggleableTrendChart
@@ -149,7 +149,7 @@ export function UsersRolesTab(props: UsersRolesTabProps) {
                     </Card>
                     <Card>
                         <CardHeader>
-                            <h3 className="font-semibold">User token usage</h3>
+                            <h3 className="font-semibold">User Token Usage</h3>
                         </CardHeader>
                         <CardContent>
                             <ToggleableTrendChart
diff --git a/src/components/ui/chart.tsx b/src/components/ui/chart.tsx
index 7f324cb2a..83535e6cc 100644
--- a/src/components/ui/chart.tsx
+++ b/src/components/ui/chart.tsx
@@ -57,7 +57,7 @@ const ChartContainer = React.forwardRef<
                 {...props}
             >
                 <ChartStyle id={chartId} config={config} />
-                <RechartsPrimitive.ResponsiveContainer>
+                <RechartsPrimitive.ResponsiveContainer minWidth={0} minHeight={0}>
                     {children}
                 </RechartsPrimitive.ResponsiveContainer>
             </div>