fix(webapp): label model sparkline tooltips with their real bucket times

The Your models sparklines use dynamic bucket sizes (6h at 7d, etc.), but the
tooltip assumed hourly buckets and showed wrong dates. Thread the bucket
interval and start through so each bar is labelled correctly.

Also pin the library tab cross-tenant p50 TTFC column to a fixed 7-day window
so it no longer follows the Your models time selector.

Author: ericallam

apps/webapp/app/components/primitives/UsageSparkline.tsx

@@ -17,8 +17,12 @@ type UsageDatum = { date: Date; count: number };
 type UnitLabel = { singular: string; plural: string };
 
 export type UsageSparklineProps = {
-  /** Trailing 24 hourly buckets; the last entry is the most recent hour. */
+  /** Equal-width time buckets, oldest first. */
   data?: number[];
+  /** Epoch ms of the first bucket's start. When omitted, the last bucket is anchored to now. */
+  bucketStartMs?: number;
+  /** Width of each bucket in ms. Defaults to one hour. */
+  bucketIntervalMs?: number;
   /** Bar colour. Defaults to blue. */
   color?: string;
   /** Unit shown in the tooltip (e.g. calls, tokens). */
@@ -36,6 +40,8 @@ export type UsageSparklineProps = {
  */
 export function UsageSparkline({
   data,
+  bucketStartMs,
+  bucketIntervalMs,
   color = "#3B82F6",
   unitLabel = { singular: "call", plural: "calls" },
   formatTotal,
@@ -48,11 +54,13 @@ export function UsageSparkline({
   const total = data.reduce((a, b) => a + b, 0);
   const max = Math.max(...data);
 
-  // Map the 24-bucket array to dated points so the tooltip can show the
-  // hour each bar represents. Bucket i is `23 - i` hours before now.
-  const now = new Date();
+  // Map each bucket to a dated point so the tooltip can show the window it
+  // represents. Buckets are `intervalMs` wide; if the caller didn't pass the
+  // first bucket's start, anchor the last bucket to now (hourly default).
+  const intervalMs = bucketIntervalMs ?? 3600_000;
+  const startMs = bucketStartMs ?? Date.now() - (data.length - 1) * intervalMs;
   const chartData: UsageDatum[] = data.map((count, i) => ({
-    date: new Date(now.getTime() - (data.length - 1 - i) * 3600_000),
+    date: new Date(startMs + i * intervalMs),
     count,
   }));
 

apps/webapp/app/presenters/v3/ModelRegistryPresenter.server.ts

@@ -712,10 +712,23 @@ export class ModelRegistryPresenter extends BasePresenter {
     responseModels: string[],
     from: Date,
     to: Date
-  ): Promise<{ calls: Record<string, number[]>; tokens: Record<string, number[]> }> {
-    if (responseModels.length === 0) return { calls: {}, tokens: {} };
-
+  ): Promise<{
+    calls: Record<string, number[]>;
+    tokens: Record<string, number[]>;
+    bucketIntervalMs: number;
+    bucketStartMs: number;
+  }> {
     const intervalSeconds = sparklineBucketSeconds(to.getTime() - from.getTime());
+    const intervalMs = intervalSeconds * 1000;
+    // Epoch-aligned start of the first bucket, matching sparklineBucketKeys and
+    // ClickHouse toStartOfInterval. Returned so the sparkline tooltip can label
+    // each bar with its true time rather than assuming hourly buckets.
+    const bucketStartMs = Math.floor(from.getTime() / intervalMs) * intervalMs;
+
+    if (responseModels.length === 0) {
+      return { calls: {}, tokens: {}, bucketIntervalMs: intervalMs, bucketStartMs };
+    }
+
     const bucketKeys = sparklineBucketKeys(from, to, intervalSeconds);
 
     // intervalSeconds is a server-derived integer from a fixed ladder, so it's
@@ -760,6 +773,8 @@ export class ModelRegistryPresenter extends BasePresenter {
     return {
       calls: this.#buildSparklineMap(callsResult, responseModels, bucketKeys),
       tokens: this.#buildSparklineMap(tokensResult, responseModels, bucketKeys),
+      bucketIntervalMs: intervalMs,
+      bucketStartMs,
     };
   }
 

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.models._index/route.tsx

@@ -138,10 +138,15 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const to = parseFiniteInt(url.searchParams.get("to"));
   const time = timeFilterFromTo({ period, from, to, defaultPeriod: "7d" });
 
-  // popularModels = cross-tenant aggregate (powers the library's p50 TTFC column).
+  // popularModels powers the library tab's cross-tenant p50 TTFC column — a
+  // stable "typical latency" reference, so it always uses a fixed 7-day window
+  // independent of the Your models time selector (the library tab has none).
+  const popularTo = new Date();
+  const popularFrom = new Date(popularTo.getTime() - 7 * 24 * 60 * 60 * 1000);
+
   // projectUsage = tenant-scoped models with usage in this env (the "Your models" tab).
   const [popularModels, projectUsage] = await Promise.all([
-    presenter.getPopularModels(time.from, time.to, 50),
+    presenter.getPopularModels(popularFrom, popularTo, 50),
     presenter.getProjectModelUsage(project.id, environment.id, time.from, time.to),
   ]);
 
@@ -1172,6 +1177,8 @@ function YourModelsTab({
   usage,
   callSparklines,
   tokenSparklines,
+  bucketStartMs,
+  bucketIntervalMs,
   organizationId,
   projectId,
   environmentId,
@@ -1186,6 +1193,8 @@ function YourModelsTab({
   usage: ProjectModelUsageItem[];
   callSparklines: Record<string, number[]>;
   tokenSparklines: Record<string, number[]>;
+  bucketStartMs: number;
+  bucketIntervalMs: number;
   organizationId: string;
   projectId: string;
   environmentId: string;
@@ -1304,11 +1313,17 @@ function YourModelsTab({
                       {u.avgTps > 0 ? u.avgTps.toFixed(0) : "—"}
                     </TableCell>
                     <TableCell onClick={select}>
-                      <UsageSparkline data={callSparklines[u.responseModel]} />
+                      <UsageSparkline
+                        data={callSparklines[u.responseModel]}
+                        bucketStartMs={bucketStartMs}
+                        bucketIntervalMs={bucketIntervalMs}
+                      />
                     </TableCell>
                     <TableCell onClick={select}>
                       <UsageSparkline
                         data={tokenSparklines[u.responseModel]}
+                        bucketStartMs={bucketStartMs}
+                        bucketIntervalMs={bucketIntervalMs}
                         color="#10B981"
                         unitLabel={{ singular: "token", plural: "tokens" }}
                         formatTotal={(t) => formatNumberCompact(t)}
@@ -1459,6 +1474,8 @@ export default function ModelsPage() {
                   usage={projectUsage}
                   callSparklines={usageSparklines.calls}
                   tokenSparklines={usageSparklines.tokens}
+                  bucketStartMs={usageSparklines.bucketStartMs}
+                  bucketIntervalMs={usageSparklines.bucketIntervalMs}
                   organizationId={organizationId}
                   projectId={projectId}
                   environmentId={environmentId}