fix: derive costs by-project from run usage instead of cost events

Joins heartbeat runs to issues via activity log to attribute costs to
projects. Shows project names instead of raw IDs in the UI.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

server/src/services/costs.ts

@@ -1,6 +1,6 @@
 import { and, desc, eq, gte, isNotNull, lte, sql } from "drizzle-orm";
 import type { Db } from "@paperclip/db";
-import { agents, companies, costEvents } from "@paperclip/db";
+import { activityLog, agents, companies, costEvents, heartbeatRuns, issues, projects } from "@paperclip/db";
 import { notFound, unprocessable } from "../errors.js";
 
 export interface CostDateRange {
@@ -122,24 +122,51 @@ export function costService(db: Db) {
     },
 
     byProject: async (companyId: string, range?: CostDateRange) => {
-      const conditions: ReturnType<typeof eq>[] = [
-        eq(costEvents.companyId, companyId),
-        isNotNull(costEvents.projectId),
-      ];
-      if (range?.from) conditions.push(gte(costEvents.occurredAt, range.from));
-      if (range?.to) conditions.push(lte(costEvents.occurredAt, range.to));
+      const issueIdAsText = sql<string>`${issues.id}::text`;
+      const runProjectLinks = db
+        .selectDistinctOn([activityLog.runId, issues.projectId], {
+          runId: sql<string>`${activityLog.runId}`,
+          projectId: sql<string>`${issues.projectId}`,
+        })
+        .from(activityLog)
+        .innerJoin(
+          issues,
+          and(
+            eq(activityLog.entityType, "issue"),
+            eq(activityLog.entityId, issueIdAsText),
+          ),
+        )
+        .where(
+          and(
+            eq(activityLog.companyId, companyId),
+            eq(issues.companyId, companyId),
+            isNotNull(activityLog.runId),
+            isNotNull(issues.projectId),
+          ),
+        )
+        .orderBy(activityLog.runId, issues.projectId, desc(activityLog.createdAt))
+        .as("run_project_links");
+
+      const conditions: ReturnType<typeof eq>[] = [eq(heartbeatRuns.companyId, companyId)];
+      if (range?.from) conditions.push(gte(heartbeatRuns.finishedAt, range.from));
+      if (range?.to) conditions.push(lte(heartbeatRuns.finishedAt, range.to));
+
+      const costCentsExpr = sql<number>`coalesce(sum(round(coalesce((${heartbeatRuns.usageJson} ->> 'costUsd')::numeric, 0) * 100)), 0)::int`;
 
       return db
         .select({
-          projectId: costEvents.projectId,
-          costCents: sql<number>`coalesce(sum(${costEvents.costCents}), 0)::int`,
-          inputTokens: sql<number>`coalesce(sum(${costEvents.inputTokens}), 0)::int`,
-          outputTokens: sql<number>`coalesce(sum(${costEvents.outputTokens}), 0)::int`,
+          projectId: runProjectLinks.projectId,
+          projectName: projects.name,
+          costCents: costCentsExpr,
+          inputTokens: sql<number>`coalesce(sum(coalesce((${heartbeatRuns.usageJson} ->> 'inputTokens')::int, 0)), 0)::int`,
+          outputTokens: sql<number>`coalesce(sum(coalesce((${heartbeatRuns.usageJson} ->> 'outputTokens')::int, 0)), 0)::int`,
         })
-        .from(costEvents)
+        .from(runProjectLinks)
+        .innerJoin(heartbeatRuns, eq(runProjectLinks.runId, heartbeatRuns.id))
+        .innerJoin(projects, eq(runProjectLinks.projectId, projects.id))
         .where(and(...conditions))
-        .groupBy(costEvents.projectId)
-        .orderBy(desc(sql`coalesce(sum(${costEvents.costCents}), 0)::int`));
+        .groupBy(runProjectLinks.projectId, projects.name)
+        .orderBy(desc(costCentsExpr));
     },
   };
 }

ui/src/api/costs.ts

@@ -1,9 +1,9 @@
 import type { CostSummary, CostByAgent } from "@paperclip/shared";
 import { api } from "./client";
 
-export interface CostByEntity {
-  agentId?: string | null;
-  projectId?: string | null;
+export interface CostByProject {
+  projectId: string | null;
+  projectName: string | null;
   costCents: number;
   inputTokens: number;
   outputTokens: number;
@@ -23,5 +23,5 @@ export const costsApi = {
   byAgent: (companyId: string, from?: string, to?: string) =>
     api.get<CostByAgent[]>(`/companies/${companyId}/costs/by-agent${dateParams(from, to)}`),
   byProject: (companyId: string, from?: string, to?: string) =>
-    api.get<CostByEntity[]>(`/companies/${companyId}/costs/by-project${dateParams(from, to)}`),
+    api.get<CostByProject[]>(`/companies/${companyId}/costs/by-project${dateParams(from, to)}`),
 };

ui/src/pages/Costs.tsx

@@ -202,16 +202,16 @@ export function Costs() {
               <CardContent className="p-4">
                 <h3 className="text-sm font-semibold mb-3">By Project</h3>
                 {data.byProject.length === 0 ? (
-                  <p className="text-sm text-muted-foreground">No project-attributed costs yet.</p>
+                  <p className="text-sm text-muted-foreground">No project-attributed run costs yet.</p>
                 ) : (
                   <div className="space-y-2">
-                    {data.byProject.map((row, idx) => (
+                    {data.byProject.map((row) => (
                       <div
-                        key={`${row.projectId ?? "na"}-${idx}`}
+                        key={row.projectId ?? "na"}
                         className="flex items-center justify-between text-sm"
                       >
-                        <span className="font-mono text-xs truncate">
-                          {row.projectId ?? "Unattributed"}
+                        <span className="truncate">
+                          {row.projectName ?? row.projectId ?? "Unattributed"}
                         </span>
                         <span className="font-medium">{formatCents(row.costCents)}</span>
                       </div>