fix(test): 补充 stubUsageLogRepo 缺失的 GetStatsWithFilters 方法

后端改进：
- 新增 GetStatsWithFilters 方法支持完整筛选条件
- Stats 端点支持 account_id, group_id, model, stream, billing_type 参数
- 统一使用 filters 结构体，移除冗余的分支逻辑

前端改进：
- 统计卡片添加"所选范围内"文字提示
- 优化总消费显示格式，清晰展示实际费用和标准计费
- Token 和费用列添加问号图标 tooltip 显示详细信息
- API Key 搜索框体验优化：点击即显示下拉选项
- 选择用户后自动加载该用户的所有 API Key

backend/internal/handler/admin/usage_handler.go

@@ -152,8 +152,8 @@ func (h *UsageHandler) List(c *gin.Context) {
 // Stats handles getting usage statistics with filters
 // GET /api/v1/admin/usage/stats
 func (h *UsageHandler) Stats(c *gin.Context) {
-	// Parse filters
+	// Parse filters - same as List endpoint
-	var userID, apiKeyID int64
+	var userID, apiKeyID, accountID, groupID int64
 	if userIDStr := c.Query("user_id"); userIDStr != "" {
 		id, err := strconv.ParseInt(userIDStr, 10, 64)
 		if err != nil {
@@ -172,8 +172,49 @@ func (h *UsageHandler) Stats(c *gin.Context) {
 		apiKeyID = id
 	}
 
+	if accountIDStr := c.Query("account_id"); accountIDStr != "" {
+		id, err := strconv.ParseInt(accountIDStr, 10, 64)
+		if err != nil {
+			response.BadRequest(c, "Invalid account_id")
+			return
+		}
+		accountID = id
+	}
+
+	if groupIDStr := c.Query("group_id"); groupIDStr != "" {
+		id, err := strconv.ParseInt(groupIDStr, 10, 64)
+		if err != nil {
+			response.BadRequest(c, "Invalid group_id")
+			return
+		}
+		groupID = id
+	}
+
+	model := c.Query("model")
+
+	var stream *bool
+	if streamStr := c.Query("stream"); streamStr != "" {
+		val, err := strconv.ParseBool(streamStr)
+		if err != nil {
+			response.BadRequest(c, "Invalid stream value, use true or false")
+			return
+		}
+		stream = &val
+	}
+
+	var billingType *int8
+	if billingTypeStr := c.Query("billing_type"); billingTypeStr != "" {
+		val, err := strconv.ParseInt(billingTypeStr, 10, 8)
+		if err != nil {
+			response.BadRequest(c, "Invalid billing_type")
+			return
+		}
+		bt := int8(val)
+		billingType = &bt
+	}
+
 	// Parse date range
-	userTZ := c.Query("timezone") // Get user's timezone from request
+	userTZ := c.Query("timezone")
 	now := timezone.NowInUserLocation(userTZ)
 	var startTime, endTime time.Time
 
@@ -208,28 +249,20 @@ func (h *UsageHandler) Stats(c *gin.Context) {
 		endTime = now
 	}
 
-	if apiKeyID > 0 {
+	// Build filters and call GetStatsWithFilters
-		stats, err := h.usageService.GetStatsByAPIKey(c.Request.Context(), apiKeyID, startTime, endTime)
+	filters := usagestats.UsageLogFilters{
-		if err != nil {
+		UserID:      userID,
-			response.ErrorFrom(c, err)
+		APIKeyID:    apiKeyID,
-			return
+		AccountID:   accountID,
-		}
+		GroupID:     groupID,
-		response.Success(c, stats)
+		Model:       model,
-		return
+		Stream:      stream,
+		BillingType: billingType,
+		StartTime:   &startTime,
+		EndTime:     &endTime,
 	}
 
-	if userID > 0 {
+	stats, err := h.usageService.GetStatsWithFilters(c.Request.Context(), filters)
-		stats, err := h.usageService.GetStatsByUser(c.Request.Context(), userID, startTime, endTime)
-		if err != nil {
-			response.ErrorFrom(c, err)
-			return
-		}
-		response.Success(c, stats)
-		return
-	}
-
-	// Get global stats
-	stats, err := h.usageService.GetGlobalStats(c.Request.Context(), startTime, endTime)
 	if err != nil {
 		response.ErrorFrom(c, err)
 		return

backend/internal/handler/gateway_helper.go

@@ -83,19 +83,33 @@ func NewConcurrencyHelper(concurrencyService *service.ConcurrencyService, pingFo
 
 // wrapReleaseOnDone ensures release runs at most once and still triggers on context cancellation.
 // 用于避免客户端断开或上游超时导致的并发槽位泄漏。
+// 修复：添加 quit channel 确保 goroutine 及时退出，避免泄露
 func wrapReleaseOnDone(ctx context.Context, releaseFunc func()) func() {
 	if releaseFunc == nil {
 		return nil
 	}
 	var once sync.Once
-	wrapped := func() {
+	quit := make(chan struct{})
-		once.Do(releaseFunc)
+
+	release := func() {
+		once.Do(func() {
+			releaseFunc()
+			close(quit) // 通知监听 goroutine 退出
+		})
 	}
+
 	go func() {
-		<-ctx.Done()
+		select {
-		wrapped()
+		case <-ctx.Done():
+			// Context 取消时释放资源
+			release()
+		case <-quit:
+			// 正常释放已完成，goroutine 退出
+			return
+		}
 	}()
-	return wrapped
+
+	return release
 }
 
 // IncrementWaitCount increments the wait count for a user

backend/internal/handler/gateway_helper_test.go

@@ -0,0 +1,141 @@
+package handler
+
+import (
+	"context"
+	"runtime"
+	"sync/atomic"
+	"testing"
+	"time"
+)
+
+// TestWrapReleaseOnDone_NoGoroutineLeak 验证 wrapReleaseOnDone 修复后不会泄露 goroutine
+func TestWrapReleaseOnDone_NoGoroutineLeak(t *testing.T) {
+	// 记录测试开始时的 goroutine 数量
+	runtime.GC()
+	time.Sleep(100 * time.Millisecond)
+	initialGoroutines := runtime.NumGoroutine()
+
+	ctx, cancel := context.WithCancel(context.Background())
+	defer cancel()
+
+	var releaseCount int32
+	release := wrapReleaseOnDone(ctx, func() {
+		atomic.AddInt32(&releaseCount, 1)
+	})
+
+	// 正常释放
+	release()
+
+	// 等待足够时间确保 goroutine 退出
+	time.Sleep(200 * time.Millisecond)
+
+	// 验证只释放一次
+	if count := atomic.LoadInt32(&releaseCount); count != 1 {
+		t.Errorf("expected release count to be 1, got %d", count)
+	}
+
+	// 强制 GC，清理已退出的 goroutine
+	runtime.GC()
+	time.Sleep(100 * time.Millisecond)
+
+	// 验证 goroutine 数量没有增加（允许±2的误差，考虑到测试框架本身可能创建的 goroutine）
+	finalGoroutines := runtime.NumGoroutine()
+	if finalGoroutines > initialGoroutines+2 {
+		t.Errorf("goroutine leak detected: initial=%d, final=%d, leaked=%d",
+			initialGoroutines, finalGoroutines, finalGoroutines-initialGoroutines)
+	}
+}
+
+// TestWrapReleaseOnDone_ContextCancellation 验证 context 取消时也能正确释放
+func TestWrapReleaseOnDone_ContextCancellation(t *testing.T) {
+	ctx, cancel := context.WithCancel(context.Background())
+
+	var releaseCount int32
+	_ = wrapReleaseOnDone(ctx, func() {
+		atomic.AddInt32(&releaseCount, 1)
+	})
+
+	// 取消 context，应该触发释放
+	cancel()
+
+	// 等待释放完成
+	time.Sleep(100 * time.Millisecond)
+
+	// 验证释放被调用
+	if count := atomic.LoadInt32(&releaseCount); count != 1 {
+		t.Errorf("expected release count to be 1, got %d", count)
+	}
+}
+
+// TestWrapReleaseOnDone_MultipleCallsOnlyReleaseOnce 验证多次调用 release 只释放一次
+func TestWrapReleaseOnDone_MultipleCallsOnlyReleaseOnce(t *testing.T) {
+	ctx, cancel := context.WithCancel(context.Background())
+	defer cancel()
+
+	var releaseCount int32
+	release := wrapReleaseOnDone(ctx, func() {
+		atomic.AddInt32(&releaseCount, 1)
+	})
+
+	// 调用多次
+	release()
+	release()
+	release()
+
+	// 等待执行完成
+	time.Sleep(100 * time.Millisecond)
+
+	// 验证只释放一次
+	if count := atomic.LoadInt32(&releaseCount); count != 1 {
+		t.Errorf("expected release count to be 1, got %d", count)
+	}
+}
+
+// TestWrapReleaseOnDone_NilReleaseFunc 验证 nil releaseFunc 不会 panic
+func TestWrapReleaseOnDone_NilReleaseFunc(t *testing.T) {
+	ctx, cancel := context.WithCancel(context.Background())
+	defer cancel()
+
+	release := wrapReleaseOnDone(ctx, nil)
+
+	if release != nil {
+		t.Error("expected nil release function when releaseFunc is nil")
+	}
+}
+
+// TestWrapReleaseOnDone_ConcurrentCalls 验证并发调用的安全性
+func TestWrapReleaseOnDone_ConcurrentCalls(t *testing.T) {
+	ctx, cancel := context.WithCancel(context.Background())
+	defer cancel()
+
+	var releaseCount int32
+	release := wrapReleaseOnDone(ctx, func() {
+		atomic.AddInt32(&releaseCount, 1)
+	})
+
+	// 并发调用 release
+	const numGoroutines = 10
+	for i := 0; i < numGoroutines; i++ {
+		go release()
+	}
+
+	// 等待所有 goroutine 完成
+	time.Sleep(200 * time.Millisecond)
+
+	// 验证只释放一次
+	if count := atomic.LoadInt32(&releaseCount); count != 1 {
+		t.Errorf("expected release count to be 1, got %d", count)
+	}
+}
+
+// BenchmarkWrapReleaseOnDone 性能基准测试
+func BenchmarkWrapReleaseOnDone(b *testing.B) {
+	ctx, cancel := context.WithCancel(context.Background())
+	defer cancel()
+
+	b.ResetTimer()
+	for i := 0; i < b.N; i++ {
+		release := wrapReleaseOnDone(ctx, func() {})
+		release()
+	}
+}

backend/internal/repository/usage_log_repo.go

@@ -1388,6 +1388,81 @@ func (r *usageLogRepository) GetGlobalStats(ctx context.Context, startTime, endT
 	return stats, nil
 }
 
+// GetStatsWithFilters gets usage statistics with optional filters
+func (r *usageLogRepository) GetStatsWithFilters(ctx context.Context, filters UsageLogFilters) (*UsageStats, error) {
+	conditions := make([]string, 0, 9)
+	args := make([]any, 0, 9)
+
+	if filters.UserID > 0 {
+		conditions = append(conditions, fmt.Sprintf("user_id = $%d", len(args)+1))
+		args = append(args, filters.UserID)
+	}
+	if filters.APIKeyID > 0 {
+		conditions = append(conditions, fmt.Sprintf("api_key_id = $%d", len(args)+1))
+		args = append(args, filters.APIKeyID)
+	}
+	if filters.AccountID > 0 {
+		conditions = append(conditions, fmt.Sprintf("account_id = $%d", len(args)+1))
+		args = append(args, filters.AccountID)
+	}
+	if filters.GroupID > 0 {
+		conditions = append(conditions, fmt.Sprintf("group_id = $%d", len(args)+1))
+		args = append(args, filters.GroupID)
+	}
+	if filters.Model != "" {
+		conditions = append(conditions, fmt.Sprintf("model = $%d", len(args)+1))
+		args = append(args, filters.Model)
+	}
+	if filters.Stream != nil {
+		conditions = append(conditions, fmt.Sprintf("stream = $%d", len(args)+1))
+		args = append(args, *filters.Stream)
+	}
+	if filters.BillingType != nil {
+		conditions = append(conditions, fmt.Sprintf("billing_type = $%d", len(args)+1))
+		args = append(args, int16(*filters.BillingType))
+	}
+	if filters.StartTime != nil {
+		conditions = append(conditions, fmt.Sprintf("created_at >= $%d", len(args)+1))
+		args = append(args, *filters.StartTime)
+	}
+	if filters.EndTime != nil {
+		conditions = append(conditions, fmt.Sprintf("created_at <= $%d", len(args)+1))
+		args = append(args, *filters.EndTime)
+	}
+
+	query := fmt.Sprintf(`
+		SELECT
+			COUNT(*) as total_requests,
+			COALESCE(SUM(input_tokens), 0) as total_input_tokens,
+			COALESCE(SUM(output_tokens), 0) as total_output_tokens,
+			COALESCE(SUM(cache_creation_tokens + cache_read_tokens), 0) as total_cache_tokens,
+			COALESCE(SUM(total_cost), 0) as total_cost,
+			COALESCE(SUM(actual_cost), 0) as total_actual_cost,
+			COALESCE(AVG(duration_ms), 0) as avg_duration_ms
+		FROM usage_logs
+		%s
+	`, buildWhere(conditions))
+
+	stats := &UsageStats{}
+	if err := scanSingleRow(
+		ctx,
+		r.sql,
+		query,
+		args,
+		&stats.TotalRequests,
+		&stats.TotalInputTokens,
+		&stats.TotalOutputTokens,
+		&stats.TotalCacheTokens,
+		&stats.TotalCost,
+		&stats.TotalActualCost,
+		&stats.AverageDurationMs,
+	); err != nil {
+		return nil, err
+	}
+	stats.TotalTokens = stats.TotalInputTokens + stats.TotalOutputTokens + stats.TotalCacheTokens
+	return stats, nil
+}
+
 // AccountUsageHistory represents daily usage history for an account
 type AccountUsageHistory = usagestats.AccountUsageHistory
 

backend/internal/server/api_contract_test.go

@@ -1065,6 +1065,10 @@ func (r *stubUsageLogRepo) GetAccountUsageStats(ctx context.Context, accountID i
 	return nil, errors.New("not implemented")
 }
 
+func (r *stubUsageLogRepo) GetStatsWithFilters(ctx context.Context, filters usagestats.UsageLogFilters) (*usagestats.UsageStats, error) {
+	return nil, errors.New("not implemented")
+}
+
 type stubSettingRepo struct {
 	all map[string]string
 }

backend/internal/service/account_usage_service.go

@@ -47,6 +47,7 @@ type UsageLogRepository interface {
 	// Admin usage listing/stats
 	ListWithFilters(ctx context.Context, params pagination.PaginationParams, filters usagestats.UsageLogFilters) ([]UsageLog, *pagination.PaginationResult, error)
 	GetGlobalStats(ctx context.Context, startTime, endTime time.Time) (*usagestats.UsageStats, error)
+	GetStatsWithFilters(ctx context.Context, filters usagestats.UsageLogFilters) (*usagestats.UsageStats, error)
 
 	// Account stats
 	GetAccountUsageStats(ctx context.Context, accountID int64, startTime, endTime time.Time) (*usagestats.AccountUsageStatsResponse, error)

backend/internal/service/usage_service.go

@@ -319,3 +319,12 @@ func (s *UsageService) GetGlobalStats(ctx context.Context, startTime, endTime ti
 	}
 	return stats, nil
 }
+
+// GetStatsWithFilters returns usage stats with optional filters.
+func (s *UsageService) GetStatsWithFilters(ctx context.Context, filters usagestats.UsageLogFilters) (*usagestats.UsageStats, error) {
+	stats, err := s.usageRepo.GetStatsWithFilters(ctx, filters)
+	if err != nil {
+		return nil, fmt.Errorf("get usage stats with filters: %w", err)
+	}
+	return stats, nil
+}

docs/dependency-security.md

@@ -1,58 +0,0 @@
-# Dependency Security
-
-This document describes how dependency and toolchain security is managed in this repo.
-
-## Go Toolchain Policy (Pinned to 1.25.5)
-
-The Go toolchain is pinned to 1.25.5 to address known security issues.
-
-Locations that MUST stay aligned:
-- `backend/go.mod`: `go 1.25.5` and `toolchain go1.25.5`
-- `Dockerfile`: `GOLANG_IMAGE=golang:1.25.5-alpine`
-- Workflows: use `go-version-file: backend/go.mod` and verify `go1.25.5`
-
-Update process:
-1. Change `backend/go.mod` (go + toolchain) to the new patch version.
-2. Update `Dockerfile` GOLANG_IMAGE to the same patch version.
-3. Update workflows if needed and keep the `go version` check in place.
-4. Run `govulncheck` and the CI security scan workflow.
-
-## Security Scans
-
-Automated scans run via `.github/workflows/security-scan.yml`:
-- `govulncheck` for Go dependencies
-- `gosec` for static security issues
-- `pnpm audit` for frontend production dependencies
-
-Policy:
-- High/Critical findings fail the build unless explicitly exempted.
-- Exemptions must include mitigation and an expiry date.
-
-## Audit Exceptions
-
-Exception list location: `.github/audit-exceptions.yml`
-
-Required fields:
-- `package`
-- `advisory` (GHSA ID or advisory URL from pnpm audit)
-- `severity`
-- `mitigation`
-- `expires_on` (recommended <= 90 days)
-
-Process:
-1. Add an exception with mitigation details and an expiry date.
-2. Ensure the exception is reviewed before expiry.
-3. Remove the exception when the dependency is upgraded or replaced.
-
-## Frontend xlsx Mitigation (Plan A)
-
-Current mitigation:
-- Use dynamic import so `xlsx` only loads during export.
-- Keep export access restricted and data scope limited.
-
-## Rollback Guidance
-
-If a change causes issues:
-- Go: revert `backend/go.mod` and `Dockerfile` to the previous version.
-- Frontend: revert the dynamic import change if needed.
-- CI: remove exception entries and re-run scans to confirm status.

frontend/src/api/admin/usage.ts

@@ -54,15 +54,21 @@ export async function list(
 
 /**
  * Get usage statistics with optional filters (admin only)
- * @param params - Query parameters (user_id, api_key_id, period/date range)
+ * @param params - Query parameters for filtering
  * @returns Usage statistics
  */
 export async function getStats(params: {
   user_id?: number
   api_key_id?: number
+  account_id?: number
+  group_id?: number
+  model?: string
+  stream?: boolean
+  billing_type?: number
   period?: string
   start_date?: string
   end_date?: string
+  timezone?: string
 }): Promise<AdminUsageStatsResponse> {
   const { data } = await apiClient.get<AdminUsageStatsResponse>('/admin/usage/stats', {
     params

frontend/src/components/account/EditAccountModal.vue

@@ -1140,7 +1140,7 @@ const handleSubmit = async () => {
     emit('updated')
     handleClose()
   } catch (error: any) {
-    appStore.showError(error.response?.data?.detail || t('admin.accounts.failedToUpdate'))
+    appStore.showError(error.response?.data?.message || error.response?.data?.detail || t('admin.accounts.failedToUpdate'))
   } finally {
     submitting.value = false
   }

frontend/src/components/admin/usage/UsageFilters.vue

@@ -50,7 +50,7 @@
             class="input pr-8"
             :placeholder="t('admin.usage.searchApiKeyPlaceholder')"
             @input="debounceApiKeySearch"
-            @focus="showApiKeyDropdown = true"
+            @focus="onApiKeyFocus"
           />
           <button
             v-if="filters.api_key_id"
@@ -62,7 +62,7 @@
             ✕
           </button>
           <div
-            v-if="showApiKeyDropdown && (apiKeyResults.length > 0 || apiKeyKeyword)"
+            v-if="showApiKeyDropdown && apiKeyResults.length > 0"
             class="absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-lg border bg-white shadow-lg dark:bg-gray-800"
           >
             <button
@@ -223,14 +223,10 @@ const debounceUserSearch = () => {
 const debounceApiKeySearch = () => {
   if (apiKeySearchTimeout) clearTimeout(apiKeySearchTimeout)
   apiKeySearchTimeout = setTimeout(async () => {
-    if (!apiKeyKeyword.value) {
-      apiKeyResults.value = []
-      return
-    }
     try {
       apiKeyResults.value = await adminAPI.usage.searchApiKeys(
         filters.value.user_id,
-        apiKeyKeyword.value
+        apiKeyKeyword.value || ''
       )
     } catch {
       apiKeyResults.value = []
@@ -238,11 +234,19 @@ const debounceApiKeySearch = () => {
   }, 300)
 }
 
-const selectUser = (u: SimpleUser) => {
+const selectUser = async (u: SimpleUser) => {
   userKeyword.value = u.email
   showUserDropdown.value = false
   filters.value.user_id = u.id
   clearApiKey()
+
+  // Auto-load API keys for this user
+  try {
+    apiKeyResults.value = await adminAPI.usage.searchApiKeys(u.id, '')
+  } catch {
+    apiKeyResults.value = []
+  }
+
   emitChange()
 }
 
@@ -274,6 +278,14 @@ const onClearApiKey = () => {
   emitChange()
 }
 
+const onApiKeyFocus = () => {
+  showApiKeyDropdown.value = true
+  // Trigger search if no results yet
+  if (apiKeyResults.value.length === 0) {
+    debounceApiKeySearch()
+  }
+}
+
 const onDocumentClick = (e: MouseEvent) => {
   const target = e.target as Node | null
   if (!target) return

frontend/src/components/admin/usage/UsageStatsCards.vue

@@ -4,17 +4,34 @@
       <div class="rounded-lg bg-blue-100 p-2 dark:bg-blue-900/30 text-blue-600">
         <Icon name="document" size="md" />
       </div>
-      <div><p class="text-xs font-medium text-gray-500">{{ t('usage.totalRequests') }}</p><p class="text-xl font-bold">{{ stats?.total_requests?.toLocaleString() || '0' }}</p></div>
+      <div>
+        <p class="text-xs font-medium text-gray-500">{{ t('usage.totalRequests') }}</p>
+        <p class="text-xl font-bold">{{ stats?.total_requests?.toLocaleString() || '0' }}</p>
+        <p class="text-xs text-gray-400">{{ t('usage.inSelectedRange') }}</p>
+      </div>
     </div>
     <div class="card p-4 flex items-center gap-3">
       <div class="rounded-lg bg-amber-100 p-2 dark:bg-amber-900/30 text-amber-600"><svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m21 7.5-9-5.25L3 7.5m18 0-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" /></svg></div>
-      <div><p class="text-xs font-medium text-gray-500">{{ t('usage.totalTokens') }}</p><p class="text-xl font-bold">{{ formatTokens(stats?.total_tokens || 0) }}</p></div>
+      <div>
+        <p class="text-xs font-medium text-gray-500">{{ t('usage.totalTokens') }}</p>
+        <p class="text-xl font-bold">{{ formatTokens(stats?.total_tokens || 0) }}</p>
+        <p class="text-xs text-gray-500">
+          {{ t('usage.in') }}: {{ formatTokens(stats?.total_input_tokens || 0) }} /
+          {{ t('usage.out') }}: {{ formatTokens(stats?.total_output_tokens || 0) }}
+        </p>
+      </div>
     </div>
     <div class="card p-4 flex items-center gap-3">
       <div class="rounded-lg bg-green-100 p-2 dark:bg-green-900/30 text-green-600">
         <Icon name="dollar" size="md" />
       </div>
-      <div><p class="text-xs font-medium text-gray-500">{{ t('usage.totalCost') }}</p><p class="text-xl font-bold text-green-600">${{ (stats?.total_actual_cost || 0).toFixed(4) }}</p></div>
+      <div class="min-w-0 flex-1">
+        <p class="text-xs font-medium text-gray-500">{{ t('usage.totalCost') }}</p>
+        <p class="text-xl font-bold text-green-600">${{ (stats?.total_actual_cost || 0).toFixed(4) }}</p>
+        <p class="text-xs text-gray-400">
+          {{ t('usage.standardCost') }}: <span class="line-through">${{ (stats?.total_cost || 0).toFixed(4) }}</span>
+        </p>
+      </div>
     </div>
     <div class="card p-4 flex items-center gap-3">
       <div class="rounded-lg bg-purple-100 p-2 dark:bg-purple-900/30 text-purple-600">

frontend/src/components/admin/usage/UsageTable.vue

@@ -44,32 +44,56 @@
             <span class="text-gray-400">({{ row.image_size || '2K' }})</span>
           </div>
           <!-- Token 请求 -->
-          <div v-else class="space-y-1 text-sm">
+          <div v-else class="flex items-center gap-1.5">
-            <div class="flex items-center gap-2">
+            <div class="space-y-1 text-sm">
-              <div class="inline-flex items-center gap-1">
+              <div class="flex items-center gap-2">
-                <Icon name="arrowDown" size="sm" class="h-3.5 w-3.5 text-emerald-500" />
+                <div class="inline-flex items-center gap-1">
-                <span class="font-medium text-gray-900 dark:text-white">{{ row.input_tokens?.toLocaleString() || 0 }}</span>
+                  <Icon name="arrowDown" size="sm" class="h-3.5 w-3.5 text-emerald-500" />
+                  <span class="font-medium text-gray-900 dark:text-white">{{ row.input_tokens?.toLocaleString() || 0 }}</span>
+                </div>
+                <div class="inline-flex items-center gap-1">
+                  <Icon name="arrowUp" size="sm" class="h-3.5 w-3.5 text-violet-500" />
+                  <span class="font-medium text-gray-900 dark:text-white">{{ row.output_tokens?.toLocaleString() || 0 }}</span>
+                </div>
               </div>
-              <div class="inline-flex items-center gap-1">
+              <div v-if="row.cache_read_tokens > 0 || row.cache_creation_tokens > 0" class="flex items-center gap-2">
-                <Icon name="arrowUp" size="sm" class="h-3.5 w-3.5 text-violet-500" />
+                <div v-if="row.cache_read_tokens > 0" class="inline-flex items-center gap-1">
-                <span class="font-medium text-gray-900 dark:text-white">{{ row.output_tokens?.toLocaleString() || 0 }}</span>
+                  <svg class="h-3.5 w-3.5 text-sky-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" /></svg>
+                  <span class="font-medium text-sky-600 dark:text-sky-400">{{ formatCacheTokens(row.cache_read_tokens) }}</span>
+                </div>
+                <div v-if="row.cache_creation_tokens > 0" class="inline-flex items-center gap-1">
+                  <svg class="h-3.5 w-3.5 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /></svg>
+                  <span class="font-medium text-amber-600 dark:text-amber-400">{{ formatCacheTokens(row.cache_creation_tokens) }}</span>
+                </div>
               </div>
             </div>
-            <div v-if="row.cache_read_tokens > 0 || row.cache_creation_tokens > 0" class="flex items-center gap-2">
+            <!-- Token Detail Tooltip -->
-              <div v-if="row.cache_read_tokens > 0" class="inline-flex items-center gap-1">
+            <div
-                <svg class="h-3.5 w-3.5 text-sky-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" /></svg>
+              class="group relative"
-                <span class="font-medium text-sky-600 dark:text-sky-400">{{ formatCacheTokens(row.cache_read_tokens) }}</span>
+              @mouseenter="showTokenTooltip($event, row)"
-              </div>
+              @mouseleave="hideTokenTooltip"
-              <div v-if="row.cache_creation_tokens > 0" class="inline-flex items-center gap-1">
+            >
-                <svg class="h-3.5 w-3.5 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /></svg>
+              <div class="flex h-4 w-4 cursor-help items-center justify-center rounded-full bg-gray-100 transition-colors group-hover:bg-blue-100 dark:bg-gray-700 dark:group-hover:bg-blue-900/50">
-                <span class="font-medium text-amber-600 dark:text-amber-400">{{ formatCacheTokens(row.cache_creation_tokens) }}</span>
+                <Icon name="infoCircle" size="xs" class="text-gray-400 group-hover:text-blue-500 dark:text-gray-500 dark:group-hover:text-blue-400" />
               </div>
             </div>
           </div>
         </template>
 
         <template #cell-cost="{ row }">
-          <span class="font-medium text-green-600 dark:text-green-400">${{ row.actual_cost?.toFixed(6) || '0.000000' }}</span>
+          <div class="flex items-center gap-1.5 text-sm">
+            <span class="font-medium text-green-600 dark:text-green-400">${{ row.actual_cost?.toFixed(6) || '0.000000' }}</span>
+            <!-- Cost Detail Tooltip -->
+            <div
+              class="group relative"
+              @mouseenter="showTooltip($event, row)"
+              @mouseleave="hideTooltip"
+            >
+              <div class="flex h-4 w-4 cursor-help items-center justify-center rounded-full bg-gray-100 transition-colors group-hover:bg-blue-100 dark:bg-gray-700 dark:group-hover:bg-blue-900/50">
+                <Icon name="infoCircle" size="xs" class="text-gray-400 group-hover:text-blue-500 dark:text-gray-500 dark:group-hover:text-blue-400" />
+              </div>
+            </div>
+          </div>
         </template>
 
         <template #cell-billing_type="{ row }">
@@ -106,6 +130,77 @@
       </DataTable>
     </div>
   </div>
+
+  <!-- Token Tooltip Portal -->
+  <Teleport to="body">
+    <div
+      v-if="tokenTooltipVisible"
+      class="fixed z-[9999] pointer-events-none -translate-y-1/2"
+      :style="{
+        left: tokenTooltipPosition.x + 'px',
+        top: tokenTooltipPosition.y + 'px'
+      }"
+    >
+      <div class="whitespace-nowrap rounded-lg border border-gray-700 bg-gray-900 px-3 py-2.5 text-xs text-white shadow-xl dark:border-gray-600 dark:bg-gray-800">
+        <div class="space-y-1.5">
+          <div class="mb-2 border-b border-gray-700 pb-1.5">
+            <div class="text-xs font-semibold text-gray-300 mb-1">Token {{ t('usage.details') }}</div>
+            <div v-if="tokenTooltipData && tokenTooltipData.input_tokens > 0" class="flex items-center justify-between gap-4">
+              <span class="text-gray-400">{{ t('admin.usage.inputTokens') }}</span>
+              <span class="font-medium text-white">{{ tokenTooltipData.input_tokens.toLocaleString() }}</span>
+            </div>
+            <div v-if="tokenTooltipData && tokenTooltipData.output_tokens > 0" class="flex items-center justify-between gap-4">
+              <span class="text-gray-400">{{ t('admin.usage.outputTokens') }}</span>
+              <span class="font-medium text-white">{{ tokenTooltipData.output_tokens.toLocaleString() }}</span>
+            </div>
+            <div v-if="tokenTooltipData && tokenTooltipData.cache_creation_tokens > 0" class="flex items-center justify-between gap-4">
+              <span class="text-gray-400">{{ t('admin.usage.cacheCreationTokens') }}</span>
+              <span class="font-medium text-white">{{ tokenTooltipData.cache_creation_tokens.toLocaleString() }}</span>
+            </div>
+            <div v-if="tokenTooltipData && tokenTooltipData.cache_read_tokens > 0" class="flex items-center justify-between gap-4">
+              <span class="text-gray-400">{{ t('admin.usage.cacheReadTokens') }}</span>
+              <span class="font-medium text-white">{{ tokenTooltipData.cache_read_tokens.toLocaleString() }}</span>
+            </div>
+          </div>
+          <div class="flex items-center justify-between gap-6 border-t border-gray-700 pt-1.5">
+            <span class="text-gray-400">{{ t('usage.totalTokens') }}</span>
+            <span class="font-semibold text-blue-400">{{ ((tokenTooltipData?.input_tokens || 0) + (tokenTooltipData?.output_tokens || 0) + (tokenTooltipData?.cache_creation_tokens || 0) + (tokenTooltipData?.cache_read_tokens || 0)).toLocaleString() }}</span>
+          </div>
+        </div>
+        <div class="absolute right-full top-1/2 h-0 w-0 -translate-y-1/2 border-b-[6px] border-r-[6px] border-t-[6px] border-b-transparent border-r-gray-900 border-t-transparent dark:border-r-gray-800"></div>
+      </div>
+    </div>
+  </Teleport>
+
+  <!-- Cost Tooltip Portal -->
+  <Teleport to="body">
+    <div
+      v-if="tooltipVisible"
+      class="fixed z-[9999] pointer-events-none -translate-y-1/2"
+      :style="{
+        left: tooltipPosition.x + 'px',
+        top: tooltipPosition.y + 'px'
+      }"
+    >
+      <div class="whitespace-nowrap rounded-lg border border-gray-700 bg-gray-900 px-3 py-2.5 text-xs text-white shadow-xl dark:border-gray-600 dark:bg-gray-800">
+        <div class="space-y-1.5">
+          <div class="flex items-center justify-between gap-6">
+            <span class="text-gray-400">{{ t('usage.rate') }}</span>
+            <span class="font-semibold text-blue-400">{{ (tooltipData?.rate_multiplier || 1).toFixed(2) }}x</span>
+          </div>
+          <div class="flex items-center justify-between gap-6">
+            <span class="text-gray-400">{{ t('usage.original') }}</span>
+            <span class="font-medium text-white">${{ tooltipData?.total_cost?.toFixed(6) || '0.000000' }}</span>
+          </div>
+          <div class="flex items-center justify-between gap-6 border-t border-gray-700 pt-1.5">
+            <span class="text-gray-400">{{ t('usage.billed') }}</span>
+            <span class="font-semibold text-green-400">${{ tooltipData?.actual_cost?.toFixed(6) || '0.000000' }}</span>
+          </div>
+        </div>
+        <div class="absolute right-full top-1/2 h-0 w-0 -translate-y-1/2 border-b-[6px] border-r-[6px] border-t-[6px] border-b-transparent border-r-gray-900 border-t-transparent dark:border-r-gray-800"></div>
+      </div>
+    </div>
+  </Teleport>
 </template>
 
 <script setup lang="ts">
@@ -116,12 +211,23 @@ import { useAppStore } from '@/stores/app'
 import DataTable from '@/components/common/DataTable.vue'
 import EmptyState from '@/components/common/EmptyState.vue'
 import Icon from '@/components/icons/Icon.vue'
+import type { UsageLog } from '@/types'
 
 defineProps(['data', 'loading'])
 const { t } = useI18n()
 const appStore = useAppStore()
 const copiedRequestId = ref<string | null>(null)
 
+// Tooltip state - cost
+const tooltipVisible = ref(false)
+const tooltipPosition = ref({ x: 0, y: 0 })
+const tooltipData = ref<UsageLog | null>(null)
+
+// Tooltip state - token
+const tokenTooltipVisible = ref(false)
+const tokenTooltipPosition = ref({ x: 0, y: 0 })
+const tokenTooltipData = ref<UsageLog | null>(null)
+
 const cols = computed(() => [
   { key: 'user', label: t('admin.usage.user'), sortable: false },
   { key: 'api_key', label: t('usage.apiKeyFilter'), sortable: false },
@@ -160,4 +266,34 @@ const copyRequestId = async (requestId: string) => {
     appStore.showError(t('common.copyFailed'))
   }
 }
+
+// Cost tooltip functions
+const showTooltip = (event: MouseEvent, row: UsageLog) => {
+  const target = event.currentTarget as HTMLElement
+  const rect = target.getBoundingClientRect()
+  tooltipData.value = row
+  tooltipPosition.value.x = rect.right + 8
+  tooltipPosition.value.y = rect.top + rect.height / 2
+  tooltipVisible.value = true
+}
+
+const hideTooltip = () => {
+  tooltipVisible.value = false
+  tooltipData.value = null
+}
+
+// Token tooltip functions
+const showTokenTooltip = (event: MouseEvent, row: UsageLog) => {
+  const target = event.currentTarget as HTMLElement
+  const rect = target.getBoundingClientRect()
+  tokenTooltipData.value = row
+  tokenTooltipPosition.value.x = rect.right + 8
+  tokenTooltipPosition.value.y = rect.top + rect.height / 2
+  tokenTooltipVisible.value = true
+}
+
+const hideTokenTooltip = () => {
+  tokenTooltipVisible.value = false
+  tokenTooltipData.value = null
+}
 </script>

frontend/src/views/admin/AccountsView.vue

@@ -6,6 +6,7 @@
           <AccountTableFilters
             v-model:searchQuery="params.search"
             :filters="params"
+            @update:filters="(newFilters) => Object.assign(params, newFilters)"
             @change="reload"
             @update:searchQuery="debouncedReload"
           />