fix(models): improve model colors and sort selector

Author: itvincent-git

src/components/model-usage-card.test.tsx

@@ -2,10 +2,10 @@
 
 import { render, screen, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { describe, expect, it } from "vitest";
+import { beforeAll, describe, expect, it, vi } from "vitest";
 import { ModelUsageCard } from "@/components/model-usage-card";
 import type { OverviewResponse } from "@/lib/api";
-import { buildDonutData, priceTones, sortModels, tokenBreakdown } from "@/lib/model-analytics";
+import { buildDonutData, modelPageColors, OTHER_MODEL_COLOR, priceTones, sortModels, tokenBreakdown } from "@/lib/model-analytics";
 import i18n from "@/i18n";
 
 type Model = OverviewResponse["models"][number];
@@ -24,6 +24,10 @@ const model = (name: string, totalTokens: number, overrides: Partial<Model> = {}
   ...overrides,
 });
 
+beforeAll(() => {
+  window.HTMLElement.prototype.scrollIntoView = vi.fn();
+});
+
 describe("model analytics", () => {
   it("does not double count cached input in token composition", () => {
     const parts = tokenBreakdown(model("one", 1_200, { inputTokens: 1_000, cachedInputTokens: 400, outputTokens: 200 }));
@@ -35,7 +39,26 @@ describe("model analytics", () => {
     const data = buildDonutData(Array.from({ length: 8 }, (_, index) => model(`m${index + 1}`, 800 - index * 100)), "Other");
     expect(data).toHaveLength(7);
     expect(data.slice(0, 6).map((item) => item.value)).toEqual([800, 700, 600, 500, 400, 300]);
-    expect(data[6]).toMatchObject({ name: "Other", value: 300 });
+    expect(data[6]).toMatchObject({ name: "Other", value: 300, color: OTHER_MODEL_COLOR });
+  });
+
+  it("assigns the first six models unique colors in deterministic token order", () => {
+    const rows = [
+      model("zeta", 100),
+      model("beta", 300),
+      model("alpha", 300),
+      model("gamma", 200),
+      model("delta", 150),
+      model("epsilon", 125),
+    ];
+    const colors = modelPageColors(rows);
+    const rankedNames = ["alpha", "beta", "gamma", "delta", "epsilon", "zeta"];
+
+    expect([...colors.keys()]).toEqual(rankedNames);
+    expect(new Set(rankedNames.map((name) => colors.get(name))).size).toBe(6);
+    expect(buildDonutData(rows, "Other", colors).map((entry) => entry.color)).toEqual(
+      rankedNames.map((name) => colors.get(name)),
+    );
   });
 
   it("sorts descending by tokens, cost, and effective price with unknown prices last", () => {
@@ -64,8 +87,29 @@ describe("model analytics", () => {
     expect(within(row).getAllByText("Pricing unavailable")).toHaveLength(4);
     expect(screen.getByText("Token composition")).toBeInTheDocument();
 
-    await userEvent.selectOptions(screen.getByRole("combobox", { name: "Sort descending" }), "effective");
-    expect(screen.getByRole("combobox")).toHaveValue("effective");
+    const user = userEvent.setup();
+    screen.getByRole("combobox", { name: "Sort descending" }).focus();
+    await user.keyboard("[Enter][End][Enter]");
+    expect(screen.getByRole("combobox", { name: "Sort descending" })).toHaveTextContent("Effective price");
+  });
+
+  it("uses one model color mapping across the chart and table while sorting", async () => {
+    const rows = [model("alpha", 100, { costUSD: 9 }), model("beta", 300, { costUSD: 1 })];
+    const colors = modelPageColors(rows);
+    render(<ModelUsageCard models={rows} />);
+
+    for (const row of rows) {
+      const tableRow = document.querySelector(`[data-model-row='${row.model}']`) as HTMLElement;
+      expect(tableRow).toHaveAttribute("data-model-color", colors.get(row.model));
+      expect(document.querySelector(`[data-model-legend='${row.model}']`)).toHaveAttribute("data-model-color", colors.get(row.model));
+      expect(tableRow.querySelector("[data-model-badge]")).toHaveClass("text-foreground");
+    }
+
+    const user = userEvent.setup();
+    screen.getByRole("combobox", { name: "Sort descending" }).focus();
+    await user.keyboard("[Enter][ArrowDown][Enter]");
+    expect(document.querySelector("tbody tr")?.getAttribute("data-model-row")).toBe("alpha");
+    expect(document.querySelector("[data-model-row='beta']")).toHaveAttribute("data-model-color", colors.get("beta"));
   });
 
   it("renders the model page labels in Chinese", async () => {

src/components/model-usage-card.tsx

@@ -1,10 +1,11 @@
 import { useMemo, useState } from "react";
 import { Cell, Pie, PieChart, ResponsiveContainer, Tooltip } from "recharts";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import type { OverviewResponse } from "@/lib/api";
 import {
   buildDonutData,
-  modelTone,
+  modelPageColors,
   priceTones,
   sortModels,
   tokenBreakdown,
@@ -57,7 +58,8 @@ export function ModelUsageCard({ models }: ModelUsageCardProps) {
     costUSD: result.costUSD + model.costUSD,
   }), { inputTokens: 0, cachedInputTokens: 0, outputTokens: 0, totalTokens: 0, costUSD: 0 }), [models]);
   const sortedModels = useMemo(() => sortModels(models, sort), [models, sort]);
-  const donutData = useMemo(() => buildDonutData(models, t("models.other")), [models, t]);
+  const modelColors = useMemo(() => modelPageColors(models), [models]);
+  const donutData = useMemo(() => buildDonutData(models, t("models.other"), modelColors), [modelColors, models, t]);
   const tones = useMemo(() => ({
     input: priceTones(models, "inputCostPerMillionTokens"),
     cached: priceTones(models, "cachedInputCostPerMillionTokens"),
@@ -119,7 +121,7 @@ export function ModelUsageCard({ models }: ModelUsageCardProps) {
               </ResponsiveContainer>
             </div>
             <div className="grid w-full gap-2 text-xs sm:w-1/2">
-              {donutData.map((entry) => <div key={entry.name} className="flex items-center justify-between gap-3"><span className="min-w-0 truncate"><i className="mr-2 inline-block h-2.5 w-2.5 rounded-full" style={{ backgroundColor: entry.color }} />{entry.name}</span><span className="tabular-nums text-muted-foreground">{formatPercent(entry.value / Math.max(totals.totalTokens, 1))}</span></div>)}
+              {donutData.map((entry) => <div key={entry.name} data-model-legend={entry.name} data-model-color={entry.color} className="flex items-center justify-between gap-3"><span className="min-w-0 truncate"><i className="mr-2 inline-block h-2.5 w-2.5 rounded-full" style={{ backgroundColor: entry.color }} />{entry.name}</span><span className="tabular-nums text-muted-foreground">{formatPercent(entry.value / Math.max(totals.totalTokens, 1))}</span></div>)}
             </div>
           </CardContent>
         </Card>
@@ -128,7 +130,19 @@ export function ModelUsageCard({ models }: ModelUsageCardProps) {
       <Card>
         <CardHeader className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
           <div><CardTitle>{t("models.comparison.title")}</CardTitle><CardDescription>{t("models.comparison.subtitle")}</CardDescription></div>
-          <label className="flex items-center gap-2 text-xs text-muted-foreground">{t("models.sort.label")}<select aria-label={t("models.sort.label")} value={sort} onChange={(event) => setSort(event.target.value as ModelSort)} className="rounded-md border border-border bg-surface px-3 py-2 text-sm text-foreground"><option value="tokens">{t("models.sort.tokens")}</option><option value="cost">{t("models.sort.cost")}</option><option value="effective">{t("models.sort.effective")}</option></select></label>
+          <div className="flex items-center gap-2 text-xs text-muted-foreground">
+            <span>{t("models.sort.label")}</span>
+            <Select value={sort} onValueChange={(value) => setSort(value as ModelSort)}>
+              <SelectTrigger aria-label={t("models.sort.label")} className="w-[180px]">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="tokens">{t("models.sort.tokens")}</SelectItem>
+                <SelectItem value="cost">{t("models.sort.cost")}</SelectItem>
+                <SelectItem value="effective">{t("models.sort.effective")}</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
         </CardHeader>
         <CardContent>
           <div className="mb-4 flex flex-wrap gap-3 text-[11px] text-muted-foreground" aria-label={t("models.price_legend.label")}>
@@ -138,12 +152,12 @@ export function ModelUsageCard({ models }: ModelUsageCardProps) {
             <table className="min-w-[1120px] w-full border-separate border-spacing-0 text-sm">
               <thead><tr className="text-left text-[10px] uppercase tracking-[0.12em] text-muted-foreground"><th className="border-b border-border pb-2">{t("models.groups.model")}</th><th className="border-b border-border px-4 pb-2">{t("models.groups.tokens")}</th><th className="border-b border-border px-4 pb-2">{t("models.groups.prices")}</th><th className="border-b border-border pb-2">{t("models.groups.cost")}</th></tr></thead>
               <tbody>{sortedModels.map((model) => {
-                const identity = modelTone(model.model);
+                const modelColor = modelColors.get(model.model)!;
                 const parts = tokenBreakdown(model);
                 const usageShare = model.totalTokens / Math.max(totals.totalTokens, 1);
                 const costShare = totals.costUSD > 0 ? model.costUSD / totals.costUSD : 0;
-                return <tr key={model.model} data-model-row={model.model} className="align-top">
-                  <td className="border-b border-border/70 py-4 pr-4"><div className="flex items-center gap-2"><span className="h-3 w-3 shrink-0 rounded-full" style={{ backgroundColor: identity.color }} /><span className={cn("rounded-full border px-2 py-0.5 font-semibold", identity.className)}>{model.model}</span></div><p className="mt-2 text-xs tabular-nums text-muted-foreground">{formatPercent(usageShare)} {t("models.of_usage")}</p></td>
+                return <tr key={model.model} data-model-row={model.model} data-model-color={modelColor} className="align-top">
+                  <td className="border-b border-border/70 py-4 pr-4"><div className="flex items-center gap-2"><span data-model-swatch className="h-3 w-3 shrink-0 rounded-full" style={{ backgroundColor: modelColor }} /><span data-model-badge className="rounded-full border px-2 py-0.5 font-semibold text-foreground" style={{ borderColor: `${modelColor}66`, backgroundColor: `${modelColor}1a` }}>{model.model}</span></div><p className="mt-2 text-xs tabular-nums text-muted-foreground">{formatPercent(usageShare)} {t("models.of_usage")}</p></td>
                   <td className="border-b border-border/70 px-4 py-4"><div className="mb-2 flex justify-between gap-4"><strong className="tabular-nums">{formatNumber(model.totalTokens)}</strong><span className="text-xs text-muted-foreground">{t("models.composition.input_total")} {formatNumber(model.inputTokens)} · {t("models.composition.cached")} {formatNumber(model.cachedInputTokens)} · {t("models.composition.output")} {formatNumber(model.outputTokens)}</span></div><TokenBar row={model} label={t("models.composition.bar_label", { input: formatNumber(parts.nonCachedInput), cached: formatNumber(parts.cachedInput), output: formatNumber(parts.output), total: formatNumber(model.totalTokens) })} /></td>
                   <td className="border-b border-border/70 px-4 py-4"><div className="grid grid-cols-4 gap-3 text-xs"><div title={t("models.prices.input_tooltip")}><p className="mb-1 text-muted-foreground">{t("models.prices.input")}</p><Price value={model.inputCostPerMillionTokens} tone={tones.input.get(model.model)!} unavailable={unavailable} /></div><div title={t("models.prices.cached_tooltip")}><p className="mb-1 text-muted-foreground">{t("models.prices.cached")}</p><Price value={model.cachedInputCostPerMillionTokens} tone={tones.cached.get(model.model)!} unavailable={unavailable} /></div><div title={t("models.prices.output_tooltip")}><p className="mb-1 text-muted-foreground">{t("models.prices.output")}</p><Price value={model.outputCostPerMillionTokens} tone={tones.output.get(model.model)!} unavailable={unavailable} /></div><div title={t("models.prices.effective_tooltip")}><p className="mb-1 text-muted-foreground">{t("models.prices.effective")}</p><Price value={model.effectiveCostPerMillionTokens} tone={tones.effective.get(model.model)!} unavailable={unavailable} /></div></div></td>
                   <td className="border-b border-border/70 py-4 text-right"><p data-effective-tone={tones.effective.get(model.model)} className={cn("font-bold tabular-nums", priceToneClasses[tones.effective.get(model.model)!])}>{formatCurrency(model.costUSD)}</p><p className="mt-1 text-xs tabular-nums text-muted-foreground">{formatPercent(costShare)} {t("models.of_cost")}</p></td>

src/lib/model-analytics.ts

@@ -5,6 +5,8 @@ export type ModelSort = "tokens" | "cost" | "effective";
 export type PriceTone = "low" | "medium" | "high" | "equal" | "unavailable";
 
 const MODEL_COLORS = ["#0ea5e9", "#8b5cf6", "#06b6d4", "#d946ef", "#f97316", "#14b8a6"] as const;
+const MODEL_PAGE_COLORS = ["#2563eb", "#d97706", "#16a34a", "#c026d3", "#dc2626", "#0891b2"] as const;
+export const OTHER_MODEL_COLOR = "#94a3b8";
 const MODEL_TONE_CLASSES = [
   "border-sky-500/20 bg-sky-500/10 text-sky-500",
   "border-violet-500/20 bg-violet-500/10 text-violet-500",
@@ -21,6 +23,13 @@ export function modelTone(model: string) {
   return { index, color: MODEL_COLORS[index], className: MODEL_TONE_CLASSES[index] };
 }
 
+export function modelPageColors(models: ModelRow[]) {
+  return new Map(sortModels(models, "tokens").map((model, index) => [
+    model.model,
+    MODEL_PAGE_COLORS[index % MODEL_PAGE_COLORS.length],
+  ]));
+}
+
 export function tokenBreakdown(row: Pick<ModelRow, "inputTokens" | "cachedInputTokens" | "outputTokens">) {
   const cached = Math.max(Math.min(row.cachedInputTokens, row.inputTokens), 0);
   return {
@@ -46,15 +55,15 @@ export function sortModels(models: ModelRow[], sort: ModelSort) {
   });
 }
 
-export function buildDonutData(models: ModelRow[], otherLabel: string) {
+export function buildDonutData(models: ModelRow[], otherLabel: string, colors = modelPageColors(models)) {
   const sorted = sortModels(models, "tokens");
   const visible: Array<{ name: string; value: number; color: string }> = sorted.slice(0, 6).map((model) => ({
     name: model.model,
     value: model.totalTokens,
-    color: modelTone(model.model).color,
+    color: colors.get(model.model)!,
   }));
   const other = sorted.slice(6).reduce((sum, model) => sum + model.totalTokens, 0);
-  if (other > 0) visible.push({ name: otherLabel, value: other, color: "#94a3b8" });
+  if (other > 0) visible.push({ name: otherLabel, value: other, color: OTHER_MODEL_COLOR });
   return visible;
 }