feat(billing): show user display name in usage records

Co-authored-by: Cursor <cursoragent@cursor.com>

server/pagination.mjs

@@ -31,7 +31,7 @@ export async function listUsagePaged(pool, query) {
     params,
   );
   const [rows] = await pool.query(
-    `SELECT r.id, r.user_id, u.username, r.agent_session_id, r.request_id,
+    `SELECT r.id, r.user_id, u.username, u.display_name, r.agent_session_id, r.request_id,
             r.input_tokens, r.output_tokens, r.cost_cents, r.balance_after_cents, r.created_at
      FROM h5_usage_records r
      JOIN h5_users u ON u.id = r.user_id
@@ -45,6 +45,7 @@ export async function listUsagePaged(pool, query) {
       id: Number(row.id),
       userId: row.user_id,
       username: row.username,
+      displayName: row.display_name,
       agentSessionId: row.agent_session_id,
       requestId: row.request_id,
       inputTokens: Number(row.input_tokens),

src/admin/pages/BillingPage.tsx

@@ -230,7 +230,10 @@ function UsageTab() {
                   {result.items.map((row) => (
                     <tr key={row.id}>
                       <td className="billing-time">{formatTime(row.createdAt)}</td>
-                      <td>@{row.username}</td>
+                      <td>
+                        <span>{row.displayName || row.username}</span>
+                        <span className="muted"> @{row.username}</span>
+                      </td>
                       <td className="billing-num">{row.inputTokens.toLocaleString()}</td>
                       <td className="billing-num">{row.outputTokens.toLocaleString()}</td>
                       <td className="billing-num">¥{formatYuan(row.costCents)}</td>

src/types.ts

@@ -237,6 +237,7 @@ export type UsageRecord = {
   id: number;
   userId: string;
   username: string;
+  displayName: string;
   agentSessionId: string;
   requestId: string | null;
   inputTokens: number;