fix(webapp): harden cache metric and sparkline queries

The cache hit-rate and savings queries divided by zero for models with
no cached tokens, surfacing NaN or empty widgets; they now return 0 via
ifNull/nullIf. Model usage sparklines bucketed on a timezone-dependent
DateTime string, which could misalign bars with the charts above them;
they now key on toUnixTimestamp so buckets line up regardless of the
ClickHouse server timezone.

Author: ericallam

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

@@ -496,7 +496,7 @@ const llmDashboard: BuiltInDashboard = {
       "llm-cache-hit": {
         title: "Cache hit rate over time",
         query:
-          "SELECT timeBucket(), round(sum(cached_read_tokens) * 100.0 / (sum(input_tokens) + sum(cached_read_tokens)), 1) AS cache_hit_pct FROM llm_metrics GROUP BY timeBucket ORDER BY timeBucket",
+          "SELECT timeBucket(), round(ifNull(sum(cached_read_tokens) * 100.0 / nullIf(sum(input_tokens) + sum(cached_read_tokens), 0), 0), 1) AS cache_hit_pct FROM llm_metrics GROUP BY timeBucket ORDER BY timeBucket",
         display: {
           type: "chart",
           chartType: "line",
@@ -528,7 +528,7 @@ const llmDashboard: BuiltInDashboard = {
       "llm-cache-savings": {
         title: "Cache savings over time",
         query:
-          "SELECT timeBucket(), round(sum(cached_read_tokens) * (sum(input_cost) / (sum(input_tokens) + 1)) - sum(cached_read_cost), 4) AS cache_savings FROM llm_metrics WHERE cached_read_tokens > 0 GROUP BY timeBucket ORDER BY timeBucket",
+          "SELECT timeBucket(), round(ifNull(sum(cached_read_tokens) * (sum(input_cost) / nullIf(sum(input_tokens), 0)) - sum(cached_read_cost), 0), 4) AS cache_savings FROM llm_metrics WHERE cached_read_tokens > 0 GROUP BY timeBucket ORDER BY timeBucket",
         display: {
           type: "chart",
           chartType: "bar",
@@ -544,7 +544,7 @@ const llmDashboard: BuiltInDashboard = {
       "llm-cache-by-model": {
         title: "Cache hit rate by model",
         query:
-          "SELECT response_model, round(sum(cached_read_tokens) * 100.0 / (sum(input_tokens) + sum(cached_read_tokens)), 1) AS cache_hit_pct, sum(cached_read_tokens) AS cached_tokens FROM llm_metrics GROUP BY response_model ORDER BY cached_tokens DESC LIMIT 20",
+          "SELECT response_model, round(ifNull(sum(cached_read_tokens) * 100.0 / nullIf(sum(input_tokens) + sum(cached_read_tokens), 0), 0), 1) AS cache_hit_pct, sum(cached_read_tokens) AS cached_tokens FROM llm_metrics GROUP BY response_model ORDER BY cached_tokens DESC LIMIT 20",
         display: { type: "table", prettyFormatting: true, sorting: [] },
       },
     },

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

@@ -96,16 +96,17 @@ function sparklineBucketSeconds(rangeMs: number): number {
 
 /**
  * Generate the ordered bucket-start keys for [from, to] at the given interval,
- * epoch-aligned in UTC to exactly match ClickHouse's
- * `toStartOfInterval(col, INTERVAL n SECOND)` output strings ("YYYY-MM-DD HH:MM:SS").
+ * as epoch seconds to match ClickHouse's
+ * `toUnixTimestamp(toStartOfInterval(col, INTERVAL n SECOND))` — timezone-independent
+ * (a raw DateTime string would depend on the ClickHouse server timezone).
  */
-function sparklineBucketKeys(from: Date, to: Date, intervalSeconds: number): string[] {
+function sparklineBucketKeys(from: Date, to: Date, intervalSeconds: number): number[] {
   const intervalMs = intervalSeconds * 1000;
   const start = Math.floor(from.getTime() / intervalMs) * intervalMs;
   const end = Math.floor(to.getTime() / intervalMs) * intervalMs;
-  const keys: string[] = [];
+  const keys: number[] = [];
   for (let t = start; t <= end; t += intervalMs) {
-    keys.push(new Date(t).toISOString().slice(0, 19).replace("T", " "));
+    keys.push(t / 1000);
   }
   return keys;
 }
@@ -269,7 +270,7 @@ const ProjectModelUsageRow = z.object({
 
 const ModelSparklineRow = z.object({
   response_model: z.string(),
-  bucket: z.string(),
+  bucket: z.coerce.number(),
   val: z.coerce.number(),
 });
 
@@ -754,7 +755,7 @@ export class ModelRegistryPresenter extends BasePresenter {
         query: `
           SELECT
             response_model,
-            toStartOfInterval(start_time, INTERVAL ${intervalSeconds} SECOND) AS bucket,
+            toUnixTimestamp(toStartOfInterval(start_time, INTERVAL ${intervalSeconds} SECOND)) AS bucket,
             ${valueExpr} AS val
           FROM trigger_dev.llm_metrics_v1
           WHERE environment_id = {environmentId: String}
@@ -797,9 +798,9 @@ export class ModelRegistryPresenter extends BasePresenter {
   #buildSparklineMap(
     queryResult:
       | [Error, null]
-      | [null, { response_model: string; bucket: string; val: number }[]],
+      | [null, { response_model: string; bucket: number; val: number }[]],
     keys: string[],
-    bucketKeys: string[]
+    bucketKeys: number[]
   ): Record<string, number[]> {
     const [error, rows] = queryResult;
     if (error || !rows) return {};

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

@@ -1171,7 +1171,7 @@ function DetailYourUsageTab({
         <MetricWidget
           widgetKey={`${modelName}-user-cache-hit`}
           title="Cache hit rate over time"
-          query={`SELECT timeBucket(), round(sum(cached_read_tokens) * 100.0 / (sum(input_tokens) + sum(cached_read_tokens)), 1) AS cache_hit_pct FROM llm_metrics WHERE response_model = '${escapeTSQL(
+          query={`SELECT timeBucket(), round(ifNull(sum(cached_read_tokens) * 100.0 / nullIf(sum(input_tokens) + sum(cached_read_tokens), 0), 0), 1) AS cache_hit_pct FROM llm_metrics WHERE response_model = '${escapeTSQL(
             modelName
           )}' GROUP BY timeBucket ORDER BY timeBucket`}
           config={chartConfig({