link the usage with the session to display together

messages/en-US.json

@@ -3411,6 +3411,9 @@
     "aiSessionLogTruncated": "This session was truncated before storage and may be incomplete.",
     "aiSessionViewRaw": "View Raw JSON",
     "aiSessionViewChat": "View Chat",
+    "tokens": "Tokens",
+    "cost": "Cost",
+    "estimated": "estimated",
     "requestAnalyticsDescription": "View detailed request analytics for resources in this organization",
     "logRetentionRequestLabel": "HTTP Request Log Retention",
     "logRetentionRequestDescription": "How long to retain request logs",

server/db/pg/schema/schema.ts

@@ -1831,6 +1831,13 @@ export const aiUsageRecords = pgTable(
         userId: varchar("userId").references(() => users.userId, {
             onDelete: "set null"
         }),
+        // Links this usage record back to the aiSessionLog row for the same
+        // request (aiSessionLog.sessionId), so token/cost usage can be shown
+        // alongside the session transcript. Not a DB-level FK - aiSessionLog
+        // lives in the separate logs database. Nullable because the session
+        // log may be disabled (retention set to 0) while usage tracking
+        // stays on.
+        sessionId: varchar("sessionId"),
         requestedModel: varchar("requestedModel").notNull(),
         promptTokens: integer("promptTokens").notNull().default(0),
         cacheReadTokens: integer("cacheReadTokens").notNull().default(0),
@@ -1862,7 +1869,8 @@ export const aiUsageRecords = pgTable(
             t.orgId,
             t.userId,
             t.createdAt
-        )
+        ),
+        index("idx_ai_usage_records_session").on(t.sessionId)
     ]
 );
 

server/db/sqlite/schema/schema.ts

@@ -1819,6 +1819,13 @@ export const aiUsageRecords = sqliteTable(
         userId: text("userId").references(() => users.userId, {
             onDelete: "set null"
         }),
+        // Links this usage record back to the aiSessionLog row for the same
+        // request (aiSessionLog.sessionId), so token/cost usage can be shown
+        // alongside the session transcript. Not a DB-level FK - aiSessionLog
+        // lives in the separate logs database. Nullable because the session
+        // log may be disabled (retention set to 0) while usage tracking
+        // stays on.
+        sessionId: text("sessionId"),
         requestedModel: text("requestedModel").notNull(),
         promptTokens: integer("promptTokens").notNull().default(0),
         cacheReadTokens: integer("cacheReadTokens").notNull().default(0),
@@ -1852,7 +1859,8 @@ export const aiUsageRecords = sqliteTable(
             t.orgId,
             t.userId,
             t.createdAt
-        )
+        ),
+        index("idx_ai_usage_records_session").on(t.sessionId)
     ]
 );
 

server/lib/aiBudgetEnforcement.ts

@@ -428,6 +428,11 @@ export type UsageRecordInput = {
     usage: AiUsage;
     costUsd: number | null;
     createdAt?: number;
+    // Same id as the aiSessionLog row logged for this request, so the two
+    // can be joined to show token/cost usage alongside the session
+    // transcript. Undefined when the session wasn't logged (e.g. session
+    // log retention disabled for the org).
+    sessionId?: string;
 };
 
 type AiUsageRecordInsert = InferInsertModel<typeof aiUsageRecords>;
@@ -539,6 +544,7 @@ export async function recordUsage(input: UsageRecordInput): Promise<void> {
             resourceId: input.resourceId,
             siteResourceId: input.siteResourceId,
             userId: input.userId,
+            sessionId: input.sessionId,
             requestedModel: input.requestedModel,
             promptTokens: usage.promptTokens,
             cacheReadTokens: usage.cacheReadTokens,

server/routers/aiGateway/logAiSession.ts

@@ -1,4 +1,3 @@
-import { randomUUID } from "crypto";
 import { logsDb, db, orgs, aiSessionLog, type AiProvider } from "@server/db";
 import type { InferInsertModel } from "drizzle-orm";
 import logger from "@server/logger";
@@ -169,6 +168,7 @@ function truncateBody(value: string): { value: string; truncated: boolean } {
 }
 
 export function logAiSession(data: {
+    sessionId: string;
     capability: AiCapability;
     provider: AiProvider;
     requestedModel: string | undefined;
@@ -230,7 +230,7 @@ export function logAiSession(data: {
             }
 
             sessionLogBuffer.push({
-                sessionId: randomUUID(),
+                sessionId: data.sessionId,
                 orgId: sanitizeString(data.orgId),
                 providerId: data.provider.providerId,
                 capability: data.capability,

server/routers/aiGateway/pipeline.ts

@@ -1,3 +1,4 @@
+import { randomUUID } from "crypto";
 import { Request, Response } from "express";
 import { and, eq, inArray } from "drizzle-orm";
 import {
@@ -594,6 +595,12 @@ export function recordAiGatewayCompletion(args: {
     const pricing = getModelPricing(provider.type as AiProviderType, model);
     const cost = calculateAiCost(pricing, usage);
 
+    // Shared by the usage record and the session log so the two can be
+    // joined later to show token/cost usage alongside the transcript -
+    // generated up front since neither buffered insert's row id is known
+    // until its next batch flush.
+    const sessionId = randomUUID();
+
     logger.info("AI gateway request usage", {
         capability,
         providerId: provider.providerId,
@@ -618,7 +625,8 @@ export function recordAiGatewayCompletion(args: {
             userId: requestUserId,
             requestedModel: model ?? "unknown",
             usage,
-            costUsd: cost?.totalCost ?? null
+            costUsd: cost?.totalCost ?? null,
+            sessionId
         });
 
         if (budgets.length > 0) {
@@ -635,6 +643,7 @@ export function recordAiGatewayCompletion(args: {
     }
 
     logAiSession({
+        sessionId,
         capability,
         provider,
         requestedModel,

server/routers/auditLogs/queryAiSessionLog.ts

@@ -2,6 +2,7 @@ import {
     logsDb,
     aiSessionLog,
     aiProviders,
+    aiUsageRecords,
     resources,
     siteResources,
     users,
@@ -253,6 +254,51 @@ async function enrichWithDetails(
         }
     }
 
+    const usageMap = new Map<
+        string,
+        {
+            promptTokens: number;
+            cacheReadTokens: number;
+            cacheWriteTokens: number;
+            completionTokens: number;
+            reasoningTokens: number;
+            totalTokens: number;
+            costUsd: number | null;
+            estimated: boolean;
+        }
+    >();
+    const sessionIds = logs.map((log) => log.sessionId);
+    if (sessionIds.length > 0) {
+        const usageDetails = await primaryDb
+            .select({
+                sessionId: aiUsageRecords.sessionId,
+                promptTokens: aiUsageRecords.promptTokens,
+                cacheReadTokens: aiUsageRecords.cacheReadTokens,
+                cacheWriteTokens: aiUsageRecords.cacheWriteTokens,
+                completionTokens: aiUsageRecords.completionTokens,
+                reasoningTokens: aiUsageRecords.reasoningTokens,
+                totalTokens: aiUsageRecords.totalTokens,
+                costUsd: aiUsageRecords.costUsd,
+                estimated: aiUsageRecords.estimated
+            })
+            .from(aiUsageRecords)
+            .where(inArray(aiUsageRecords.sessionId, sessionIds));
+
+        for (const u of usageDetails) {
+            if (!u.sessionId) continue;
+            usageMap.set(u.sessionId, {
+                promptTokens: u.promptTokens,
+                cacheReadTokens: u.cacheReadTokens,
+                cacheWriteTokens: u.cacheWriteTokens,
+                completionTokens: u.completionTokens,
+                reasoningTokens: u.reasoningTokens,
+                totalTokens: u.totalTokens,
+                costUsd: u.costUsd,
+                estimated: u.estimated
+            });
+        }
+    }
+
     return logs.map((log) => {
         const provider = providerMap.get(log.providerId);
 
@@ -281,7 +327,8 @@ async function enrichWithDetails(
             providerType: provider?.type ?? null,
             resourceName,
             resourceNiceId,
-            userEmail: log.userId ? (userMap.get(log.userId) ?? null) : null
+            userEmail: log.userId ? (userMap.get(log.userId) ?? null) : null,
+            usage: usageMap.get(log.sessionId) ?? null
         };
     });
 }

server/routers/auditLogs/types.ts

@@ -119,6 +119,16 @@ export type QueryAiSessionLogResponse = {
         truncated: boolean;
         statusCode: number | null;
         createdAt: number;
+        usage: {
+            promptTokens: number;
+            cacheReadTokens: number;
+            cacheWriteTokens: number;
+            completionTokens: number;
+            reasoningTokens: number;
+            totalTokens: number;
+            costUsd: number | null;
+            estimated: boolean;
+        } | null;
     }[];
     pagination: {
         total: number;

src/app/[orgId]/settings/logs/ai/page.tsx

@@ -459,7 +459,7 @@ export default function AiSessionLogsPage() {
     const renderExpandedRow = (row: any) => {
         return (
             <div className="space-y-4">
-                <div className="grid grid-cols-2 gap-4 text-xs">
+                <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 text-xs">
                     <div>
                         <strong>{t("aiSessionId")}</strong>
                         <p className="text-muted-foreground mt-1 break-all">
@@ -472,6 +472,26 @@ export default function AiSessionLogsPage() {
                             {row.statusCode ?? "N/A"}
                         </p>
                     </div>
+                    <div>
+                        <strong>{t("tokens")}</strong>
+                        <p className="text-muted-foreground mt-1">
+                            {row.usage
+                                ? `${row.usage.totalTokens.toLocaleString()}${
+                                      row.usage.estimated
+                                          ? ` (${t("estimated")})`
+                                          : ""
+                                  }`
+                                : "N/A"}
+                        </p>
+                    </div>
+                    <div>
+                        <strong>{t("cost")}</strong>
+                        <p className="text-muted-foreground mt-1">
+                            {row.usage && row.usage.costUsd != null
+                                ? `$${row.usage.costUsd.toFixed(4)}`
+                                : "N/A"}
+                        </p>
+                    </div>
                 </div>
                 <AiSessionChatView
                     normalizedRequest={row.normalizedRequest}
@@ -572,7 +592,17 @@ function generateSampleAiSessionLogs(): QueryAiSessionLogResponse["log"] {
             statusCode: 200,
             createdAt: Math.floor(
                 sevenDaysAgoMs + Math.random() * (now - sevenDaysAgoMs)
-            )
+            ),
+            usage: {
+                promptTokens: 500,
+                cacheReadTokens: 0,
+                cacheWriteTokens: 0,
+                completionTokens: 150,
+                reasoningTokens: 0,
+                totalTokens: 650,
+                costUsd: 0.0123,
+                estimated: false
+            }
         };
     });
 }