From 1efa41082c6d92db1772e0fdb0ad5f40851e05c4 Mon Sep 17 00:00:00 2001
From: YoVinchen <gzh298255@gmail.com>
Date: Wed, 3 Dec 2025 21:54:02 +0800
Subject: [PATCH] feat(frontend): update usage types and API for pagination
 support

Types (usage.ts):
- Add isStreaming, firstTokenMs, durationMs to RequestLog
- Add PaginatedLogs interface with data, total, page, pageSize
- Change LogFilters: providerId -> appType + providerName

API (usage.ts):
- Change getRequestLogs params from limit/offset to page/pageSize
- Return PaginatedLogs instead of RequestLog[]
- Pass filters object directly to backend

Query (usage.ts):
- Update usageKeys.logs key generation for pagination
- Update useRequestLogs hook signature
---
 src/lib/api/usage.ts   | 17 +++++++----------
 src/lib/query/usage.ts | 12 ++++++------
 src/types/usage.ts     | 13 ++++++++++++-
 3 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/src/lib/api/usage.ts b/src/lib/api/usage.ts
index 2e3c5686e..7d6dcdbb6 100644
--- a/src/lib/api/usage.ts
+++ b/src/lib/api/usage.ts
@@ -8,6 +8,7 @@ import type {
   LogFilters,
   ModelPricing,
   ProviderLimitStatus,
+  PaginatedLogs,
 } from "@/types/usage";
 import type { UsageResult } from "@/types";
 import type { AppId } from "./types";
@@ -62,17 +63,13 @@ export const usageApi = {
 
   getRequestLogs: async (
     filters: LogFilters,
-    limit: number = 50,
-    offset: number = 0,
-  ): Promise<RequestLog[]> => {
+    page: number = 0,
+    pageSize: number = 20,
+  ): Promise<PaginatedLogs> => {
     return invoke("get_request_logs", {
-      providerId: filters.providerId,
-      model: filters.model,
-      statusCode: filters.statusCode,
-      startDate: filters.startDate,
-      endDate: filters.endDate,
-      limit,
-      offset,
+      filters,
+      page,
+      pageSize,
     });
   },
 
diff --git a/src/lib/query/usage.ts b/src/lib/query/usage.ts
index fb89671a9..176fc3769 100644
--- a/src/lib/query/usage.ts
+++ b/src/lib/query/usage.ts
@@ -10,8 +10,8 @@ export const usageKeys = {
   trends: (days: number) => [...usageKeys.all, "trends", days] as const,
   providerStats: () => [...usageKeys.all, "provider-stats"] as const,
   modelStats: () => [...usageKeys.all, "model-stats"] as const,
-  logs: (filters: LogFilters, limit: number, offset: number) =>
-    [...usageKeys.all, "logs", filters, limit, offset] as const,
+  logs: (filters: LogFilters, page: number, pageSize: number) =>
+    [...usageKeys.all, "logs", filters, page, pageSize] as const,
   detail: (requestId: string) =>
     [...usageKeys.all, "detail", requestId] as const,
   pricing: () => [...usageKeys.all, "pricing"] as const,
@@ -50,12 +50,12 @@ export function useModelStats() {
 
 export function useRequestLogs(
   filters: LogFilters,
-  limit: number = 50,
-  offset: number = 0,
+  page: number = 0,
+  pageSize: number = 20,
 ) {
   return useQuery({
-    queryKey: usageKeys.logs(filters, limit, offset),
-    queryFn: () => usageApi.getRequestLogs(filters, limit, offset),
+    queryKey: usageKeys.logs(filters, page, pageSize),
+    queryFn: () => usageApi.getRequestLogs(filters, page, pageSize),
   });
 }
 
diff --git a/src/types/usage.ts b/src/types/usage.ts
index 2cc6ab44e..687fdfb2b 100644
--- a/src/types/usage.ts
+++ b/src/types/usage.ts
@@ -22,12 +22,22 @@ export interface RequestLog {
   cacheReadCostUsd: string;
   cacheCreationCostUsd: string;
   totalCostUsd: string;
+  isStreaming: boolean;
   latencyMs: number;
+  firstTokenMs?: number;
+  durationMs?: number;
   statusCode: number;
   errorMessage?: string;
   createdAt: number;
 }
 
+export interface PaginatedLogs {
+  data: RequestLog[];
+  total: number;
+  page: number;
+  pageSize: number;
+}
+
 export interface ModelPricing {
   modelId: string;
   displayName: string;
@@ -77,7 +87,8 @@ export interface ModelStats {
 }
 
 export interface LogFilters {
-  providerId?: string;
+  appType?: string;
+  providerName?: string;
   model?: string;
   statusCode?: number;
   startDate?: number;