fix: move distinct operations/providers queries to PromptPresenter, parallelize in dashboard loader

Author: ericallam

CLAUDE.md

@@ -18,6 +18,16 @@ pnpm run dev --filter webapp  # Run webapp (http://localhost:3030)
 pnpm run dev --filter trigger.dev --filter "@trigger.dev/*"  # Watch CLI and packages
 ```
 
+### Verifying Webapp Changes
+
+**Never run `pnpm run build --filter webapp` to verify changes.** Building proves almost nothing about correctness. Instead, run typecheck from the repo root:
+
+```bash
+pnpm run typecheck --filter webapp   # ~1-2 minutes
+```
+
+Only run typecheck after major changes (new files, significant refactors, schema changes). For small edits, trust the types and let CI catch issues.
+
 ## Testing
 
 We use vitest exclusively. **Never mock anything** - use testcontainers instead.

apps/webapp/CLAUDE.md

@@ -2,6 +2,16 @@
 
 Remix 2.1.0 app serving as the main API, dashboard, and orchestration engine. Uses an Express server (`server.ts`).
 
+## Verifying Changes
+
+**Never run `pnpm run build --filter webapp` to verify changes.** Building proves almost nothing about correctness. Instead, run typecheck from the repo root:
+
+```bash
+pnpm run typecheck --filter webapp   # ~1-2 minutes
+```
+
+Only run typecheck after major changes (new files, significant refactors, schema changes). For small edits, trust the types and let CI catch issues.
+
 ## Key File Locations
 
 - **Trigger API**: `app/routes/api.v1.tasks.$taskId.trigger.ts`

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

@@ -365,6 +365,52 @@ export class PromptPresenter extends BasePresenter {
     }
     return rows.map((r) => r.prompt_slug);
   }
+
+  async getDistinctOperations(
+    organizationId: string,
+    projectId: string,
+    environmentId: string
+  ): Promise<string[]> {
+    const queryFn = this.clickhouse.reader.query({
+      name: "getDistinctOperations",
+      query: `SELECT DISTINCT operation_id FROM trigger_dev.llm_metrics_v1 WHERE organization_id = {organizationId: String} AND project_id = {projectId: String} AND environment_id = {environmentId: String} AND operation_id != '' ORDER BY operation_id`,
+      params: z.object({
+        organizationId: z.string(),
+        projectId: z.string(),
+        environmentId: z.string(),
+      }),
+      schema: z.object({ operation_id: z.string() }),
+    });
+
+    const [error, rows] = await queryFn({ organizationId, projectId, environmentId });
+    if (error) {
+      return [];
+    }
+    return rows.map((r) => r.operation_id);
+  }
+
+  async getDistinctProviders(
+    organizationId: string,
+    projectId: string,
+    environmentId: string
+  ): Promise<string[]> {
+    const queryFn = this.clickhouse.reader.query({
+      name: "getDistinctProviders",
+      query: `SELECT DISTINCT gen_ai_system FROM trigger_dev.llm_metrics_v1 WHERE organization_id = {organizationId: String} AND project_id = {projectId: String} AND environment_id = {environmentId: String} AND gen_ai_system != '' ORDER BY gen_ai_system`,
+      params: z.object({
+        organizationId: z.string(),
+        projectId: z.string(),
+        environmentId: z.string(),
+      }),
+      schema: z.object({ gen_ai_system: z.string() }),
+    });
+
+    const [error, rows] = await queryFn({ organizationId, projectId, environmentId });
+    if (error) {
+      return [];
+    }
+    return rows.map((r) => r.gen_ai_system);
+  }
 }
 
 function encodeCursor(startTime: string, spanId: string): string {

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

@@ -98,59 +98,18 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
     }
   }
 
-  let possiblePrompts: string[] = [];
-  if (filters.includes("prompts")) {
-    const promptPresenter = new PromptPresenter(clickhouseClient);
-    possiblePrompts = await promptPresenter.getDistinctPromptSlugs(
-      project.organizationId,
-      project.id,
-      environment.id
-    );
-  }
-
-  let possibleOperations: string[] = [];
-  if (filters.includes("operations")) {
-    const queryFn = clickhouseClient.reader.query({
-      name: "getDistinctOperations",
-      query: `SELECT DISTINCT operation_id FROM trigger_dev.llm_metrics_v1 WHERE organization_id = {organizationId: String} AND project_id = {projectId: String} AND environment_id = {environmentId: String} AND operation_id != '' ORDER BY operation_id`,
-      params: z.object({
-        organizationId: z.string(),
-        projectId: z.string(),
-        environmentId: z.string(),
-      }),
-      schema: z.object({ operation_id: z.string() }),
-    });
-    const [error, rows] = await queryFn({
-      organizationId: project.organizationId,
-      projectId: project.id,
-      environmentId: environment.id,
-    });
-    if (!error) {
-      possibleOperations = rows.map((r) => r.operation_id);
-    }
-  }
-
-  let possibleProviders: string[] = [];
-  if (filters.includes("providers")) {
-    const queryFn = clickhouseClient.reader.query({
-      name: "getDistinctProviders",
-      query: `SELECT DISTINCT gen_ai_system FROM trigger_dev.llm_metrics_v1 WHERE organization_id = {organizationId: String} AND project_id = {projectId: String} AND environment_id = {environmentId: String} AND gen_ai_system != '' ORDER BY gen_ai_system`,
-      params: z.object({
-        organizationId: z.string(),
-        projectId: z.string(),
-        environmentId: z.string(),
-      }),
-      schema: z.object({ gen_ai_system: z.string() }),
-    });
-    const [error, rows] = await queryFn({
-      organizationId: project.organizationId,
-      projectId: project.id,
-      environmentId: environment.id,
-    });
-    if (!error) {
-      possibleProviders = rows.map((r) => r.gen_ai_system);
-    }
-  }
+  const promptPresenter = new PromptPresenter(clickhouseClient);
+  const [possiblePrompts, possibleOperations, possibleProviders] = await Promise.all([
+    filters.includes("prompts")
+      ? promptPresenter.getDistinctPromptSlugs(project.organizationId, project.id, environment.id)
+      : ([] as string[]),
+    filters.includes("operations")
+      ? promptPresenter.getDistinctOperations(project.organizationId, project.id, environment.id)
+      : ([] as string[]),
+    filters.includes("providers")
+      ? promptPresenter.getDistinctProviders(project.organizationId, project.id, environment.id)
+      : ([] as string[]),
+  ]);
 
   return typedjson({
     ...dashboard,