fix: 修复usage页面未显示缓存写入的问题

- 新增 intercept_warmup_requests 配置项，存储在 credentials 字段
- 启用后，标题生成、Warmup 等预热请求返回 mock 响应，不消耗上游 token
- 前端支持所有账号类型（OAuth、Setup Token、API Key）的开关配置
- 修复 OAuth 凭证刷新时丢失非 token 配置的问题

README.md

@@ -216,20 +216,19 @@ Build and run from source code for development or customization.
 git clone https://github.com/Wei-Shaw/sub2api.git
 cd sub2api
 
-# 2. Build backend
+# 2. Build frontend
-cd backend
+cd frontend
-go build -o sub2api ./cmd/server
-
-# 3. Build frontend
-cd ../frontend
 npm install
 npm run build
 
-# 4. Copy frontend build to backend (for embedding)
+# 3. Copy frontend build to backend (for embedding)
 cp -r dist ../backend/internal/web/
 
-# 5. Create configuration file
+# 4. Build backend (requires frontend dist to be present)
 cd ../backend
+go build -o sub2api ./cmd/server
+
+# 5. Create configuration file
 cp ../deploy/config.example.yaml ./config.yaml
 
 # 6. Edit configuration

README_CN.md

@@ -216,20 +216,19 @@ docker-compose logs -f
 git clone https://github.com/Wei-Shaw/sub2api.git
 cd sub2api
 
-# 2. 编译后端
+# 2. 编译前端
-cd backend
+cd frontend
-go build -o sub2api ./cmd/server
-
-# 3. 编译前端
-cd ../frontend
 npm install
 npm run build
 
-# 4. 复制前端构建产物到后端（用于嵌入）
+# 3. 复制前端构建产物到后端（用于嵌入）
 cp -r dist ../backend/internal/web/
 
-# 5. 创建配置文件
+# 4. 编译后端（需要前端 dist 目录存在）
 cd ../backend
+go build -o sub2api ./cmd/server
+
+# 5. 创建配置文件
 cp ../deploy/config.example.yaml ./config.yaml
 
 # 6. 编辑配置

backend/cmd/server/main.go

@@ -15,6 +15,7 @@ import (
 	"syscall"
 	"time"
 
+	"sub2api/internal/config"
 	"sub2api/internal/handler"
 	"sub2api/internal/middleware"
 	"sub2api/internal/setup"
@@ -94,8 +95,10 @@ func runSetupServer() {
 		r.Use(web.ServeEmbeddedFrontend())
 	}
 
-	addr := ":8080"
+	// Get server address from config.yaml or environment variables (SERVER_HOST, SERVER_PORT)
-	log.Printf("Setup wizard available at http://localhost%s", addr)
+	// This allows users to run setup on a different address if needed
+	addr := config.GetServerAddress()
+	log.Printf("Setup wizard available at http://%s", addr)
 	log.Println("Complete the setup wizard to configure Sub2API")
 
 	if err := r.Run(addr); err != nil {

backend/internal/config/config.go

@@ -203,3 +203,29 @@ func (c *Config) Validate() error {
 	}
 	return nil
 }
+
+// GetServerAddress returns the server address (host:port) from config file or environment variable.
+// This is a lightweight function that can be used before full config validation,
+// such as during setup wizard startup.
+// Priority: config.yaml > environment variables > defaults
+func GetServerAddress() string {
+	v := viper.New()
+	v.SetConfigName("config")
+	v.SetConfigType("yaml")
+	v.AddConfigPath(".")
+	v.AddConfigPath("./config")
+	v.AddConfigPath("/etc/sub2api")
+
+	// Support SERVER_HOST and SERVER_PORT environment variables
+	v.AutomaticEnv()
+	v.SetEnvKeyReplacer(strings.NewReplacer(".", "_"))
+	v.SetDefault("server.host", "0.0.0.0")
+	v.SetDefault("server.port", 8080)
+
+	// Try to read config file (ignore errors if not found)
+	_ = v.ReadInConfig()
+
+	host := v.GetString("server.host")
+	port := v.GetInt("server.port")
+	return fmt.Sprintf("%s:%d", host, port)
+}

backend/internal/handler/admin/account_handler.go

@@ -3,6 +3,7 @@ package admin
 import (
 	"strconv"
 
+	"sub2api/internal/pkg/claude"
 	"sub2api/internal/pkg/response"
 	"sub2api/internal/service"
 
@@ -186,6 +187,11 @@ func (h *AccountHandler) Delete(c *gin.Context) {
 	response.Success(c, gin.H{"message": "Account deleted successfully"})
 }
 
+// TestAccountRequest represents the request body for testing an account
+type TestAccountRequest struct {
+	ModelID string `json:"model_id"`
+}
+
 // Test handles testing account connectivity with SSE streaming
 // POST /api/v1/admin/accounts/:id/test
 func (h *AccountHandler) Test(c *gin.Context) {
@@ -195,8 +201,12 @@ func (h *AccountHandler) Test(c *gin.Context) {
 		return
 	}
 
+	var req TestAccountRequest
+	// Allow empty body, model_id is optional
+	_ = c.ShouldBindJSON(&req)
+
 	// Use AccountTestService to test the account with SSE streaming
-	if err := h.accountTestService.TestAccountConnection(c, accountID); err != nil {
+	if err := h.accountTestService.TestAccountConnection(c, accountID, req.ModelID); err != nil {
 		// Error already sent via SSE, just log
 		return
 	}
@@ -231,16 +241,20 @@ func (h *AccountHandler) Refresh(c *gin.Context) {
 		return
 	}
 
-	// Update account credentials
+	// Copy existing credentials to preserve non-token settings (e.g., intercept_warmup_requests)
-	newCredentials := map[string]interface{}{
+	newCredentials := make(map[string]interface{})
-		"access_token":  tokenInfo.AccessToken,
+	for k, v := range account.Credentials {
-		"token_type":    tokenInfo.TokenType,
+		newCredentials[k] = v
-		"expires_in":    tokenInfo.ExpiresIn,
-		"expires_at":    tokenInfo.ExpiresAt,
-		"refresh_token": tokenInfo.RefreshToken,
-		"scope":         tokenInfo.Scope,
 	}
 
+	// Update token-related fields
+	newCredentials["access_token"] = tokenInfo.AccessToken
+	newCredentials["token_type"] = tokenInfo.TokenType
+	newCredentials["expires_in"] = tokenInfo.ExpiresIn
+	newCredentials["expires_at"] = tokenInfo.ExpiresAt
+	newCredentials["refresh_token"] = tokenInfo.RefreshToken
+	newCredentials["scope"] = tokenInfo.Scope
+
 	updatedAccount, err := h.adminService.UpdateAccount(c.Request.Context(), accountID, &service.UpdateAccountInput{
 		Credentials: newCredentials,
 	})
@@ -535,3 +549,58 @@ func (h *AccountHandler) SetSchedulable(c *gin.Context) {
 
 	response.Success(c, account)
 }
+
+// GetAvailableModels handles getting available models for an account
+// GET /api/v1/admin/accounts/:id/models
+func (h *AccountHandler) GetAvailableModels(c *gin.Context) {
+	accountID, err := strconv.ParseInt(c.Param("id"), 10, 64)
+	if err != nil {
+		response.BadRequest(c, "Invalid account ID")
+		return
+	}
+
+	account, err := h.adminService.GetAccount(c.Request.Context(), accountID)
+	if err != nil {
+		response.NotFound(c, "Account not found")
+		return
+	}
+
+	// For OAuth and Setup-Token accounts: return default models
+	if account.IsOAuth() {
+		response.Success(c, claude.DefaultModels)
+		return
+	}
+
+	// For API Key accounts: return models based on model_mapping
+	mapping := account.GetModelMapping()
+	if mapping == nil || len(mapping) == 0 {
+		// No mapping configured, return default models
+		response.Success(c, claude.DefaultModels)
+		return
+	}
+
+	// Return mapped models (keys of the mapping are the available model IDs)
+	var models []claude.Model
+	for requestedModel := range mapping {
+		// Try to find display info from default models
+		var found bool
+		for _, dm := range claude.DefaultModels {
+			if dm.ID == requestedModel {
+				models = append(models, dm)
+				found = true
+				break
+			}
+		}
+		// If not found in defaults, create a basic entry
+		if !found {
+			models = append(models, claude.Model{
+				ID:          requestedModel,
+				Type:        "model",
+				DisplayName: requestedModel,
+				CreatedAt:   "",
+			})
+		}
+	}
+
+	response.Success(c, models)
+}

backend/internal/handler/admin/proxy_handler.go

@@ -2,6 +2,7 @@ package admin
 
 import (
 	"strconv"
+	"strings"
 
 	"sub2api/internal/pkg/response"
 	"sub2api/internal/service"
@@ -112,12 +113,12 @@ func (h *ProxyHandler) Create(c *gin.Context) {
 	}
 
 	proxy, err := h.adminService.CreateProxy(c.Request.Context(), &service.CreateProxyInput{
-		Name:     req.Name,
+		Name:     strings.TrimSpace(req.Name),
-		Protocol: req.Protocol,
+		Protocol: strings.TrimSpace(req.Protocol),
-		Host:     req.Host,
+		Host:     strings.TrimSpace(req.Host),
 		Port:     req.Port,
-		Username: req.Username,
+		Username: strings.TrimSpace(req.Username),
-		Password: req.Password,
+		Password: strings.TrimSpace(req.Password),
 	})
 	if err != nil {
 		response.BadRequest(c, "Failed to create proxy: "+err.Error())
@@ -143,13 +144,13 @@ func (h *ProxyHandler) Update(c *gin.Context) {
 	}
 
 	proxy, err := h.adminService.UpdateProxy(c.Request.Context(), proxyID, &service.UpdateProxyInput{
-		Name:     req.Name,
+		Name:     strings.TrimSpace(req.Name),
-		Protocol: req.Protocol,
+		Protocol: strings.TrimSpace(req.Protocol),
-		Host:     req.Host,
+		Host:     strings.TrimSpace(req.Host),
 		Port:     req.Port,
-		Username: req.Username,
+		Username: strings.TrimSpace(req.Username),
-		Password: req.Password,
+		Password: strings.TrimSpace(req.Password),
-		Status:   req.Status,
+		Status:   strings.TrimSpace(req.Status),
 	})
 	if err != nil {
 		response.InternalError(c, "Failed to update proxy: "+err.Error())
@@ -263,8 +264,14 @@ func (h *ProxyHandler) BatchCreate(c *gin.Context) {
 	skipped := 0
 
 	for _, item := range req.Proxies {
+		// Trim all string fields
+		host := strings.TrimSpace(item.Host)
+		protocol := strings.TrimSpace(item.Protocol)
+		username := strings.TrimSpace(item.Username)
+		password := strings.TrimSpace(item.Password)
+
 		// Check for duplicates (same host, port, username, password)
-		exists, err := h.adminService.CheckProxyExists(c.Request.Context(), item.Host, item.Port, item.Username, item.Password)
+		exists, err := h.adminService.CheckProxyExists(c.Request.Context(), host, item.Port, username, password)
 		if err != nil {
 			response.InternalError(c, "Failed to check proxy existence: "+err.Error())
 			return
@@ -278,11 +285,11 @@ func (h *ProxyHandler) BatchCreate(c *gin.Context) {
 		// Create proxy with default name
 		_, err = h.adminService.CreateProxy(c.Request.Context(), &service.CreateProxyInput{
 			Name:     "default",
-			Protocol: item.Protocol,
+			Protocol: protocol,
-			Host:     item.Host,
+			Host:     host,
 			Port:     item.Port,
-			Username: item.Username,
+			Username: username,
-			Password: item.Password,
+			Password: password,
 		})
 		if err != nil {
 			// If creation fails due to duplicate, count as skipped

backend/internal/handler/gateway_handler.go

@@ -7,10 +7,12 @@ import (
 	"io"
 	"log"
 	"net/http"
+	"strings"
 	"time"
 
 	"sub2api/internal/middleware"
 	"sub2api/internal/model"
+	"sub2api/internal/pkg/claude"
 	"sub2api/internal/service"
 
 	"github.com/gin-gonic/gin"
@@ -126,6 +128,16 @@ func (h *GatewayHandler) Messages(c *gin.Context) {
 		return
 	}
 
+	// 检查预热请求拦截（在账号选择后、转发前检查）
+	if account.IsInterceptWarmupEnabled() && isWarmupRequest(body) {
+		if req.Stream {
+			sendMockWarmupStream(c, req.Model)
+		} else {
+			sendMockWarmupResponse(c, req.Model)
+		}
+		return
+	}
+
 	// 3. 获取账号并发槽位
 	accountReleaseFunc, err := h.acquireAccountSlotWithWait(c, account, req.Stream, &streamStarted)
 	if err != nil {
@@ -285,29 +297,8 @@ func (h *GatewayHandler) waitForSlotWithPing(c *gin.Context, slotType string, id
 // Models handles listing available models
 // GET /v1/models
 func (h *GatewayHandler) Models(c *gin.Context) {
-	models := []gin.H{
-		{
-			"id":           "claude-opus-4-5-20251101",
-			"type":         "model",
-			"display_name": "Claude Opus 4.5",
-			"created_at":   "2025-11-01T00:00:00Z",
-		},
-		{
-			"id":           "claude-sonnet-4-5-20250929",
-			"type":         "model",
-			"display_name": "Claude Sonnet 4.5",
-			"created_at":   "2025-09-29T00:00:00Z",
-		},
-		{
-			"id":           "claude-haiku-4-5-20251001",
-			"type":         "model",
-			"display_name": "Claude Haiku 4.5",
-			"created_at":   "2025-10-01T00:00:00Z",
-		},
-	}
-
 	c.JSON(http.StatusOK, gin.H{
-		"data":   models,
+		"data":   claude.DefaultModels,
 		"object": "list",
 	})
 }
@@ -443,3 +434,155 @@ func (h *GatewayHandler) errorResponse(c *gin.Context, status int, errType, mess
 		},
 	})
 }
+
+// CountTokens handles token counting endpoint
+// POST /v1/messages/count_tokens
+// 特点：校验订阅/余额，但不计算并发、不记录使用量
+func (h *GatewayHandler) CountTokens(c *gin.Context) {
+	// 从context获取apiKey和user（ApiKeyAuth中间件已设置）
+	apiKey, ok := middleware.GetApiKeyFromContext(c)
+	if !ok {
+		h.errorResponse(c, http.StatusUnauthorized, "authentication_error", "Invalid API key")
+		return
+	}
+
+	user, ok := middleware.GetUserFromContext(c)
+	if !ok {
+		h.errorResponse(c, http.StatusInternalServerError, "api_error", "User context not found")
+		return
+	}
+
+	// 读取请求体
+	body, err := io.ReadAll(c.Request.Body)
+	if err != nil {
+		h.errorResponse(c, http.StatusBadRequest, "invalid_request_error", "Failed to read request body")
+		return
+	}
+
+	if len(body) == 0 {
+		h.errorResponse(c, http.StatusBadRequest, "invalid_request_error", "Request body is empty")
+		return
+	}
+
+	// 解析请求获取模型名
+	var req struct {
+		Model string `json:"model"`
+	}
+	if err := json.Unmarshal(body, &req); err != nil {
+		h.errorResponse(c, http.StatusBadRequest, "invalid_request_error", "Failed to parse request body")
+		return
+	}
+
+	// 获取订阅信息（可能为nil）
+	subscription, _ := middleware.GetSubscriptionFromContext(c)
+
+	// 校验 billing eligibility（订阅/余额）
+	// 【注意】不计算并发，但需要校验订阅/余额
+	if err := h.billingCacheService.CheckBillingEligibility(c.Request.Context(), user, apiKey, apiKey.Group, subscription); err != nil {
+		h.errorResponse(c, http.StatusForbidden, "billing_error", err.Error())
+		return
+	}
+
+	// 计算粘性会话 hash
+	sessionHash := h.gatewayService.GenerateSessionHash(body)
+
+	// 选择支持该模型的账号
+	account, err := h.gatewayService.SelectAccountForModel(c.Request.Context(), apiKey.GroupID, sessionHash, req.Model)
+	if err != nil {
+		h.errorResponse(c, http.StatusServiceUnavailable, "api_error", "No available accounts: "+err.Error())
+		return
+	}
+
+	// 转发请求（不记录使用量）
+	if err := h.gatewayService.ForwardCountTokens(c.Request.Context(), c, account, body); err != nil {
+		log.Printf("Forward count_tokens request failed: %v", err)
+		// 错误响应已在 ForwardCountTokens 中处理
+		return
+	}
+}
+
+// isWarmupRequest 检测是否为预热请求（标题生成、Warmup等）
+func isWarmupRequest(body []byte) bool {
+	// 快速检查：如果body不包含关键字，直接返回false
+	bodyStr := string(body)
+	if !strings.Contains(bodyStr, "title") && !strings.Contains(bodyStr, "Warmup") {
+		return false
+	}
+
+	// 解析完整请求
+	var req struct {
+		Messages []struct {
+			Content []struct {
+				Type string `json:"type"`
+				Text string `json:"text"`
+			} `json:"content"`
+		} `json:"messages"`
+		System []struct {
+			Text string `json:"text"`
+		} `json:"system"`
+	}
+	if err := json.Unmarshal(body, &req); err != nil {
+		return false
+	}
+
+	// 检查 messages 中的标题提示模式
+	for _, msg := range req.Messages {
+		for _, content := range msg.Content {
+			if content.Type == "text" {
+				if strings.Contains(content.Text, "Please write a 5-10 word title for the following conversation:") ||
+					content.Text == "Warmup" {
+					return true
+				}
+			}
+		}
+	}
+
+	// 检查 system 中的标题提取模式
+	for _, system := range req.System {
+		if strings.Contains(system.Text, "nalyze if this message indicates a new conversation topic. If it does, extract a 2-3 word title") {
+			return true
+		}
+	}
+
+	return false
+}
+
+// sendMockWarmupStream 发送流式 mock 响应（用于预热请求拦截）
+func sendMockWarmupStream(c *gin.Context, model string) {
+	c.Header("Content-Type", "text/event-stream")
+	c.Header("Cache-Control", "no-cache")
+	c.Header("Connection", "keep-alive")
+	c.Header("X-Accel-Buffering", "no")
+
+	events := []string{
+		`event: message_start` + "\n" + `data: {"message":{"content":[],"id":"msg_mock_warmup","model":"` + model + `","role":"assistant","stop_reason":null,"stop_sequence":null,"type":"message","usage":{"input_tokens":10,"output_tokens":0}},"type":"message_start"}`,
+		`event: content_block_start` + "\n" + `data: {"content_block":{"text":"","type":"text"},"index":0,"type":"content_block_start"}`,
+		`event: content_block_delta` + "\n" + `data: {"delta":{"text":"New","type":"text_delta"},"index":0,"type":"content_block_delta"}`,
+		`event: content_block_delta` + "\n" + `data: {"delta":{"text":" Conversation","type":"text_delta"},"index":0,"type":"content_block_delta"}`,
+		`event: content_block_stop` + "\n" + `data: {"index":0,"type":"content_block_stop"}`,
+		`event: message_delta` + "\n" + `data: {"delta":{"stop_reason":"end_turn","stop_sequence":null},"type":"message_delta","usage":{"input_tokens":10,"output_tokens":2}}`,
+		`event: message_stop` + "\n" + `data: {"type":"message_stop"}`,
+	}
+
+	for _, event := range events {
+		_, _ = c.Writer.WriteString(event + "\n\n")
+		c.Writer.Flush()
+		time.Sleep(20 * time.Millisecond)
+	}
+}
+
+// sendMockWarmupResponse 发送非流式 mock 响应（用于预热请求拦截）
+func sendMockWarmupResponse(c *gin.Context, model string) {
+	c.JSON(http.StatusOK, gin.H{
+		"id":      "msg_mock_warmup",
+		"type":    "message",
+		"role":    "assistant",
+		"model":   model,
+		"content": []gin.H{{"type": "text", "text": "New Conversation"}},
+		"stop_reason": "end_turn",
+		"usage": gin.H{
+			"input_tokens":  10,
+			"output_tokens": 2,
+		},
+	})
+}

backend/internal/model/account.go

@@ -263,3 +263,17 @@ func (a *Account) ShouldHandleErrorCode(statusCode int) bool {
 	}
 	return false
 }
+
+// IsInterceptWarmupEnabled 检查是否启用预热请求拦截
+// 启用后，标题生成、Warmup等预热请求将返回mock响应，不消耗上游token
+func (a *Account) IsInterceptWarmupEnabled() bool {
+	if a.Credentials == nil {
+		return false
+	}
+	if v, ok := a.Credentials["intercept_warmup_requests"]; ok {
+		if enabled, ok := v.(bool); ok {
+			return enabled
+		}
+	}
+	return false
+}

backend/internal/pkg/claude/constants.go

@@ -0,0 +1,74 @@
+package claude
+
+// Claude Code 客户端相关常量
+
+// Beta header 常量
+const (
+	BetaOAuth                    = "oauth-2025-04-20"
+	BetaClaudeCode               = "claude-code-20250219"
+	BetaInterleavedThinking      = "interleaved-thinking-2025-05-14"
+	BetaFineGrainedToolStreaming = "fine-grained-tool-streaming-2025-05-14"
+)
+
+// DefaultBetaHeader Claude Code 客户端默认的 anthropic-beta header
+const DefaultBetaHeader = BetaClaudeCode + "," + BetaOAuth + "," + BetaInterleavedThinking + "," + BetaFineGrainedToolStreaming
+
+// HaikuBetaHeader Haiku 模型使用的 anthropic-beta header（不需要 claude-code beta）
+const HaikuBetaHeader = BetaOAuth + "," + BetaInterleavedThinking
+
+// Claude Code 客户端默认请求头
+var DefaultHeaders = map[string]string{
+	"User-Agent":                                "claude-cli/2.0.62 (external, cli)",
+	"X-Stainless-Lang":                          "js",
+	"X-Stainless-Package-Version":               "0.52.0",
+	"X-Stainless-OS":                            "Linux",
+	"X-Stainless-Arch":                          "x64",
+	"X-Stainless-Runtime":                       "node",
+	"X-Stainless-Runtime-Version":               "v22.14.0",
+	"X-Stainless-Retry-Count":                   "0",
+	"X-Stainless-Timeout":                       "60",
+	"X-App":                                     "cli",
+	"Anthropic-Dangerous-Direct-Browser-Access": "true",
+}
+
+// Model 表示一个 Claude 模型
+type Model struct {
+	ID          string `json:"id"`
+	Type        string `json:"type"`
+	DisplayName string `json:"display_name"`
+	CreatedAt   string `json:"created_at"`
+}
+
+// DefaultModels Claude Code 客户端支持的默认模型列表
+var DefaultModels = []Model{
+	{
+		ID:          "claude-opus-4-5-20251101",
+		Type:        "model",
+		DisplayName: "Claude Opus 4.5",
+		CreatedAt:   "2025-11-01T00:00:00Z",
+	},
+	{
+		ID:          "claude-sonnet-4-5-20250929",
+		Type:        "model",
+		DisplayName: "Claude Sonnet 4.5",
+		CreatedAt:   "2025-09-29T00:00:00Z",
+	},
+	{
+		ID:          "claude-haiku-4-5-20251001",
+		Type:        "model",
+		DisplayName: "Claude Haiku 4.5",
+		CreatedAt:   "2025-10-01T00:00:00Z",
+	},
+}
+
+// DefaultModelIDs 返回默认模型的 ID 列表
+func DefaultModelIDs() []string {
+	ids := make([]string, len(DefaultModels))
+	for i, m := range DefaultModels {
+		ids[i] = m.ID
+	}
+	return ids
+}
+
+// DefaultTestModel 测试时使用的默认模型
+const DefaultTestModel = "claude-sonnet-4-5-20250929"

backend/internal/server/router.go

@@ -189,6 +189,7 @@ func registerRoutes(r *gin.Engine, h *handler.Handlers, s *service.Services, rep
 				accounts.GET("/:id/today-stats", h.Admin.Account.GetTodayStats)
 				accounts.POST("/:id/clear-rate-limit", h.Admin.Account.ClearRateLimit)
 				accounts.POST("/:id/schedulable", h.Admin.Account.SetSchedulable)
+				accounts.GET("/:id/models", h.Admin.Account.GetAvailableModels)
 				accounts.POST("/batch", h.Admin.Account.BatchCreate)
 
 				// OAuth routes
@@ -281,6 +282,7 @@ func registerRoutes(r *gin.Engine, h *handler.Handlers, s *service.Services, rep
 	gateway.Use(middleware.ApiKeyAuthWithSubscription(s.ApiKey, s.Subscription))
 	{
 		gateway.POST("/messages", h.Gateway.Messages)
+		gateway.POST("/messages/count_tokens", h.Gateway.CountTokens)
 		gateway.GET("/models", h.Gateway.Models)
 		gateway.GET("/usage", h.Gateway.Usage)
 	}

backend/internal/service/account_test_service.go

@@ -15,6 +15,7 @@ import (
 	"strings"
 	"time"
 
+	"sub2api/internal/pkg/claude"
 	"sub2api/internal/repository"
 
 	"github.com/gin-gonic/gin"
@@ -23,7 +24,6 @@ import (
 
 const (
 	testClaudeAPIURL = "https://api.anthropic.com/v1/messages"
-	testModel        = "claude-sonnet-4-5-20250929"
 )
 
 // TestEvent represents a SSE event for account testing
@@ -62,10 +62,10 @@ func generateSessionString() string {
 	return fmt.Sprintf("user_%s_account__session_%s", hex64, sessionUUID)
 }
 
-// createTestPayload creates a minimal test request payload for OAuth/Setup Token accounts
+// createTestPayload creates a Claude Code style test request payload
-func createTestPayload() map[string]interface{} {
+func createTestPayload(modelID string) map[string]interface{} {
 	return map[string]interface{}{
-		"model": testModel,
+		"model": modelID,
 		"messages": []map[string]interface{}{
 			{
 				"role": "user",
@@ -98,23 +98,10 @@ func createTestPayload() map[string]interface{} {
 	}
 }
 
-// createApiKeyTestPayload creates a simpler test request payload for API Key accounts
-func createApiKeyTestPayload(model string) map[string]interface{} {
-	return map[string]interface{}{
-		"model": model,
-		"messages": []map[string]interface{}{
-			{
-				"role":    "user",
-				"content": "hi",
-			},
-		},
-		"max_tokens": 1024,
-		"stream":     true,
-	}
-}
-
 // TestAccountConnection tests an account's connection by sending a test request
-func (s *AccountTestService) TestAccountConnection(c *gin.Context, accountID int64) error {
+// All account types use full Claude Code client characteristics, only auth header differs
+// modelID is optional - if empty, defaults to claude.DefaultTestModel
+func (s *AccountTestService) TestAccountConnection(c *gin.Context, accountID int64, modelID string) error {
 	ctx := c.Request.Context()
 
 	// Get account
@@ -123,14 +110,30 @@ func (s *AccountTestService) TestAccountConnection(c *gin.Context, accountID int
 		return s.sendErrorAndEnd(c, "Account not found")
 	}
 
-	// Determine authentication method based on account type
+	// Determine the model to use
+	testModelID := modelID
+	if testModelID == "" {
+		testModelID = claude.DefaultTestModel
+	}
+
+	// For API Key accounts with model mapping, map the model
+	if account.Type == "apikey" {
+		mapping := account.GetModelMapping()
+		if mapping != nil && len(mapping) > 0 {
+			if mappedModel, exists := mapping[testModelID]; exists {
+				testModelID = mappedModel
+			}
+		}
+	}
+
+	// Determine authentication method and API URL
 	var authToken string
-	var authType string // "bearer" for OAuth, "apikey" for API Key
+	var useBearer bool
 	var apiURL string
 
 	if account.IsOAuth() {
-		// OAuth or Setup Token account
+		// OAuth or Setup Token - use Bearer token
-		authType = "bearer"
+		useBearer = true
 		apiURL = testClaudeAPIURL
 		authToken = account.GetCredential("access_token")
 		if authToken == "" {
@@ -141,7 +144,7 @@ func (s *AccountTestService) TestAccountConnection(c *gin.Context, accountID int
 		needRefresh := false
 		if expiresAtStr := account.GetCredential("expires_at"); expiresAtStr != "" {
 			expiresAt, err := strconv.ParseInt(expiresAtStr, 10, 64)
-			if err == nil && time.Now().Unix()+300 > expiresAt { // 5 minute buffer
+			if err == nil && time.Now().Unix()+300 > expiresAt {
 				needRefresh = true
 			}
 		}
@@ -154,19 +157,17 @@ func (s *AccountTestService) TestAccountConnection(c *gin.Context, accountID int
 			authToken = tokenInfo.AccessToken
 		}
 	} else if account.Type == "apikey" {
-		// API Key account
+		// API Key - use x-api-key header
-		authType = "apikey"
+		useBearer = false
 		authToken = account.GetCredential("api_key")
 		if authToken == "" {
 			return s.sendErrorAndEnd(c, "No API key available")
 		}
 
-		// Get base URL (use default if not set)
 		apiURL = account.GetBaseURL()
 		if apiURL == "" {
 			apiURL = "https://api.anthropic.com"
 		}
-		// Append /v1/messages endpoint
 		apiURL = strings.TrimSuffix(apiURL, "/") + "/v1/messages"
 	} else {
 		return s.sendErrorAndEnd(c, fmt.Sprintf("Unsupported account type: %s", account.Type))
@@ -179,37 +180,32 @@ func (s *AccountTestService) TestAccountConnection(c *gin.Context, accountID int
 	c.Writer.Header().Set("X-Accel-Buffering", "no")
 	c.Writer.Flush()
 
-	// Create test request payload
+	// Create Claude Code style payload (same for all account types)
-	var payload map[string]interface{}
+	payload := createTestPayload(testModelID)
-	var actualModel string
-	if authType == "apikey" {
-		// Use simpler payload for API Key (without Claude Code specific fields)
-		// Apply model mapping if configured
-		actualModel = account.GetMappedModel(testModel)
-		payload = createApiKeyTestPayload(actualModel)
-	} else {
-		actualModel = testModel
-		payload = createTestPayload()
-	}
 	payloadBytes, _ := json.Marshal(payload)
 
-	// Send test_start event with model info
+	// Send test_start event
-	s.sendEvent(c, TestEvent{Type: "test_start", Model: actualModel})
+	s.sendEvent(c, TestEvent{Type: "test_start", Model: testModelID})
 
 	req, err := http.NewRequestWithContext(ctx, "POST", apiURL, bytes.NewReader(payloadBytes))
 	if err != nil {
 		return s.sendErrorAndEnd(c, "Failed to create request")
 	}
 
-	// Set headers based on auth type
+	// Set common headers
 	req.Header.Set("Content-Type", "application/json")
 	req.Header.Set("anthropic-version", "2023-06-01")
+	req.Header.Set("anthropic-beta", claude.DefaultBetaHeader)
 
-	if authType == "bearer" {
+	// Apply Claude Code client headers
+	for key, value := range claude.DefaultHeaders {
+		req.Header.Set(key, value)
+	}
+
+	// Set authentication header
+	if useBearer {
 		req.Header.Set("Authorization", "Bearer "+authToken)
-		req.Header.Set("anthropic-beta", "prompt-caching-2024-07-31,interleaved-thinking-2025-05-14,output-128k-2025-02-19")
 	} else {
-		// API Key uses x-api-key header
 		req.Header.Set("x-api-key", authToken)
 	}
 
@@ -252,7 +248,6 @@ func (s *AccountTestService) processStream(c *gin.Context, body io.Reader) error
 		line, err := reader.ReadString('\n')
 		if err != nil {
 			if err == io.EOF {
-				// Stream ended, send complete event
 				s.sendEvent(c, TestEvent{Type: "test_complete", Success: true})
 				return nil
 			}

backend/internal/service/gateway_service.go

@@ -20,6 +20,7 @@ import (
 
 	"sub2api/internal/config"
 	"sub2api/internal/model"
+	"sub2api/internal/pkg/claude"
 	"sub2api/internal/repository"
 
 	"github.com/gin-gonic/gin"
@@ -27,10 +28,11 @@ import (
 )
 
 const (
-	claudeAPIURL        = "https://api.anthropic.com/v1/messages?beta=true"
+	claudeAPIURL            = "https://api.anthropic.com/v1/messages?beta=true"
-	stickySessionPrefix = "sticky_session:"
+	claudeAPICountTokensURL = "https://api.anthropic.com/v1/messages/count_tokens?beta=true"
-	stickySessionTTL    = time.Hour // 粘性会话TTL
+	stickySessionPrefix     = "sticky_session:"
-	tokenRefreshBuffer  = 5 * 60    // 提前5分钟刷新token
+	stickySessionTTL        = time.Hour // 粘性会话TTL
+	tokenRefreshBuffer      = 5 * 60    // 提前5分钟刷新token
 )
 
 // allowedHeaders 白名单headers（参考CRS项目）
@@ -601,13 +603,10 @@ func (s *GatewayService) buildUpstreamRequest(ctx context.Context, c *gin.Contex
 // getBetaHeader 处理anthropic-beta header
 // 对于OAuth账号，需要确保包含oauth-2025-04-20
 func (s *GatewayService) getBetaHeader(body []byte, clientBetaHeader string) string {
-	const oauthBeta = "oauth-2025-04-20"
-	const claudeCodeBeta = "claude-code-20250219"
-
 	// 如果客户端传了anthropic-beta
 	if clientBetaHeader != "" {
 		// 已包含oauth beta则直接返回
-		if strings.Contains(clientBetaHeader, oauthBeta) {
+		if strings.Contains(clientBetaHeader, claude.BetaOAuth) {
 			return clientBetaHeader
 		}
 
@@ -620,7 +619,7 @@ func (s *GatewayService) getBetaHeader(body []byte, clientBetaHeader string) str
 		// 在claude-code-20250219后面插入oauth beta
 		claudeCodeIdx := -1
 		for i, p := range parts {
-			if p == claudeCodeBeta {
+			if p == claude.BetaClaudeCode {
 				claudeCodeIdx = i
 				break
 			}
@@ -630,13 +629,13 @@ func (s *GatewayService) getBetaHeader(body []byte, clientBetaHeader string) str
 			// 在claude-code后面插入
 			newParts := make([]string, 0, len(parts)+1)
 			newParts = append(newParts, parts[:claudeCodeIdx+1]...)
-			newParts = append(newParts, oauthBeta)
+			newParts = append(newParts, claude.BetaOAuth)
 			newParts = append(newParts, parts[claudeCodeIdx+1:]...)
 			return strings.Join(newParts, ",")
 		}
 
 		// 没有claude-code，放在第一位
-		return oauthBeta + "," + clientBetaHeader
+		return claude.BetaOAuth + "," + clientBetaHeader
 	}
 
 	// 客户端没传，根据模型生成
@@ -650,10 +649,10 @@ func (s *GatewayService) getBetaHeader(body []byte, clientBetaHeader string) str
 
 	// haiku模型不需要claude-code beta
 	if strings.Contains(strings.ToLower(modelID), "haiku") {
-		return "oauth-2025-04-20,interleaved-thinking-2025-05-14"
+		return claude.HaikuBetaHeader
 	}
 
-	return "claude-code-20250219,oauth-2025-04-20,interleaved-thinking-2025-05-14,fine-grained-tool-streaming-2025-05-14"
+	return claude.DefaultBetaHeader
 }
 
 func (s *GatewayService) forceRefreshToken(ctx context.Context, account *model.Account) (string, string, error) {
@@ -1044,3 +1043,205 @@ func (s *GatewayService) RecordUsage(ctx context.Context, input *RecordUsageInpu
 
 	return nil
 }
+
+// ForwardCountTokens 转发 count_tokens 请求到上游 API
+// 特点：不记录使用量、仅支持非流式响应
+func (s *GatewayService) ForwardCountTokens(ctx context.Context, c *gin.Context, account *model.Account, body []byte) error {
+	// 应用模型映射（仅对 apikey 类型账号）
+	if account.Type == model.AccountTypeApiKey {
+		var req struct {
+			Model string `json:"model"`
+		}
+		if err := json.Unmarshal(body, &req); err == nil && req.Model != "" {
+			mappedModel := account.GetMappedModel(req.Model)
+			if mappedModel != req.Model {
+				body = s.replaceModelInBody(body, mappedModel)
+				log.Printf("CountTokens model mapping applied: %s -> %s (account: %s)", req.Model, mappedModel, account.Name)
+			}
+		}
+	}
+
+	// 获取凭证
+	token, tokenType, err := s.GetAccessToken(ctx, account)
+	if err != nil {
+		s.countTokensError(c, http.StatusBadGateway, "upstream_error", "Failed to get access token")
+		return err
+	}
+
+	// 构建上游请求
+	upstreamResult, err := s.buildCountTokensRequest(ctx, c, account, body, token, tokenType)
+	if err != nil {
+		s.countTokensError(c, http.StatusInternalServerError, "api_error", "Failed to build request")
+		return err
+	}
+
+	// 选择 HTTP client
+	httpClient := s.httpClient
+	if upstreamResult.Client != nil {
+		httpClient = upstreamResult.Client
+	}
+
+	// 发送请求
+	resp, err := httpClient.Do(upstreamResult.Request)
+	if err != nil {
+		s.countTokensError(c, http.StatusBadGateway, "upstream_error", "Request failed")
+		return fmt.Errorf("upstream request failed: %w", err)
+	}
+	defer resp.Body.Close()
+
+	// 处理 401 错误：刷新 token 重试（仅 OAuth）
+	if resp.StatusCode == http.StatusUnauthorized && tokenType == "oauth" {
+		resp.Body.Close()
+		token, tokenType, err = s.forceRefreshToken(ctx, account)
+		if err != nil {
+			s.countTokensError(c, http.StatusBadGateway, "upstream_error", "Token refresh failed")
+			return fmt.Errorf("token refresh failed: %w", err)
+		}
+		upstreamResult, err = s.buildCountTokensRequest(ctx, c, account, body, token, tokenType)
+		if err != nil {
+			return err
+		}
+		httpClient = s.httpClient
+		if upstreamResult.Client != nil {
+			httpClient = upstreamResult.Client
+		}
+		resp, err = httpClient.Do(upstreamResult.Request)
+		if err != nil {
+			s.countTokensError(c, http.StatusBadGateway, "upstream_error", "Retry failed")
+			return fmt.Errorf("retry request failed: %w", err)
+		}
+		defer resp.Body.Close()
+	}
+
+	// 读取响应体
+	respBody, err := io.ReadAll(resp.Body)
+	if err != nil {
+		s.countTokensError(c, http.StatusBadGateway, "upstream_error", "Failed to read response")
+		return err
+	}
+
+	// 处理错误响应
+	if resp.StatusCode >= 400 {
+		// 标记账号状态（429/529等）
+		s.rateLimitService.HandleUpstreamError(ctx, account, resp.StatusCode, resp.Header, respBody)
+
+		// 返回简化的错误响应
+		errMsg := "Upstream request failed"
+		switch resp.StatusCode {
+		case 429:
+			errMsg = "Rate limit exceeded"
+		case 529:
+			errMsg = "Service overloaded"
+		}
+		s.countTokensError(c, resp.StatusCode, "upstream_error", errMsg)
+		return fmt.Errorf("upstream error: %d", resp.StatusCode)
+	}
+
+	// 透传成功响应
+	c.Data(resp.StatusCode, "application/json", respBody)
+	return nil
+}
+
+// buildCountTokensRequest 构建 count_tokens 上游请求
+func (s *GatewayService) buildCountTokensRequest(ctx context.Context, c *gin.Context, account *model.Account, body []byte, token, tokenType string) (*buildUpstreamRequestResult, error) {
+	// 确定目标 URL
+	targetURL := claudeAPICountTokensURL
+	if account.Type == model.AccountTypeApiKey {
+		baseURL := account.GetBaseURL()
+		targetURL = baseURL + "/v1/messages/count_tokens"
+	}
+
+	// OAuth 账号：应用统一指纹和重写 userID
+	if account.IsOAuth() && s.identityService != nil {
+		fp, err := s.identityService.GetOrCreateFingerprint(ctx, account.ID, c.Request.Header)
+		if err == nil {
+			accountUUID := account.GetExtraString("account_uuid")
+			if accountUUID != "" && fp.ClientID != "" {
+				if newBody, err := s.identityService.RewriteUserID(body, account.ID, accountUUID, fp.ClientID); err == nil && len(newBody) > 0 {
+					body = newBody
+				}
+			}
+		}
+	}
+
+	req, err := http.NewRequestWithContext(ctx, "POST", targetURL, bytes.NewReader(body))
+	if err != nil {
+		return nil, err
+	}
+
+	// 设置认证头
+	if tokenType == "oauth" {
+		req.Header.Set("Authorization", "Bearer "+token)
+	} else {
+		req.Header.Set("x-api-key", token)
+	}
+
+	// 白名单透传 headers
+	for key, values := range c.Request.Header {
+		lowerKey := strings.ToLower(key)
+		if allowedHeaders[lowerKey] {
+			for _, v := range values {
+				req.Header.Add(key, v)
+			}
+		}
+	}
+
+	// OAuth 账号：应用指纹到请求头
+	if account.IsOAuth() && s.identityService != nil {
+		fp, _ := s.identityService.GetOrCreateFingerprint(ctx, account.ID, c.Request.Header)
+		if fp != nil {
+			s.identityService.ApplyFingerprint(req, fp)
+		}
+	}
+
+	// 确保必要的 headers 存在
+	if req.Header.Get("Content-Type") == "" {
+		req.Header.Set("Content-Type", "application/json")
+	}
+	if req.Header.Get("anthropic-version") == "" {
+		req.Header.Set("anthropic-version", "2023-06-01")
+	}
+
+	// OAuth 账号：处理 anthropic-beta header
+	if tokenType == "oauth" {
+		req.Header.Set("anthropic-beta", s.getBetaHeader(body, c.GetHeader("anthropic-beta")))
+	}
+
+	// 配置代理
+	var customClient *http.Client
+	if account.ProxyID != nil && account.Proxy != nil {
+		proxyURL := account.Proxy.URL()
+		if proxyURL != "" {
+			if parsedURL, err := url.Parse(proxyURL); err == nil {
+				responseHeaderTimeout := time.Duration(s.cfg.Gateway.ResponseHeaderTimeout) * time.Second
+				if responseHeaderTimeout == 0 {
+					responseHeaderTimeout = 300 * time.Second
+				}
+				transport := &http.Transport{
+					Proxy:                 http.ProxyURL(parsedURL),
+					MaxIdleConns:          100,
+					MaxIdleConnsPerHost:   10,
+					IdleConnTimeout:       90 * time.Second,
+					ResponseHeaderTimeout: responseHeaderTimeout,
+				}
+				customClient = &http.Client{Transport: transport}
+			}
+		}
+	}
+
+	return &buildUpstreamRequestResult{
+		Request: req,
+		Client:  customClient,
+	}, nil
+}
+
+// countTokensError 返回 count_tokens 错误响应
+func (s *GatewayService) countTokensError(c *gin.Context, status int, errType, message string) {
+	c.JSON(status, gin.H{
+		"type": "error",
+		"error": gin.H{
+			"type":    errType,
+			"message": message,
+		},
+	})
+}

deploy/docker-compose.yml

@@ -96,7 +96,7 @@ services:
   # PostgreSQL Database
   # ===========================================================================
   postgres:
-    image: postgres:15-alpine
+    image: postgres:18-alpine
     container_name: sub2api-postgres
     restart: unless-stopped
     volumes:

frontend/index.html

@@ -2,7 +2,7 @@
 <html lang="zh-CN">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/png" href="/logo.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Sub2API - AI API Gateway</title>
   </head>

frontend/src/api/admin/accounts.ts

@@ -11,6 +11,7 @@ import type {
   PaginatedResponse,
   AccountUsageInfo,
   WindowStats,
+  ClaudeModel,
 } from '@/types';
 
 /**
@@ -247,6 +248,16 @@ export async function setSchedulable(id: number, schedulable: boolean): Promise<
   return data;
 }
 
+/**
+ * Get available models for an account
+ * @param id - Account ID
+ * @returns List of available models for this account
+ */
+export async function getAvailableModels(id: number): Promise<ClaudeModel[]> {
+  const { data } = await apiClient.get<ClaudeModel[]>(`/admin/accounts/${id}/models`);
+  return data;
+}
+
 export const accountsAPI = {
   list,
   getById,
@@ -262,6 +273,7 @@ export const accountsAPI = {
   getTodayStats,
   clearRateLimit,
   setSchedulable,
+  getAvailableModels,
   generateAuthUrl,
   exchangeCode,
   batchCreate,

frontend/src/components/account/AccountTestModal.vue

@@ -36,6 +36,23 @@
         </span>
       </div>
 
+      <!-- Model Selection -->
+      <div class="space-y-1.5">
+        <label class="text-sm font-medium text-gray-700 dark:text-gray-300">
+          {{ t('admin.accounts.selectTestModel') }}
+        </label>
+        <select
+          v-model="selectedModelId"
+          :disabled="loadingModels || status === 'connecting'"
+          class="w-full px-3 py-2 text-sm rounded-lg border border-gray-300 dark:border-dark-500 bg-white dark:bg-dark-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          <option v-if="loadingModels" value="">{{ t('common.loading') }}...</option>
+          <option v-for="model in availableModels" :key="model.id" :value="model.id">
+            {{ model.display_name }} ({{ model.id }})
+          </option>
+        </select>
+      </div>
+
       <!-- Terminal Output -->
       <div class="relative group">
         <div
@@ -125,10 +142,10 @@
         </button>
         <button
           @click="startTest"
-          :disabled="status === 'connecting'"
+          :disabled="status === 'connecting' || !selectedModelId"
           :class="[
             'px-4 py-2 text-sm font-medium rounded-lg transition-all flex items-center gap-2',
-            status === 'connecting'
+            status === 'connecting' || !selectedModelId
               ? 'bg-primary-400 text-white cursor-not-allowed'
               : status === 'success'
                 ? 'bg-green-500 hover:bg-green-600 text-white'
@@ -161,7 +178,8 @@
 import { ref, watch, nextTick } from 'vue'
 import { useI18n } from 'vue-i18n'
 import Modal from '@/components/common/Modal.vue'
-import type { Account } from '@/types'
+import { adminAPI } from '@/api/admin'
+import type { Account, ClaudeModel } from '@/types'
 
 const { t } = useI18n()
 
@@ -184,17 +202,44 @@ const status = ref<'idle' | 'connecting' | 'success' | 'error'>('idle')
 const outputLines = ref<OutputLine[]>([])
 const streamingContent = ref('')
 const errorMessage = ref('')
+const availableModels = ref<ClaudeModel[]>([])
+const selectedModelId = ref('')
+const loadingModels = ref(false)
 let eventSource: EventSource | null = null
 
-// Reset state when modal opens
+// Load available models when modal opens
-watch(() => props.show, (newVal) => {
+watch(() => props.show, async (newVal) => {
-  if (newVal) {
+  if (newVal && props.account) {
     resetState()
+    await loadAvailableModels()
   } else {
     closeEventSource()
   }
 })
 
+const loadAvailableModels = async () => {
+  if (!props.account) return
+
+  loadingModels.value = true
+  selectedModelId.value = '' // Reset selection before loading
+  try {
+    availableModels.value = await adminAPI.accounts.getAvailableModels(props.account.id)
+    // Default to first model (usually Sonnet)
+    if (availableModels.value.length > 0) {
+      // Try to select Sonnet as default, otherwise use first model
+      const sonnetModel = availableModels.value.find(m => m.id.includes('sonnet'))
+      selectedModelId.value = sonnetModel?.id || availableModels.value[0].id
+    }
+  } catch (error) {
+    console.error('Failed to load available models:', error)
+    // Fallback to empty list
+    availableModels.value = []
+    selectedModelId.value = ''
+  } finally {
+    loadingModels.value = false
+  }
+}
+
 const resetState = () => {
   status.value = 'idle'
   outputLines.value = []
@@ -227,7 +272,7 @@ const scrollToBottom = async () => {
 }
 
 const startTest = async () => {
-  if (!props.account) return
+  if (!props.account || !selectedModelId.value) return
 
   resetState()
   status.value = 'connecting'
@@ -247,7 +292,8 @@ const startTest = async () => {
       headers: {
         'Authorization': `Bearer ${localStorage.getItem('auth_token')}`,
         'Content-Type': 'application/json'
-      }
+      },
+      body: JSON.stringify({ model_id: selectedModelId.value })
     })
 
     if (!response.ok) {

frontend/src/components/account/CreateAccountModal.vue

@@ -418,6 +418,31 @@
         </div>
       </div>
 
+      <!-- Intercept Warmup Requests (all account types) -->
+      <div class="border-t border-gray-200 dark:border-dark-600 pt-4">
+        <div class="flex items-center justify-between">
+          <div>
+            <label class="input-label mb-0">{{ t('admin.accounts.interceptWarmupRequests') }}</label>
+            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{{ t('admin.accounts.interceptWarmupRequestsDesc') }}</p>
+          </div>
+          <button
+            type="button"
+            @click="interceptWarmupRequests = !interceptWarmupRequests"
+            :class="[
+              'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2',
+              interceptWarmupRequests ? 'bg-primary-600' : 'bg-gray-200 dark:bg-dark-600'
+            ]"
+          >
+            <span
+              :class="[
+                'pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out',
+                interceptWarmupRequests ? 'translate-x-5' : 'translate-x-0'
+              ]"
+            />
+          </button>
+        </div>
+      </div>
+
       <div>
         <label class="input-label">{{ t('admin.accounts.proxy') }}</label>
         <ProxySelector
@@ -590,6 +615,7 @@ const allowedModels = ref<string[]>([])
 const customErrorCodesEnabled = ref(false)
 const selectedErrorCodes = ref<number[]>([])
 const customErrorCodeInput = ref<number | null>(null)
+const interceptWarmupRequests = ref(false)
 
 // Common models for whitelist
 const commonModels = [
@@ -758,6 +784,7 @@ const resetForm = () => {
   customErrorCodesEnabled.value = false
   selectedErrorCodes.value = []
   customErrorCodeInput.value = null
+  interceptWarmupRequests.value = false
   oauth.resetState()
   oauthFlowRef.value?.reset()
 }
@@ -801,6 +828,11 @@ const handleSubmit = async () => {
     credentials.custom_error_codes = [...selectedErrorCodes.value]
   }
 
+  // Add intercept warmup requests setting
+  if (interceptWarmupRequests.value) {
+    credentials.intercept_warmup_requests = true
+  }
+
   form.credentials = credentials
 
   submitting.value = true
@@ -847,11 +879,17 @@ const handleExchangeCode = async () => {
 
     const extra = oauth.buildExtraInfo(tokenInfo)
 
+    // Merge interceptWarmupRequests into credentials
+    const credentials = {
+      ...tokenInfo,
+      ...(interceptWarmupRequests.value ? { intercept_warmup_requests: true } : {})
+    }
+
     await adminAPI.accounts.create({
       name: form.name,
       platform: form.platform,
       type: addMethod.value, // Use addMethod as type: 'oauth' or 'setup-token'
-      credentials: tokenInfo,
+      credentials,
       extra,
       proxy_id: form.proxy_id,
       concurrency: form.concurrency,
@@ -901,11 +939,17 @@ const handleCookieAuth = async (sessionKey: string) => {
         const extra = oauth.buildExtraInfo(tokenInfo)
         const accountName = keys.length > 1 ? `${form.name} #${i + 1}` : form.name
 
+        // Merge interceptWarmupRequests into credentials
+        const credentials = {
+          ...tokenInfo,
+          ...(interceptWarmupRequests.value ? { intercept_warmup_requests: true } : {})
+        }
+
         await adminAPI.accounts.create({
           name: accountName,
           platform: form.platform,
           type: addMethod.value, // Use addMethod as type: 'oauth' or 'setup-token'
-          credentials: tokenInfo,
+          credentials,
           extra,
           proxy_id: form.proxy_id,
           concurrency: form.concurrency,

frontend/src/components/account/EditAccountModal.vue

@@ -286,6 +286,31 @@
         </div>
       </div>
 
+      <!-- Intercept Warmup Requests (all account types) -->
+      <div class="border-t border-gray-200 dark:border-dark-600 pt-4">
+        <div class="flex items-center justify-between">
+          <div>
+            <label class="input-label mb-0">{{ t('admin.accounts.interceptWarmupRequests') }}</label>
+            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{{ t('admin.accounts.interceptWarmupRequestsDesc') }}</p>
+          </div>
+          <button
+            type="button"
+            @click="interceptWarmupRequests = !interceptWarmupRequests"
+            :class="[
+              'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2',
+              interceptWarmupRequests ? 'bg-primary-600' : 'bg-gray-200 dark:bg-dark-600'
+            ]"
+          >
+            <span
+              :class="[
+                'pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out',
+                interceptWarmupRequests ? 'translate-x-5' : 'translate-x-0'
+              ]"
+            />
+          </button>
+        </div>
+      </div>
+
       <div>
         <label class="input-label">{{ t('admin.accounts.proxy') }}</label>
         <ProxySelector
@@ -401,6 +426,7 @@ const allowedModels = ref<string[]>([])
 const customErrorCodesEnabled = ref(false)
 const selectedErrorCodes = ref<number[]>([])
 const customErrorCodeInput = ref<number | null>(null)
+const interceptWarmupRequests = ref(false)
 
 // Common models for whitelist
 const commonModels = [
@@ -459,6 +485,10 @@ watch(() => props.account, (newAccount) => {
     form.status = newAccount.status as 'active' | 'inactive'
     form.group_ids = newAccount.group_ids || []
 
+    // Load intercept warmup requests setting (applies to all account types)
+    const credentials = newAccount.credentials as Record<string, unknown> | undefined
+    interceptWarmupRequests.value = credentials?.intercept_warmup_requests === true
+
     // Initialize API Key fields for apikey type
     if (newAccount.type === 'apikey' && newAccount.credentials) {
       const credentials = newAccount.credentials as Record<string, unknown>
@@ -630,6 +660,23 @@ const handleSubmit = async () => {
         newCredentials.custom_error_codes = [...selectedErrorCodes.value]
       }
 
+      // Add intercept warmup requests setting
+      if (interceptWarmupRequests.value) {
+        newCredentials.intercept_warmup_requests = true
+      }
+
+      updatePayload.credentials = newCredentials
+    } else {
+      // For oauth/setup-token types, only update intercept_warmup_requests if changed
+      const currentCredentials = props.account.credentials as Record<string, unknown> || {}
+      const newCredentials: Record<string, unknown> = { ...currentCredentials }
+
+      if (interceptWarmupRequests.value) {
+        newCredentials.intercept_warmup_requests = true
+      } else {
+        delete newCredentials.intercept_warmup_requests
+      }
+
       updatePayload.credentials = newCredentials
     }
 

frontend/src/components/layout/AppHeader.vue

@@ -207,7 +207,7 @@ const pageDescription = computed(() => {
 });
 
 function toggleMobileSidebar() {
-  appStore.toggleSidebar();
+  appStore.toggleMobileSidebar();
 }
 
 function toggleDropdown() {

frontend/src/components/layout/AppSidebar.vue

@@ -36,6 +36,7 @@
             class="sidebar-link mb-1"
             :class="{ 'sidebar-link-active': isActive(item.path) }"
             :title="sidebarCollapsed ? item.label : undefined"
+            @click="handleMenuItemClick"
           >
             <component :is="item.icon" class="w-5 h-5 flex-shrink-0" />
             <transition name="fade">
@@ -58,6 +59,7 @@
             class="sidebar-link mb-1"
             :class="{ 'sidebar-link-active': isActive(item.path) }"
             :title="sidebarCollapsed ? item.label : undefined"
+            @click="handleMenuItemClick"
           >
             <component :is="item.icon" class="w-5 h-5 flex-shrink-0" />
             <transition name="fade">
@@ -77,6 +79,7 @@
             class="sidebar-link mb-1"
             :class="{ 'sidebar-link-active': isActive(item.path) }"
             :title="sidebarCollapsed ? item.label : undefined"
+            @click="handleMenuItemClick"
           >
             <component :is="item.icon" class="w-5 h-5 flex-shrink-0" />
             <transition name="fade">
@@ -142,9 +145,9 @@ const appStore = useAppStore();
 const authStore = useAuthStore();
 
 const sidebarCollapsed = computed(() => appStore.sidebarCollapsed);
+const mobileOpen = computed(() => appStore.mobileOpen);
 const isAdmin = computed(() => authStore.isAdmin);
 const isDark = ref(document.documentElement.classList.contains('dark'));
-const mobileOpen = ref(false);
 
 // Site settings
 const siteName = ref('Sub2API');
@@ -303,7 +306,15 @@ function toggleTheme() {
 }
 
 function closeMobile() {
-  mobileOpen.value = false;
+  appStore.setMobileOpen(false);
+}
+
+function handleMenuItemClick() {
+  if (mobileOpen.value) {
+    setTimeout(() => {
+      appStore.setMobileOpen(false);
+    }, 150);
+  }
 }
 
 function isActive(path: string): boolean {

frontend/src/i18n/locales/en.ts

@@ -266,6 +266,8 @@ export default {
     sync: 'Sync',
     in: 'In',
     out: 'Out',
+    cacheRead: 'Read',
+    cacheWrite: 'Write',
     rate: 'Rate',
     original: 'Original',
     billed: 'Billed',
@@ -696,6 +698,8 @@ export default {
       enterErrorCode: 'Enter error code (100-599)',
       invalidErrorCode: 'Please enter a valid HTTP error code (100-599)',
       errorCodeExists: 'This error code is already selected',
+      interceptWarmupRequests: 'Intercept Warmup Requests',
+      interceptWarmupRequestsDesc: 'When enabled, warmup requests like title generation will return mock responses without consuming upstream tokens',
       proxy: 'Proxy',
       noProxy: 'No Proxy',
       concurrency: 'Concurrency',
@@ -777,6 +781,7 @@ export default {
       copyOutput: 'Copy output',
       startingTestForAccount: 'Starting test for account: {name}',
       testAccountTypeLabel: 'Account type: {type}',
+      selectTestModel: 'Select Test Model',
       testModel: 'claude-sonnet-4-5-20250929',
       testPrompt: 'Prompt: "hi"',
     },
@@ -817,8 +822,8 @@ export default {
       standardAdd: 'Standard Add',
       batchAdd: 'Quick Add',
       batchInput: 'Proxy List',
-      batchInputPlaceholder: 'Enter one proxy per line in the following formats:\nsocks5://user:pass@192.168.1.1:1080\nhttp://192.168.1.1:8080\nhttps://user:pass@proxy.example.com:443',
+      batchInputPlaceholder: "Enter one proxy per line in the following formats:\nsocks5://user:pass{'@'}192.168.1.1:1080\nhttp://192.168.1.1:8080\nhttps://user:pass{'@'}proxy.example.com:443",
-      batchInputHint: 'Supports http, https, socks5 protocols. Format: protocol://[user:pass@]host:port',
+      batchInputHint: "Supports http, https, socks5 protocols. Format: protocol://[user:pass{'@'}]host:port",
       parsedCount: '{count} valid',
       invalidCount: '{count} invalid',
       duplicateCount: '{count} duplicate',

frontend/src/i18n/locales/zh.ts

@@ -266,6 +266,8 @@ export default {
     sync: '同步',
     in: '输入',
     out: '输出',
+    cacheRead: '读取',
+    cacheWrite: '写入',
     rate: '倍率',
     original: '原始',
     billed: '计费',
@@ -786,6 +788,8 @@ export default {
       enterErrorCode: '输入错误码 (100-599)',
       invalidErrorCode: '请输入有效的 HTTP 错误码 (100-599)',
       errorCodeExists: '该错误码已被选中',
+      interceptWarmupRequests: '拦截预热请求',
+      interceptWarmupRequestsDesc: '启用后，标题生成等预热请求将返回 mock 响应，不消耗上游 token',
       proxy: '代理',
       noProxy: '无代理',
       concurrency: '并发数',
@@ -865,6 +869,7 @@ export default {
       copyOutput: '复制输出',
       startingTestForAccount: '开始测试账号：{name}',
       testAccountTypeLabel: '账号类型：{type}',
+      selectTestModel: '选择测试模型',
       testModel: 'claude-sonnet-4-5-20250929',
       testPrompt: '提示词："hi"',
     },
@@ -942,8 +947,8 @@ export default {
       standardAdd: '标准添加',
       batchAdd: '快捷添加',
       batchInput: '代理列表',
-      batchInputPlaceholder: '每行输入一个代理，支持以下格式：\nsocks5://user:pass@192.168.1.1:1080\nhttp://192.168.1.1:8080\nhttps://user:pass@proxy.example.com:443',
+      batchInputPlaceholder: "每行输入一个代理，支持以下格式：\nsocks5://user:pass{'@'}192.168.1.1:1080\nhttp://192.168.1.1:8080\nhttps://user:pass{'@'}proxy.example.com:443",
-      batchInputHint: '支持 http、https、socks5 协议，格式：协议://[用户名:密码@]主机:端口',
+      batchInputHint: "支持 http、https、socks5 协议，格式：协议://[用户名:密码{'@'}]主机:端口",
       parsedCount: '有效 {count} 个',
       invalidCount: '无效 {count} 个',
       duplicateCount: '重复 {count} 个',

frontend/src/stores/app.ts

@@ -12,6 +12,7 @@ export const useAppStore = defineStore('app', () => {
   // ==================== State ====================
 
   const sidebarCollapsed = ref<boolean>(false);
+  const mobileOpen = ref<boolean>(false);
   const loading = ref<boolean>(false);
   const toasts = ref<Toast[]>([]);
 
@@ -50,6 +51,21 @@ export const useAppStore = defineStore('app', () => {
     sidebarCollapsed.value = collapsed;
   }
 
+  /**
+   * Toggle mobile sidebar open state
+   */
+  function toggleMobileSidebar(): void {
+    mobileOpen.value = !mobileOpen.value;
+  }
+
+  /**
+   * Set mobile sidebar open state explicitly
+   * @param open - Whether mobile sidebar should be open
+   */
+  function setMobileOpen(open: boolean): void {
+    mobileOpen.value = open;
+  }
+
   /**
    * Set global loading state
    * @param isLoading - Whether app is in loading state
@@ -257,6 +273,7 @@ export const useAppStore = defineStore('app', () => {
   return {
     // State
     sidebarCollapsed,
+    mobileOpen,
     loading,
     toasts,
 
@@ -275,6 +292,8 @@ export const useAppStore = defineStore('app', () => {
     // Actions
     toggleSidebar,
     setSidebarCollapsed,
+    toggleMobileSidebar,
+    setMobileOpen,
     setLoading,
     showToast,
     showSuccess,

frontend/src/types/index.ts

@@ -285,6 +285,14 @@ export type AccountType = 'oauth' | 'setup-token' | 'apikey';
 export type OAuthAddMethod = 'oauth' | 'setup-token';
 export type ProxyProtocol = 'http' | 'https' | 'socks5';
 
+// Claude Model type (returned by /v1/models and account models API)
+export interface ClaudeModel {
+  id: string;
+  type: string;
+  display_name: string;
+  created_at: string;
+}
+
 export interface Proxy {
   id: number;
   name: string;

frontend/src/views/admin/ProxiesView.vue

@@ -647,10 +647,10 @@ const parseProxyUrl = (line: string): {
 
   return {
     protocol: protocol.toLowerCase() as ProxyProtocol,
-    host,
+    host: host.trim(),
     port: portNum,
-    username: username || '',
+    username: username?.trim() || '',
-    password: password || ''
+    password: password?.trim() || ''
   }
 }
 
@@ -714,9 +714,12 @@ const handleCreateProxy = async () => {
   submitting.value = true
   try {
     await adminAPI.proxies.create({
-      ...createForm,
+      name: createForm.name.trim(),
-      username: createForm.username || null,
+      protocol: createForm.protocol,
-      password: createForm.password || null
+      host: createForm.host.trim(),
+      port: createForm.port,
+      username: createForm.username.trim() || null,
+      password: createForm.password.trim() || null
     })
     appStore.showSuccess(t('admin.proxies.proxyCreated'))
     closeCreateModal()
@@ -752,17 +755,18 @@ const handleUpdateProxy = async () => {
   submitting.value = true
   try {
     const updateData: any = {
-      name: editForm.name,
+      name: editForm.name.trim(),
       protocol: editForm.protocol,
-      host: editForm.host,
+      host: editForm.host.trim(),
       port: editForm.port,
-      username: editForm.username || null,
+      username: editForm.username.trim() || null,
       status: editForm.status
     }
 
     // Only include password if it was changed
-    if (editForm.password) {
+    const trimmedPassword = editForm.password.trim()
-      updateData.password = editForm.password
+    if (trimmedPassword) {
+      updateData.password = trimmedPassword
     }
 
     await adminAPI.proxies.update(editingProxy.value.id, updateData)

frontend/src/views/admin/UsageView.vue

@@ -43,13 +43,12 @@
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
               </svg>
             </div>
-            <div>
+            <div class="min-w-0 flex-1">
               <p class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ t('usage.totalCost') }}</p>
-              <div class="flex items-baseline gap-2">
+              <p class="text-xl font-bold text-green-600 dark:text-green-400">${{ (usageStats?.total_actual_cost || 0).toFixed(4) }}</p>
-                <p class="text-xl font-bold text-green-600 dark:text-green-400">${{ (usageStats?.total_actual_cost || 0).toFixed(4) }}</p>
+              <p class="text-xs text-gray-500 dark:text-gray-400">
-                <span class="text-xs text-gray-400 dark:text-gray-500 line-through">${{ (usageStats?.total_cost || 0).toFixed(4) }}</span>
+                {{ t('usage.actualCost') }} / <span class="line-through">${{ (usageStats?.total_cost || 0).toFixed(4) }}</span> {{ t('usage.standardCost') }}
-              </div>
+              </p>
-              <p class="text-xs text-gray-500 dark:text-gray-400">{{ t('usage.actualCost') }} / {{ t('usage.standardCost') }}</p>
             </div>
           </div>
         </div>
@@ -195,17 +194,40 @@
           </template>
 
           <template #cell-tokens="{ row }">
-            <div class="text-sm">
+            <div class="text-sm space-y-1.5">
-              <div class="flex items-center gap-1">
+              <!-- Input / Output Tokens -->
-                <span class="text-gray-500 dark:text-gray-400">{{ t('usage.in') }}</span>
+              <div class="flex items-center gap-2">
-                <span class="font-medium text-gray-900 dark:text-white">{{ row.input_tokens.toLocaleString() }}</span>
+                <!-- Input -->
-                <span class="text-gray-400 dark:text-gray-500">/</span>
+                <div class="inline-flex items-center gap-1">
-                <span class="text-gray-500 dark:text-gray-400">{{ t('usage.out') }}</span>
+                  <svg class="w-3.5 h-3.5 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <span class="font-medium text-gray-900 dark:text-white">{{ row.output_tokens.toLocaleString() }}</span>
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
+                  </svg>
+                  <span class="font-medium text-gray-900 dark:text-white">{{ row.input_tokens.toLocaleString() }}</span>
+                </div>
+                <!-- Output -->
+                <div class="inline-flex items-center gap-1">
+                  <svg class="w-3.5 h-3.5 text-violet-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
+                  </svg>
+                  <span class="font-medium text-gray-900 dark:text-white">{{ row.output_tokens.toLocaleString() }}</span>
+                </div>
               </div>
-              <div v-if="row.cache_read_tokens > 0" class="flex items-center gap-1 text-blue-600 dark:text-blue-400">
+              <!-- Cache Tokens (Read + Write) -->
-                <span>{{ t('dashboard.cache') }}</span>
+              <div v-if="row.cache_read_tokens > 0 || row.cache_creation_tokens > 0" class="flex items-center gap-2">
-                <span class="font-medium">{{ row.cache_read_tokens.toLocaleString() }}</span>
+                <!-- Cache Read -->
+                <div v-if="row.cache_read_tokens > 0" class="inline-flex items-center gap-1">
+                  <svg class="w-3.5 h-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="text-sky-600 dark:text-sky-400 font-medium">{{ formatCacheTokens(row.cache_read_tokens) }}</span>
+                </div>
+                <!-- Cache Write -->
+                <div v-if="row.cache_creation_tokens > 0" class="inline-flex items-center gap-1">
+                  <svg class="w-3.5 h-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="text-amber-600 dark:text-amber-400 font-medium">{{ formatCacheTokens(row.cache_creation_tokens) }}</span>
+                </div>
               </div>
             </div>
           </template>
@@ -458,6 +480,16 @@ const formatTokens = (value: number): string => {
   return value.toLocaleString()
 }
 
+// Compact format for cache tokens in table cells
+const formatCacheTokens = (value: number): string => {
+  if (value >= 1_000_000) {
+    return `${(value / 1_000_000).toFixed(1)}M`
+  } else if (value >= 1_000) {
+    return `${(value / 1_000).toFixed(1)}K`
+  }
+  return value.toLocaleString()
+}
+
 const formatDateTime = (dateString: string): string => {
   const date = new Date(dateString)
   return date.toLocaleString('en-US', {
@@ -538,7 +570,7 @@ const exportToCSV = () => {
     return
   }
 
-  const headers = ['User', 'API Key', 'Model', 'Type', 'Input Tokens', 'Output Tokens', 'Cache Tokens', 'Total Cost', 'Billing Type', 'Duration (ms)', 'Time']
+  const headers = ['User', 'API Key', 'Model', 'Type', 'Input Tokens', 'Output Tokens', 'Cache Read Tokens', 'Cache Write Tokens', 'Total Cost', 'Billing Type', 'Duration (ms)', 'Time']
   const rows = usageLogs.value.map(log => [
     log.user?.email || '',
     log.api_key?.name || '',
@@ -547,6 +579,7 @@ const exportToCSV = () => {
     log.input_tokens,
     log.output_tokens,
     log.cache_read_tokens,
+    log.cache_creation_tokens,
     log.total_cost.toFixed(6),
     log.billing_type === 1 ? 'Subscription' : 'Balance',
     log.duration_ms,

frontend/src/views/user/UsageView.vue

@@ -43,13 +43,12 @@
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
               </svg>
             </div>
-            <div>
+            <div class="min-w-0 flex-1">
               <p class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ t('usage.totalCost') }}</p>
-              <div class="flex items-baseline gap-2">
+              <p class="text-xl font-bold text-green-600 dark:text-green-400">${{ (usageStats?.total_actual_cost || 0).toFixed(4) }}</p>
-                <p class="text-xl font-bold text-green-600 dark:text-green-400">${{ (usageStats?.total_actual_cost || 0).toFixed(4) }}</p>
+              <p class="text-xs text-gray-500 dark:text-gray-400">
-                <span class="text-xs text-gray-400 dark:text-gray-500 line-through">${{ (usageStats?.total_cost || 0).toFixed(4) }}</span>
+                {{ t('usage.actualCost') }} / <span class="line-through">${{ (usageStats?.total_cost || 0).toFixed(4) }}</span> {{ t('usage.standardCost') }}
-              </div>
+              </p>
-              <p class="text-xs text-gray-500 dark:text-gray-400">{{ t('usage.actualCost') }} / {{ t('usage.standardCost') }}</p>
             </div>
           </div>
         </div>
@@ -138,17 +137,40 @@
           </template>
 
           <template #cell-tokens="{ row }">
-            <div class="text-sm">
+            <div class="text-sm space-y-1.5">
-              <div class="flex items-center gap-1">
+              <!-- Input / Output Tokens -->
-                <span class="text-gray-500 dark:text-gray-400">{{ t('usage.in') }}</span>
+              <div class="flex items-center gap-2">
-                <span class="font-medium text-gray-900 dark:text-white">{{ row.input_tokens.toLocaleString() }}</span>
+                <!-- Input -->
-                <span class="text-gray-400 dark:text-gray-500">/</span>
+                <div class="inline-flex items-center gap-1">
-                <span class="text-gray-500 dark:text-gray-400">{{ t('usage.out') }}</span>
+                  <svg class="w-3.5 h-3.5 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <span class="font-medium text-gray-900 dark:text-white">{{ row.output_tokens.toLocaleString() }}</span>
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
+                  </svg>
+                  <span class="font-medium text-gray-900 dark:text-white">{{ row.input_tokens.toLocaleString() }}</span>
+                </div>
+                <!-- Output -->
+                <div class="inline-flex items-center gap-1">
+                  <svg class="w-3.5 h-3.5 text-violet-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
+                  </svg>
+                  <span class="font-medium text-gray-900 dark:text-white">{{ row.output_tokens.toLocaleString() }}</span>
+                </div>
               </div>
-              <div v-if="row.cache_read_tokens > 0" class="flex items-center gap-1 text-blue-600 dark:text-blue-400">
+              <!-- Cache Tokens (Read + Write) -->
-                <span>{{ t('dashboard.cache') }}</span>
+              <div v-if="row.cache_read_tokens > 0 || row.cache_creation_tokens > 0" class="flex items-center gap-2">
-                <span class="font-medium">{{ row.cache_read_tokens.toLocaleString() }}</span>
+                <!-- Cache Read -->
+                <div v-if="row.cache_read_tokens > 0" class="inline-flex items-center gap-1">
+                  <svg class="w-3.5 h-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="text-sky-600 dark:text-sky-400 font-medium">{{ formatCacheTokens(row.cache_read_tokens) }}</span>
+                </div>
+                <!-- Cache Write -->
+                <div v-if="row.cache_creation_tokens > 0" class="inline-flex items-center gap-1">
+                  <svg class="w-3.5 h-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="text-amber-600 dark:text-amber-400 font-medium">{{ formatCacheTokens(row.cache_creation_tokens) }}</span>
+                </div>
               </div>
             </div>
           </template>
@@ -332,6 +354,16 @@ const formatTokens = (value: number): string => {
   return value.toLocaleString()
 }
 
+// Compact format for cache tokens in table cells
+const formatCacheTokens = (value: number): string => {
+  if (value >= 1_000_000) {
+    return `${(value / 1_000_000).toFixed(1)}M`
+  } else if (value >= 1_000) {
+    return `${(value / 1_000).toFixed(1)}K`
+  }
+  return value.toLocaleString()
+}
+
 const formatDateTime = (dateString: string): string => {
   const date = new Date(dateString)
   return date.toLocaleString('en-US', {
@@ -416,13 +448,14 @@ const exportToCSV = () => {
     return
   }
 
-  const headers = ['Model', 'Type', 'Input Tokens', 'Output Tokens', 'Cache Tokens', 'Total Cost', 'Billing Type', 'First Token (ms)', 'Duration (ms)', 'Time']
+  const headers = ['Model', 'Type', 'Input Tokens', 'Output Tokens', 'Cache Read Tokens', 'Cache Write Tokens', 'Total Cost', 'Billing Type', 'First Token (ms)', 'Duration (ms)', 'Time']
   const rows = usageLogs.value.map(log => [
     log.model,
     log.stream ? 'Stream' : 'Sync',
     log.input_tokens,
     log.output_tokens,
     log.cache_read_tokens,
+    log.cache_creation_tokens,
     log.total_cost.toFixed(6),
     log.billing_type === 1 ? 'Subscription' : 'Balance',
     log.first_token_ms ?? '',