Merge branch 'main' into perf/ui-table

# Conflicts:
#	web/default/src/features/channels/components/channels-table.tsx

.env.example

@@ -56,6 +56,8 @@
 # 对话超时设置
 # 所有请求超时时间，单位秒，默认为0，表示不限制
 # RELAY_TIMEOUT=0
+# Relay HTTP 客户端空闲连接超时时间，单位秒，默认跟随 Go 标准库，设置为0表示不限制
+# RELAY_IDLE_CONN_TIMEOUT=90
 # 流模式无响应超时时间，单位秒，如果出现空补全可以尝试改为更大值
 # STREAMING_TIMEOUT=300
 

.github/ISSUE_TEMPLATE/bug_report.md

@@ -11,6 +11,8 @@ assignees: ''
 
 - 文档：https://docs.newapi.ai/
 - 使用问题先看或先问：https://deepwiki.com/QuantumNous/new-api
+- 开启透传后的转发相关反馈不接受 issue；透传模式会直接转发请求，请自行确认上游行为。
+- 不接受 coding plan、逆向渠道等技术支持类 issue。
 - 警告：删除本模板、删除小节标题或随意清空内容的 issue，可能会被直接关闭；重复恶意提交者可能会被 block。
 
 **您当前的 newapi 版本**
@@ -20,13 +22,18 @@ assignees: ''
 **提交确认**
 
 [//]: # (方框内删除已有的空格，填 x 号)
-+ [ ] 我已确认目前没有类似 issue
-+ [ ] 我已完整查看过文档 https://docs.newapi.ai/ 和项目 README，尤其是常见问题部分
-+ [ ] 我未删除此模板中的任何引导内容或小节标题，并会按要求完整填写
-+ [ ] 我理解项目维护者精力有限，不遵循模板要求的 issue 可能会被无视或直接关闭
+- [ ] **非重复 issue:** 我已搜索现有 [Issues](https://github.com/QuantumNous/new-api/issues?q=is%3Aissue)，确认目前没有类似 issue。
+- [ ] **提交前必读:** 我已完整阅读上方“提交前必读”，并已查看文档 https://docs.newapi.ai/、项目 README 且向 AI 提问，确认这不是使用、配置或接入类问题。
+- [ ] **模板完整:** 我未删除此模板中的任何引导内容或小节标题，并会按要求完整填写。
+- [ ] **维护成本:** 我理解项目维护者精力有限，不遵循模板要求的 issue 可能会被无视或直接关闭。
 
 **问题描述**
 
+请尽可能说明问题现象、影响范围，以及你判断它是程序问题而不是上游行为或使用问题的依据。
+
+- 转发问题请尽可能说明渠道类型、转换格式、上游原生支持依据和服务端日志。
+- 计费问题请尽可能附请求返回的 `usage` 示例。
+
 **复现步骤**
 
 **预期结果**

.github/ISSUE_TEMPLATE/bug_report_en.md

@@ -11,6 +11,8 @@ assignees: ''
 
 - Docs: https://docs.newapi.ai/
 - Usage questions first: https://deepwiki.com/QuantumNous/new-api
+- Issues about forwarding behavior after enabling pass-through mode are not accepted; pass-through mode forwards requests directly, so please verify upstream behavior yourself.
+- Technical support requests such as coding plans or reverse-engineering channels are not accepted as issues.
 - Warning: issues with this template removed, section headings deleted, or content cleared may be closed directly. Repeated abusive submissions may result in a block.
 
 **Your current newapi version**
@@ -20,13 +22,18 @@ Please fill this in, for example: `v1.0.0`
 **Submission Checks**
 
 [//]: # (Remove the space in the box and fill with an x)
-+ [ ] I have confirmed there are no similar issues
-+ [ ] I have thoroughly read the docs at https://docs.newapi.ai/ and the project README, especially the FAQ section
-+ [ ] I have not removed any guidance or section headings from this template and will complete it as requested
-+ [ ] I understand that maintainers have limited time and issues that do not follow this template may be ignored or closed directly
+- [ ] **Non-duplicate issue:** I have searched existing [Issues](https://github.com/QuantumNous/new-api/issues?q=is%3Aissue) and confirmed there are no similar issues.
+- [ ] **Read this first:** I have fully read the section above, reviewed the docs at https://docs.newapi.ai/ and the project README, and asked AI first, confirming this is not a usage, configuration, or integration question.
+- [ ] **Template intact:** I have not removed any guidance or section headings from this template and will complete it as requested.
+- [ ] **Maintainer time:** I understand that maintainers have limited time and issues that do not follow this template may be ignored or closed directly.
 
 **Issue Description**
 
+Describe the symptom, impact scope, and why you believe this is an application issue rather than upstream behavior or a usage question with as much detail as possible.
+
+- For forwarding issues, include the channel type, conversion format, upstream native-support evidence, and server logs when possible.
+- For billing issues, include an example of the returned `usage` when possible.
+
 **Steps to Reproduce**
 
 **Expected Result**

.github/ISSUE_TEMPLATE/feature_request.md

@@ -11,6 +11,8 @@ assignees: ''
 
 - 文档：https://docs.newapi.ai/
 - 使用问题先看或先问：https://deepwiki.com/QuantumNous/new-api
+- 开启透传后的转发相关反馈不接受 issue；透传模式会直接转发请求，请自行确认上游行为。
+- 不接受 coding plan、逆向渠道等技术支持类 issue。
 - 警告：删除本模板、删除小节标题或随意清空内容的 issue，可能会被直接关闭；重复恶意提交者可能会被 block。
 
 **您当前的 newapi 版本**
@@ -20,10 +22,10 @@ assignees: ''
 **提交确认**
 
 [//]: # (方框内删除已有的空格，填 x 号)
-+ [ ] 我已确认目前没有类似 issue
-+ [ ] 我已完整查看过文档 https://docs.newapi.ai/ 和项目 README，已确定现有版本无法满足需求
-+ [ ] 我未删除此模板中的任何引导内容或小节标题，并会按要求完整填写
-+ [ ] 我理解项目维护者精力有限，不遵循模板要求的 issue 可能会被无视或直接关闭
+- [ ] **非重复 issue:** 我已搜索现有 [Issues](https://github.com/QuantumNous/new-api/issues?q=is%3Aissue)，确认目前没有类似 issue。
+- [ ] **提交前必读:** 我已完整阅读上方“提交前必读”，并已查看文档 https://docs.newapi.ai/、项目 README 且向 AI 提问，确认这不是使用、配置或接入类问题，且现有版本无法满足需求。
+- [ ] **模板完整:** 我未删除此模板中的任何引导内容或小节标题，并会按要求完整填写。
+- [ ] **维护成本:** 我理解项目维护者精力有限，不遵循模板要求的 issue 可能会被无视或直接关闭。
 
 **功能描述**
 

.github/ISSUE_TEMPLATE/feature_request_en.md

@@ -11,6 +11,8 @@ assignees: ''
 
 - Docs: https://docs.newapi.ai/
 - Usage questions first: https://deepwiki.com/QuantumNous/new-api
+- Issues about forwarding behavior after enabling pass-through mode are not accepted; pass-through mode forwards requests directly, so please verify upstream behavior yourself.
+- Technical support requests such as coding plans or reverse-engineering channels are not accepted as issues.
 - Warning: issues with this template removed, section headings deleted, or content cleared may be closed directly. Repeated abusive submissions may result in a block.
 
 **Your current newapi version**
@@ -20,10 +22,10 @@ Please fill this in, for example: `v1.0.0`
 **Submission Checks**
 
 [//]: # (Remove the space in the box and fill with an x)
-+ [ ] I have confirmed there are no similar issues
-+ [ ] I have thoroughly read the docs at https://docs.newapi.ai/ and the project README, and confirmed the current version cannot meet my needs
-+ [ ] I have not removed any guidance or section headings from this template and will complete it as requested
-+ [ ] I understand that maintainers have limited time and issues that do not follow this template may be ignored or closed directly
+- [ ] **Non-duplicate issue:** I have searched existing [Issues](https://github.com/QuantumNous/new-api/issues?q=is%3Aissue) and confirmed there are no similar issues.
+- [ ] **Read this first:** I have fully read the section above, reviewed the docs at https://docs.newapi.ai/ and the project README, and asked AI first, confirming this is not a usage, configuration, or integration question, and that the current version cannot meet my needs.
+- [ ] **Template intact:** I have not removed any guidance or section headings from this template and will complete it as requested.
+- [ ] **Maintainer time:** I understand that maintainers have limited time and issues that do not follow this template may be ignored or closed directly.
 
 **Feature Description**
 

README.md

@@ -316,6 +316,7 @@ docker run --name new-api -d --restart always \
 | `CRYPTO_SECRET` | Encryption secret (required for Redis) | - |
 | `SQL_DSN` | Database connection string | - |
 | `REDIS_CONN_STRING` | Redis connection string | - |
+| `RELAY_IDLE_CONN_TIMEOUT` | Idle keep-alive timeout for relay HTTP clients, seconds. Defaults to Go standard library behavior; set `0` to disable | `90` |
 | `STREAMING_TIMEOUT` | Streaming timeout (seconds) | `300` |
 | `STREAM_SCANNER_MAX_BUFFER_MB` | Max per-line buffer (MB) for the stream scanner; increase when upstream sends huge image/base64 payloads | `64` |
 | `MAX_REQUEST_BODY_MB` | Max request body size (MB, counted **after decompression**; prevents huge requests/zip bombs from exhausting memory). Exceeding it returns `413` | `32` |

common/constants.go

@@ -170,6 +170,7 @@ var BatchUpdateInterval int
 
 var RelayTimeout int // unit is second
 
+var RelayIdleConnTimeout int // unit is second
 var RelayMaxIdleConns int
 var RelayMaxIdleConnsPerHost int
 

common/init.go

@@ -102,6 +102,7 @@ func InitEnv() {
 	SyncFrequency = GetEnvOrDefault("SYNC_FREQUENCY", 60)
 	BatchUpdateInterval = GetEnvOrDefault("BATCH_UPDATE_INTERVAL", 5)
 	RelayTimeout = GetEnvOrDefault("RELAY_TIMEOUT", 0)
+	RelayIdleConnTimeout = GetEnvOrDefault("RELAY_IDLE_CONN_TIMEOUT", 90)
 	RelayMaxIdleConns = GetEnvOrDefault("RELAY_MAX_IDLE_CONNS", 500)
 	RelayMaxIdleConnsPerHost = GetEnvOrDefault("RELAY_MAX_IDLE_CONNS_PER_HOST", 100)
 
@@ -111,11 +112,11 @@ func InitEnv() {
 
 	// Initialize rate limit variables
 	GlobalApiRateLimitEnable = GetEnvOrDefaultBool("GLOBAL_API_RATE_LIMIT_ENABLE", true)
-	GlobalApiRateLimitNum = GetEnvOrDefault("GLOBAL_API_RATE_LIMIT", 180)
+	GlobalApiRateLimitNum = GetEnvOrDefault("GLOBAL_API_RATE_LIMIT", 360)
 	GlobalApiRateLimitDuration = int64(GetEnvOrDefault("GLOBAL_API_RATE_LIMIT_DURATION", 180))
 
 	GlobalWebRateLimitEnable = GetEnvOrDefaultBool("GLOBAL_WEB_RATE_LIMIT_ENABLE", true)
-	GlobalWebRateLimitNum = GetEnvOrDefault("GLOBAL_WEB_RATE_LIMIT", 60)
+	GlobalWebRateLimitNum = GetEnvOrDefault("GLOBAL_WEB_RATE_LIMIT", 120)
 	GlobalWebRateLimitDuration = int64(GetEnvOrDefault("GLOBAL_WEB_RATE_LIMIT_DURATION", 180))
 
 	CriticalRateLimitEnable = GetEnvOrDefaultBool("CRITICAL_RATE_LIMIT_ENABLE", true)
@@ -135,6 +136,7 @@ func initConstantEnv() {
 	constant.StreamScannerMaxBufferMB = GetEnvOrDefault("STREAM_SCANNER_MAX_BUFFER_MB", 128)
 	// MaxRequestBodyMB 请求体最大大小（解压后），用于防止超大请求/zip bomb导致内存暴涨
 	constant.MaxRequestBodyMB = GetEnvOrDefault("MAX_REQUEST_BODY_MB", 128)
+	constant.AnonymousRequestBodyLimitKB = GetEnvOrDefault("ANONYMOUS_REQUEST_BODY_LIMIT_KB", 512)
 	// ForceStreamOption 覆盖请求参数，强制返回usage信息
 	constant.ForceStreamOption = GetEnvOrDefaultBool("FORCE_STREAM_OPTION", true)
 	constant.CountToken = GetEnvOrDefaultBool("CountToken", true)

common/request_body_limit.go

@@ -0,0 +1,13 @@
+package common
+
+import "github.com/QuantumNous/new-api/constant"
+
+const defaultAnonymousRequestBodyLimitKB = 512
+
+func GetAnonymousRequestBodyLimitBytes() int64 {
+	limitKB := constant.AnonymousRequestBodyLimitKB
+	if limitKB < 0 {
+		limitKB = defaultAnonymousRequestBodyLimitKB
+	}
+	return int64(limitKB) << 10
+}

constant/env.go

@@ -10,6 +10,7 @@ var GetMediaToken bool
 var GetMediaTokenNotStream bool
 var UpdateTask bool
 var MaxRequestBodyMB int
+var AnonymousRequestBodyLimitKB int
 var AzureDefaultAPIVersion string
 var NotifyLimitCount int
 var NotificationLimitDurationMinute int

controller/channel-test.go

@@ -814,7 +814,7 @@ func buildTestRequest(model string, endpointType string, channel *model.Channel,
 		testRequest.StreamOptions = &dto.StreamOptions{IncludeUsage: true}
 	}
 
-	if strings.HasPrefix(model, "o") {
+	if dto.IsOpenAIReasoningOModel(model) {
 		testRequest.MaxCompletionTokens = lo.ToPtr(uint(16))
 	} else if strings.Contains(model, "thinking") {
 		if !strings.Contains(model, "claude") {

docker-compose.yml

@@ -34,6 +34,7 @@ services:
       - BATCH_UPDATE_ENABLED=true  # 是否启用批量更新 (Whether to enable batch update)
       - NODE_NAME=new-api-node-1  # 节点名称，用于审计日志中标识节点身份；多节点/容器部署时建议设置 (Node name used in audit logs; recommended when running multiple instances or in containers)
 #      - STREAMING_TIMEOUT=300  # 流模式无响应超时时间，单位秒，默认120秒，如果出现空补全可以尝试改为更大值 （Streaming timeout in seconds, default is 120s. Increase if experiencing empty completions）
+#      - RELAY_IDLE_CONN_TIMEOUT=90  # Relay HTTP 客户端空闲连接超时时间，单位秒，默认跟随 Go 标准库，设置为0表示不限制 (Relay HTTP client idle keep-alive timeout in seconds, defaults to Go standard library; set 0 to disable)
 #      - SESSION_SECRET=random_string  # 多机部署时设置，必须修改这个随机字符串！！ （multi-node deployment, set this to a random string!!!!!!!）
 #      - SYNC_FREQUENCY=60  # Uncomment if regular database syncing is needed
 #      - GOOGLE_ANALYTICS_ID=G-XXXXXXXXXX  # Google Analytics 的测量 ID (Google Analytics Measurement ID)

dto/openai_image.go

@@ -26,11 +26,11 @@ type ImageRequest struct {
 	OutputFormat      json.RawMessage `json:"output_format,omitempty"`
 	OutputCompression json.RawMessage `json:"output_compression,omitempty"`
 	PartialImages     json.RawMessage `json:"partial_images,omitempty"`
-	// Stream            bool            `json:"stream,omitempty"`
-	Images        json.RawMessage `json:"images,omitempty"`
-	Mask          json.RawMessage `json:"mask,omitempty"`
-	InputFidelity json.RawMessage `json:"input_fidelity,omitempty"`
-	Watermark     *bool           `json:"watermark,omitempty"`
+	Stream            *bool           `json:"stream,omitempty"`
+	Images            json.RawMessage `json:"images,omitempty"`
+	Mask              json.RawMessage `json:"mask,omitempty"`
+	InputFidelity     json.RawMessage `json:"input_fidelity,omitempty"`
+	Watermark         *bool           `json:"watermark,omitempty"`
 	// zhipu 4v
 	WatermarkEnabled json.RawMessage `json:"watermark_enabled,omitempty"`
 	UserId           json.RawMessage `json:"user_id,omitempty"`
@@ -163,7 +163,7 @@ func (i *ImageRequest) GetTokenCountMeta() *types.TokenCountMeta {
 }
 
 func (i *ImageRequest) IsStream(c *gin.Context) bool {
-	return false
+	return i.Stream != nil && *i.Stream
 }
 
 func (i *ImageRequest) SetModelName(modelName string) {

dto/openai_request.go

@@ -213,12 +213,22 @@ func (r *GeneralOpenAIRequest) ToMap() map[string]any {
 	return result
 }
 
+func IsOpenAIReasoningOModel(modelName string) bool {
+	return strings.HasPrefix(modelName, "o1") ||
+		strings.HasPrefix(modelName, "o3") ||
+		strings.HasPrefix(modelName, "o4")
+}
+
+func IsOpenAIGPT5Model(modelName string) bool {
+	return strings.HasPrefix(modelName, "gpt-5")
+}
+
 func (r *GeneralOpenAIRequest) GetSystemRoleName() string {
-	if strings.HasPrefix(r.Model, "o") {
+	if IsOpenAIReasoningOModel(r.Model) {
 		if !strings.HasPrefix(r.Model, "o1-mini") && !strings.HasPrefix(r.Model, "o1-preview") {
 			return "developer"
 		}
-	} else if strings.HasPrefix(r.Model, "gpt-5") {
+	} else if IsOpenAIGPT5Model(r.Model) {
 		return "developer"
 	}
 	return "system"

dto/openai_request_zero_value_test.go

@@ -71,3 +71,27 @@ func TestOpenAIResponsesRequestPreserveExplicitZeroValues(t *testing.T) {
 	require.True(t, gjson.GetBytes(encoded, "stream").Exists())
 	require.True(t, gjson.GetBytes(encoded, "top_p").Exists())
 }
+
+func TestGeneralOpenAIRequestGetSystemRoleName(t *testing.T) {
+	tests := []struct {
+		name  string
+		model string
+		want  string
+	}{
+		{name: "o1 uses developer", model: "o1", want: "developer"},
+		{name: "o3 family uses developer", model: "o3-mini-high", want: "developer"},
+		{name: "o4 family uses developer", model: "o4-mini", want: "developer"},
+		{name: "o1 mini stays system", model: "o1-mini", want: "system"},
+		{name: "o1 preview stays system", model: "o1-preview", want: "system"},
+		{name: "gpt 5 uses developer", model: "gpt-5", want: "developer"},
+		{name: "omni is not o series", model: "omni-moderation-latest", want: "system"},
+	}
+
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			req := GeneralOpenAIRequest{Model: tt.model}
+
+			require.Equal(t, tt.want, req.GetSystemRoleName())
+		})
+	}
+}

middleware/distributor.go

@@ -102,14 +102,10 @@ func Distribute() func(c *gin.Context) {
 				}
 
 				if preferredChannelID, found := service.GetPreferredChannelByAffinity(c, modelRequest.Model, usingGroup); found {
+					affinityUsable := false
 					preferred, err := model.CacheGetChannel(preferredChannelID)
-					if err == nil && preferred != nil {
-						if preferred.Status != common.ChannelStatusEnabled {
-							if service.ShouldSkipRetryAfterChannelAffinityFailure(c) {
-								abortWithOpenAiMessage(c, http.StatusForbidden, i18n.T(c, i18n.MsgDistributorAffinityChannelDisabled))
-								return
-							}
-						} else if usingGroup == "auto" {
+					if err == nil && preferred != nil && preferred.Status == common.ChannelStatusEnabled {
+						if usingGroup == "auto" {
 							userGroup := common.GetContextKeyString(c, constant.ContextKeyUserGroup)
 							autoGroups := service.GetUserAutoGroup(userGroup)
 							for _, g := range autoGroups {
@@ -117,6 +113,7 @@ func Distribute() func(c *gin.Context) {
 									selectGroup = g
 									common.SetContextKey(c, constant.ContextKeyAutoGroup, g)
 									channel = preferred
+									affinityUsable = true
 									service.MarkChannelAffinityUsed(c, g, preferred.Id)
 									break
 								}
@@ -124,9 +121,13 @@ func Distribute() func(c *gin.Context) {
 						} else if model.IsChannelEnabledForGroupModel(usingGroup, modelRequest.Model, preferred.Id) {
 							channel = preferred
 							selectGroup = usingGroup
+							affinityUsable = true
 							service.MarkChannelAffinityUsed(c, usingGroup, preferred.Id)
 						}
 					}
+					if !affinityUsable && !service.ShouldKeepChannelAffinityOnChannelDisabled() {
+						service.ClearCurrentChannelAffinityCache(c)
+					}
 				}
 
 				if channel == nil {
@@ -298,6 +299,7 @@ func getModelRequest(c *gin.Context) (*ModelRequest, bool, error) {
 		} else if c.Request.Method == http.MethodGet {
 			relayMode = relayconstant.RelayModeVideoFetchByID
 			shouldSelectChannel = false
+			modelRequest.Model = getTaskOriginModelName(c)
 		}
 		c.Set("relay_mode", relayMode)
 	} else if strings.Contains(c.Request.URL.Path, "/v1/video/generations") {
@@ -312,6 +314,7 @@ func getModelRequest(c *gin.Context) (*ModelRequest, bool, error) {
 		} else if c.Request.Method == http.MethodGet {
 			relayMode = relayconstant.RelayModeVideoFetchByID
 			shouldSelectChannel = false
+			modelRequest.Model = getTaskOriginModelName(c)
 		}
 		if _, ok := c.Get("relay_mode"); !ok {
 			c.Set("relay_mode", relayMode)
@@ -396,6 +399,31 @@ func getModelRequest(c *gin.Context) (*ModelRequest, bool, error) {
 	return &modelRequest, shouldSelectChannel, nil
 }
 
+// 修复 #4834: GET /v1/video/generations/:task_id && /v1/video/:task_id 此前不解析 model，
+// 当 token 启用「可用模型限制」时，下游 modelLimitEnable 校验会因
+// modelRequest.Model 为空而误报 "This token has no access to model"。
+// 从已存储的任务记录中回填 OriginModelName 即可让校验走在正确的模型上。
+func getTaskOriginModelName(c *gin.Context) string {
+	if !common.GetContextKeyBool(c, constant.ContextKeyTokenModelLimitEnabled) {
+		return ""
+	}
+
+	taskId := c.Param("task_id")
+	if taskId == "" {
+		// jimeng adapter
+		taskId = c.GetString("task_id")
+	}
+	if taskId == "" {
+		return ""
+	}
+
+	userId := c.GetInt("id")
+	if task, exist, err := model.GetByTaskId(userId, taskId); err == nil && exist && task != nil {
+		return task.Properties.OriginModelName
+	}
+	return ""
+}
+
 func SetupContextForSelectedChannel(c *gin.Context, channel *model.Channel, modelName string) *types.NewAPIError {
 	c.Set("original_model", modelName) // for retry
 	if channel == nil {

middleware/request_body_limit.go

@@ -0,0 +1,47 @@
+package middleware
+
+import (
+	"bytes"
+	"io"
+	"net/http"
+
+	"github.com/QuantumNous/new-api/common"
+	"github.com/gin-gonic/gin"
+)
+
+func AnonymousRequestBodyLimit() gin.HandlerFunc {
+	return func(c *gin.Context) {
+		maxBytes := common.GetAnonymousRequestBodyLimitBytes()
+		if maxBytes <= 0 || c.Request.Body == nil {
+			c.Next()
+			return
+		}
+
+		originalBody := c.Request.Body
+		limitedBody, err := readAnonymousRequestBody(originalBody, maxBytes)
+		_ = originalBody.Close()
+		if err != nil {
+			if common.IsRequestBodyTooLargeError(err) {
+				c.AbortWithStatus(http.StatusRequestEntityTooLarge)
+				return
+			}
+			c.AbortWithStatus(http.StatusBadRequest)
+			return
+		}
+
+		c.Request.Body = io.NopCloser(bytes.NewReader(limitedBody))
+		c.Request.ContentLength = int64(len(limitedBody))
+		c.Next()
+	}
+}
+
+func readAnonymousRequestBody(body io.Reader, maxBytes int64) ([]byte, error) {
+	data, err := io.ReadAll(io.LimitReader(body, maxBytes+1))
+	if err != nil {
+		return nil, err
+	}
+	if int64(len(data)) > maxBytes {
+		return nil, common.ErrRequestBodyTooLarge
+	}
+	return data, nil
+}

relay/channel/cloudflare/relay_cloudflare.go

@@ -30,7 +30,7 @@ func convertCf2CompletionsRequest(textRequest dto.GeneralOpenAIRequest) *CfReque
 }
 
 func cfStreamHandler(c *gin.Context, info *relaycommon.RelayInfo, resp *http.Response) (*types.NewAPIError, *dto.Usage) {
-	scanner := bufio.NewScanner(resp.Body)
+	scanner := helper.NewStreamScanner(resp.Body)
 	scanner.Split(bufio.ScanLines)
 
 	helper.SetEventStreamHeaders(c)

relay/channel/cohere/relay-cohere.go

@@ -1,7 +1,6 @@
 package cohere
 
 import (
-	"bufio"
 	"encoding/json"
 	"io"
 	"net/http"
@@ -86,7 +85,7 @@ func cohereStreamHandler(c *gin.Context, info *relaycommon.RelayInfo, resp *http
 	createdTime := common.GetTimestamp()
 	usage := &dto.Usage{}
 	responseText := ""
-	scanner := bufio.NewScanner(resp.Body)
+	scanner := helper.NewStreamScanner(resp.Body)
 	scanner.Split(func(data []byte, atEOF bool) (advance int, token []byte, err error) {
 		if atEOF && len(data) == 0 {
 			return 0, nil, nil
@@ -106,6 +105,9 @@ func cohereStreamHandler(c *gin.Context, info *relaycommon.RelayInfo, resp *http
 			data := scanner.Text()
 			dataChan <- data
 		}
+		if err := scanner.Err(); err != nil {
+			common.SysLog("error reading stream: " + err.Error())
+		}
 		stopChan <- true
 	}()
 	helper.SetEventStreamHeaders(c)

relay/channel/coze/relay-coze.go

@@ -98,7 +98,7 @@ func cozeChatHandler(c *gin.Context, info *relaycommon.RelayInfo, resp *http.Res
 }
 
 func cozeChatStreamHandler(c *gin.Context, info *relaycommon.RelayInfo, resp *http.Response) (*dto.Usage, *types.NewAPIError) {
-	scanner := bufio.NewScanner(resp.Body)
+	scanner := helper.NewStreamScanner(resp.Body)
 	scanner.Split(bufio.ScanLines)
 	helper.SetEventStreamHeaders(c)
 	id := helper.GetResponseID(c)

relay/channel/dify/relay-dify.go

@@ -159,9 +159,14 @@ func requestOpenAI2Dify(c *gin.Context, info *relaycommon.RelayInfo, request dto
 					media := mediaContent.GetImageMedia()
 					var file *DifyFile
 					if media.IsRemoteImage() {
-						file.Type = media.MimeType
-						file.TransferMode = "remote_url"
-						file.URL = media.Url
+						// 修复 #2083: 远程图片分支此前未初始化 file，
+						// 导致 file.Type = ... 触发 nil pointer dereference
+						// 而 panic（500: "invalid memory address or nil pointer dereference"）。
+						file = &DifyFile{
+							Type:         media.MimeType,
+							TransferMode: "remote_url",
+							URL:          media.Url,
+						}
 					} else {
 						file = uploadDifyFile(c, info, difyReq.User, mediaContent)
 					}

relay/channel/moonshot/adaptor.go

@@ -5,7 +5,9 @@ import (
 	"fmt"
 	"io"
 	"net/http"
+	"strings"
 
+	"github.com/QuantumNous/new-api/common"
 	channelconstant "github.com/QuantumNous/new-api/constant"
 	"github.com/QuantumNous/new-api/dto"
 	"github.com/QuantumNous/new-api/relay/channel"
@@ -79,9 +81,23 @@ func (a *Adaptor) SetupRequestHeader(c *gin.Context, req *http.Header, info *rel
 }
 
 func (a *Adaptor) ConvertOpenAIRequest(c *gin.Context, info *relaycommon.RelayInfo, request *dto.GeneralOpenAIRequest) (any, error) {
+	if request.Temperature != nil && isTemperatureOneOnlyModel(getUpstreamModelName(info, request.Model)) && *request.Temperature != 1.0 {
+		request.Temperature = common.GetPointer[float64](1.0)
+	}
 	return request, nil
 }
 
+func getUpstreamModelName(info *relaycommon.RelayInfo, fallback string) string {
+	if info != nil && info.ChannelMeta != nil && info.UpstreamModelName != "" {
+		return info.UpstreamModelName
+	}
+	return fallback
+}
+
+func isTemperatureOneOnlyModel(model string) bool {
+	return strings.EqualFold(model, "kimi-k2.6")
+}
+
 func (a *Adaptor) ConvertOpenAIResponsesRequest(c *gin.Context, info *relaycommon.RelayInfo, request dto.OpenAIResponsesRequest) (any, error) {
 	// TODO implement me
 	return nil, errors.New("not implemented")

relay/channel/moonshot/adaptor_test.go

@@ -0,0 +1,68 @@
+package moonshot
+
+import (
+	"testing"
+
+	"github.com/QuantumNous/new-api/common"
+	"github.com/QuantumNous/new-api/dto"
+	relaycommon "github.com/QuantumNous/new-api/relay/common"
+	"github.com/stretchr/testify/require"
+)
+
+func TestConvertOpenAIRequestKimiK26UsesOnlyAllowedTemperature(t *testing.T) {
+	request := &dto.GeneralOpenAIRequest{
+		Model:       "kimi-k2.6",
+		Temperature: common.GetPointer[float64](0.7),
+	}
+	info := &relaycommon.RelayInfo{
+		ChannelMeta: &relaycommon.ChannelMeta{
+			UpstreamModelName: "kimi-k2.6",
+		},
+	}
+
+	converted, err := (&Adaptor{}).ConvertOpenAIRequest(nil, info, request)
+
+	require.NoError(t, err)
+	convertedRequest, ok := converted.(*dto.GeneralOpenAIRequest)
+	require.True(t, ok)
+	require.NotNil(t, convertedRequest.Temperature)
+	require.Equal(t, 1.0, *convertedRequest.Temperature)
+}
+
+func TestConvertOpenAIRequestKimiK26KeepsOmittedTemperatureOmitted(t *testing.T) {
+	request := &dto.GeneralOpenAIRequest{
+		Model: "kimi-k2.6",
+	}
+	info := &relaycommon.RelayInfo{
+		ChannelMeta: &relaycommon.ChannelMeta{
+			UpstreamModelName: "kimi-k2.6",
+		},
+	}
+
+	converted, err := (&Adaptor{}).ConvertOpenAIRequest(nil, info, request)
+
+	require.NoError(t, err)
+	convertedRequest, ok := converted.(*dto.GeneralOpenAIRequest)
+	require.True(t, ok)
+	require.Nil(t, convertedRequest.Temperature)
+}
+
+func TestConvertOpenAIRequestOtherMoonshotModelKeepsTemperature(t *testing.T) {
+	request := &dto.GeneralOpenAIRequest{
+		Model:       "kimi-k2.5",
+		Temperature: common.GetPointer[float64](0.7),
+	}
+	info := &relaycommon.RelayInfo{
+		ChannelMeta: &relaycommon.ChannelMeta{
+			UpstreamModelName: "kimi-k2.5",
+		},
+	}
+
+	converted, err := (&Adaptor{}).ConvertOpenAIRequest(nil, info, request)
+
+	require.NoError(t, err)
+	convertedRequest, ok := converted.(*dto.GeneralOpenAIRequest)
+	require.True(t, ok)
+	require.NotNil(t, convertedRequest.Temperature)
+	require.Equal(t, 0.7, *convertedRequest.Temperature)
+}

relay/channel/ollama/relay-ollama.go

@@ -1,7 +1,6 @@
 package ollama
 
 import (
-	"bufio"
 	"encoding/json"
 	"fmt"
 	"io"
@@ -12,6 +11,7 @@ import (
 	"github.com/QuantumNous/new-api/common"
 	"github.com/QuantumNous/new-api/dto"
 	relaycommon "github.com/QuantumNous/new-api/relay/common"
+	"github.com/QuantumNous/new-api/relay/helper"
 	"github.com/QuantumNous/new-api/service"
 	"github.com/QuantumNous/new-api/types"
 
@@ -397,7 +397,7 @@ func PullOllamaModelStream(baseURL, apiKey, modelName string, progressCallback f
 	}
 
 	// 读取流式响应
-	scanner := bufio.NewScanner(response.Body)
+	scanner := helper.NewStreamScanner(response.Body)
 	successful := false
 	for scanner.Scan() {
 		line := scanner.Text()

relay/channel/ollama/stream.go

@@ -1,7 +1,6 @@
 package ollama
 
 import (
-	"bufio"
 	"encoding/json"
 	"fmt"
 	"io"
@@ -70,7 +69,7 @@ func ollamaStreamHandler(c *gin.Context, info *relaycommon.RelayInfo, resp *http
 	defer service.CloseResponseBodyGracefully(resp)
 
 	helper.SetEventStreamHeaders(c)
-	scanner := bufio.NewScanner(resp.Body)
+	scanner := helper.NewStreamScanner(resp.Body)
 	usage := &dto.Usage{}
 	var model = info.UpstreamModelName
 	var responseId = common.GetUUID()

relay/channel/openai/adaptor.go

@@ -9,6 +9,7 @@ import (
 	"mime/multipart"
 	"net/http"
 	"net/textproto"
+	"net/url"
 	"path/filepath"
 	"strings"
 
@@ -310,18 +311,20 @@ func (a *Adaptor) ConvertOpenAIRequest(c *gin.Context, info *relaycommon.RelayIn
 		}
 
 	}
-	if strings.HasPrefix(info.UpstreamModelName, "o") || strings.HasPrefix(info.UpstreamModelName, "gpt-5") {
+	isOModel := dto.IsOpenAIReasoningOModel(info.UpstreamModelName)
+	isGPT5Model := dto.IsOpenAIGPT5Model(info.UpstreamModelName)
+	if isOModel || isGPT5Model {
 		if lo.FromPtrOr(request.MaxCompletionTokens, uint(0)) == 0 && lo.FromPtrOr(request.MaxTokens, uint(0)) != 0 {
 			request.MaxCompletionTokens = request.MaxTokens
 			request.MaxTokens = nil
 		}
 
-		if strings.HasPrefix(info.UpstreamModelName, "o") {
+		if isOModel {
 			request.Temperature = nil
 		}
 
 		// gpt-5系列模型适配 归零不再支持的参数
-		if strings.HasPrefix(info.UpstreamModelName, "gpt-5") {
+		if isGPT5Model {
 			request.Temperature = nil
 			request.TopP = nil
 			request.LogProbs = nil
@@ -437,10 +440,13 @@ func (a *Adaptor) ConvertImageRequest(c *gin.Context, info *relaycommon.RelayInf
 		// 使用已解析的 multipart 表单，避免重复解析
 		mf := c.Request.MultipartForm
 		if mf == nil {
-			if _, err := c.MultipartForm(); err != nil {
-				return nil, errors.New("failed to parse multipart form")
+			form, err := common.ParseMultipartFormReusable(c)
+			if err != nil {
+				return nil, fmt.Errorf("failed to parse multipart form: %w", err)
 			}
-			mf = c.Request.MultipartForm
+			c.Request.MultipartForm = form
+			c.Request.PostForm = url.Values(form.Value)
+			mf = form
 		}
 
 		// 写入所有非文件字段
@@ -623,7 +629,11 @@ func (a *Adaptor) DoResponse(c *gin.Context, resp *http.Response, info *relaycom
 	case relayconstant.RelayModeAudioTranscription:
 		err, usage = OpenaiSTTHandler(c, resp, info, a.ResponseFormat)
 	case relayconstant.RelayModeImagesGenerations, relayconstant.RelayModeImagesEdits:
-		usage, err = OpenaiHandlerWithUsage(c, info, resp)
+		if info.IsStream {
+			usage, err = OpenaiImageStreamHandler(c, info, resp)
+		} else {
+			usage, err = OpenaiImageHandler(c, info, resp)
+		}
 	case relayconstant.RelayModeRerank:
 		usage, err = common_handler.RerankHandler(c, info, resp)
 	case relayconstant.RelayModeResponses:

relay/channel/openai/image_edit_test.go

@@ -0,0 +1,98 @@
+package openai
+
+import (
+	"bytes"
+	"io"
+	"mime/multipart"
+	"net/http"
+	"net/http/httptest"
+	"testing"
+
+	"github.com/QuantumNous/new-api/common"
+	"github.com/QuantumNous/new-api/dto"
+	relaycommon "github.com/QuantumNous/new-api/relay/common"
+	relayconstant "github.com/QuantumNous/new-api/relay/constant"
+	"github.com/gin-gonic/gin"
+	"github.com/stretchr/testify/require"
+)
+
+// TestConvertImageEditRequestMultipart verifies that ConvertImageRequest
+// re-serializes multipart image edit requests with all fields (including
+// stream) and the file intact, both when the form was already parsed and when
+// it must be re-parsed from the reusable body.
+func TestConvertImageEditRequestMultipart(t *testing.T) {
+	gin.SetMode(gin.TestMode)
+
+	newMultipartContext := func(t *testing.T, prompt string) *gin.Context {
+		var body bytes.Buffer
+		writer := multipart.NewWriter(&body)
+		require.NoError(t, writer.WriteField("model", "gpt-image-1"))
+		require.NoError(t, writer.WriteField("prompt", prompt))
+		require.NoError(t, writer.WriteField("stream", "true"))
+		require.NoError(t, writer.WriteField("partial_images", "3"))
+		part, err := writer.CreateFormFile("image", "input.png")
+		require.NoError(t, err)
+		_, err = part.Write([]byte("fake image"))
+		require.NoError(t, err)
+		require.NoError(t, writer.Close())
+
+		c, _ := gin.CreateTestContext(httptest.NewRecorder())
+		c.Request = httptest.NewRequest(http.MethodPost, "/v1/images/edits", &body)
+		c.Request.Header.Set("Content-Type", writer.FormDataContentType())
+		return c
+	}
+
+	convertAndReplay := func(t *testing.T, c *gin.Context, prompt string) {
+		info := &relaycommon.RelayInfo{
+			RelayMode: relayconstant.RelayModeImagesEdits,
+		}
+		request := dto.ImageRequest{
+			Model:  "gpt-image-1",
+			Prompt: prompt,
+			Stream: common.GetPointer(true),
+		}
+
+		converted, err := (&Adaptor{}).ConvertImageRequest(c, info, request)
+		require.NoError(t, err)
+		convertedBody, ok := converted.(*bytes.Buffer)
+		require.True(t, ok)
+
+		replayedRequest := httptest.NewRequest(http.MethodPost, "/v1/images/edits", bytes.NewReader(convertedBody.Bytes()))
+		replayedRequest.Header.Set("Content-Type", c.Request.Header.Get("Content-Type"))
+		require.NoError(t, replayedRequest.ParseMultipartForm(32<<20))
+
+		require.Equal(t, "gpt-image-1", replayedRequest.PostForm.Get("model"))
+		require.Equal(t, prompt, replayedRequest.PostForm.Get("prompt"))
+		require.Equal(t, "true", replayedRequest.PostForm.Get("stream"))
+		require.Equal(t, "3", replayedRequest.PostForm.Get("partial_images"))
+		require.Len(t, replayedRequest.MultipartForm.File["image"], 1)
+
+		file, err := replayedRequest.MultipartForm.File["image"][0].Open()
+		require.NoError(t, err)
+		defer file.Close()
+		fileBytes, err := io.ReadAll(file)
+		require.NoError(t, err)
+		require.Equal(t, []byte("fake image"), fileBytes)
+	}
+
+	t.Run("with pre-parsed form", func(t *testing.T) {
+		prompt := "edit this image"
+		c := newMultipartContext(t, prompt)
+		require.NoError(t, c.Request.ParseMultipartForm(32<<20))
+
+		convertAndReplay(t, c, prompt)
+	})
+
+	t.Run("re-parses reusable body when form is missing", func(t *testing.T) {
+		prompt := "edit without pre-parsed form"
+		c := newMultipartContext(t, prompt)
+
+		storage, err := common.GetBodyStorage(c)
+		require.NoError(t, err)
+		c.Request.Body = io.NopCloser(storage)
+		c.Request.MultipartForm = nil
+		c.Request.PostForm = nil
+
+		convertAndReplay(t, c, prompt)
+	})
+}

relay/channel/openai/image_stream_test.go

@@ -0,0 +1,173 @@
+package openai
+
+import (
+	"io"
+	"net/http"
+	"net/http/httptest"
+	"strings"
+	"testing"
+
+	"github.com/QuantumNous/new-api/constant"
+	relaycommon "github.com/QuantumNous/new-api/relay/common"
+	"github.com/gin-gonic/gin"
+	"github.com/stretchr/testify/require"
+)
+
+func newImageTestContext(t *testing.T, body, contentType string, isStream bool) (*gin.Context, *httptest.ResponseRecorder, *http.Response, *relaycommon.RelayInfo) {
+	t.Helper()
+
+	recorder := httptest.NewRecorder()
+	c, _ := gin.CreateTestContext(recorder)
+	c.Request = httptest.NewRequest(http.MethodPost, "/v1/images/generations", nil)
+
+	resp := &http.Response{
+		StatusCode: http.StatusOK,
+		Body:       io.NopCloser(strings.NewReader(body)),
+		Header:     http.Header{"Content-Type": []string{contentType}},
+	}
+	info := &relaycommon.RelayInfo{
+		ChannelMeta: &relaycommon.ChannelMeta{},
+		IsStream:    isStream,
+	}
+	return c, recorder, resp, info
+}
+
+// TestOpenaiImageStreamHandlerForwardsSSEAndUsage covers the core SSE path:
+// chunks are forwarded with rebuilt event lines, usage is extracted and
+// normalized (input_tokens -> prompt_tokens with details), and [DONE] is
+// re-emitted to the client.
+func TestOpenaiImageStreamHandlerForwardsSSEAndUsage(t *testing.T) {
+	oldMode := gin.Mode()
+	gin.SetMode(gin.TestMode)
+	t.Cleanup(func() { gin.SetMode(oldMode) })
+
+	oldTimeout := constant.StreamingTimeout
+	constant.StreamingTimeout = 30
+	t.Cleanup(func() { constant.StreamingTimeout = oldTimeout })
+
+	body := strings.Join([]string{
+		`event: image_generation.partial_image`,
+		`data: {"type":"image_generation.partial_image","b64_json":"partial"}`,
+		``,
+		`data: {"usage":{"input_tokens":3,"output_tokens":4,"total_tokens":7,"input_tokens_details":{"image_tokens":2,"text_tokens":1}}}`,
+		``,
+		`data: [DONE]`,
+		``,
+	}, "\n")
+
+	c, recorder, resp, info := newImageTestContext(t, body, "text/event-stream", true)
+
+	usage, err := OpenaiImageStreamHandler(c, info, resp)
+	require.Nil(t, err)
+	require.Equal(t, 3, usage.PromptTokens)
+	require.Equal(t, 4, usage.CompletionTokens)
+	require.Equal(t, 7, usage.TotalTokens)
+	require.Equal(t, 2, usage.PromptTokensDetails.ImageTokens)
+	require.Equal(t, 1, usage.PromptTokensDetails.TextTokens)
+	require.Contains(t, recorder.Body.String(), `event: image_generation.partial_image`)
+	require.Contains(t, recorder.Body.String(), `data: {"type":"image_generation.partial_image","b64_json":"partial"}`)
+	require.Contains(t, recorder.Body.String(), `data: {"usage":{"input_tokens":3,"output_tokens":4,"total_tokens":7,"input_tokens_details":{"image_tokens":2,"text_tokens":1}}}`)
+	require.Contains(t, recorder.Body.String(), `data: [DONE]`)
+	require.Equal(t, "text/event-stream", recorder.Header().Get("Content-Type"))
+}
+
+// TestOpenaiImageStreamHandlerWrapsJSONResponse covers the non-SSE fallback:
+// a JSON upstream response is wrapped into pseudo-SSE completed events.
+func TestOpenaiImageStreamHandlerWrapsJSONResponse(t *testing.T) {
+	oldMode := gin.Mode()
+	gin.SetMode(gin.TestMode)
+	t.Cleanup(func() { gin.SetMode(oldMode) })
+
+	body := `{"created":1710000000,"data":[{"b64_json":"final","revised_prompt":"draw a cat"}],"usage":{"input_tokens":3,"output_tokens":4,"total_tokens":7,"input_tokens_details":{"image_tokens":2,"text_tokens":1}}}`
+
+	c, recorder, resp, info := newImageTestContext(t, body, "application/json", true)
+
+	usage, err := OpenaiImageStreamHandler(c, info, resp)
+	require.Nil(t, err)
+	require.Equal(t, 3, usage.PromptTokens)
+	require.Equal(t, 4, usage.CompletionTokens)
+	require.Equal(t, 7, usage.TotalTokens)
+	require.Equal(t, 2, usage.PromptTokensDetails.ImageTokens)
+	require.Equal(t, 1, usage.PromptTokensDetails.TextTokens)
+	require.Equal(t, "text/event-stream", recorder.Header().Get("Content-Type"))
+	require.Empty(t, recorder.Header().Get("Content-Length"))
+	require.Contains(t, recorder.Body.String(), `event: image_generation.completed`)
+	require.Contains(t, recorder.Body.String(), `"type":"image_generation.completed"`)
+	require.Contains(t, recorder.Body.String(), `"b64_json":"final"`)
+	require.Contains(t, recorder.Body.String(), `"revised_prompt":"draw a cat"`)
+	require.Contains(t, recorder.Body.String(), `data: [DONE]`)
+}
+
+// TestOpenaiImageHandlersReturnJSONError covers JSON error responses for both
+// entry points: the non-streaming handler and the stream handler's non-SSE
+// fallback. Neither must leak the error body to the client.
+func TestOpenaiImageHandlersReturnJSONError(t *testing.T) {
+	oldMode := gin.Mode()
+	gin.SetMode(gin.TestMode)
+	t.Cleanup(func() { gin.SetMode(oldMode) })
+
+	body := `{"error":{"message":"content moderation failed","type":"upstream_error","code":"content_moderation_failed","status":502}}`
+
+	t.Run("non-streaming handler", func(t *testing.T) {
+		c, recorder, resp, info := newImageTestContext(t, body, "application/json", false)
+
+		usage, err := OpenaiImageHandler(c, info, resp)
+		require.Nil(t, usage)
+		require.NotNil(t, err)
+		require.Equal(t, http.StatusOK, err.StatusCode)
+		oaiError := err.ToOpenAIError()
+		require.Equal(t, "content moderation failed", oaiError.Message)
+		require.Equal(t, "upstream_error", oaiError.Type)
+		require.Equal(t, "content_moderation_failed", oaiError.Code)
+		require.Empty(t, recorder.Body.String())
+	})
+
+	t.Run("stream handler JSON fallback", func(t *testing.T) {
+		c, recorder, resp, info := newImageTestContext(t, body, "application/json", true)
+
+		usage, err := OpenaiImageStreamHandler(c, info, resp)
+		require.Nil(t, usage)
+		require.NotNil(t, err)
+		require.Equal(t, http.StatusOK, err.StatusCode)
+		require.Equal(t, "content moderation failed", err.ToOpenAIError().Message)
+		require.Empty(t, recorder.Body.String())
+	})
+}
+
+// TestOpenaiImageStreamHandlerRecordsUpstreamErrorEvent verifies that an error
+// event inside the SSE stream is recorded as a soft error while the payload is
+// still forwarded to the client.
+func TestOpenaiImageStreamHandlerRecordsUpstreamErrorEvent(t *testing.T) {
+	oldMode := gin.Mode()
+	gin.SetMode(gin.TestMode)
+	t.Cleanup(func() { gin.SetMode(oldMode) })
+
+	oldTimeout := constant.StreamingTimeout
+	constant.StreamingTimeout = 30
+	t.Cleanup(func() { constant.StreamingTimeout = oldTimeout })
+
+	body := strings.Join([]string{
+		`event: image_generation.partial_image`,
+		`data: {"type":"image_generation.partial_image","b64_json":"partial"}`,
+		``,
+		`event: error`,
+		`data: {"type":"upstream_error","error":{"message":"stream error: stream ID 77; INTERNAL_ERROR; received from peer"}}`,
+		``,
+	}, "\n")
+
+	c, recorder, resp, info := newImageTestContext(t, body, "text/event-stream", true)
+
+	usage, err := OpenaiImageStreamHandler(c, info, resp)
+	require.Nil(t, err)
+	require.NotNil(t, usage)
+	require.NotNil(t, info.StreamStatus)
+	require.Equal(t, relaycommon.StreamEndReasonEOF, info.StreamStatus.EndReason)
+	require.True(t, info.StreamStatus.HasErrors())
+	require.Equal(t, 1, info.StreamStatus.TotalErrorCount())
+	require.Contains(t, info.StreamStatus.Errors[0].Message, "INTERNAL_ERROR")
+	// The scanner strips the upstream "event: error" line; the event name is
+	// rebuilt from the JSON "type" field (upstream_error). The error message
+	// is still forwarded in the data: payload (stream ID 77).
+	require.Contains(t, recorder.Body.String(), `event: upstream_error`)
+	require.Contains(t, recorder.Body.String(), `stream ID 77`)
+}

relay/channel/openai/relay-openai.go

@@ -14,12 +14,9 @@ import (
 	relaycommon "github.com/QuantumNous/new-api/relay/common"
 	"github.com/QuantumNous/new-api/relay/helper"
 	"github.com/QuantumNous/new-api/service"
-
 	"github.com/QuantumNous/new-api/types"
 
-	"github.com/bytedance/gopkg/util/gopool"
 	"github.com/gin-gonic/gin"
-	"github.com/gorilla/websocket"
 )
 
 func sendStreamData(c *gin.Context, info *relaycommon.RelayInfo, data string, forceFormat bool, thinkToContent bool) error {
@@ -293,421 +290,3 @@ func OpenaiHandler(c *gin.Context, info *relaycommon.RelayInfo, resp *http.Respo
 
 	return &simpleResponse.Usage, nil
 }
-
-func streamTTSResponse(c *gin.Context, resp *http.Response) {
-	c.Writer.WriteHeaderNow()
-
-	flusher, ok := c.Writer.(http.Flusher)
-	if !ok {
-		logger.LogWarn(c, "streaming not supported")
-		_, err := io.Copy(c.Writer, resp.Body)
-		if err != nil {
-			logger.LogWarn(c, err.Error())
-		}
-		return
-	}
-
-	buffer := make([]byte, 4096)
-	for {
-		n, err := resp.Body.Read(buffer)
-		//logger.LogInfo(c, fmt.Sprintf("streamTTSResponse read %d bytes", n))
-		if n > 0 {
-			if _, writeErr := c.Writer.Write(buffer[:n]); writeErr != nil {
-				logger.LogError(c, writeErr.Error())
-				break
-			}
-			flusher.Flush()
-		}
-		if err != nil {
-			if err != io.EOF {
-				logger.LogError(c, err.Error())
-			}
-			break
-		}
-	}
-}
-
-func OpenaiRealtimeHandler(c *gin.Context, info *relaycommon.RelayInfo) (*types.NewAPIError, *dto.RealtimeUsage) {
-	if info == nil || info.ClientWs == nil || info.TargetWs == nil {
-		return types.NewError(fmt.Errorf("invalid websocket connection"), types.ErrorCodeBadResponse), nil
-	}
-
-	info.IsStream = true
-	clientConn := info.ClientWs
-	targetConn := info.TargetWs
-
-	clientClosed := make(chan struct{})
-	targetClosed := make(chan struct{})
-	sendChan := make(chan []byte, 100)
-	receiveChan := make(chan []byte, 100)
-	errChan := make(chan error, 2)
-
-	usage := &dto.RealtimeUsage{}
-	localUsage := &dto.RealtimeUsage{}
-	sumUsage := &dto.RealtimeUsage{}
-
-	gopool.Go(func() {
-		defer func() {
-			if r := recover(); r != nil {
-				errChan <- fmt.Errorf("panic in client reader: %v", r)
-			}
-		}()
-		for {
-			select {
-			case <-c.Done():
-				return
-			default:
-				_, message, err := clientConn.ReadMessage()
-				if err != nil {
-					if !websocket.IsCloseError(err, websocket.CloseNormalClosure, websocket.CloseGoingAway) {
-						errChan <- fmt.Errorf("error reading from client: %v", err)
-					}
-					close(clientClosed)
-					return
-				}
-
-				realtimeEvent := &dto.RealtimeEvent{}
-				err = common.Unmarshal(message, realtimeEvent)
-				if err != nil {
-					errChan <- fmt.Errorf("error unmarshalling message: %v", err)
-					return
-				}
-
-				if realtimeEvent.Type == dto.RealtimeEventTypeSessionUpdate {
-					if realtimeEvent.Session != nil {
-						if realtimeEvent.Session.Tools != nil {
-							info.RealtimeTools = realtimeEvent.Session.Tools
-						}
-					}
-				}
-
-				textToken, audioToken, err := service.CountTokenRealtime(info, *realtimeEvent, info.UpstreamModelName)
-				if err != nil {
-					errChan <- fmt.Errorf("error counting text token: %v", err)
-					return
-				}
-				logger.LogInfo(c, fmt.Sprintf("type: %s, textToken: %d, audioToken: %d", realtimeEvent.Type, textToken, audioToken))
-				localUsage.TotalTokens += textToken + audioToken
-				localUsage.InputTokens += textToken + audioToken
-				localUsage.InputTokenDetails.TextTokens += textToken
-				localUsage.InputTokenDetails.AudioTokens += audioToken
-
-				err = helper.WssString(c, targetConn, string(message))
-				if err != nil {
-					errChan <- fmt.Errorf("error writing to target: %v", err)
-					return
-				}
-
-				select {
-				case sendChan <- message:
-				default:
-				}
-			}
-		}
-	})
-
-	gopool.Go(func() {
-		defer func() {
-			if r := recover(); r != nil {
-				errChan <- fmt.Errorf("panic in target reader: %v", r)
-			}
-		}()
-		for {
-			select {
-			case <-c.Done():
-				return
-			default:
-				_, message, err := targetConn.ReadMessage()
-				if err != nil {
-					if !websocket.IsCloseError(err, websocket.CloseNormalClosure, websocket.CloseGoingAway) {
-						errChan <- fmt.Errorf("error reading from target: %v", err)
-					}
-					close(targetClosed)
-					return
-				}
-				info.SetFirstResponseTime()
-				realtimeEvent := &dto.RealtimeEvent{}
-				err = common.Unmarshal(message, realtimeEvent)
-				if err != nil {
-					errChan <- fmt.Errorf("error unmarshalling message: %v", err)
-					return
-				}
-
-				if realtimeEvent.Type == dto.RealtimeEventTypeResponseDone {
-					realtimeUsage := realtimeEvent.Response.Usage
-					if realtimeUsage != nil {
-						usage.TotalTokens += realtimeUsage.TotalTokens
-						usage.InputTokens += realtimeUsage.InputTokens
-						usage.OutputTokens += realtimeUsage.OutputTokens
-						usage.InputTokenDetails.AudioTokens += realtimeUsage.InputTokenDetails.AudioTokens
-						usage.InputTokenDetails.CachedTokens += realtimeUsage.InputTokenDetails.CachedTokens
-						usage.InputTokenDetails.TextTokens += realtimeUsage.InputTokenDetails.TextTokens
-						usage.OutputTokenDetails.AudioTokens += realtimeUsage.OutputTokenDetails.AudioTokens
-						usage.OutputTokenDetails.TextTokens += realtimeUsage.OutputTokenDetails.TextTokens
-						err := preConsumeUsage(c, info, usage, sumUsage)
-						if err != nil {
-							errChan <- fmt.Errorf("error consume usage: %v", err)
-							return
-						}
-						// 本次计费完成，清除
-						usage = &dto.RealtimeUsage{}
-
-						localUsage = &dto.RealtimeUsage{}
-					} else {
-						textToken, audioToken, err := service.CountTokenRealtime(info, *realtimeEvent, info.UpstreamModelName)
-						if err != nil {
-							errChan <- fmt.Errorf("error counting text token: %v", err)
-							return
-						}
-						logger.LogInfo(c, fmt.Sprintf("type: %s, textToken: %d, audioToken: %d", realtimeEvent.Type, textToken, audioToken))
-						localUsage.TotalTokens += textToken + audioToken
-						info.IsFirstRequest = false
-						localUsage.InputTokens += textToken + audioToken
-						localUsage.InputTokenDetails.TextTokens += textToken
-						localUsage.InputTokenDetails.AudioTokens += audioToken
-						err = preConsumeUsage(c, info, localUsage, sumUsage)
-						if err != nil {
-							errChan <- fmt.Errorf("error consume usage: %v", err)
-							return
-						}
-						// 本次计费完成，清除
-						localUsage = &dto.RealtimeUsage{}
-						// print now usage
-					}
-					logger.LogInfo(c, fmt.Sprintf("realtime streaming sumUsage: %v", sumUsage))
-					logger.LogInfo(c, fmt.Sprintf("realtime streaming localUsage: %v", localUsage))
-					logger.LogInfo(c, fmt.Sprintf("realtime streaming localUsage: %v", localUsage))
-
-				} else if realtimeEvent.Type == dto.RealtimeEventTypeSessionUpdated || realtimeEvent.Type == dto.RealtimeEventTypeSessionCreated {
-					realtimeSession := realtimeEvent.Session
-					if realtimeSession != nil {
-						// update audio format
-						info.InputAudioFormat = common.GetStringIfEmpty(realtimeSession.InputAudioFormat, info.InputAudioFormat)
-						info.OutputAudioFormat = common.GetStringIfEmpty(realtimeSession.OutputAudioFormat, info.OutputAudioFormat)
-					}
-				} else {
-					textToken, audioToken, err := service.CountTokenRealtime(info, *realtimeEvent, info.UpstreamModelName)
-					if err != nil {
-						errChan <- fmt.Errorf("error counting text token: %v", err)
-						return
-					}
-					logger.LogInfo(c, fmt.Sprintf("type: %s, textToken: %d, audioToken: %d", realtimeEvent.Type, textToken, audioToken))
-					localUsage.TotalTokens += textToken + audioToken
-					localUsage.OutputTokens += textToken + audioToken
-					localUsage.OutputTokenDetails.TextTokens += textToken
-					localUsage.OutputTokenDetails.AudioTokens += audioToken
-				}
-
-				err = helper.WssString(c, clientConn, string(message))
-				if err != nil {
-					errChan <- fmt.Errorf("error writing to client: %v", err)
-					return
-				}
-
-				select {
-				case receiveChan <- message:
-				default:
-				}
-			}
-		}
-	})
-
-	select {
-	case <-clientClosed:
-	case <-targetClosed:
-	case err := <-errChan:
-		//return service.OpenAIErrorWrapper(err, "realtime_error", http.StatusInternalServerError), nil
-		logger.LogError(c, "realtime error: "+err.Error())
-	case <-c.Done():
-	}
-
-	if usage.TotalTokens != 0 {
-		_ = preConsumeUsage(c, info, usage, sumUsage)
-	}
-
-	if localUsage.TotalTokens != 0 {
-		_ = preConsumeUsage(c, info, localUsage, sumUsage)
-	}
-
-	// check usage total tokens, if 0, use local usage
-
-	return nil, sumUsage
-}
-
-func preConsumeUsage(ctx *gin.Context, info *relaycommon.RelayInfo, usage *dto.RealtimeUsage, totalUsage *dto.RealtimeUsage) error {
-	if usage == nil || totalUsage == nil {
-		return fmt.Errorf("invalid usage pointer")
-	}
-
-	totalUsage.TotalTokens += usage.TotalTokens
-	totalUsage.InputTokens += usage.InputTokens
-	totalUsage.OutputTokens += usage.OutputTokens
-	totalUsage.InputTokenDetails.CachedTokens += usage.InputTokenDetails.CachedTokens
-	totalUsage.InputTokenDetails.TextTokens += usage.InputTokenDetails.TextTokens
-	totalUsage.InputTokenDetails.AudioTokens += usage.InputTokenDetails.AudioTokens
-	totalUsage.OutputTokenDetails.TextTokens += usage.OutputTokenDetails.TextTokens
-	totalUsage.OutputTokenDetails.AudioTokens += usage.OutputTokenDetails.AudioTokens
-	// clear usage
-	err := service.PreWssConsumeQuota(ctx, info, usage)
-	return err
-}
-
-func OpenaiHandlerWithUsage(c *gin.Context, info *relaycommon.RelayInfo, resp *http.Response) (*dto.Usage, *types.NewAPIError) {
-	defer service.CloseResponseBodyGracefully(resp)
-
-	responseBody, err := io.ReadAll(resp.Body)
-	if err != nil {
-		return nil, types.NewOpenAIError(err, types.ErrorCodeReadResponseBodyFailed, http.StatusInternalServerError)
-	}
-
-	var usageResp dto.SimpleResponse
-	err = common.Unmarshal(responseBody, &usageResp)
-	if err != nil {
-		return nil, types.NewOpenAIError(err, types.ErrorCodeBadResponseBody, http.StatusInternalServerError)
-	}
-
-	// 写入新的 response body
-	service.IOCopyBytesGracefully(c, resp, responseBody)
-
-	// Once we've written to the client, we should not return errors anymore
-	// because the upstream has already consumed resources and returned content
-	// We should still perform billing even if parsing fails
-	// format
-	if usageResp.InputTokens > 0 {
-		usageResp.PromptTokens += usageResp.InputTokens
-	}
-	if usageResp.OutputTokens > 0 {
-		usageResp.CompletionTokens += usageResp.OutputTokens
-	}
-	if usageResp.InputTokensDetails != nil {
-		usageResp.PromptTokensDetails.ImageTokens += usageResp.InputTokensDetails.ImageTokens
-		usageResp.PromptTokensDetails.TextTokens += usageResp.InputTokensDetails.TextTokens
-	}
-	applyUsagePostProcessing(info, &usageResp.Usage, responseBody)
-	return &usageResp.Usage, nil
-}
-
-func applyUsagePostProcessing(info *relaycommon.RelayInfo, usage *dto.Usage, responseBody []byte) {
-	if info == nil || usage == nil {
-		return
-	}
-
-	switch info.ChannelType {
-	case constant.ChannelTypeDeepSeek:
-		if usage.PromptTokensDetails.CachedTokens == 0 && usage.PromptCacheHitTokens != 0 {
-			usage.PromptTokensDetails.CachedTokens = usage.PromptCacheHitTokens
-		}
-	case constant.ChannelTypeZhipu_v4:
-		// 智普的cached_tokens在标准位置: usage.prompt_tokens_details.cached_tokens
-		if usage.PromptTokensDetails.CachedTokens == 0 {
-			if usage.InputTokensDetails != nil && usage.InputTokensDetails.CachedTokens > 0 {
-				usage.PromptTokensDetails.CachedTokens = usage.InputTokensDetails.CachedTokens
-			} else if cachedTokens, ok := extractCachedTokensFromBody(responseBody); ok {
-				usage.PromptTokensDetails.CachedTokens = cachedTokens
-			} else if usage.PromptCacheHitTokens > 0 {
-				usage.PromptTokensDetails.CachedTokens = usage.PromptCacheHitTokens
-			}
-		}
-	case constant.ChannelTypeMoonshot:
-		// Moonshot的cached_tokens在非标准位置: choices[].usage.cached_tokens
-		if usage.PromptTokensDetails.CachedTokens == 0 {
-			if usage.InputTokensDetails != nil && usage.InputTokensDetails.CachedTokens > 0 {
-				usage.PromptTokensDetails.CachedTokens = usage.InputTokensDetails.CachedTokens
-			} else if cachedTokens, ok := extractMoonshotCachedTokensFromBody(responseBody); ok {
-				usage.PromptTokensDetails.CachedTokens = cachedTokens
-			} else if cachedTokens, ok := extractCachedTokensFromBody(responseBody); ok {
-				usage.PromptTokensDetails.CachedTokens = cachedTokens
-			} else if usage.PromptCacheHitTokens > 0 {
-				usage.PromptTokensDetails.CachedTokens = usage.PromptCacheHitTokens
-			}
-		}
-	case constant.ChannelTypeOpenAI:
-		if usage.PromptTokensDetails.CachedTokens == 0 {
-			if cachedTokens, ok := extractLlamaCachedTokensFromBody(responseBody); ok {
-				usage.PromptTokensDetails.CachedTokens = cachedTokens
-			}
-		}
-	}
-}
-
-func extractCachedTokensFromBody(body []byte) (int, bool) {
-	if len(body) == 0 {
-		return 0, false
-	}
-
-	var payload struct {
-		Usage struct {
-			PromptTokensDetails struct {
-				CachedTokens *int `json:"cached_tokens"`
-			} `json:"prompt_tokens_details"`
-			CachedTokens         *int `json:"cached_tokens"`
-			PromptCacheHitTokens *int `json:"prompt_cache_hit_tokens"`
-		} `json:"usage"`
-	}
-
-	if err := common.Unmarshal(body, &payload); err != nil {
-		return 0, false
-	}
-
-	if payload.Usage.PromptTokensDetails.CachedTokens != nil {
-		return *payload.Usage.PromptTokensDetails.CachedTokens, true
-	}
-	if payload.Usage.CachedTokens != nil {
-		return *payload.Usage.CachedTokens, true
-	}
-	if payload.Usage.PromptCacheHitTokens != nil {
-		return *payload.Usage.PromptCacheHitTokens, true
-	}
-	return 0, false
-}
-
-// extractMoonshotCachedTokensFromBody 从Moonshot的非标准位置提取cached_tokens
-// Moonshot的流式响应格式: {"choices":[{"usage":{"cached_tokens":111}}]}
-func extractMoonshotCachedTokensFromBody(body []byte) (int, bool) {
-	if len(body) == 0 {
-		return 0, false
-	}
-
-	var payload struct {
-		Choices []struct {
-			Usage struct {
-				CachedTokens *int `json:"cached_tokens"`
-			} `json:"usage"`
-		} `json:"choices"`
-	}
-
-	if err := common.Unmarshal(body, &payload); err != nil {
-		return 0, false
-	}
-
-	// 遍历choices查找cached_tokens
-	for _, choice := range payload.Choices {
-		if choice.Usage.CachedTokens != nil && *choice.Usage.CachedTokens > 0 {
-			return *choice.Usage.CachedTokens, true
-		}
-	}
-
-	return 0, false
-}
-
-// extractLlamaCachedTokensFromBody 从llama.cpp的非标准位置提取cache_n
-func extractLlamaCachedTokensFromBody(body []byte) (int, bool) {
-	if len(body) == 0 {
-		return 0, false
-	}
-
-	var payload struct {
-		Timings struct {
-			CachedTokens *int `json:"cache_n"`
-		} `json:"timings"`
-	}
-
-	if err := common.Unmarshal(body, &payload); err != nil {
-		return 0, false
-	}
-
-	if payload.Timings.CachedTokens == nil {
-		return 0, false
-	}
-	return *payload.Timings.CachedTokens, true
-}

relay/channel/openai/relay_image.go

@@ -0,0 +1,287 @@
+package openai
+
+import (
+	"encoding/json"
+	"fmt"
+	"io"
+	"net/http"
+	"strings"
+	"time"
+
+	"github.com/QuantumNous/new-api/common"
+	"github.com/QuantumNous/new-api/dto"
+	"github.com/QuantumNous/new-api/logger"
+	relaycommon "github.com/QuantumNous/new-api/relay/common"
+	"github.com/QuantumNous/new-api/relay/helper"
+	"github.com/QuantumNous/new-api/service"
+	"github.com/QuantumNous/new-api/types"
+
+	"github.com/gin-gonic/gin"
+)
+
+// OpenaiImageHandler handles non-streaming OpenAI image responses
+// (generations/edits), returning the parsed usage for billing.
+func OpenaiImageHandler(c *gin.Context, info *relaycommon.RelayInfo, resp *http.Response) (*dto.Usage, *types.NewAPIError) {
+	defer service.CloseResponseBodyGracefully(resp)
+
+	responseBody, err := io.ReadAll(resp.Body)
+	if err != nil {
+		return nil, types.NewOpenAIError(err, types.ErrorCodeReadResponseBodyFailed, http.StatusInternalServerError)
+	}
+
+	var usageResp dto.SimpleResponse
+	err = common.Unmarshal(responseBody, &usageResp)
+	if err != nil {
+		return nil, types.NewOpenAIError(err, types.ErrorCodeBadResponseBody, http.StatusInternalServerError)
+	}
+
+	if oaiError := usageResp.GetOpenAIError(); oaiError != nil && oaiError.Type != "" {
+		return nil, types.WithOpenAIError(*oaiError, resp.StatusCode)
+	}
+
+	// 写入新的 response body
+	service.IOCopyBytesGracefully(c, resp, responseBody)
+
+	normalizeOpenAIUsage(&usageResp.Usage)
+	applyUsagePostProcessing(info, &usageResp.Usage, responseBody)
+	return &usageResp.Usage, nil
+}
+
+// normalizeOpenAIUsage maps the OpenAI Images usage shape (input_tokens /
+// output_tokens / input_tokens_details) onto the canonical prompt/completion
+// fields. It is used only on the OpenAI image relay paths (generations/edits,
+// streaming and non-streaming): the image API never returns prompt_tokens /
+// completion_tokens, so the overwrite (=) semantics here are equivalent to the
+// previous additive (+=) behavior while avoiding any future double-counting if
+// both field sets are ever populated. Do not reuse this on chat/embedding paths
+// without revisiting the overwrite semantics.
+func normalizeOpenAIUsage(usage *dto.Usage) {
+	if usage == nil {
+		return
+	}
+	if usage.InputTokens != 0 {
+		usage.PromptTokens = usage.InputTokens
+	}
+	if usage.OutputTokens != 0 {
+		usage.CompletionTokens = usage.OutputTokens
+	}
+	if usage.InputTokensDetails != nil {
+		usage.PromptTokensDetails.CachedTokens = usage.InputTokensDetails.CachedTokens
+		usage.PromptTokensDetails.CachedCreationTokens = usage.InputTokensDetails.CachedCreationTokens
+		usage.PromptTokensDetails.ImageTokens = usage.InputTokensDetails.ImageTokens
+		usage.PromptTokensDetails.TextTokens = usage.InputTokensDetails.TextTokens
+		usage.PromptTokensDetails.AudioTokens = usage.InputTokensDetails.AudioTokens
+	}
+	if usage.TotalTokens == 0 {
+		usage.TotalTokens = usage.PromptTokens + usage.CompletionTokens
+	}
+}
+
+func OpenaiImageStreamHandler(c *gin.Context, info *relaycommon.RelayInfo, resp *http.Response) (*dto.Usage, *types.NewAPIError) {
+	if resp == nil || resp.Body == nil {
+		logger.LogError(c, "invalid image stream response")
+		return nil, types.NewOpenAIError(fmt.Errorf("invalid response"), types.ErrorCodeBadResponse, http.StatusInternalServerError)
+	}
+
+	contentType := strings.ToLower(resp.Header.Get("Content-Type"))
+	if resp.StatusCode < http.StatusOK || resp.StatusCode >= http.StatusMultipleChoices {
+		return OpenaiImageHandler(c, info, resp)
+	}
+	if !strings.Contains(contentType, "text/event-stream") {
+		return OpenaiImageJSONAsStreamHandler(c, info, resp)
+	}
+	// Reuse the shared streaming engine (helper.StreamScannerHandler) so the
+	// image streaming path gets the same ping keepalive, streaming-timeout
+	// watchdog, client-disconnect detection, panic recovery and goroutine
+	// cleanup as every other relay stream. The scanner delivers only the
+	// "data:" payload, so the SSE "event:" line is rebuilt from the JSON "type"
+	// field (real OpenAI image events keep event == type).
+	usage := &dto.Usage{}
+	var lastStreamData []byte
+
+	helper.StreamScannerHandler(c, resp, info, func(data string, sr *helper.StreamResult) {
+		raw := common.StringToByteSlice(data)
+		lastStreamData = raw
+		if isOpenAIImageStreamErrorEvent(raw) {
+			// Record the error as a soft error; the scanner drives the final
+			// EndReason. HasErrors() flags the failure for logging/handling.
+			sr.Error(fmt.Errorf("%s", extractOpenAIImageStreamErrorMessage(raw)))
+		}
+		var usageResp dto.SimpleResponse
+		if err := common.Unmarshal(raw, &usageResp); err == nil {
+			normalizeOpenAIUsage(&usageResp.Usage)
+			if service.ValidUsage(&usageResp.Usage) {
+				usage = &usageResp.Usage
+			}
+		}
+		writeOpenaiImageStreamChunk(c, raw)
+	})
+
+	// StreamScannerHandler consumes the upstream [DONE]; re-emit it so the
+	// client still receives a terminal data: [DONE].
+	if info != nil && info.StreamStatus != nil && info.StreamStatus.EndReason == relaycommon.StreamEndReasonDone {
+		helper.Done(c)
+	}
+
+	applyUsagePostProcessing(info, usage, lastStreamData)
+	return usage, nil
+}
+
+// writeOpenaiImageStreamChunk rebuilds the SSE frame for an image stream chunk:
+// it emits an "event:" line derived from the JSON "type" field (when present)
+// followed by the verbatim "data:" payload, mirroring helper.ResponseChunkData.
+func writeOpenaiImageStreamChunk(c *gin.Context, data []byte) {
+	var payload struct {
+		Type string `json:"type"`
+	}
+	_ = common.Unmarshal(data, &payload)
+	if eventName := strings.TrimSpace(payload.Type); eventName != "" {
+		c.Render(-1, common.CustomEvent{Data: fmt.Sprintf("event: %s\n", eventName)})
+	}
+	c.Render(-1, common.CustomEvent{Data: "data: " + string(data)})
+	_ = helper.FlushWriter(c)
+}
+
+// isOpenAIImageStreamErrorEvent detects upstream error chunks by JSON content
+// only ("type" of error/upstream_error, or a non-empty "error" field). The SSE
+// "event:" line is not available here: StreamScannerHandler delivers only the
+// "data:" payload. A payload carrying just a "message" key is deliberately NOT
+// treated as an error to avoid false positives.
+func isOpenAIImageStreamErrorEvent(data []byte) bool {
+	if !json.Valid(data) {
+		return false
+	}
+	var payload struct {
+		Type  string          `json:"type"`
+		Error json.RawMessage `json:"error"`
+	}
+	if err := common.Unmarshal(data, &payload); err != nil {
+		return false
+	}
+	payloadType := strings.ToLower(strings.TrimSpace(payload.Type))
+	return payloadType == "error" || payloadType == "upstream_error" || len(payload.Error) > 0
+}
+
+func extractOpenAIImageStreamErrorMessage(data []byte) string {
+	if len(data) == 0 || !json.Valid(data) {
+		return "upstream image stream returned error event"
+	}
+	var payload struct {
+		Message string          `json:"message"`
+		Error   json.RawMessage `json:"error"`
+	}
+	if err := common.Unmarshal(data, &payload); err != nil {
+		return "upstream image stream returned error event"
+	}
+	if msg := strings.TrimSpace(payload.Message); msg != "" {
+		return msg
+	}
+	if len(payload.Error) > 0 {
+		var nested struct {
+			Message string `json:"message"`
+		}
+		if err := common.Unmarshal(payload.Error, &nested); err == nil {
+			if msg := strings.TrimSpace(nested.Message); msg != "" {
+				return msg
+			}
+		}
+		if msg := strings.TrimSpace(common.JsonRawMessageToString(payload.Error)); msg != "" {
+			return msg
+		}
+	}
+	return "upstream image stream returned error event"
+}
+
+func OpenaiImageJSONAsStreamHandler(c *gin.Context, info *relaycommon.RelayInfo, resp *http.Response) (*dto.Usage, *types.NewAPIError) {
+	defer service.CloseResponseBodyGracefully(resp)
+
+	responseBody, err := io.ReadAll(resp.Body)
+	if err != nil {
+		return nil, types.NewOpenAIError(err, types.ErrorCodeReadResponseBodyFailed, http.StatusInternalServerError)
+	}
+
+	var imageResp dto.ImageResponse
+	if err := common.Unmarshal(responseBody, &imageResp); err != nil {
+		return nil, types.NewOpenAIError(err, types.ErrorCodeBadResponseBody, http.StatusInternalServerError)
+	}
+
+	var usageResp dto.SimpleResponse
+	_ = common.Unmarshal(responseBody, &usageResp)
+	if oaiError := usageResp.GetOpenAIError(); oaiError != nil && oaiError.Type != "" {
+		return nil, types.WithOpenAIError(*oaiError, resp.StatusCode)
+	}
+	normalizeOpenAIUsage(&usageResp.Usage)
+	applyUsagePostProcessing(info, &usageResp.Usage, responseBody)
+
+	helper.SetEventStreamHeaders(c)
+	c.Status(http.StatusOK)
+
+	created := imageResp.Created
+	if created == 0 {
+		created = time.Now().Unix()
+	}
+	if info != nil {
+		info.SetFirstResponseTime()
+	}
+	for _, image := range imageResp.Data {
+		payload := map[string]any{
+			"type":       "image_generation.completed",
+			"created_at": created,
+		}
+		if image.Url != "" {
+			payload["url"] = image.Url
+		}
+		if image.B64Json != "" {
+			payload["b64_json"] = image.B64Json
+		}
+		if image.RevisedPrompt != "" {
+			payload["revised_prompt"] = image.RevisedPrompt
+		}
+		if service.ValidUsage(&usageResp.Usage) {
+			payload["usage"] = usageResp.Usage
+		}
+		if err := writeOpenaiImageStreamPayload(c, "image_generation.completed", payload); err != nil {
+			if info != nil && info.StreamStatus != nil {
+				info.StreamStatus.SetEndReason(relaycommon.StreamEndReasonClientGone, err)
+			}
+			return &usageResp.Usage, nil
+		}
+	}
+	if err := writeOpenaiImageStreamDone(c); err != nil {
+		if info != nil && info.StreamStatus != nil {
+			info.StreamStatus.SetEndReason(relaycommon.StreamEndReasonClientGone, err)
+		}
+		return &usageResp.Usage, nil
+	}
+	if info != nil {
+		info.ReceivedResponseCount += len(imageResp.Data)
+		if info.StreamStatus == nil {
+			info.StreamStatus = relaycommon.NewStreamStatus()
+		}
+		info.StreamStatus.SetEndReason(relaycommon.StreamEndReasonDone, nil)
+	}
+	return &usageResp.Usage, nil
+}
+
+func writeOpenaiImageStreamPayload(c *gin.Context, eventName string, payload any) error {
+	data, err := common.Marshal(payload)
+	if err != nil {
+		return err
+	}
+	if eventName != "" {
+		if _, err := fmt.Fprintf(c.Writer, "event: %s\n", eventName); err != nil {
+			return err
+		}
+	}
+	if _, err := fmt.Fprintf(c.Writer, "data: %s\n\n", data); err != nil {
+		return err
+	}
+	return helper.FlushWriter(c)
+}
+
+func writeOpenaiImageStreamDone(c *gin.Context) error {
+	if _, err := fmt.Fprint(c.Writer, "data: [DONE]\n\n"); err != nil {
+		return err
+	}
+	return helper.FlushWriter(c)
+}

relay/channel/openai/relay_realtime.go

@@ -0,0 +1,242 @@
+package openai
+
+import (
+	"fmt"
+
+	"github.com/QuantumNous/new-api/common"
+	"github.com/QuantumNous/new-api/dto"
+	"github.com/QuantumNous/new-api/logger"
+	relaycommon "github.com/QuantumNous/new-api/relay/common"
+	"github.com/QuantumNous/new-api/relay/helper"
+	"github.com/QuantumNous/new-api/service"
+	"github.com/QuantumNous/new-api/types"
+
+	"github.com/bytedance/gopkg/util/gopool"
+	"github.com/gin-gonic/gin"
+	"github.com/gorilla/websocket"
+)
+
+func OpenaiRealtimeHandler(c *gin.Context, info *relaycommon.RelayInfo) (*types.NewAPIError, *dto.RealtimeUsage) {
+	if info == nil || info.ClientWs == nil || info.TargetWs == nil {
+		return types.NewError(fmt.Errorf("invalid websocket connection"), types.ErrorCodeBadResponse), nil
+	}
+
+	info.IsStream = true
+	clientConn := info.ClientWs
+	targetConn := info.TargetWs
+
+	clientClosed := make(chan struct{})
+	targetClosed := make(chan struct{})
+	sendChan := make(chan []byte, 100)
+	receiveChan := make(chan []byte, 100)
+	errChan := make(chan error, 2)
+
+	usage := &dto.RealtimeUsage{}
+	localUsage := &dto.RealtimeUsage{}
+	sumUsage := &dto.RealtimeUsage{}
+
+	gopool.Go(func() {
+		defer func() {
+			if r := recover(); r != nil {
+				errChan <- fmt.Errorf("panic in client reader: %v", r)
+			}
+		}()
+		for {
+			select {
+			case <-c.Done():
+				return
+			default:
+				_, message, err := clientConn.ReadMessage()
+				if err != nil {
+					if !websocket.IsCloseError(err, websocket.CloseNormalClosure, websocket.CloseGoingAway) {
+						errChan <- fmt.Errorf("error reading from client: %v", err)
+					}
+					close(clientClosed)
+					return
+				}
+
+				realtimeEvent := &dto.RealtimeEvent{}
+				err = common.Unmarshal(message, realtimeEvent)
+				if err != nil {
+					errChan <- fmt.Errorf("error unmarshalling message: %v", err)
+					return
+				}
+
+				if realtimeEvent.Type == dto.RealtimeEventTypeSessionUpdate {
+					if realtimeEvent.Session != nil {
+						if realtimeEvent.Session.Tools != nil {
+							info.RealtimeTools = realtimeEvent.Session.Tools
+						}
+					}
+				}
+
+				textToken, audioToken, err := service.CountTokenRealtime(info, *realtimeEvent, info.UpstreamModelName)
+				if err != nil {
+					errChan <- fmt.Errorf("error counting text token: %v", err)
+					return
+				}
+				logger.LogInfo(c, fmt.Sprintf("type: %s, textToken: %d, audioToken: %d", realtimeEvent.Type, textToken, audioToken))
+				localUsage.TotalTokens += textToken + audioToken
+				localUsage.InputTokens += textToken + audioToken
+				localUsage.InputTokenDetails.TextTokens += textToken
+				localUsage.InputTokenDetails.AudioTokens += audioToken
+
+				err = helper.WssString(c, targetConn, string(message))
+				if err != nil {
+					errChan <- fmt.Errorf("error writing to target: %v", err)
+					return
+				}
+
+				select {
+				case sendChan <- message:
+				default:
+				}
+			}
+		}
+	})
+
+	gopool.Go(func() {
+		defer func() {
+			if r := recover(); r != nil {
+				errChan <- fmt.Errorf("panic in target reader: %v", r)
+			}
+		}()
+		for {
+			select {
+			case <-c.Done():
+				return
+			default:
+				_, message, err := targetConn.ReadMessage()
+				if err != nil {
+					if !websocket.IsCloseError(err, websocket.CloseNormalClosure, websocket.CloseGoingAway) {
+						errChan <- fmt.Errorf("error reading from target: %v", err)
+					}
+					close(targetClosed)
+					return
+				}
+				info.SetFirstResponseTime()
+				realtimeEvent := &dto.RealtimeEvent{}
+				err = common.Unmarshal(message, realtimeEvent)
+				if err != nil {
+					errChan <- fmt.Errorf("error unmarshalling message: %v", err)
+					return
+				}
+
+				if realtimeEvent.Type == dto.RealtimeEventTypeResponseDone {
+					realtimeUsage := realtimeEvent.Response.Usage
+					if realtimeUsage != nil {
+						usage.TotalTokens += realtimeUsage.TotalTokens
+						usage.InputTokens += realtimeUsage.InputTokens
+						usage.OutputTokens += realtimeUsage.OutputTokens
+						usage.InputTokenDetails.AudioTokens += realtimeUsage.InputTokenDetails.AudioTokens
+						usage.InputTokenDetails.CachedTokens += realtimeUsage.InputTokenDetails.CachedTokens
+						usage.InputTokenDetails.TextTokens += realtimeUsage.InputTokenDetails.TextTokens
+						usage.OutputTokenDetails.AudioTokens += realtimeUsage.OutputTokenDetails.AudioTokens
+						usage.OutputTokenDetails.TextTokens += realtimeUsage.OutputTokenDetails.TextTokens
+						err := preConsumeUsage(c, info, usage, sumUsage)
+						if err != nil {
+							errChan <- fmt.Errorf("error consume usage: %v", err)
+							return
+						}
+						// 本次计费完成，清除
+						usage = &dto.RealtimeUsage{}
+
+						localUsage = &dto.RealtimeUsage{}
+					} else {
+						textToken, audioToken, err := service.CountTokenRealtime(info, *realtimeEvent, info.UpstreamModelName)
+						if err != nil {
+							errChan <- fmt.Errorf("error counting text token: %v", err)
+							return
+						}
+						logger.LogInfo(c, fmt.Sprintf("type: %s, textToken: %d, audioToken: %d", realtimeEvent.Type, textToken, audioToken))
+						localUsage.TotalTokens += textToken + audioToken
+						info.IsFirstRequest = false
+						localUsage.InputTokens += textToken + audioToken
+						localUsage.InputTokenDetails.TextTokens += textToken
+						localUsage.InputTokenDetails.AudioTokens += audioToken
+						err = preConsumeUsage(c, info, localUsage, sumUsage)
+						if err != nil {
+							errChan <- fmt.Errorf("error consume usage: %v", err)
+							return
+						}
+						// 本次计费完成，清除
+						localUsage = &dto.RealtimeUsage{}
+						// print now usage
+					}
+					logger.LogInfo(c, fmt.Sprintf("realtime streaming sumUsage: %v", sumUsage))
+					logger.LogInfo(c, fmt.Sprintf("realtime streaming localUsage: %v", localUsage))
+					logger.LogInfo(c, fmt.Sprintf("realtime streaming localUsage: %v", localUsage))
+
+				} else if realtimeEvent.Type == dto.RealtimeEventTypeSessionUpdated || realtimeEvent.Type == dto.RealtimeEventTypeSessionCreated {
+					realtimeSession := realtimeEvent.Session
+					if realtimeSession != nil {
+						// update audio format
+						info.InputAudioFormat = common.GetStringIfEmpty(realtimeSession.InputAudioFormat, info.InputAudioFormat)
+						info.OutputAudioFormat = common.GetStringIfEmpty(realtimeSession.OutputAudioFormat, info.OutputAudioFormat)
+					}
+				} else {
+					textToken, audioToken, err := service.CountTokenRealtime(info, *realtimeEvent, info.UpstreamModelName)
+					if err != nil {
+						errChan <- fmt.Errorf("error counting text token: %v", err)
+						return
+					}
+					logger.LogInfo(c, fmt.Sprintf("type: %s, textToken: %d, audioToken: %d", realtimeEvent.Type, textToken, audioToken))
+					localUsage.TotalTokens += textToken + audioToken
+					localUsage.OutputTokens += textToken + audioToken
+					localUsage.OutputTokenDetails.TextTokens += textToken
+					localUsage.OutputTokenDetails.AudioTokens += audioToken
+				}
+
+				err = helper.WssString(c, clientConn, string(message))
+				if err != nil {
+					errChan <- fmt.Errorf("error writing to client: %v", err)
+					return
+				}
+
+				select {
+				case receiveChan <- message:
+				default:
+				}
+			}
+		}
+	})
+
+	select {
+	case <-clientClosed:
+	case <-targetClosed:
+	case err := <-errChan:
+		//return service.OpenAIErrorWrapper(err, "realtime_error", http.StatusInternalServerError), nil
+		logger.LogError(c, "realtime error: "+err.Error())
+	case <-c.Done():
+	}
+
+	if usage.TotalTokens != 0 {
+		_ = preConsumeUsage(c, info, usage, sumUsage)
+	}
+
+	if localUsage.TotalTokens != 0 {
+		_ = preConsumeUsage(c, info, localUsage, sumUsage)
+	}
+
+	// check usage total tokens, if 0, use local usage
+
+	return nil, sumUsage
+}
+
+func preConsumeUsage(ctx *gin.Context, info *relaycommon.RelayInfo, usage *dto.RealtimeUsage, totalUsage *dto.RealtimeUsage) error {
+	if usage == nil || totalUsage == nil {
+		return fmt.Errorf("invalid usage pointer")
+	}
+
+	totalUsage.TotalTokens += usage.TotalTokens
+	totalUsage.InputTokens += usage.InputTokens
+	totalUsage.OutputTokens += usage.OutputTokens
+	totalUsage.InputTokenDetails.CachedTokens += usage.InputTokenDetails.CachedTokens
+	totalUsage.InputTokenDetails.TextTokens += usage.InputTokenDetails.TextTokens
+	totalUsage.InputTokenDetails.AudioTokens += usage.InputTokenDetails.AudioTokens
+	totalUsage.OutputTokenDetails.TextTokens += usage.OutputTokenDetails.TextTokens
+	totalUsage.OutputTokenDetails.AudioTokens += usage.OutputTokenDetails.AudioTokens
+	// clear usage
+	err := service.PreWssConsumeQuota(ctx, info, usage)
+	return err
+}

relay/channel/openai/usage.go

@@ -0,0 +1,133 @@
+package openai
+
+import (
+	"github.com/QuantumNous/new-api/common"
+	"github.com/QuantumNous/new-api/constant"
+	"github.com/QuantumNous/new-api/dto"
+	relaycommon "github.com/QuantumNous/new-api/relay/common"
+)
+
+func applyUsagePostProcessing(info *relaycommon.RelayInfo, usage *dto.Usage, responseBody []byte) {
+	if info == nil || usage == nil {
+		return
+	}
+
+	switch info.ChannelType {
+	case constant.ChannelTypeDeepSeek:
+		if usage.PromptTokensDetails.CachedTokens == 0 && usage.PromptCacheHitTokens != 0 {
+			usage.PromptTokensDetails.CachedTokens = usage.PromptCacheHitTokens
+		}
+	case constant.ChannelTypeZhipu_v4:
+		// 智普的cached_tokens在标准位置: usage.prompt_tokens_details.cached_tokens
+		if usage.PromptTokensDetails.CachedTokens == 0 {
+			if usage.InputTokensDetails != nil && usage.InputTokensDetails.CachedTokens > 0 {
+				usage.PromptTokensDetails.CachedTokens = usage.InputTokensDetails.CachedTokens
+			} else if cachedTokens, ok := extractCachedTokensFromBody(responseBody); ok {
+				usage.PromptTokensDetails.CachedTokens = cachedTokens
+			} else if usage.PromptCacheHitTokens > 0 {
+				usage.PromptTokensDetails.CachedTokens = usage.PromptCacheHitTokens
+			}
+		}
+	case constant.ChannelTypeMoonshot:
+		// Moonshot的cached_tokens在非标准位置: choices[].usage.cached_tokens
+		if usage.PromptTokensDetails.CachedTokens == 0 {
+			if usage.InputTokensDetails != nil && usage.InputTokensDetails.CachedTokens > 0 {
+				usage.PromptTokensDetails.CachedTokens = usage.InputTokensDetails.CachedTokens
+			} else if cachedTokens, ok := extractMoonshotCachedTokensFromBody(responseBody); ok {
+				usage.PromptTokensDetails.CachedTokens = cachedTokens
+			} else if cachedTokens, ok := extractCachedTokensFromBody(responseBody); ok {
+				usage.PromptTokensDetails.CachedTokens = cachedTokens
+			} else if usage.PromptCacheHitTokens > 0 {
+				usage.PromptTokensDetails.CachedTokens = usage.PromptCacheHitTokens
+			}
+		}
+	case constant.ChannelTypeOpenAI:
+		if usage.PromptTokensDetails.CachedTokens == 0 {
+			if cachedTokens, ok := extractLlamaCachedTokensFromBody(responseBody); ok {
+				usage.PromptTokensDetails.CachedTokens = cachedTokens
+			}
+		}
+	}
+}
+
+func extractCachedTokensFromBody(body []byte) (int, bool) {
+	if len(body) == 0 {
+		return 0, false
+	}
+
+	var payload struct {
+		Usage struct {
+			PromptTokensDetails struct {
+				CachedTokens *int `json:"cached_tokens"`
+			} `json:"prompt_tokens_details"`
+			CachedTokens         *int `json:"cached_tokens"`
+			PromptCacheHitTokens *int `json:"prompt_cache_hit_tokens"`
+		} `json:"usage"`
+	}
+
+	if err := common.Unmarshal(body, &payload); err != nil {
+		return 0, false
+	}
+
+	if payload.Usage.PromptTokensDetails.CachedTokens != nil {
+		return *payload.Usage.PromptTokensDetails.CachedTokens, true
+	}
+	if payload.Usage.CachedTokens != nil {
+		return *payload.Usage.CachedTokens, true
+	}
+	if payload.Usage.PromptCacheHitTokens != nil {
+		return *payload.Usage.PromptCacheHitTokens, true
+	}
+	return 0, false
+}
+
+// extractMoonshotCachedTokensFromBody 从Moonshot的非标准位置提取cached_tokens
+// Moonshot的流式响应格式: {"choices":[{"usage":{"cached_tokens":111}}]}
+func extractMoonshotCachedTokensFromBody(body []byte) (int, bool) {
+	if len(body) == 0 {
+		return 0, false
+	}
+
+	var payload struct {
+		Choices []struct {
+			Usage struct {
+				CachedTokens *int `json:"cached_tokens"`
+			} `json:"usage"`
+		} `json:"choices"`
+	}
+
+	if err := common.Unmarshal(body, &payload); err != nil {
+		return 0, false
+	}
+
+	// 遍历choices查找cached_tokens
+	for _, choice := range payload.Choices {
+		if choice.Usage.CachedTokens != nil && *choice.Usage.CachedTokens > 0 {
+			return *choice.Usage.CachedTokens, true
+		}
+	}
+
+	return 0, false
+}
+
+// extractLlamaCachedTokensFromBody 从llama.cpp的非标准位置提取cache_n
+func extractLlamaCachedTokensFromBody(body []byte) (int, bool) {
+	if len(body) == 0 {
+		return 0, false
+	}
+
+	var payload struct {
+		Timings struct {
+			CachedTokens *int `json:"cache_n"`
+		} `json:"timings"`
+	}
+
+	if err := common.Unmarshal(body, &payload); err != nil {
+		return 0, false
+	}
+
+	if payload.Timings.CachedTokens == nil {
+		return 0, false
+	}
+	return *payload.Timings.CachedTokens, true
+}

relay/channel/tencent/relay-tencent.go

@@ -92,7 +92,7 @@ func streamResponseTencent2OpenAI(TencentResponse *TencentChatResponse) *dto.Cha
 
 func tencentStreamHandler(c *gin.Context, info *relaycommon.RelayInfo, resp *http.Response) (*dto.Usage, *types.NewAPIError) {
 	var responseText string
-	scanner := bufio.NewScanner(resp.Body)
+	scanner := helper.NewStreamScanner(resp.Body)
 	scanner.Split(bufio.ScanLines)
 
 	helper.SetEventStreamHeaders(c)

relay/channel/xai/adaptor.go

@@ -114,7 +114,7 @@ func (a *Adaptor) DoRequest(c *gin.Context, info *relaycommon.RelayInfo, request
 func (a *Adaptor) DoResponse(c *gin.Context, resp *http.Response, info *relaycommon.RelayInfo) (usage any, err *types.NewAPIError) {
 	switch info.RelayMode {
 	case constant.RelayModeImagesGenerations, constant.RelayModeImagesEdits:
-		usage, err = openai.OpenaiHandlerWithUsage(c, info, resp)
+		usage, err = openai.OpenaiImageHandler(c, info, resp)
 	case constant.RelayModeResponses:
 		if info.IsStream {
 			usage, err = openai.OaiResponsesStreamHandler(c, info, resp)

relay/channel/zhipu/relay-zhipu.go

@@ -157,7 +157,7 @@ func streamMetaResponseZhipu2OpenAI(zhipuResponse *ZhipuStreamMetaResponse) (*dt
 
 func zhipuStreamHandler(c *gin.Context, info *relaycommon.RelayInfo, resp *http.Response) (*dto.Usage, *types.NewAPIError) {
 	var usage *dto.Usage
-	scanner := bufio.NewScanner(resp.Body)
+	scanner := helper.NewStreamScanner(resp.Body)
 	scanner.Split(bufio.ScanLines)
 	dataChan := make(chan string)
 	metaChan := make(chan string)
@@ -180,6 +180,9 @@ func zhipuStreamHandler(c *gin.Context, info *relaycommon.RelayInfo, resp *http.
 				}
 			}
 		}
+		if err := scanner.Err(); err != nil {
+			common.SysLog("error reading stream: " + err.Error())
+		}
 		stopChan <- true
 	}()
 	helper.SetEventStreamHeaders(c)

relay/claude_handler.go

@@ -155,6 +155,7 @@ func ClaudeHelper(c *gin.Context, info *relaycommon.RelayInfo) (newAPIError *typ
 		if err != nil {
 			return types.NewErrorWithStatusCode(err, types.ErrorCodeReadRequestBodyFailed, http.StatusBadRequest, types.ErrOptionWithSkipRetry())
 		}
+		info.UpstreamRequestBodySize = storage.Size()
 		requestBody = common.ReaderOnly(storage)
 	} else {
 		convertedRequest, err := adaptor.ConvertClaudeRequest(c, info, request)

relay/helper/openai_image_request_test.go

@@ -0,0 +1,71 @@
+package helper
+
+import (
+	"bytes"
+	"io"
+	"mime/multipart"
+	"net/http"
+	"net/http/httptest"
+	"net/url"
+	"testing"
+
+	"github.com/QuantumNous/new-api/common"
+	relayconstant "github.com/QuantumNous/new-api/relay/constant"
+	"github.com/gin-gonic/gin"
+	"github.com/stretchr/testify/require"
+)
+
+// TestGetAndValidOpenAIImageRequestMultipartStream verifies multipart image
+// edit parsing: the stream field is parsed and validated, and the request body
+// stays replayable for the upstream request.
+func TestGetAndValidOpenAIImageRequestMultipartStream(t *testing.T) {
+	gin.SetMode(gin.TestMode)
+
+	newContext := func(t *testing.T, streamValue string, withImage bool) (*gin.Context, string) {
+		var body bytes.Buffer
+		writer := multipart.NewWriter(&body)
+		require.NoError(t, writer.WriteField("model", "gpt-image-1"))
+		require.NoError(t, writer.WriteField("prompt", "edit this image"))
+		require.NoError(t, writer.WriteField("stream", streamValue))
+		if withImage {
+			part, err := writer.CreateFormFile("image", "input.png")
+			require.NoError(t, err)
+			_, err = part.Write([]byte("fake image"))
+			require.NoError(t, err)
+		}
+		require.NoError(t, writer.Close())
+		originalBody := body.String()
+
+		c, _ := gin.CreateTestContext(httptest.NewRecorder())
+		c.Request = httptest.NewRequest(http.MethodPost, "/v1/images/edits", &body)
+		c.Request.Header.Set("Content-Type", writer.FormDataContentType())
+		return c, originalBody
+	}
+
+	t.Run("valid stream value keeps body replayable", func(t *testing.T) {
+		c, originalBody := newContext(t, "true", true)
+
+		req, err := GetAndValidOpenAIImageRequest(c, relayconstant.RelayModeImagesEdits)
+		require.NoError(t, err)
+		require.NotNil(t, req.Stream)
+		require.True(t, *req.Stream)
+		require.True(t, req.IsStream(c))
+
+		bodyAfterValidation, err := io.ReadAll(c.Request.Body)
+		require.NoError(t, err)
+		require.Equal(t, originalBody, string(bodyAfterValidation))
+
+		form, err := common.ParseMultipartFormReusable(c)
+		require.NoError(t, err)
+		require.Equal(t, "true", url.Values(form.Value).Get("stream"))
+		require.Len(t, form.File["image"], 1)
+	})
+
+	t.Run("invalid stream value is rejected", func(t *testing.T) {
+		c, _ := newContext(t, "notabool", false)
+
+		_, err := GetAndValidOpenAIImageRequest(c, relayconstant.RelayModeImagesEdits)
+		require.Error(t, err)
+		require.Contains(t, err.Error(), "invalid stream value")
+	})
+}

relay/helper/stream_scanner.go

@@ -22,8 +22,8 @@ import (
 )
 
 const (
-	InitialScannerBufferSize    = 64 << 10 // 64KB (64*1024)
-	DefaultMaxScannerBufferSize = 64 << 20 // 64MB (64*1024*1024) default SSE buffer size
+	InitialScannerBufferSize    = 64 << 10  // 64KB (64*1024)
+	DefaultMaxScannerBufferSize = 128 << 20 // 64MB (64*1024*1024) default SSE buffer size
 	DefaultPingInterval         = 10 * time.Second
 )
 
@@ -34,6 +34,12 @@ func getScannerBufferSize() int {
 	return DefaultMaxScannerBufferSize
 }
 
+func NewStreamScanner(reader io.Reader) *bufio.Scanner {
+	scanner := bufio.NewScanner(reader)
+	scanner.Buffer(make([]byte, InitialScannerBufferSize), getScannerBufferSize())
+	return scanner
+}
+
 func StreamScannerHandler(c *gin.Context, resp *http.Response, info *relaycommon.RelayInfo, dataHandler func(data string, sr *StreamResult)) {
 
 	if resp == nil || dataHandler == nil {
@@ -54,7 +60,7 @@ func StreamScannerHandler(c *gin.Context, resp *http.Response, info *relaycommon
 
 	var (
 		stopChan   = make(chan bool, 3) // 增加缓冲区避免阻塞
-		scanner    = bufio.NewScanner(resp.Body)
+		scanner    = NewStreamScanner(resp.Body)
 		ticker     = time.NewTicker(streamingTimeout)
 		pingTicker *time.Ticker
 		writeMutex sync.Mutex     // Mutex to protect concurrent writes
@@ -104,7 +110,6 @@ func StreamScannerHandler(c *gin.Context, resp *http.Response, info *relaycommon
 		close(stopChan)
 	}()
 
-	scanner.Buffer(make([]byte, InitialScannerBufferSize), getScannerBufferSize())
 	scanner.Split(bufio.ScanLines)
 	SetEventStreamHeaders(c)
 

relay/helper/stream_scanner_test.go

@@ -1,6 +1,7 @@
 package helper
 
 import (
+	"bufio"
 	"fmt"
 	"io"
 	"net/http"
@@ -81,6 +82,22 @@ func TestStreamScannerHandler_NilInputs(t *testing.T) {
 	StreamScannerHandler(c, &http.Response{Body: io.NopCloser(strings.NewReader(""))}, info, nil)
 }
 
+func TestNewStreamScanner_AllowsLargeStreamLine(t *testing.T) {
+	oldBufferMB := constant.StreamScannerMaxBufferMB
+	constant.StreamScannerMaxBufferMB = 1
+	t.Cleanup(func() {
+		constant.StreamScannerMaxBufferMB = oldBufferMB
+	})
+
+	payload := strings.Repeat("x", 128<<10)
+	scanner := NewStreamScanner(strings.NewReader("data: " + payload + "\n"))
+	scanner.Split(bufio.ScanLines)
+
+	require.True(t, scanner.Scan())
+	assert.Equal(t, "data: "+payload, scanner.Text())
+	require.NoError(t, scanner.Err())
+}
+
 func TestStreamScannerHandler_EmptyBody(t *testing.T) {
 	t.Parallel()
 
@@ -614,7 +631,7 @@ func TestStreamScannerHandler_StreamStatus_InitializedIfNil(t *testing.T) {
 	assert.NotNil(t, info.StreamStatus)
 }
 
-func TestStreamScannerHandler_StreamStatus_PreInitialized(t *testing.T) {
+func TestStreamScannerHandler_StreamStatus_ReplacesPreInitialized(t *testing.T) {
 	t.Parallel()
 
 	body := buildSSEBody(5)
@@ -626,7 +643,7 @@ func TestStreamScannerHandler_StreamStatus_PreInitialized(t *testing.T) {
 	StreamScannerHandler(c, resp, info, func(data string, sr *StreamResult) {})
 
 	assert.Equal(t, relaycommon.StreamEndReasonDone, info.StreamStatus.EndReason)
-	assert.Equal(t, 1, info.StreamStatus.TotalErrorCount())
+	assert.Equal(t, 0, info.StreamStatus.TotalErrorCount())
 }
 
 func TestStreamScannerHandler_PingInterleavesWithSlowUpstream(t *testing.T) {

relay/helper/valid_request.go

@@ -4,6 +4,8 @@ import (
 	"errors"
 	"fmt"
 	"math"
+	"net/url"
+	"strconv"
 	"strings"
 
 	"github.com/QuantumNous/new-api/common"
@@ -144,16 +146,25 @@ func GetAndValidOpenAIImageRequest(c *gin.Context, relayMode int) (*dto.ImageReq
 	switch relayMode {
 	case relayconstant.RelayModeImagesEdits:
 		if strings.Contains(c.Request.Header.Get("Content-Type"), "multipart/form-data") {
-			_, err := c.MultipartForm()
+			form, err := common.ParseMultipartFormReusable(c)
 			if err != nil {
 				return nil, fmt.Errorf("failed to parse image edit form request: %w", err)
 			}
-			formData := c.Request.PostForm
+			formData := url.Values(form.Value)
+			c.Request.MultipartForm = form
+			c.Request.PostForm = formData
 			imageRequest.Prompt = formData.Get("prompt")
 			imageRequest.Model = formData.Get("model")
 			imageRequest.N = common.GetPointer(uint(common.String2Int(formData.Get("n"))))
 			imageRequest.Quality = formData.Get("quality")
 			imageRequest.Size = formData.Get("size")
+			if streamValue := strings.TrimSpace(formData.Get("stream")); streamValue != "" {
+				stream, err := strconv.ParseBool(streamValue)
+				if err != nil {
+					return nil, fmt.Errorf("invalid stream value: %w", err)
+				}
+				imageRequest.Stream = common.GetPointer(stream)
+			}
 			if imageValue := formData.Get("image"); imageValue != "" {
 				imageRequest.Image, _ = common.Marshal(imageValue)
 			}

router/api-router.go

@@ -17,9 +17,10 @@ func SetApiRouter(router *gin.Engine) {
 	apiRouter.Use(gzip.Gzip(gzip.DefaultCompression))
 	apiRouter.Use(middleware.BodyStorageCleanup()) // 清理请求体存储
 	apiRouter.Use(middleware.GlobalAPIRateLimit())
+	anonymousRequestBodyLimit := middleware.AnonymousRequestBodyLimit()
 	{
 		apiRouter.GET("/setup", controller.GetSetup)
-		apiRouter.POST("/setup", controller.PostSetup)
+		apiRouter.POST("/setup", anonymousRequestBodyLimit, controller.PostSetup)
 		apiRouter.GET("/status", controller.GetStatus)
 		apiRouter.GET("/uptime/status", controller.GetUptimeKumaStatus)
 		apiRouter.GET("/models", middleware.UserAuth(), controller.DashboardListModels)
@@ -40,39 +41,39 @@ func SetApiRouter(router *gin.Engine) {
 		apiRouter.GET("/rankings", middleware.HeaderNavModuleAuth("rankings"), controller.GetRankings)
 		apiRouter.GET("/verification", middleware.EmailVerificationRateLimit(), middleware.TurnstileCheck(), controller.SendEmailVerification)
 		apiRouter.GET("/reset_password", middleware.CriticalRateLimit(), middleware.TurnstileCheck(), controller.SendPasswordResetEmail)
-		apiRouter.POST("/user/reset", middleware.CriticalRateLimit(), controller.ResetPassword)
+		apiRouter.POST("/user/reset", middleware.CriticalRateLimit(), anonymousRequestBodyLimit, controller.ResetPassword)
 		// OAuth routes - specific routes must come before :provider wildcard
 		apiRouter.GET("/oauth/state", middleware.CriticalRateLimit(), controller.GenerateOAuthCode)
-		apiRouter.POST("/oauth/email/bind", middleware.CriticalRateLimit(), controller.EmailBind)
+		apiRouter.POST("/oauth/email/bind", middleware.CriticalRateLimit(), anonymousRequestBodyLimit, controller.EmailBind)
 		// Non-standard OAuth (WeChat, Telegram) - keep original routes
 		apiRouter.GET("/oauth/wechat", middleware.CriticalRateLimit(), controller.WeChatAuth)
-		apiRouter.POST("/oauth/wechat/bind", middleware.CriticalRateLimit(), controller.WeChatBind)
+		apiRouter.POST("/oauth/wechat/bind", middleware.CriticalRateLimit(), anonymousRequestBodyLimit, controller.WeChatBind)
 		apiRouter.GET("/oauth/telegram/login", middleware.CriticalRateLimit(), controller.TelegramLogin)
 		apiRouter.GET("/oauth/telegram/bind", middleware.CriticalRateLimit(), controller.TelegramBind)
 		// Standard OAuth providers (GitHub, Discord, OIDC, LinuxDO) - unified route
 		apiRouter.GET("/oauth/:provider", middleware.CriticalRateLimit(), controller.HandleOAuth)
 		apiRouter.GET("/ratio_config", middleware.CriticalRateLimit(), controller.GetRatioConfig)
 
-		apiRouter.POST("/stripe/webhook", controller.StripeWebhook)
-		apiRouter.POST("/creem/webhook", controller.CreemWebhook)
-		apiRouter.POST("/waffo/webhook", controller.WaffoWebhook)
+		apiRouter.POST("/stripe/webhook", anonymousRequestBodyLimit, controller.StripeWebhook)
+		apiRouter.POST("/creem/webhook", anonymousRequestBodyLimit, controller.CreemWebhook)
+		apiRouter.POST("/waffo/webhook", anonymousRequestBodyLimit, controller.WaffoWebhook)
 		// :env separates test vs prod URLs so the operator can register each
 		// in Pancake's matching webhook slot; handler enforces env match.
-		apiRouter.POST("/waffo-pancake/webhook/:env", controller.WaffoPancakeWebhook)
+		apiRouter.POST("/waffo-pancake/webhook/:env", anonymousRequestBodyLimit, controller.WaffoPancakeWebhook)
 
 		// Universal secure verification routes
 		apiRouter.POST("/verify", middleware.UserAuth(), middleware.CriticalRateLimit(), controller.UniversalVerify)
 
 		userRoute := apiRouter.Group("/user")
 		{
-			userRoute.POST("/register", middleware.CriticalRateLimit(), middleware.TurnstileCheck(), controller.Register)
-			userRoute.POST("/login", middleware.CriticalRateLimit(), middleware.TurnstileCheck(), controller.Login)
-			userRoute.POST("/login/2fa", middleware.CriticalRateLimit(), controller.Verify2FALogin)
-			userRoute.POST("/passkey/login/begin", middleware.CriticalRateLimit(), controller.PasskeyLoginBegin)
-			userRoute.POST("/passkey/login/finish", middleware.CriticalRateLimit(), controller.PasskeyLoginFinish)
+			userRoute.POST("/register", middleware.CriticalRateLimit(), anonymousRequestBodyLimit, middleware.TurnstileCheck(), controller.Register)
+			userRoute.POST("/login", middleware.CriticalRateLimit(), anonymousRequestBodyLimit, middleware.TurnstileCheck(), controller.Login)
+			userRoute.POST("/login/2fa", middleware.CriticalRateLimit(), anonymousRequestBodyLimit, controller.Verify2FALogin)
+			userRoute.POST("/passkey/login/begin", middleware.CriticalRateLimit(), anonymousRequestBodyLimit, controller.PasskeyLoginBegin)
+			userRoute.POST("/passkey/login/finish", middleware.CriticalRateLimit(), anonymousRequestBodyLimit, controller.PasskeyLoginFinish)
 			//userRoute.POST("/tokenlog", middleware.CriticalRateLimit(), controller.TokenLog)
 			userRoute.GET("/logout", controller.Logout)
-			userRoute.POST("/epay/notify", controller.EpayNotify)
+			userRoute.POST("/epay/notify", anonymousRequestBodyLimit, controller.EpayNotify)
 			userRoute.GET("/epay/notify", controller.EpayNotify)
 			userRoute.GET("/groups", controller.GetUserGroups)
 
@@ -176,10 +177,10 @@ func SetApiRouter(router *gin.Engine) {
 		}
 
 		// Subscription payment callbacks (no auth)
-		apiRouter.POST("/subscription/epay/notify", controller.SubscriptionEpayNotify)
+		apiRouter.POST("/subscription/epay/notify", anonymousRequestBodyLimit, controller.SubscriptionEpayNotify)
 		apiRouter.GET("/subscription/epay/notify", controller.SubscriptionEpayNotify)
 		apiRouter.GET("/subscription/epay/return", controller.SubscriptionEpayReturn)
-		apiRouter.POST("/subscription/epay/return", controller.SubscriptionEpayReturn)
+		apiRouter.POST("/subscription/epay/return", anonymousRequestBodyLimit, controller.SubscriptionEpayReturn)
 		optionRoute := apiRouter.Group("/option")
 		optionRoute.Use(middleware.RootAuth())
 		{

service/channel_affinity.go

@@ -641,6 +641,38 @@ func ShouldSkipRetryAfterChannelAffinityFailure(c *gin.Context) bool {
 	return meta.SkipRetry
 }
 
+func ClearCurrentChannelAffinityCache(c *gin.Context) bool {
+	if c == nil {
+		return false
+	}
+	cacheKey, _, ok := getChannelAffinityContext(c)
+	if !ok || cacheKey == "" {
+		return false
+	}
+
+	cache := getChannelAffinityCache()
+	deleted, err := cache.DeleteMany([]string{cacheKey})
+	if err != nil {
+		common.SysError(fmt.Sprintf("channel affinity cache delete current failed: err=%v", err))
+		return false
+	}
+	c.Set(ginKeyChannelAffinitySkipRetry, false)
+	for _, ok := range deleted {
+		if ok {
+			return true
+		}
+	}
+	return false
+}
+
+func ShouldKeepChannelAffinityOnChannelDisabled() bool {
+	setting := operation_setting.GetChannelAffinitySetting()
+	if setting == nil {
+		return false
+	}
+	return setting.KeepOnChannelDisabled
+}
+
 func MarkChannelAffinityUsed(c *gin.Context, selectedGroup string, channelID int) {
 	if c == nil || channelID <= 0 {
 		return

service/channel_affinity_template_test.go

@@ -236,6 +236,33 @@ func TestGetPreferredChannelByAffinity_RequestHeaderKeySource(t *testing.T) {
 	require.Equal(t, buildChannelAffinityKeyHint(affinityValue), meta.KeyHint)
 }
 
+func TestClearCurrentChannelAffinityCache(t *testing.T) {
+	gin.SetMode(gin.TestMode)
+
+	cacheKeySuffix := fmt.Sprintf("codex cli trace:default:clear-current-%d", time.Now().UnixNano())
+	cacheKeyFull := channelAffinityCacheNamespace + ":" + cacheKeySuffix
+	cache := getChannelAffinityCache()
+	require.NoError(t, cache.SetWithTTL(cacheKeySuffix, 9527, time.Minute))
+	t.Cleanup(func() {
+		_, _ = cache.DeleteMany([]string{cacheKeySuffix})
+	})
+
+	ctx := buildChannelAffinityTemplateContextForTest(channelAffinityMeta{
+		CacheKey:   cacheKeyFull,
+		TTLSeconds: 60,
+		RuleName:   "codex cli trace",
+		SkipRetry:  true,
+	})
+	require.True(t, ShouldSkipRetryAfterChannelAffinityFailure(ctx))
+
+	deleted := ClearCurrentChannelAffinityCache(ctx)
+	require.True(t, deleted)
+	_, found, err := cache.Get(cacheKeySuffix)
+	require.NoError(t, err)
+	require.False(t, found)
+	require.False(t, ShouldSkipRetryAfterChannelAffinityFailure(ctx))
+}
+
 func TestChannelAffinityHitCodexTemplatePassHeadersEffective(t *testing.T) {
 	gin.SetMode(gin.TestMode)
 

service/http_client.go

@@ -37,6 +37,7 @@ func InitHttpClient() {
 	transport := &http.Transport{
 		MaxIdleConns:        common.RelayMaxIdleConns,
 		MaxIdleConnsPerHost: common.RelayMaxIdleConnsPerHost,
+		IdleConnTimeout:     time.Duration(common.RelayIdleConnTimeout) * time.Second,
 		ForceAttemptHTTP2:   true,
 		Proxy:               http.ProxyFromEnvironment, // Support HTTP_PROXY, HTTPS_PROXY, NO_PROXY env vars
 	}
@@ -108,6 +109,7 @@ func NewProxyHttpClient(proxyURL string) (*http.Client, error) {
 		transport := &http.Transport{
 			MaxIdleConns:        common.RelayMaxIdleConns,
 			MaxIdleConnsPerHost: common.RelayMaxIdleConnsPerHost,
+			IdleConnTimeout:     time.Duration(common.RelayIdleConnTimeout) * time.Second,
 			ForceAttemptHTTP2:   true,
 			Proxy:               http.ProxyURL(parsedURL),
 		}
@@ -147,6 +149,7 @@ func NewProxyHttpClient(proxyURL string) (*http.Client, error) {
 		transport := &http.Transport{
 			MaxIdleConns:        common.RelayMaxIdleConns,
 			MaxIdleConnsPerHost: common.RelayMaxIdleConnsPerHost,
+			IdleConnTimeout:     time.Duration(common.RelayIdleConnTimeout) * time.Second,
 			ForceAttemptHTTP2:   true,
 			DialContext: func(ctx context.Context, network, addr string) (net.Conn, error) {
 				return dialer.Dial(network, addr)

setting/operation_setting/channel_affinity_setting.go

@@ -28,11 +28,12 @@ type ChannelAffinityRule struct {
 }
 
 type ChannelAffinitySetting struct {
-	Enabled           bool                  `json:"enabled"`
-	SwitchOnSuccess   bool                  `json:"switch_on_success"`
-	MaxEntries        int                   `json:"max_entries"`
-	DefaultTTLSeconds int                   `json:"default_ttl_seconds"`
-	Rules             []ChannelAffinityRule `json:"rules"`
+	Enabled               bool                  `json:"enabled"`
+	SwitchOnSuccess       bool                  `json:"switch_on_success"`
+	KeepOnChannelDisabled bool                  `json:"keep_on_channel_disabled"`
+	MaxEntries            int                   `json:"max_entries"`
+	DefaultTTLSeconds     int                   `json:"default_ttl_seconds"`
+	Rules                 []ChannelAffinityRule `json:"rules"`
 }
 
 var codexCliPassThroughHeaders = []string{
@@ -74,10 +75,11 @@ func buildPassHeaderTemplate(headers []string) map[string]interface{} {
 }
 
 var channelAffinitySetting = ChannelAffinitySetting{
-	Enabled:           true,
-	SwitchOnSuccess:   true,
-	MaxEntries:        100_000,
-	DefaultTTLSeconds: 3600,
+	Enabled:               true,
+	SwitchOnSuccess:       true,
+	KeepOnChannelDisabled: false,
+	MaxEntries:            100_000,
+	DefaultTTLSeconds:     3600,
 	Rules: []ChannelAffinityRule{
 		{
 			Name:       "codex cli trace",

web/classic/src/helpers/render.jsx

@@ -1068,31 +1068,17 @@ export function getQuotaWithUnit(quota, digits = 6) {
   return (quota / quotaPerUnit).toFixed(digits);
 }
 
+// amount 为系统内部的美元值
 export function renderQuotaWithAmount(amount) {
-  const quotaDisplayType = localStorage.getItem('quota_display_type') || 'USD';
-  if (quotaDisplayType === 'TOKENS') {
+  const { symbol, rate, type } = getCurrencyConfig();
+  if (type === 'TOKENS') {
     return renderNumber(renderUnitWithQuota(amount));
   }
-
   const numericAmount = Number(amount);
-  const formattedAmount = Number.isFinite(numericAmount)
-      ? numericAmount.toFixed(2)
-      : amount;
-
-  if (quotaDisplayType === 'CNY') {
-    return '¥' + formattedAmount;
-  } else if (quotaDisplayType === 'CUSTOM') {
-    const statusStr = localStorage.getItem('status');
-    let symbol = '¤';
-    try {
-      if (statusStr) {
-        const s = JSON.parse(statusStr);
-        symbol = s?.custom_currency_symbol || symbol;
-      }
-    } catch (e) {}
-    return symbol + formattedAmount;
+  if (!Number.isFinite(numericAmount)) {
+    return symbol + amount;
   }
-  return '$' + formattedAmount;
+  return symbol + (numericAmount * rate).toFixed(2);
 }
 
 /**

web/classic/src/i18n/locales/en.json

@@ -1197,6 +1197,7 @@
     "套餐的基本信息和定价": "Basic plan info and pricing",
     "如：大带宽批量分析图片推荐": "e.g. Large bandwidth batch analysis of image recommendations",
     "如：香港线路": "e.g. Hong Kong line",
+    "开启后，亲和到的渠道被禁用，或不再适用于当前分组/模型时，仍保留这条亲和；关闭时会删除并重新选择渠道。": "When enabled, keep the affinity entry even if the affinity channel is disabled or no longer usable for the current group/model. When disabled, the entry will be deleted and another channel will be selected.",
     "如果亲和到的渠道失败，重试到其他渠道成功后，将亲和更新到成功的渠道。": "If the affinity channel fails, after a successful retry on another channel, the affinity will be updated to the successful channel.",
     "如果你对接的是上游One API或者New API等转发项目，请使用OpenAI类型，不要使用此类型，除非你知道你在做什么。": "If you are connecting to upstream One API or New API forwarding projects, please use OpenAI type. Do not use this type unless you know what you are doing.",
     "如果用户请求中包含系统提示词，则使用此设置拼接到用户的系统提示词前面": "If the user request contains a system prompt, this setting will be appended to the user's system prompt",
@@ -1579,6 +1580,7 @@
     "成功": "Success",
     "成功兑换额度：": "Successful redemption amount:",
     "成功后切换亲和": "Switch Affinity on Success",
+    "渠道禁用后保留亲和": "Keep Affinity When Channel Is Disabled",
     "成功时自动启用通道": "Enable channel when successful",
     "我已了解禁用两步验证将永久删除所有相关设置和备用码，此操作不可撤销": "I have understood that disabling two-factor authentication will permanently delete all related settings and backup codes, this operation cannot be undone",
     "我已阅读并同意": "I have read and agree to",

web/classic/src/i18n/locales/fr.json

@@ -1193,6 +1193,7 @@
     "套餐的基本信息和定价": "Informations de base et tarification du plan",
     "如：大带宽批量分析图片推荐": "par exemple, Recommandations d'analyse d'images par lots à large bande passante",
     "如：香港线路": "par exemple, Ligne de Hong Kong",
+    "开启后，亲和到的渠道被禁用，或不再适用于当前分组/模型时，仍保留这条亲和；关闭时会删除并重新选择渠道。": "Lorsque cette option est activée, conserver l'entrée d'affinité même si le canal d'affinité est désactivé ou n'est plus utilisable pour le groupe/modèle actuel. Lorsqu'elle est désactivée, l'entrée sera supprimée et un autre canal sera sélectionné.",
     "如果亲和到的渠道失败，重试到其他渠道成功后，将亲和更新到成功的渠道。": "Si le canal d'affinité échoue, après une nouvelle tentative réussie sur un autre canal, l'affinité sera mise à jour vers le canal réussi.",
     "如果你对接的是上游One API或者New API等转发项目，请使用OpenAI类型，不要使用此类型，除非你知道你在做什么。": "Si vous vous connectez à des projets de redirection One API ou New API en amont, veuillez utiliser le type OpenAI. N'utilisez pas ce type, sauf si vous savez ce que vous faites.",
     "如果用户请求中包含系统提示词，则使用此设置拼接到用户的系统提示词前面": "Si la requête de l'utilisateur contient un prompt système, utilisez ce paramètre pour le concaténer avant le prompt système de l'utilisateur",
@@ -1584,6 +1585,7 @@
     "成功": "Succès",
     "成功兑换额度：": "Montant de l'échange réussi :",
     "成功后切换亲和": "Changer l'affinité en cas de succès",
+    "渠道禁用后保留亲和": "Conserver l'affinité lorsque le canal est désactivé",
     "成功时自动启用通道": "Activer le canal en cas de succès",
     "我已了解禁用两步验证将永久删除所有相关设置和备用码，此操作不可撤销": "J'ai compris que la désactivation de l'authentification à deux facteurs supprimera définitivement tous les paramètres et codes de sauvegarde associés, cette opération ne peut pas être annulée",
     "我已阅读并同意": "J'ai lu et j'accepte",

web/classic/src/i18n/locales/ja.json

@@ -1180,6 +1180,7 @@
     "套餐的基本信息和定价": "プランの基本情報と価格",
     "如：大带宽批量分析图片推荐": "例：広帯域での画像一括分析に推奨",
     "如：香港线路": "例：香港回線",
+    "开启后，亲和到的渠道被禁用，或不再适用于当前分组/模型时，仍保留这条亲和；关闭时会删除并重新选择渠道。": "有効にすると、アフィニティチャネルが無効化された、または現在のグループ/モデルで利用できなくなった場合でも、そのアフィニティエントリを保持します。無効にすると、エントリを削除して別のチャネルを選択します。",
     "如果亲和到的渠道失败，重试到其他渠道成功后，将亲和更新到成功的渠道。": "アフィニティチャネルが失敗した場合、別のチャネルでリトライが成功すると、アフィニティが成功したチャネルに更新されます。",
     "如果你对接的是上游One API或者New API等转发项目，请使用OpenAI类型，不要使用此类型，除非你知道你在做什么。": "New APIなどのリレープロジェクトに接続する場合は、OpenAIタイプを利用してください。設定内容を熟知している場合を除き、このタイプは利用しないでください",
     "如果用户请求中包含系统提示词，则使用此设置拼接到用户的系统提示词前面": "ユーザーリクエストにシステムプロンプトが含まれている場合、この設定内容がユーザーのシステムプロンプトの前に追加されます",
@@ -1555,6 +1556,7 @@
     "成功": "成功",
     "成功兑换额度：": "引き換え額：",
     "成功后切换亲和": "成功時にアフィニティを切り替え",
+    "渠道禁用后保留亲和": "チャネル無効時にアフィニティを保持",
     "成功时自动启用通道": "成功時にチャネルを自動的に有効にする",
     "我已了解禁用两步验证将永久删除所有相关设置和备用码，此操作不可撤销": "2要素認証を無効にすると、すべての関連設定とバックアップコードが永久に削除され、この操作は元に戻すことができないことを理解しました",
     "我已阅读并同意": "読んで同意します",

web/classic/src/i18n/locales/ru.json

@@ -1201,6 +1201,7 @@
     "套餐的基本信息和定价": "Основная информация и цена плана",
     "如：大带宽批量分析图片推荐": "Например: рекомендуется для пакетного анализа изображений с большой пропускной способностью",
     "如：香港线路": "Например: Гонконгская линия",
+    "开启后，亲和到的渠道被禁用，或不再适用于当前分组/模型时，仍保留这条亲和；关闭时会删除并重新选择渠道。": "Если включено, запись аффинити сохраняется, даже когда канал аффинити отключён или больше не подходит для текущей группы/модели. Если выключено, запись будет удалена и выбран другой канал.",
     "如果亲和到的渠道失败，重试到其他渠道成功后，将亲和更新到成功的渠道。": "Если канал аффинити не сработал, после успешного повтора на другом канале аффинити будет обновлена на успешный канал.",
     "如果你对接的是上游One API或者New API等转发项目，请使用OpenAI类型，不要使用此类型，除非你知道你在做什么。": "Если вы интегрируетесь с восходящими проектами пересылки, такими как One API или New API, используйте тип OpenAI, не используйте этот тип, если вы не знаете, что делаете.",
     "如果用户请求中包含系统提示词，则使用此设置拼接到用户的系统提示词前面": "Если запрос пользователя содержит системный промпт, используйте эту настройку для добавления перед системным промптом пользователя",
@@ -1602,6 +1603,7 @@
     "成功": "Успешно",
     "成功兑换额度：": "Успешно обменяно квота: ",
     "成功后切换亲和": "Переключить аффинити при успехе",
+    "渠道禁用后保留亲和": "Сохранять аффинити при отключении канала",
     "成功时自动启用通道": "Автоматически включать канал при успехе",
     "我已了解禁用两步验证将永久删除所有相关设置和备用码，此操作不可撤销": "Я понимаю, что отключение двухфакторной аутентификации приведет к постоянному удалению всех связанных настроек и резервных кодов, и эта операция не может быть отменена",
     "我已阅读并同意": "Я прочитал(а) и согласен(на)",

web/classic/src/i18n/locales/vi.json

@@ -1181,6 +1181,7 @@
     "套餐的基本信息和定价": "Thông tin cơ bản và giá của gói",
     "如：大带宽批量分析图片推荐": "ví dụ: Phân tích hàng loạt băng thông lớn đề xuất hình ảnh",
     "如：香港线路": "ví dụ: Tuyến Hồng Kông",
+    "开启后，亲和到的渠道被禁用，或不再适用于当前分组/模型时，仍保留这条亲和；关闭时会删除并重新选择渠道。": "Khi bật, giữ mục ưu ái ngay cả khi kênh ưu ái bị tắt hoặc không còn dùng được cho nhóm/mô hình hiện tại. Khi tắt, mục đó sẽ bị xóa và kênh khác sẽ được chọn.",
     "如果亲和到的渠道失败，重试到其他渠道成功后，将亲和更新到成功的渠道。": "Nếu kênh ưu ái thất bại, sau khi thử lại thành công trên kênh khác, ưu ái sẽ được cập nhật sang kênh thành công.",
     "如果你对接的是上游One API或者New API等转发项目，请使用OpenAI类型，不要使用此类型，除非你知道你在做什么。": "Nếu bạn đang kết nối với các dự án chuyển tiếp One API hoặc New API thượng nguồn, vui lòng sử dụng loại OpenAI. Đừng sử dụng loại này trừ khi bạn biết mình đang làm gì.",
     "如果用户请求中包含系统提示词，则使用此设置拼接到用户的系统提示词前面": "Nếu yêu cầu của người dùng chứa từ nhắc hệ thống, cài đặt này sẽ được nối vào trước từ nhắc hệ thống của người dùng",
@@ -1556,6 +1557,7 @@
     "成功": "Thành công",
     "成功兑换额度：": "Số tiền đổi thành công:",
     "成功后切换亲和": "Chuyển ưu ái khi thành công",
+    "渠道禁用后保留亲和": "Giữ ưu ái khi kênh bị tắt",
     "成功时自动启用通道": "Bật kênh khi thành công",
     "我已了解禁用两步验证将永久删除所有相关设置和备用码，此操作不可撤销": "Tôi đã hiểu rằng việc vô hiệu hóa xác thực hai yếu tố sẽ xóa vĩnh viễn tất cả các cài đặt liên quan và mã dự phòng, thao tác này không thể hoàn tác",
     "我已阅读并同意": "Tôi đã đọc và đồng ý với",

web/classic/src/i18n/locales/zh-CN.json

@@ -1170,6 +1170,7 @@
     "套餐的基本信息和定价": "套餐的基本信息和定价",
     "如：大带宽批量分析图片推荐": "如：大带宽批量分析图片推荐",
     "如：香港线路": "如：香港线路",
+    "开启后，亲和到的渠道被禁用，或不再适用于当前分组/模型时，仍保留这条亲和；关闭时会删除并重新选择渠道。": "开启后，亲和到的渠道被禁用，或不再适用于当前分组/模型时，仍保留这条亲和；关闭时会删除并重新选择渠道。",
     "如果亲和到的渠道失败，重试到其他渠道成功后，将亲和更新到成功的渠道。": "如果亲和到的渠道失败，重试到其他渠道成功后，将亲和更新到成功的渠道。",
     "如果你对接的是上游One API或者New API等转发项目，请使用OpenAI类型，不要使用此类型，除非你知道你在做什么。": "如果你对接的是上游One API或者New API等转发项目，请使用OpenAI类型，不要使用此类型，除非你知道你在做什么。",
     "如果用户请求中包含系统提示词，则使用此设置拼接到用户的系统提示词前面": "如果用户请求中包含系统提示词，则使用此设置拼接到用户的系统提示词前面",
@@ -1541,6 +1542,7 @@
     "成功": "成功",
     "成功兑换额度：": "成功兑换额度：",
     "成功后切换亲和": "成功后切换亲和",
+    "渠道禁用后保留亲和": "渠道禁用后保留亲和",
     "成功时自动启用通道": "成功时自动启用通道",
     "我已了解禁用两步验证将永久删除所有相关设置和备用码，此操作不可撤销": "我已了解禁用两步验证将永久删除所有相关设置和备用码，此操作不可撤销",
     "我已阅读并同意": "我已阅读并同意",

web/classic/src/i18n/locales/zh-TW.json

@@ -1179,6 +1179,7 @@
     "套餐的基本信息和定价": "訂閱的基本資訊和定價",
     "如：大带宽批量分析图片推荐": "如：大頻寬批量分析圖片推薦",
     "如：香港线路": "如：香港線路",
+    "开启后，亲和到的渠道被禁用，或不再适用于当前分组/模型时，仍保留这条亲和；关闭时会删除并重新选择渠道。": "開啟後，親和到的渠道被停用，或不再適用於目前分組/模型時，仍保留這條親和；關閉時會刪除並重新選擇渠道。",
     "如果亲和到的渠道失败，重试到其他渠道成功后，将亲和更新到成功的渠道。": "",
     "如果你对接的是上游One API或者New API等转发项目，请使用OpenAI类型，不要使用此类型，除非你知道你在做什么。": "如果你對接的是上游One API或者New API等轉發項目，請使用OpenAI類型，不要使用此類型，除非你知道你在做什麼。",
     "如果用户请求中包含系统提示词，则使用此设置拼接到用户的系统提示词前面": "如果使用者請求中包含系統提示詞，則使用此設定拼接到使用者的系統提示詞前面",
@@ -1551,6 +1552,7 @@
     "成功": "成功",
     "成功兑换额度：": "成功兌換額度：",
     "成功后切换亲和": "",
+    "渠道禁用后保留亲和": "渠道停用後保留親和",
     "成功时自动启用通道": "成功時自動啟用通道",
     "我已了解禁用两步验证将永久删除所有相关设置和备用码，此操作不可撤销": "我已瞭解禁用兩步驗證將永久刪除所有相關設定和備用碼，此操作不可撤銷",
     "我已阅读并同意": "我已閱讀並同意",

web/classic/src/pages/Setting/Model/SettingGlobalModel.jsx

@@ -208,7 +208,7 @@ export default function SettingGlobalModel(props) {
             <Row>
               <Col span={24}>
                 <Form.TextArea
-                  label={t('禁用思考处理的模型列表')}
+                  label={t('不自动处理思考后缀的模型列表')}
                   field={'global.thinking_model_blacklist'}
                   placeholder={t('例如：') + '\n' + thinkingExample}
                   rows={4}

web/classic/src/pages/Setting/Operation/SettingsChannelAffinity.jsx

@@ -62,6 +62,8 @@ import ParamOverrideEditorModal from '../../../components/table/channels/modals/
 
 const KEY_ENABLED = 'channel_affinity_setting.enabled';
 const KEY_SWITCH_ON_SUCCESS = 'channel_affinity_setting.switch_on_success';
+const KEY_KEEP_ON_CHANNEL_DISABLED =
+  'channel_affinity_setting.keep_on_channel_disabled';
 const KEY_MAX_ENTRIES = 'channel_affinity_setting.max_entries';
 const KEY_DEFAULT_TTL = 'channel_affinity_setting.default_ttl_seconds';
 const KEY_RULES = 'channel_affinity_setting.rules';
@@ -241,6 +243,7 @@ export default function SettingsChannelAffinity(props) {
   const [inputs, setInputs] = useState({
     [KEY_ENABLED]: false,
     [KEY_SWITCH_ON_SUCCESS]: true,
+    [KEY_KEEP_ON_CHANNEL_DISABLED]: false,
     [KEY_MAX_ENTRIES]: 100000,
     [KEY_DEFAULT_TTL]: 3600,
     [KEY_RULES]: '[]',
@@ -858,6 +861,7 @@ export default function SettingsChannelAffinity(props) {
         ![
           KEY_ENABLED,
           KEY_SWITCH_ON_SUCCESS,
+          KEY_KEEP_ON_CHANNEL_DISABLED,
           KEY_MAX_ENTRIES,
           KEY_DEFAULT_TTL,
           KEY_RULES,
@@ -868,6 +872,8 @@ export default function SettingsChannelAffinity(props) {
         currentInputs[key] = toBoolean(props.options[key]);
       else if (key === KEY_SWITCH_ON_SUCCESS)
         currentInputs[key] = toBoolean(props.options[key]);
+      else if (key === KEY_KEEP_ON_CHANNEL_DISABLED)
+        currentInputs[key] = toBoolean(props.options[key]);
       else if (key === KEY_MAX_ENTRIES)
         currentInputs[key] = Number(props.options[key] || 0) || 0;
       else if (key === KEY_DEFAULT_TTL)
@@ -1003,6 +1009,25 @@ export default function SettingsChannelAffinity(props) {
                   )}
                 </Text>
               </Col>
+              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
+                <Form.Switch
+                  field={KEY_KEEP_ON_CHANNEL_DISABLED}
+                  label={t('渠道禁用后保留亲和')}
+                  checkedText='|'
+                  uncheckedText='O'
+                  onChange={(value) =>
+                    setInputs({
+                      ...inputs,
+                      [KEY_KEEP_ON_CHANNEL_DISABLED]: value,
+                    })
+                  }
+                />
+                <Text type='tertiary' size='small'>
+                  {t(
+                    '开启后，亲和到的渠道被禁用，或不再适用于当前分组/模型时，仍保留这条亲和；关闭时会删除并重新选择渠道。',
+                  )}
+                </Text>
+              </Col>
             </Row>
 
             <Divider style={{ marginTop: 12, marginBottom: 12 }} />

web/default/src/components/ai-elements/code-block.tsx

@@ -27,7 +27,6 @@ import {
   useEffect,
   useState,
 } from 'react'
-import type { Element } from 'hast'
 import { CheckIcon, CopyIcon } from 'lucide-react'
 import {
   type BundledLanguage,
@@ -53,7 +52,7 @@ const CodeBlockContext = createContext<CodeBlockContextType>({
 
 const lineNumberTransformer: ShikiTransformer = {
   name: 'line-numbers',
-  line(node: Element, line: number) {
+  line(node, line) {
     node.children.unshift({
       type: 'element',
       tagName: 'span',

web/default/src/components/data-table/README.md

@@ -0,0 +1,17 @@
+# Data Table Components
+
+This package keeps a stable public API through `index.ts`; feature code should
+continue importing from `@/components/data-table`.
+
+- `core/`: TanStack table rendering primitives, headers, rows, pagination,
+  loading, empty states, and pinned-column behavior.
+- `layout/`: responsive page-level composition that combines toolbar, desktop
+  table, mobile list, bulk actions, and pagination placement.
+- `toolbar/`: filter/search/view-option controls and selection action toolbar.
+- `static/`: lightweight table rendering for local/static arrays that do not
+  need TanStack state.
+- `hooks/`: table state and filter hooks.
+
+Keep feature-specific columns, actions, and dialogs inside their feature
+folders. Shared table code belongs here only when it is reusable across more
+than one feature.

web/default/src/components/data-table/core/column-pinning.ts

@@ -0,0 +1,73 @@
+/*
+Copyright (C) 2023-2026 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+import { cn } from '@/lib/utils'
+import type { DataTableColumnClassName, DataTablePinnedColumn } from './types'
+
+export function getResolvedColumnClassName(
+  getColumnClassName?: DataTableColumnClassName,
+  pinnedColumns?: DataTablePinnedColumn[]
+): DataTableColumnClassName {
+  return getResolvedColumnClassNameFromMap(
+    getColumnClassName,
+    getPinnedColumnMap(pinnedColumns)
+  )
+}
+
+export function getResolvedColumnClassNameFromMap(
+  getColumnClassName?: DataTableColumnClassName,
+  pinnedColumnById?: Map<string, DataTablePinnedColumn>
+): DataTableColumnClassName {
+  return (columnId, kind) => {
+    const customClassName = getColumnClassName?.(columnId, kind)
+    const pinnedColumn = pinnedColumnById?.get(columnId)
+
+    if (!pinnedColumn) return customClassName
+
+    return cn(customClassName, getPinnedColumnClassName(pinnedColumn, kind))
+  }
+}
+
+export function getPinnedColumnMap(pinnedColumns?: DataTablePinnedColumn[]) {
+  if (!pinnedColumns?.length) return undefined
+
+  return new Map(pinnedColumns.map((column) => [column.columnId, column]))
+}
+
+function getPinnedColumnClassName(
+  pinnedColumn: DataTablePinnedColumn,
+  kind: 'header' | 'cell'
+) {
+  const edgeClassName =
+    pinnedColumn.side === 'left'
+      ? 'shadow-[8px_0_10px_-10px_hsl(var(--foreground))]'
+      : 'shadow-[-8px_0_10px_-10px_hsl(var(--foreground))]'
+
+  return cn(
+    'sticky whitespace-nowrap',
+    pinnedColumn.side === 'left' ? 'left-0' : 'right-0',
+    edgeClassName,
+    kind === 'header'
+      ? 'bg-background z-30'
+      : 'bg-background z-10 group-hover:bg-muted group-data-[state=selected]:bg-muted',
+    pinnedColumn.className,
+    kind === 'header'
+      ? pinnedColumn.headerClassName
+      : pinnedColumn.cellClassName
+  )
+}

web/default/src/components/data-table/core/data-table-colgroup.tsx

@@ -0,0 +1,33 @@
+/*
+Copyright (C) 2023-2026 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+import type { Table as TanstackTable } from '@tanstack/react-table'
+
+export function DataTableColgroup<TData>({
+  table,
+}: {
+  table: TanstackTable<TData>
+}) {
+  return (
+    <colgroup>
+      {table.getVisibleLeafColumns().map((column) => (
+        <col key={column.id} style={{ width: column.getSize() }} />
+      ))}
+    </colgroup>
+  )
+}

web/default/src/components/data-table/core/data-table-header.tsx

@@ -0,0 +1,61 @@
+/*
+Copyright (C) 2023-2026 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+import { flexRender, type Table as TanstackTable } from '@tanstack/react-table'
+import { TableHead, TableHeader, TableRow } from '@/components/ui/table'
+import type { DataTableColumnClassName } from './types'
+
+type DataTableHeaderProps<TData> = {
+  table: TanstackTable<TData>
+  applyHeaderSize?: boolean
+  className?: string
+  rowClassName?: string
+  getColumnClassName?: DataTableColumnClassName
+}
+
+export function DataTableHeader<TData>({
+  table,
+  applyHeaderSize,
+  className,
+  rowClassName,
+  getColumnClassName,
+}: DataTableHeaderProps<TData>) {
+  return (
+    <TableHeader className={className}>
+      {table.getHeaderGroups().map((headerGroup) => (
+        <TableRow key={headerGroup.id} className={rowClassName}>
+          {headerGroup.headers.map((header) => (
+            <TableHead
+              key={header.id}
+              colSpan={header.colSpan}
+              className={getColumnClassName?.(header.column.id, 'header')}
+              style={applyHeaderSize ? { width: header.getSize() } : undefined}
+            >
+              {header.isPlaceholder
+                ? null
+                : flexRender(
+                    header.column.columnDef.header,
+                    header.getContext()
+                  )}
+            </TableHead>
+          ))}
+        </TableRow>
+      ))}
+    </TableHeader>
+  )
+}

web/default/src/components/data-table/core/data-table-row.tsx

@@ -0,0 +1,52 @@
+/*
+Copyright (C) 2023-2026 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+import type * as React from 'react'
+import { flexRender, type Row } from '@tanstack/react-table'
+import { TableCell, TableRow } from '@/components/ui/table'
+import type { DataTableColumnClassName } from './types'
+
+type DataTableRowProps<TData> = {
+  row: Row<TData>
+  className?: string
+  getColumnClassName?: DataTableColumnClassName
+} & Omit<React.ComponentProps<typeof TableRow>, 'children'>
+
+export function DataTableRow<TData>({
+  row,
+  className,
+  getColumnClassName,
+  ...rowProps
+}: DataTableRowProps<TData>) {
+  return (
+    <TableRow
+      data-state={row.getIsSelected() ? 'selected' : undefined}
+      className={className}
+      {...rowProps}
+    >
+      {row.getVisibleCells().map((cell) => (
+        <TableCell
+          key={cell.id}
+          className={getColumnClassName?.(cell.column.id, 'cell')}
+        >
+          {flexRender(cell.column.columnDef.cell, cell.getContext())}
+        </TableCell>
+      ))}
+    </TableRow>
+  )
+}

web/default/src/components/data-table/core/data-table-view.tsx

@@ -0,0 +1,310 @@
+/*
+Copyright (C) 2023-2026 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+import * as React from 'react'
+import { type Row } from '@tanstack/react-table'
+import { cn } from '@/lib/utils'
+import { Table, TableBody, TableCell, TableRow } from '@/components/ui/table'
+import {
+  getPinnedColumnMap,
+  getResolvedColumnClassNameFromMap,
+} from './column-pinning'
+import { DataTableColgroup } from './data-table-colgroup'
+import { DataTableHeader } from './data-table-header'
+import { DataTableRow } from './data-table-row'
+import { TableEmpty } from './table-empty'
+import { getTableSizeStyle } from './table-sizing'
+import { TableSkeleton } from './table-skeleton'
+import type {
+  DataTableColumnClassName,
+  DataTablePinnedColumn,
+  DataTableViewProps,
+} from './types'
+
+export type {
+  DataTableColumnClassName,
+  DataTablePinnedColumn,
+  DataTableRenderRowHelpers,
+  DataTableViewProps,
+} from './types'
+export { DataTableRow } from './data-table-row'
+
+export function DataTableView<TData>(props: DataTableViewProps<TData>) {
+  const rows = props.rows ?? props.table.getRowModel().rows
+  const colSpan = props.table.getVisibleLeafColumns().length
+  const columnClassName = useResolvedColumnClassName(
+    props.getColumnClassName,
+    props.pinnedColumns
+  )
+
+  return (
+    <div
+      className={cn(
+        'overflow-hidden rounded-lg border',
+        props.containerClassName
+      )}
+      {...props.containerProps}
+    >
+      {props.splitHeader ? (
+        <SplitHeaderTableView
+          props={props}
+          rows={rows}
+          colSpan={colSpan}
+          getColumnClassName={columnClassName}
+        />
+      ) : (
+        <UnifiedTableView
+          props={props}
+          rows={rows}
+          colSpan={colSpan}
+          getColumnClassName={columnClassName}
+        />
+      )}
+    </div>
+  )
+}
+
+function UnifiedTableView<TData>({
+  props,
+  rows,
+  colSpan,
+  getColumnClassName,
+}: {
+  props: DataTableViewProps<TData>
+  rows: Row<TData>[]
+  colSpan: number
+  getColumnClassName: DataTableColumnClassName
+}) {
+  const tableSizing = getTableSizing(props)
+
+  return (
+    <div className={props.tableContainerClassName}>
+      <Table className={props.tableClassName} style={tableSizing.style}>
+        {tableSizing.colgroup}
+        <DataTableHeader
+          table={props.table}
+          applyHeaderSize={props.applyHeaderSize}
+          className={props.tableHeaderClassName}
+          rowClassName={props.tableHeaderRowClassName}
+          getColumnClassName={getColumnClassName}
+        />
+        {renderTableBody(props, rows, colSpan, getColumnClassName)}
+      </Table>
+    </div>
+  )
+}
+
+function SplitHeaderTableView<TData>({
+  props,
+  rows,
+  colSpan,
+  getColumnClassName,
+}: {
+  props: DataTableViewProps<TData>
+  rows: Row<TData>[]
+  colSpan: number
+  getColumnClassName: DataTableColumnClassName
+}) {
+  const headerHostRef = React.useRef<HTMLDivElement>(null)
+  const bodyHostRef = React.useRef<HTMLDivElement>(null)
+  const tableSizing = getTableSizing(props)
+
+  React.useEffect(() => {
+    const headerScroller = headerHostRef.current?.querySelector<HTMLElement>(
+      '[data-slot=table-container]'
+    )
+    const bodyScroller = bodyHostRef.current?.querySelector<HTMLElement>(
+      '[data-slot=table-container]'
+    )
+
+    if (!headerScroller || !bodyScroller) return
+
+    const syncHeaderScroll = () => {
+      headerScroller.scrollLeft = bodyScroller.scrollLeft
+    }
+
+    syncHeaderScroll()
+    bodyScroller.addEventListener('scroll', syncHeaderScroll, { passive: true })
+
+    return () => {
+      bodyScroller.removeEventListener('scroll', syncHeaderScroll)
+    }
+  }, [rows.length, props.tableClassName, props.colgroup])
+
+  return (
+    <div
+      className={cn(
+        'flex h-full min-h-0 flex-col',
+        props.tableContainerClassName
+      )}
+    >
+      <div
+        className={cn(
+          'flex min-h-0 flex-1 flex-col overflow-hidden',
+          props.splitHeaderScrollClassName
+        )}
+      >
+        <div
+          ref={headerHostRef}
+          className='[scrollbar-gutter:stable] overflow-hidden [&_[data-slot=table-container]]:overflow-x-hidden'
+        >
+          <Table className={props.tableClassName} style={tableSizing.style}>
+            {tableSizing.colgroup}
+            <DataTableHeader
+              table={props.table}
+              applyHeaderSize={props.applyHeaderSize}
+              className={props.tableHeaderClassName}
+              rowClassName={props.tableHeaderRowClassName}
+              getColumnClassName={getColumnClassName}
+            />
+          </Table>
+        </div>
+        <div
+          ref={bodyHostRef}
+          className={cn(
+            'min-h-0 flex-1 [scrollbar-gutter:stable] overflow-y-auto',
+            props.bodyContainerClassName
+          )}
+        >
+          <Table className={props.tableClassName} style={tableSizing.style}>
+            {tableSizing.colgroup}
+            {renderTableBody(props, rows, colSpan, getColumnClassName)}
+          </Table>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function useResolvedColumnClassName(
+  getColumnClassName?: DataTableColumnClassName,
+  pinnedColumns?: DataTablePinnedColumn[]
+) {
+  const pinnedColumnById = React.useMemo(
+    () => getPinnedColumnMap(pinnedColumns),
+    [pinnedColumns]
+  )
+
+  return React.useMemo(
+    () =>
+      getResolvedColumnClassNameFromMap(getColumnClassName, pinnedColumnById),
+    [getColumnClassName, pinnedColumnById]
+  )
+}
+
+function getTableSizing<TData>(props: DataTableViewProps<TData>): {
+  colgroup?: React.ReactNode
+  style?: React.CSSProperties
+} {
+  if (props.colgroup) {
+    return { colgroup: props.colgroup }
+  }
+
+  if (!props.splitHeader && !props.applyHeaderSize) {
+    return {}
+  }
+
+  return {
+    colgroup: <DataTableColgroup table={props.table} />,
+    style: getTableSizeStyle(props.table),
+  }
+}
+
+function renderTableBody<TData>(
+  props: DataTableViewProps<TData>,
+  rows: Row<TData>[],
+  colSpan: number,
+  getColumnClassName: DataTableColumnClassName
+) {
+  return (
+    <TableBody className={props.tableBodyClassName}>
+      {renderTableBodyContent(props, rows, colSpan, getColumnClassName)}
+    </TableBody>
+  )
+}
+
+function renderTableBodyContent<TData>(
+  props: DataTableViewProps<TData>,
+  rows: Row<TData>[],
+  colSpan: number,
+  getColumnClassName: DataTableColumnClassName
+) {
+  if (props.isLoading) {
+    return (
+      <TableSkeleton
+        table={props.table}
+        keyPrefix={props.skeletonKeyPrefix}
+        rowHeight={props.skeletonRowHeight}
+      />
+    )
+  }
+
+  if (rows.length === 0) {
+    return renderEmptyState(props, colSpan)
+  }
+
+  return rows.map((row) =>
+    props.renderRow
+      ? props.renderRow(row, {
+          getCellClassName: (columnId, className) =>
+            cn(getColumnClassName(columnId, 'cell'), className),
+        })
+      : renderDefaultRow(props, row, getColumnClassName)
+  )
+}
+
+function renderEmptyState<TData>(
+  props: DataTableViewProps<TData>,
+  colSpan: number
+) {
+  if (props.emptyContent) {
+    return (
+      <TableRow>
+        <TableCell colSpan={colSpan} className={props.emptyCellClassName}>
+          {props.emptyContent}
+        </TableCell>
+      </TableRow>
+    )
+  }
+
+  return (
+    <TableEmpty
+      colSpan={colSpan}
+      title={props.emptyTitle}
+      description={props.emptyDescription}
+      icon={props.emptyIcon}
+    >
+      {props.emptyAction}
+    </TableEmpty>
+  )
+}
+
+function renderDefaultRow<TData>(
+  props: DataTableViewProps<TData>,
+  row: Row<TData>,
+  getColumnClassName: DataTableColumnClassName
+) {
+  return (
+    <DataTableRow
+      key={row.id}
+      row={row}
+      className={cn(props.tableBodyRowClassName, props.getRowClassName?.(row))}
+      getColumnClassName={getColumnClassName}
+    />
+  )
+}

web/default/src/components/data-table/core/pagination.tsx

@@ -39,48 +39,55 @@ type DataTablePaginationProps<TData> = {
   table: Table<TData>
 }
 
+const PAGE_SIZE_OPTIONS = [10, 20, 30, 40, 50, 100] as const
+const PAGE_SIZE_SELECT_ITEMS = PAGE_SIZE_OPTIONS.map((pageSize) => ({
+  value: `${pageSize}`,
+  label: pageSize,
+}))
+
 export function DataTablePagination<TData>({
   table,
 }: DataTablePaginationProps<TData>) {
   const { t } = useTranslation()
-  const currentPage = table.getState().pagination.pageIndex + 1
+  const pagination = table.getState().pagination
+  const currentPage = pagination.pageIndex + 1
+  const pageSize = pagination.pageSize
   const totalPages = table.getPageCount()
+  const totalRows = table.getRowCount()
   const pageNumbers = getPageNumbers(currentPage, totalPages)
 
   return (
     <div
       className={cn(
-        'flex items-center justify-between overflow-clip',
-        '@max-2xl/content:flex-col-reverse @max-2xl/content:gap-2 sm:@max-2xl/content:gap-4'
+        '@container/pagination flex min-w-0 items-center justify-end overflow-clip'
       )}
       style={{ overflowClipMargin: 1 }}
     >
-      <div className='flex w-full items-center justify-between gap-2'>
-        <div className='flex min-w-0 items-center text-xs font-medium whitespace-nowrap sm:min-w-[130px] sm:text-sm @2xl/content:hidden'>
-          {t('Page {{current}} of {{total}}', {
-            current: currentPage,
-            total: totalPages,
-          })}
+      <div className='flex min-w-0 shrink-0 items-center gap-2 @xl/pagination:gap-3'>
+        <div className='flex shrink-0 items-baseline gap-1.5 text-xs font-medium whitespace-nowrap sm:text-sm'>
+          <span className='text-muted-foreground/80'>{t('Total:')}</span>
+          <span className='text-foreground tabular-nums'>
+            {totalRows.toLocaleString()}
+          </span>
         </div>
-        <div className='flex items-center gap-2 @max-2xl/content:flex-row-reverse'>
+
+        <div className='flex shrink-0 items-center gap-1.5 @lg/pagination:gap-2'>
+          <p className='text-muted-foreground/80 hidden text-sm font-medium whitespace-nowrap @2xl/pagination:block'>
+            {t('Rows per page')}
+          </p>
           <Select
-            items={[
-              ...[10, 20, 30, 40, 50, 100].map((pageSize) => ({
-                value: `${pageSize}`,
-                label: pageSize,
-              })),
-            ]}
-            value={`${table.getState().pagination.pageSize}`}
+            items={PAGE_SIZE_SELECT_ITEMS}
+            value={`${pageSize}`}
             onValueChange={(value) => {
               table.setPageSize(Number(value))
             }}
           >
-            <SelectTrigger className='h-8 w-[64px] sm:w-[70px]'>
-              <SelectValue placeholder={table.getState().pagination.pageSize} />
+            <SelectTrigger className='text-foreground h-8 w-[64px] font-medium tabular-nums sm:w-[70px]'>
+              <SelectValue placeholder={pageSize} />
             </SelectTrigger>
             <SelectContent side='top' alignItemWithTrigger={false}>
               <SelectGroup>
-                {[10, 20, 30, 40, 50, 100].map((pageSize) => (
+                {PAGE_SIZE_OPTIONS.map((pageSize) => (
                   <SelectItem key={pageSize} value={`${pageSize}`}>
                     {pageSize}
                   </SelectItem>
@@ -88,23 +95,12 @@ export function DataTablePagination<TData>({
               </SelectGroup>
             </SelectContent>
           </Select>
-          <p className='hidden text-sm font-medium sm:block'>
-            {t('Rows per page')}
-          </p>
         </div>
-      </div>
 
-      <div className='flex items-center sm:space-x-6 lg:space-x-8'>
-        <div className='flex min-w-[130px] items-center text-sm font-medium whitespace-nowrap @max-3xl/content:hidden'>
-          {t('Page {{current}} of {{total}}', {
-            current: currentPage,
-            total: totalPages,
-          })}
-        </div>
-        <div className='flex items-center space-x-1.5 sm:space-x-2'>
+        <div className='flex min-w-0 shrink-0 items-center gap-1 @lg/pagination:gap-1.5 @xl/pagination:gap-2'>
           <Button
             variant='outline'
-            className='size-8 p-0 @max-md/content:hidden'
+            className='text-muted-foreground hover:text-foreground disabled:text-muted-foreground/50 size-8 p-0 @max-lg/pagination:hidden'
             onClick={() => table.setPageIndex(0)}
             disabled={!table.getCanPreviousPage()}
           >
@@ -113,7 +109,7 @@ export function DataTablePagination<TData>({
           </Button>
           <Button
             variant='outline'
-            className='size-8 p-0'
+            className='text-muted-foreground hover:text-foreground disabled:text-muted-foreground/50 size-8 p-0'
             onClick={() => table.previousPage()}
             disabled={!table.getCanPreviousPage()}
           >
@@ -121,18 +117,26 @@ export function DataTablePagination<TData>({
             <ChevronLeftIcon className='h-4 w-4' />
           </Button>
 
-          {/* Page number buttons */}
           {pageNumbers.map((pageNumber, index) => (
             <div key={`${pageNumber}-${index}`} className='flex items-center'>
               {pageNumber === '...' ? (
-                <span className='text-muted-foreground px-1 text-sm'>...</span>
+                <span className='text-muted-foreground/60 px-0.5 text-sm @lg/pagination:px-1'>
+                  ...
+                </span>
               ) : (
                 <Button
                   variant={currentPage === pageNumber ? 'default' : 'outline'}
-                  className='h-8 min-w-8 px-2'
+                  className={cn(
+                    'h-8 min-w-8 px-2 tabular-nums',
+                    currentPage === pageNumber
+                      ? 'font-semibold'
+                      : 'text-muted-foreground hover:text-foreground'
+                  )}
                   onClick={() => table.setPageIndex((pageNumber as number) - 1)}
                 >
-                  <span className='sr-only'>Go to page {pageNumber}</span>
+                  <span className='sr-only'>
+                    {t('Go to page {{page}}', { page: pageNumber })}
+                  </span>
                   {pageNumber}
                 </Button>
               )}
@@ -141,7 +145,7 @@ export function DataTablePagination<TData>({
 
           <Button
             variant='outline'
-            className='size-8 p-0'
+            className='text-muted-foreground hover:text-foreground disabled:text-muted-foreground/50 size-8 p-0'
             onClick={() => table.nextPage()}
             disabled={!table.getCanNextPage()}
           >
@@ -150,7 +154,7 @@ export function DataTablePagination<TData>({
           </Button>
           <Button
             variant='outline'
-            className='size-8 p-0 @max-md/content:hidden'
+            className='text-muted-foreground hover:text-foreground disabled:text-muted-foreground/50 size-8 p-0 @max-lg/pagination:hidden'
             onClick={() => table.setPageIndex(table.getPageCount() - 1)}
             disabled={!table.getCanNextPage()}
           >

web/default/src/components/data-table/core/table-sizing.ts

@@ -0,0 +1,30 @@
+/*
+Copyright (C) 2023-2026 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+import type * as React from 'react'
+import type { Table as TanstackTable } from '@tanstack/react-table'
+
+export function getTableSizeStyle<TData>(
+  table: TanstackTable<TData>
+): React.CSSProperties {
+  const width = table
+    .getVisibleLeafColumns()
+    .reduce((total, column) => total + column.getSize(), 0)
+
+  return { minWidth: width, tableLayout: 'fixed', width: '100%' }
+}

web/default/src/components/data-table/core/types.ts

@@ -0,0 +1,71 @@
+/*
+Copyright (C) 2023-2026 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+import type * as React from 'react'
+import type { Row, Table as TanstackTable } from '@tanstack/react-table'
+
+export type DataTableColumnClassName = (
+  columnId: string,
+  kind: 'header' | 'cell'
+) => string | undefined
+
+export type DataTablePinnedColumn = {
+  columnId: string
+  side: 'left' | 'right'
+  className?: string
+  headerClassName?: string
+  cellClassName?: string
+}
+
+export type DataTableRenderRowHelpers = {
+  getCellClassName: (columnId: string, className?: string) => string | undefined
+}
+
+export type DataTableViewProps<TData> = {
+  table: TanstackTable<TData>
+  isLoading?: boolean
+  rows?: Row<TData>[]
+  emptyTitle?: string
+  emptyDescription?: string
+  emptyIcon?: React.ReactNode
+  emptyAction?: React.ReactNode
+  emptyContent?: React.ReactNode
+  emptyCellClassName?: string
+  skeletonKeyPrefix?: string
+  skeletonRowHeight?: string
+  renderRow?: (
+    row: Row<TData>,
+    helpers: DataTableRenderRowHelpers
+  ) => React.ReactNode
+  getRowClassName?: (row: Row<TData>) => string | undefined
+  getColumnClassName?: DataTableColumnClassName
+  pinnedColumns?: DataTablePinnedColumn[]
+  applyHeaderSize?: boolean
+  tableClassName?: string
+  tableHeaderClassName?: string
+  tableHeaderRowClassName?: string
+  tableBodyClassName?: string
+  tableBodyRowClassName?: string
+  splitHeader?: boolean
+  splitHeaderScrollClassName?: string
+  bodyContainerClassName?: string
+  containerClassName?: string
+  containerProps?: Omit<React.ComponentProps<'div'>, 'className' | 'children'>
+  tableContainerClassName?: string
+  colgroup?: React.ReactNode
+}

web/default/src/components/data-table/hooks/use-data-table.ts

@@ -0,0 +1,234 @@
+/*
+Copyright (C) 2023-2026 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+import * as React from 'react'
+import {
+  type ColumnDef,
+  type ColumnFiltersState,
+  type ExpandedState,
+  type OnChangeFn,
+  type PaginationState,
+  type RowSelectionState,
+  type SortingState,
+  type TableOptions,
+  type Updater,
+  type VisibilityState,
+  getCoreRowModel,
+  getExpandedRowModel,
+  getFacetedRowModel,
+  getFacetedUniqueValues,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from '@tanstack/react-table'
+
+type DataTableFeatureOptions<TData> = Pick<
+  TableOptions<TData>,
+  | 'enableRowSelection'
+  | 'getRowId'
+  | 'getSubRows'
+  | 'globalFilterFn'
+  | 'autoResetPageIndex'
+  | 'manualFiltering'
+  | 'manualPagination'
+  | 'manualSorting'
+>
+
+type DataTableStateOptions = {
+  initialSorting?: SortingState
+  sorting?: SortingState
+  onSortingChange?: OnChangeFn<SortingState>
+  initialColumnVisibility?: VisibilityState
+  columnVisibility?: VisibilityState
+  onColumnVisibilityChange?: OnChangeFn<VisibilityState>
+  initialRowSelection?: RowSelectionState
+  rowSelection?: RowSelectionState
+  onRowSelectionChange?: OnChangeFn<RowSelectionState>
+  initialExpanded?: ExpandedState
+  expanded?: ExpandedState
+  onExpandedChange?: OnChangeFn<ExpandedState>
+  columnFilters?: ColumnFiltersState
+  onColumnFiltersChange?: OnChangeFn<ColumnFiltersState>
+  globalFilter?: string
+  onGlobalFilterChange?: OnChangeFn<string>
+  initialPagination?: PaginationState
+  pagination?: PaginationState
+  onPaginationChange?: OnChangeFn<PaginationState>
+}
+
+type DataTableRowModelOptions = {
+  withFilteredRowModel?: boolean
+  withPaginationRowModel?: boolean
+  withSortedRowModel?: boolean
+  withFacetedRowModel?: boolean
+  withExpandedRowModel?: boolean
+}
+
+type UseDataTableOptions<TData> = DataTableFeatureOptions<TData> &
+  DataTableStateOptions &
+  DataTableRowModelOptions & {
+    data: TData[]
+    columns: ColumnDef<TData, unknown>[]
+    totalCount?: number
+    pageCount?: number
+    ensurePageInRange?: (pageCount: number) => void
+  }
+
+function resolveUpdater<TValue>(
+  updater: Updater<TValue>,
+  previous: TValue
+): TValue {
+  return typeof updater === 'function'
+    ? (updater as (old: TValue) => TValue)(previous)
+    : updater
+}
+
+function useControllableTableState<TValue>(
+  controlledValue: TValue | undefined,
+  defaultValue: TValue,
+  onChange: OnChangeFn<TValue> | undefined
+): [TValue, OnChangeFn<TValue>] {
+  const [uncontrolledValue, setUncontrolledValue] =
+    React.useState<TValue>(defaultValue)
+
+  const value = controlledValue ?? uncontrolledValue
+
+  const setValue = React.useCallback<OnChangeFn<TValue>>(
+    (updater) => {
+      if (controlledValue === undefined) {
+        setUncontrolledValue((previous) => resolveUpdater(updater, previous))
+      }
+      onChange?.(updater)
+    },
+    [controlledValue, onChange]
+  )
+
+  return [value, setValue]
+}
+
+export function useDataTable<TData>(options: UseDataTableOptions<TData>) {
+  const {
+    data,
+    columns,
+    totalCount,
+    pageCount: explicitPageCount,
+    ensurePageInRange,
+    manualFiltering,
+    manualPagination,
+    manualSorting,
+    initialSorting = [],
+    initialColumnVisibility = {},
+    initialRowSelection = {},
+    initialExpanded = {},
+    initialPagination = { pageIndex: 0, pageSize: 20 },
+    withFilteredRowModel = !manualFiltering,
+    withPaginationRowModel = !manualPagination,
+    withSortedRowModel = !manualSorting,
+    withFacetedRowModel = !manualFiltering,
+    withExpandedRowModel = false,
+  } = options
+
+  const [sorting, onSortingChange] = useControllableTableState(
+    options.sorting,
+    initialSorting,
+    options.onSortingChange
+  )
+  const [columnVisibility, onColumnVisibilityChange] =
+    useControllableTableState(
+      options.columnVisibility,
+      initialColumnVisibility,
+      options.onColumnVisibilityChange
+    )
+  const [rowSelection, onRowSelectionChange] = useControllableTableState(
+    options.rowSelection,
+    initialRowSelection,
+    options.onRowSelectionChange
+  )
+  const [expanded, onExpandedChange] = useControllableTableState(
+    options.expanded,
+    initialExpanded,
+    options.onExpandedChange
+  )
+  const [pagination, onPaginationChange] = useControllableTableState(
+    options.pagination,
+    initialPagination,
+    options.onPaginationChange
+  )
+
+  const resolvedPageCount =
+    explicitPageCount ??
+    (totalCount !== undefined
+      ? Math.ceil(totalCount / pagination.pageSize)
+      : undefined)
+
+  const table = useReactTable({
+    data,
+    columns,
+    rowCount: totalCount,
+    pageCount: resolvedPageCount,
+    state: {
+      sorting,
+      columnVisibility,
+      rowSelection,
+      expanded,
+      columnFilters: options.columnFilters,
+      globalFilter: options.globalFilter,
+      pagination,
+    },
+    enableRowSelection: options.enableRowSelection,
+    getRowId: options.getRowId,
+    getSubRows: options.getSubRows,
+    globalFilterFn: options.globalFilterFn,
+    autoResetPageIndex: options.autoResetPageIndex,
+    manualFiltering,
+    manualPagination,
+    manualSorting,
+    onSortingChange,
+    onColumnVisibilityChange,
+    onRowSelectionChange,
+    onExpandedChange,
+    onColumnFiltersChange: options.onColumnFiltersChange,
+    onGlobalFilterChange: options.onGlobalFilterChange,
+    onPaginationChange,
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: withFilteredRowModel
+      ? getFilteredRowModel()
+      : undefined,
+    getPaginationRowModel: withPaginationRowModel
+      ? getPaginationRowModel()
+      : undefined,
+    getSortedRowModel: withSortedRowModel ? getSortedRowModel() : undefined,
+    getFacetedRowModel: withFacetedRowModel ? getFacetedRowModel() : undefined,
+    getFacetedUniqueValues: withFacetedRowModel
+      ? getFacetedUniqueValues()
+      : undefined,
+    getExpandedRowModel: withExpandedRowModel
+      ? getExpandedRowModel()
+      : undefined,
+  })
+
+  const actualPageCount = table.getPageCount()
+  React.useEffect(() => {
+    ensurePageInRange?.(actualPageCount)
+  }, [actualPageCount, ensurePageInRange])
+
+  return {
+    table,
+  }
+}

web/default/src/components/data-table/hooks/use-debounced-column-filter.ts

@@ -0,0 +1,110 @@
+/*
+Copyright (C) 2023-2026 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+import * as React from 'react'
+import type { ColumnFiltersState, OnChangeFn } from '@tanstack/react-table'
+import { useDebounce } from '@/hooks/use-debounce'
+
+type UseDebouncedColumnFilterOptions = {
+  columnFilters: ColumnFiltersState
+  columnId: string
+  onColumnFiltersChange: OnChangeFn<ColumnFiltersState>
+  delay?: number
+}
+
+export function useDebouncedColumnFilter({
+  columnFilters,
+  columnId,
+  onColumnFiltersChange,
+  delay = 500,
+}: UseDebouncedColumnFilterOptions) {
+  const value =
+    (columnFilters.find((filter) => filter.id === columnId)?.value as
+      | string
+      | undefined) ?? ''
+  const [inputValue, setInputValue] = React.useState(value)
+  const [pendingValue, setPendingValue] = React.useState(value)
+  const isComposingRef = React.useRef(false)
+  const debouncedValue = useDebounce(pendingValue, delay)
+
+  React.useEffect(() => {
+    // Keep the input aligned when URL state changes outside the local field.
+    if (!isComposingRef.current) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
+      setInputValue(value)
+    }
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    setPendingValue(value)
+  }, [value])
+
+  React.useEffect(() => {
+    if (debouncedValue === value) return
+
+    onColumnFiltersChange((previous) => {
+      const filters = previous.filter((filter) => filter.id !== columnId)
+      return debouncedValue
+        ? [...filters, { id: columnId, value: debouncedValue }]
+        : filters
+    })
+  }, [columnId, debouncedValue, onColumnFiltersChange, value])
+
+  const updateInputValue = React.useCallback((nextValue: string) => {
+    setInputValue(nextValue)
+
+    if (!isComposingRef.current) {
+      setPendingValue(nextValue)
+    }
+  }, [])
+
+  const handleChange = React.useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      updateInputValue(event.target.value)
+    },
+    [updateInputValue]
+  )
+
+  const handleCompositionStart = React.useCallback(() => {
+    isComposingRef.current = true
+  }, [])
+
+  const handleCompositionEnd = React.useCallback(
+    (event: React.CompositionEvent<HTMLInputElement>) => {
+      isComposingRef.current = false
+      const nextValue = event.currentTarget.value
+      setInputValue(nextValue)
+      setPendingValue(nextValue)
+    },
+    []
+  )
+
+  const resetInput = React.useCallback(() => {
+    isComposingRef.current = false
+    setInputValue('')
+    setPendingValue('')
+  }, [])
+
+  return {
+    value,
+    inputValue,
+    setInputValue: updateInputValue,
+    onChange: handleChange,
+    onCompositionStart: handleCompositionStart,
+    onCompositionEnd: handleCompositionEnd,
+    resetInput,
+  }
+}

web/default/src/components/data-table/index.ts

@@ -16,16 +16,30 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 For commercial licensing, please contact support@quantumnous.com
 */
-export { DataTablePagination } from './pagination'
-export { DataTableColumnHeader } from './column-header'
-export { DataTableFacetedFilter } from './faceted-filter'
-export { DataTableViewOptions } from './view-options'
-export { DataTableToolbar } from './toolbar'
-export { DataTableBulkActions } from './bulk-actions'
-export { TableSkeleton } from './table-skeleton'
-export { TableEmpty } from './table-empty'
-export { MobileCardList } from './mobile-card-list'
-export { DataTablePage, type DataTablePageProps } from './data-table-page'
+export { DataTablePagination } from './core/pagination'
+export { DataTableColumnHeader } from './core/column-header'
+export { DataTableViewOptions } from './toolbar/view-options'
+export { DataTableToolbar } from './toolbar/toolbar'
+export { DataTableBulkActions } from './toolbar/bulk-actions'
+export {
+  StaticDataTable,
+  type StaticDataTableColumn,
+} from './static/static-data-table'
+export { staticDataTableClassNames } from './static/static-data-table-classnames'
+export {
+  DataTableRow,
+  DataTableView,
+  type DataTableColumnClassName,
+  type DataTablePinnedColumn,
+  type DataTableRenderRowHelpers,
+} from './core/data-table-view'
+export { MobileCardList } from './layout/mobile-card-list'
+export {
+  DataTablePage,
+  type DataTablePageProps,
+} from './layout/data-table-page'
+export { useDataTable } from './hooks/use-data-table'
+export { useDebouncedColumnFilter } from './hooks/use-debounced-column-filter'
 
 export const DISABLED_ROW_DESKTOP =
   'bg-muted/85 hover:bg-muted [&>td:first-child]:border-l-muted-foreground/35 [&>td:first-child]:border-l-4 [&>td:first-child]:pl-1'

web/default/src/components/data-table/layout/data-table-page.tsx

@@ -18,27 +18,22 @@ For commercial licensing, please contact support@quantumnous.com
 */
 import * as React from 'react'
 import {
-  flexRender,
   type ColumnDef,
   type Row,
   type Table as TanstackTable,
 } from '@tanstack/react-table'
 import { useMediaQuery } from '@/hooks'
 import { cn } from '@/lib/utils'
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table'
 import { PageFooterPortal } from '@/components/layout'
+import {
+  DataTableView,
+  type DataTableColumnClassName,
+  type DataTablePinnedColumn,
+  type DataTableRenderRowHelpers,
+} from '../core/data-table-view'
+import { DataTablePagination } from '../core/pagination'
+import { DataTableToolbar } from '../toolbar/toolbar'
 import { MobileCardList } from './mobile-card-list'
-import { DataTablePagination } from './pagination'
-import { TableEmpty } from './table-empty'
-import { TableSkeleton } from './table-skeleton'
-import { DataTableToolbar } from './toolbar'
 
 /**
  * Pass-through configuration for the default {@link DataTableToolbar}.
@@ -145,7 +140,22 @@ export type DataTablePageProps<TData> = {
    * Custom desktop row renderer — replaces the default `<TableRow>`/`<TableCell>` mapping.
    * Use for expanded rows, aggregate rows, click-on-row navigation, etc.
    */
-  renderRow?: (row: Row<TData>) => React.ReactNode
+  renderRow?: (
+    row: Row<TData>,
+    helpers: DataTableRenderRowHelpers
+  ) => React.ReactNode
+
+  /**
+   * Desktop column className resolver. Use for semantic alignment/spacing only;
+   * fixed-column behavior should be configured with `pinnedColumns`.
+   */
+  getColumnClassName?: DataTableColumnClassName
+
+  /**
+   * Fixed desktop columns. The shared table component owns sticky position,
+   * layering, shadows, and row-state backgrounds.
+   */
+  pinnedColumns?: DataTablePinnedColumn[]
 
   /**
    * Apply explicit column widths from `header.getSize()` to `<TableHead>`.
@@ -182,6 +192,12 @@ export type DataTablePageProps<TData> = {
    */
   className?: string
 
+  /**
+   * Make the desktop table consume the available page height and scroll inside
+   * the table body while keeping the header fixed. Defaults to `true`.
+   */
+  fixedHeight?: boolean
+
   /**
    * Desktop table container className (the bordered scroll wrapper).
    */
@@ -189,7 +205,8 @@ export type DataTablePageProps<TData> = {
 
   /**
    * Desktop `<TableHeader>` className override.
-   * Useful for sticky headers (`'sticky top-0 z-10 bg-muted/30'`) on long lists.
+   * Use for header color/spacing overrides. Fixed-height pages keep the header
+   * outside the scrollable body automatically.
    */
   tableHeaderClassName?: string
 }
@@ -222,10 +239,18 @@ export function DataTablePage<TData>(props: DataTablePageProps<TData>) {
   const toolbarNode = renderToolbar(props)
   const mobileNode = renderMobile(props, showMobile)
   const desktopNode = renderDesktop(props, showMobile)
+  const paginationNode = renderPagination(props)
 
   return (
     <>
-      <div className={cn('space-y-2.5 sm:space-y-3', props.className)}>
+      <div
+        className={cn(
+          props.fixedHeight !== false
+            ? 'flex h-full min-h-0 flex-col gap-2.5 sm:gap-3'
+            : 'space-y-2.5 sm:space-y-3',
+          props.className
+        )}
+      >
         {toolbarNode}
         {mobileNode}
         {desktopNode}
@@ -236,16 +261,7 @@ export function DataTablePage<TData>(props: DataTablePageProps<TData>) {
           handle its own visibility, we just gate it to non-mobile. */}
       {!showMobile && props.bulkActions}
 
-      {props.showPagination !== false &&
-        (props.paginationInFooter !== false ? (
-          <PageFooterPortal>
-            <DataTablePagination table={props.table} />
-          </PageFooterPortal>
-        ) : (
-          <div className='pt-2'>
-            <DataTablePagination table={props.table} />
-          </div>
-        ))}
+      {paginationNode}
     </>
   )
 }
@@ -265,12 +281,25 @@ function renderToolbar<TData>(
   return null
 }
 
+function renderPagination<TData>(
+  props: DataTablePageProps<TData>
+): React.ReactNode {
+  if (props.showPagination === false) return null
+
+  const pagination = <DataTablePagination table={props.table} />
+
+  return props.paginationInFooter !== false ? (
+    <PageFooterPortal>{pagination}</PageFooterPortal>
+  ) : (
+    <div className='pt-2'>{pagination}</div>
+  )
+}
+
 function renderMobile<TData>(
   props: DataTablePageProps<TData>,
   showMobile: boolean
 ): React.ReactNode {
   if (!showMobile) return null
-  if (props.mobile !== undefined) return props.mobile
 
   const ownGetRowClassName = props.getRowClassName
   const mobileGetRowClassName =
@@ -278,8 +307,7 @@ function renderMobile<TData>(
     (ownGetRowClassName
       ? (row: Row<TData>) => ownGetRowClassName(row, { isMobile: true })
       : undefined)
-
-  return (
+  const mobileContent = props.mobile ?? (
     <MobileCardList
       table={props.table}
       isLoading={props.isLoading}
@@ -289,6 +317,8 @@ function renderMobile<TData>(
       getRowClassName={mobileGetRowClassName}
     />
   )
+
+  return <div className='min-h-0 flex-1 overflow-y-auto'>{mobileContent}</div>
 }
 
 function renderDesktop<TData>(
@@ -297,94 +327,37 @@ function renderDesktop<TData>(
 ): React.ReactNode {
   if (showMobile) return null
 
-  const rows = props.table.getRowModel().rows
   const isFetchingOnly = props.isFetching && !props.isLoading
+  const fixedHeight = props.fixedHeight !== false
 
   return (
-    <div
-      className={cn(
-        'overflow-hidden rounded-lg border transition-opacity duration-150',
+    <DataTableView
+      table={props.table}
+      isLoading={props.isLoading}
+      emptyTitle={props.emptyTitle}
+      emptyDescription={props.emptyDescription}
+      emptyIcon={props.emptyIcon}
+      emptyAction={props.emptyAction}
+      skeletonKeyPrefix={props.skeletonKeyPrefix}
+      renderRow={props.renderRow}
+      applyHeaderSize={props.applyHeaderSize}
+      splitHeader={fixedHeight}
+      tableContainerClassName={fixedHeight ? 'h-full min-h-0' : undefined}
+      tableHeaderClassName={cn(
+        fixedHeight && 'bg-muted/30',
+        props.tableHeaderClassName
+      )}
+      getColumnClassName={props.getColumnClassName}
+      pinnedColumns={props.pinnedColumns}
+      containerClassName={cn(
+        fixedHeight && 'min-h-0 flex-1',
+        'transition-opacity duration-150',
         isFetchingOnly && 'pointer-events-none opacity-60',
         props.tableClassName
       )}
-    >
-      <Table>
-        <TableHeader className={props.tableHeaderClassName}>
-          {props.table.getHeaderGroups().map((headerGroup) => (
-            <TableRow key={headerGroup.id}>
-              {headerGroup.headers.map((header) => (
-                <TableHead
-                  key={header.id}
-                  colSpan={header.colSpan}
-                  style={
-                    props.applyHeaderSize
-                      ? { width: header.getSize() }
-                      : undefined
-                  }
-                >
-                  {header.isPlaceholder
-                    ? null
-                    : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
-                </TableHead>
-              ))}
-            </TableRow>
-          ))}
-        </TableHeader>
-        <TableBody>
-          {props.isLoading ? (
-            <TableSkeleton
-              table={props.table}
-              keyPrefix={props.skeletonKeyPrefix}
-            />
-          ) : rows.length === 0 ? (
-            <TableEmpty
-              colSpan={props.columns.length}
-              title={props.emptyTitle}
-              description={props.emptyDescription}
-              icon={props.emptyIcon}
-            >
-              {props.emptyAction}
-            </TableEmpty>
-          ) : (
-            rows.map((row) => {
-              if (props.renderRow) {
-                return props.renderRow(row)
-              }
-              return (
-                <DefaultRow
-                  key={row.id}
-                  row={row}
-                  className={props.getRowClassName?.(row, { isMobile: false })}
-                />
-              )
-            })
-          )}
-        </TableBody>
-      </Table>
-    </div>
-  )
-}
-
-function DefaultRow<TData>({
-  row,
-  className,
-}: {
-  row: Row<TData>
-  className?: string
-}) {
-  return (
-    <TableRow
-      data-state={row.getIsSelected() && 'selected'}
-      className={className}
-    >
-      {row.getVisibleCells().map((cell) => (
-        <TableCell key={cell.id}>
-          {flexRender(cell.column.columnDef.cell, cell.getContext())}
-        </TableCell>
-      ))}
-    </TableRow>
+      getRowClassName={(row) =>
+        props.getRowClassName?.(row, { isMobile: false })
+      }
+    />
   )
 }

web/default/src/components/data-table/static/static-data-table-classnames.ts

@@ -0,0 +1,46 @@
+/*
+Copyright (C) 2023-2026 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+export const staticDataTableClassNames = {
+  container: 'overflow-hidden rounded-md border',
+  sectionContainer: 'border-border/60 rounded-lg',
+  embeddedContainer: 'rounded-none border-0',
+  compactTable: 'text-sm',
+  compactHeaderRow: 'hover:bg-transparent',
+  mutedHeaderRow: 'bg-muted/30 hover:bg-muted/30',
+  compactHeaderCell:
+    'text-muted-foreground py-2 text-[10px] font-medium tracking-wider uppercase',
+  compactHeaderCellRight:
+    'text-muted-foreground py-2 text-right text-[10px] font-medium tracking-wider uppercase',
+  compactCell: 'py-2.5',
+  compactTopCell: 'py-2.5 align-top',
+  compactTopNumericCell: 'py-2.5 text-right align-top font-mono',
+  compactMutedCell: 'text-muted-foreground py-2.5',
+  compactMutedCodeCell: 'text-muted-foreground py-2.5 font-mono',
+  compactNumericCell: 'py-2.5 text-right font-mono',
+  compactMutedNumericCell: 'text-muted-foreground py-2.5 text-right font-mono',
+  topCell: 'py-2 align-top',
+  topMutedCell: 'text-muted-foreground py-2 align-top',
+  codeCell: 'font-mono text-sm',
+  mutedCell: 'text-muted-foreground text-sm',
+  mutedCodeCell: 'text-muted-foreground font-mono text-sm',
+  topNumericCell: 'py-2 text-right font-mono',
+  mediumCell: 'font-medium',
+  actionHeaderCell: 'text-right',
+  actionCell: 'text-right',
+} as const

web/default/src/components/data-table/static/static-data-table.tsx

@@ -0,0 +1,206 @@
+/*
+Copyright (C) 2023-2026 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table'
+import { staticDataTableClassNames } from './static-data-table-classnames'
+
+type StaticDataTableBaseProps = {
+  className?: string
+  tableClassName?: string
+  containerProps?: Omit<React.ComponentProps<'div'>, 'className' | 'children'>
+  tableProps?: Omit<
+    React.ComponentProps<typeof Table>,
+    'className' | 'children'
+  >
+}
+
+type StaticDataTableDataProps<TData = unknown> = StaticDataTableBaseProps & {
+  columns: StaticDataTableColumn<TData>[]
+  data: TData[]
+  getRowKey?: (row: TData, index: number) => React.Key
+  getRowClassName?: (row: TData, index: number) => string | undefined
+  renderRow?: (row: TData, index: number) => React.ReactNode
+  empty?: boolean
+  emptyContent?: React.ReactNode
+  emptyClassName?: string
+  headerRowClassName?: string
+}
+
+type StaticDataTableChildrenProps = StaticDataTableBaseProps & {
+  children: React.ReactNode
+  columns?: never
+  data?: never
+}
+
+type StaticDataTableProps<TData = unknown> =
+  | StaticDataTableDataProps<TData>
+  | StaticDataTableChildrenProps
+
+export type StaticDataTableColumn<TData = unknown> = {
+  id: string
+  header: React.ReactNode
+  className?: string
+  cellClassName?: string | ((row: TData, index: number) => string | undefined)
+  cell?: (row: TData, index: number) => React.ReactNode
+}
+
+export function StaticDataTable<TData = unknown>(
+  props: StaticDataTableProps<TData>
+) {
+  const { className, tableClassName, containerProps, tableProps } = props
+
+  return (
+    <div
+      className={cn(staticDataTableClassNames.container, className)}
+      {...containerProps}
+    >
+      <Table className={tableClassName} {...tableProps}>
+        {props.columns !== undefined ? (
+          <StaticDataTableWithColumns {...props} />
+        ) : (
+          props.children
+        )}
+      </Table>
+    </div>
+  )
+}
+
+function StaticDataTableWithColumns<TData>({
+  columns,
+  data,
+  getRowKey,
+  getRowClassName,
+  renderRow,
+  empty,
+  emptyContent,
+  emptyClassName,
+  headerRowClassName,
+}: StaticDataTableDataProps<TData>) {
+  const isEmpty = empty ?? (data !== undefined && data.length === 0)
+  const bodyRows = data.map((row, index) => (
+    <StaticDataTableRow
+      key={getRowKey?.(row, index) ?? index}
+      row={row}
+      index={index}
+      columns={columns}
+      getRowClassName={getRowClassName}
+      renderRow={renderRow}
+    />
+  ))
+
+  return (
+    <>
+      <TableHeader>
+        <TableRow className={headerRowClassName}>
+          {columns.map((column) => (
+            <TableHead key={column.id} className={column.className}>
+              {column.header}
+            </TableHead>
+          ))}
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {isEmpty ? (
+          <StaticDataTableEmptyRow
+            colSpan={columns.length}
+            className={emptyClassName}
+          >
+            {emptyContent}
+          </StaticDataTableEmptyRow>
+        ) : (
+          bodyRows
+        )}
+      </TableBody>
+    </>
+  )
+}
+
+type StaticDataTableRowProps<TData> = Required<
+  Pick<StaticDataTableDataProps<TData>, 'columns'>
+> &
+  Pick<StaticDataTableDataProps<TData>, 'getRowClassName' | 'renderRow'> & {
+    row: TData
+    index: number
+  }
+
+function StaticDataTableRow<TData>({
+  row,
+  index,
+  columns,
+  getRowClassName,
+  renderRow,
+}: StaticDataTableRowProps<TData>) {
+  if (renderRow) {
+    return <>{renderRow(row, index)}</>
+  }
+
+  return (
+    <TableRow className={getRowClassName?.(row, index)}>
+      {columns.map((column) => (
+        <TableCell
+          key={column.id}
+          className={getStaticCellClassName(column, row, index)}
+        >
+          {column.cell?.(row, index)}
+        </TableCell>
+      ))}
+    </TableRow>
+  )
+}
+
+function getStaticCellClassName<TData>(
+  column: StaticDataTableColumn<TData>,
+  row: TData,
+  index: number
+) {
+  return typeof column.cellClassName === 'function'
+    ? column.cellClassName(row, index)
+    : column.cellClassName
+}
+
+type StaticDataTableEmptyRowProps = {
+  colSpan: number
+  children: React.ReactNode
+  className?: string
+}
+
+function StaticDataTableEmptyRow({
+  colSpan,
+  children,
+  className,
+}: StaticDataTableEmptyRowProps) {
+  return (
+    <TableRow>
+      <TableCell
+        colSpan={colSpan}
+        className={cn('h-24 text-center', className)}
+      >
+        {children}
+      </TableCell>
+    </TableRow>
+  )
+}

web/default/src/components/data-table/toolbar/toolbar.tsx

@@ -21,6 +21,7 @@ import { useState, type ReactNode } from 'react'
 import { type Table } from '@tanstack/react-table'
 import { ChevronDown, Loader2, X as Cross2Icon } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
+import { useDebounce } from '@/hooks'
 import { cn } from '@/lib/utils'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
@@ -46,6 +47,10 @@ export type DataTableToolbarProps<TData> = {
    * Placeholder for the default search input. Defaults to `t('Filter...')`.
    */
   searchPlaceholder?: string
+  /**
+   * Delay committing the default search input. Defaults to immediate updates.
+   */
+  searchDebounceMs?: number
   /**
    * Column id to filter on. When provided, the search input filters
    * a specific column. When omitted, the search input updates the
@@ -136,6 +141,8 @@ export type DataTableToolbarProps<TData> = {
 export function DataTableToolbar<TData>(props: DataTableToolbarProps<TData>) {
   const { t } = useTranslation()
   const [expanded, setExpanded] = useState(false)
+  const isSearchComposingRef = React.useRef(false)
+  const lastCommittedSearchValueRef = React.useRef('')
 
   const filters = props.filters ?? []
   const hasExpandable = props.expandable != null
@@ -147,26 +154,109 @@ export function DataTableToolbar<TData>(props: DataTableToolbarProps<TData>) {
     !!props.hasAdditionalFilters
 
   const placeholder = props.searchPlaceholder ?? t('Filter...')
+  const currentSearchValue = props.searchKey
+    ? ((props.table.getColumn(props.searchKey)?.getFilterValue() as string) ??
+      '')
+    : ((props.table.getState().globalFilter as string | undefined) ?? '')
+
+  const [searchValue, setSearchValue] = useState(currentSearchValue)
+  const [pendingSearchValue, setPendingSearchValue] =
+    useState(currentSearchValue)
+  const searchDebounceMs = Math.max(0, props.searchDebounceMs ?? 0)
+  const debouncedSearchValue = useDebounce(
+    pendingSearchValue,
+    searchDebounceMs
+  )
+
+  React.useEffect(() => {
+    lastCommittedSearchValueRef.current = currentSearchValue
+    if (!isSearchComposingRef.current) {
+      setSearchValue(currentSearchValue)
+    }
+    setPendingSearchValue(currentSearchValue)
+  }, [currentSearchValue])
+
+  const commitSearchValue = React.useCallback(
+    (value: string) => {
+      if (value === lastCommittedSearchValueRef.current) {
+        return
+      }
+
+      lastCommittedSearchValueRef.current = value
+
+      if (props.searchKey) {
+        props.table.getColumn(props.searchKey)?.setFilterValue(value)
+        return
+      }
+
+      props.table.setGlobalFilter(value)
+    },
+    [props.searchKey, props.table]
+  )
+
+  React.useEffect(() => {
+    if (
+      searchDebounceMs <= 0 ||
+      isSearchComposingRef.current ||
+      debouncedSearchValue !== pendingSearchValue
+    ) {
+      return
+    }
+
+    commitSearchValue(debouncedSearchValue)
+  }, [
+    commitSearchValue,
+    debouncedSearchValue,
+    pendingSearchValue,
+    searchDebounceMs,
+  ])
+
+  const queueSearchValue = (value: string) => {
+    setPendingSearchValue(value)
+
+    if (searchDebounceMs <= 0) {
+      commitSearchValue(value)
+    }
+  }
+
+  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = event.target.value
+    setSearchValue(value)
+
+    if (!isSearchComposingRef.current) {
+      queueSearchValue(value)
+    }
+  }
+
+  const handleSearchCompositionStart = () => {
+    isSearchComposingRef.current = true
+  }
+
+  const handleSearchCompositionEnd = (
+    event: React.CompositionEvent<HTMLInputElement>
+  ) => {
+    isSearchComposingRef.current = false
+    const value = event.currentTarget.value
+    setSearchValue(value)
+    queueSearchValue(value)
+  }
 
   const searchInput = props.searchKey ? (
     <Input
       placeholder={placeholder}
-      value={
-        (props.table.getColumn(props.searchKey)?.getFilterValue() as string) ??
-        ''
-      }
-      onChange={(event) =>
-        props.table
-          .getColumn(props.searchKey!)
-          ?.setFilterValue(event.target.value)
-      }
+      value={searchValue}
+      onChange={handleSearchChange}
+      onCompositionStart={handleSearchCompositionStart}
+      onCompositionEnd={handleSearchCompositionEnd}
       className='w-full sm:w-[200px] lg:w-[240px]'
     />
   ) : (
     <Input
       placeholder={placeholder}
-      value={props.table.getState().globalFilter ?? ''}
-      onChange={(event) => props.table.setGlobalFilter(event.target.value)}
+      value={searchValue}
+      onChange={handleSearchChange}
+      onCompositionStart={handleSearchCompositionStart}
+      onCompositionEnd={handleSearchCompositionEnd}
       className='w-full sm:w-[200px] lg:w-[240px]'
     />
   )
@@ -186,6 +276,10 @@ export function DataTableToolbar<TData>(props: DataTableToolbarProps<TData>) {
   })
 
   const handleReset = () => {
+    isSearchComposingRef.current = false
+    setSearchValue('')
+    setPendingSearchValue('')
+    lastCommittedSearchValueRef.current = ''
     props.table.resetColumnFilters()
     props.table.setGlobalFilter('')
     props.onReset?.()

web/default/src/components/dialog.tsx

@@ -0,0 +1,127 @@
+/*
+Copyright (C) 2023-2026 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+import {
+  Dialog as DialogRoot,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog'
+
+type DialogProps = React.ComponentProps<typeof DialogRoot> & {
+  title: React.ReactNode
+  description?: React.ReactNode
+  children: React.ReactNode
+  trigger?: React.ReactElement
+  footer?: React.ReactNode
+  contentHeight?: React.CSSProperties['height']
+  contentClassName?: string
+  headerClassName?: string
+  titleClassName?: string
+  descriptionClassName?: string
+  bodyClassName?: string
+  footerClassName?: string
+  initialFocus?: boolean
+  showCloseButton?: boolean
+}
+
+const dialogContentMotionClassName =
+  'data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 duration-100'
+
+export function Dialog({
+  title,
+  description,
+  children,
+  trigger,
+  footer,
+  contentHeight = 'auto',
+  contentClassName,
+  headerClassName,
+  titleClassName,
+  descriptionClassName,
+  bodyClassName,
+  footerClassName,
+  initialFocus,
+  showCloseButton,
+  ...dialogProps
+}: DialogProps) {
+  return (
+    <DialogRoot {...dialogProps}>
+      {trigger ? <DialogTrigger render={trigger} /> : null}
+      <DialogContent
+        className={cn(
+          'flex max-h-[calc(100vh-2rem)] w-full flex-col gap-4 overflow-hidden p-4 sm:max-w-2xl sm:p-6',
+          contentClassName,
+          dialogContentMotionClassName
+        )}
+        initialFocus={initialFocus}
+        showCloseButton={showCloseButton}
+        style={
+          {
+            '--dialog-content-height': contentHeight,
+          } as React.CSSProperties
+        }
+      >
+        <DialogHeader
+          className={cn('flex-shrink-0 text-start', headerClassName)}
+        >
+          <DialogTitle className={titleClassName}>{title}</DialogTitle>
+          {description ? (
+            <DialogDescription className={descriptionClassName}>
+              {description}
+            </DialogDescription>
+          ) : null}
+        </DialogHeader>
+
+        <div
+          className={cn(
+            '-mx-1 min-h-0 overflow-x-hidden overflow-y-auto overscroll-contain',
+            'h-[var(--dialog-content-height)] max-h-[calc(100vh-14rem)]'
+          )}
+        >
+          <div
+            className={cn(
+              'min-w-0 px-1 py-1',
+              '[&_form]:overflow-x-visible',
+              '[&_[data-slot=scroll-area-viewport]]:px-1 [&_[data-slot=scroll-area-viewport]]:py-1',
+              bodyClassName
+            )}
+          >
+            {children}
+          </div>
+        </div>
+
+        {footer ? (
+          <DialogFooter
+            className={cn(
+              'flex-shrink-0 gap-2 sm:-mx-6 sm:-mb-6 sm:justify-end sm:p-6',
+              footerClassName
+            )}
+          >
+            {footer}
+          </DialogFooter>
+        ) : null}
+      </DialogContent>
+    </DialogRoot>
+  )
+}

web/default/src/components/layout/components/public-header.tsx

@@ -25,15 +25,8 @@ import { useNotifications } from '@/hooks/use-notifications'
 import { useSystemConfig } from '@/hooks/use-system-config'
 import { useTopNavLinks } from '@/hooks/use-top-nav-links'
 import { Button } from '@/components/ui/button'
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog'
 import { Skeleton } from '@/components/ui/skeleton'
+import { Dialog } from '@/components/dialog'
 import { LanguageSwitcher } from '@/components/language-switcher'
 import { NotificationPopover } from '@/components/notification-popover'
 import { ProfileDropdown } from '@/components/profile-dropdown'
@@ -427,28 +420,26 @@ export function PublicHeader(props: PublicHeaderProps) {
             closeAuthPrompt()
           }
         }}
-      >
-        <DialogContent className='sm:max-w-md'>
-          <DialogHeader>
-            <DialogTitle>{t('Sign in required')}</DialogTitle>
-            <DialogDescription>
-              {t('Please sign in to view {{module}}.', {
-                module: authPromptTarget?.title || '',
-              })}
-            </DialogDescription>
-          </DialogHeader>
-          <div className='bg-muted/40 text-muted-foreground rounded-lg px-3 py-2 text-sm'>
-            {t('Redirecting to sign in in {{seconds}} seconds.', {
-              seconds: authPromptSecondsLeft,
-            })}
-          </div>
-          <DialogFooter>
+        title={t('Sign in required')}
+        description={t('Please sign in to view {{module}}.', {
+          module: authPromptTarget?.title || '',
+        })}
+        contentClassName='sm:max-w-md'
+        contentHeight='auto'
+        footer={
+          <>
             <Button variant='outline' onClick={closeAuthPrompt}>
               {t('Cancel')}
             </Button>
             <Button onClick={navigateToSignIn}>{t('Sign in now')}</Button>
-          </DialogFooter>
-        </DialogContent>
+          </>
+        }
+      >
+        <div className='bg-muted/40 text-muted-foreground rounded-lg px-3 py-2 text-sm'>
+          {t('Redirecting to sign in in {{seconds}} seconds.', {
+            seconds: authPromptSecondsLeft,
+          })}
+        </div>
       </Dialog>
     </>
   )

web/default/src/components/layout/components/section-page-layout.tsx

@@ -50,6 +50,7 @@ SectionPageLayoutBreadcrumb.displayName = 'SectionPageLayout.Breadcrumb'
 
 export type SectionPageLayoutProps = {
   children: ReactNode
+  fixedContent?: boolean
 }
 
 export function SectionPageLayout(props: SectionPageLayoutProps) {
@@ -95,7 +96,13 @@ export function SectionPageLayout(props: SectionPageLayoutProps) {
           </div>
         </div>
 
-        <div className='min-h-0 flex-1 overflow-auto px-3 pt-1 pb-3 sm:px-4 sm:pt-1.5 sm:pb-4'>
+        <div
+          className={
+            props.fixedContent
+              ? 'min-h-0 flex-1 overflow-hidden px-3 pt-1 pb-3 sm:px-4 sm:pt-1.5 sm:pb-4'
+              : 'min-h-0 flex-1 overflow-auto px-3 pt-1 pb-3 sm:px-4 sm:pt-1.5 sm:pb-4'
+          }
+        >
           {content}
         </div>
 

web/default/src/components/long-text.tsx

@@ -46,7 +46,6 @@ export function LongText({
 
   useEffect(() => {
     if (checkOverflow(ref.current)) {
-      // eslint-disable-next-line react-hooks/set-state-in-effect
       setIsOverflown(true)
       return
     }

web/default/src/components/masked-value-display.tsx

@@ -42,14 +42,18 @@ interface MaskedValueDisplayProps {
  */
 export function MaskedValueDisplay(props: MaskedValueDisplayProps) {
   return (
-    <div className='flex items-center'>
+    <div className='flex max-w-full min-w-0 items-center'>
       <Popover>
         <PopoverTrigger
           render={
-            <Button variant='ghost' size='sm' className='h-7 font-mono' />
+            <Button
+              variant='ghost'
+              size='sm'
+              className='h-7 max-w-full min-w-0 justify-start truncate px-0 font-mono hover:bg-transparent aria-expanded:bg-transparent'
+            />
           }
         >
-          {props.maskedValue}
+          <span className='truncate'>{props.maskedValue}</span>
         </PopoverTrigger>
         <PopoverContent
           className='w-auto max-w-[min(90vw,28rem)]'

web/default/src/components/provider-badge.tsx

@@ -0,0 +1,44 @@
+/*
+Copyright (C) 2023-2026 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+import { getLobeIcon } from '@/lib/lobe-icon'
+import { cn } from '@/lib/utils'
+import { StatusBadge, type StatusBadgeProps } from './status-badge'
+
+type ProviderBadgeProps = Omit<StatusBadgeProps, 'children' | 'label'> & {
+  iconKey?: string | null
+  iconSize?: number
+  label: string
+}
+
+export function ProviderBadge({
+  className,
+  iconKey,
+  iconSize = 14,
+  label,
+  ...badgeProps
+}: ProviderBadgeProps) {
+  const icon = iconKey ? getLobeIcon(iconKey, iconSize) : null
+
+  return (
+    <div className={cn('flex items-center gap-1.5', className)}>
+      {icon}
+      <StatusBadge label={label} autoColor={label} size='sm' {...badgeProps} />
+    </div>
+  )
+}

web/default/src/components/status-badge.tsx

@@ -103,7 +103,7 @@ export function StatusBadge({
   variant,
   size = 'sm',
   pulse = false,
-  showDot = true,
+  showDot = false,
   copyable = true,
   copyText,
   autoColor,
@@ -130,6 +130,7 @@ export function StatusBadge({
 
   return (
     <span
+      data-slot='status-badge'
       className={cn(
         'inline-flex w-fit max-w-full shrink-0 items-center rounded-4xl font-medium tracking-normal whitespace-nowrap transition-colors',
         sizeMap[size ?? 'sm'],

web/default/src/components/ui/combobox.tsx

@@ -180,7 +180,7 @@ function ComboboxContent({
           data-slot='combobox-content'
           data-chips={!!anchor}
           className={cn(
-            'dark group/combobox-content bg-popover text-popover-foreground ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-lg shadow-md ring-1 duration-100 data-[chips=true]:min-w-(--anchor-width) *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none',
+            'group/combobox-content bg-popover text-popover-foreground ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-lg shadow-md ring-1 duration-100 data-[chips=true]:min-w-(--anchor-width) *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none',
             className
           )}
           {...props}

web/default/src/components/ui/table.tsx

@@ -103,7 +103,7 @@ function TableCell({ className, ...props }: React.ComponentProps<'td'>) {
     <td
       data-slot='table-cell'
       className={cn(
-        'p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0',
+        'p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>*:has(>[data-slot=status-badge]:first-child):first-child]:-ml-1.5 [&>[data-slot=status-badge]:first-child]:-ml-1.5',
         className
       )}
       {...props}

web/default/src/features/auth/secure-verification/components/secure-verification-dialog.tsx

@@ -20,16 +20,9 @@ import { useMemo } from 'react'
 import { ShieldCheck, KeyRound, Loader2 } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { Button } from '@/components/ui/button'
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog'
 import { Input } from '@/components/ui/input'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { Dialog } from '@/components/dialog'
 import type {
   SecureVerificationState,
   VerificationMethod,
@@ -91,122 +84,118 @@ export function SecureVerificationDialog({
     (activeMethod === '2fa' && (!state.code.trim() || state.code.length < 6))
 
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent
-        className='top-[8vh] max-w-[calc(100%-1.5rem)] translate-y-0 gap-0 overflow-hidden border-none p-0 shadow-xl sm:top-1/2 sm:max-w-md sm:translate-y-[-50%] sm:rounded-xl'
-        showCloseButton={!state.loading}
-      >
-        <div className='bg-background flex max-h-[calc(100dvh-2rem)] flex-col'>
-          <DialogHeader className='border-b px-6 py-5 text-left'>
-            <DialogTitle className='flex items-center gap-2 text-lg font-semibold'>
-              <ShieldCheck className='text-primary h-5 w-5' />
-              {title}
-            </DialogTitle>
-            <DialogDescription className='text-left'>
-              {description}
-            </DialogDescription>
-          </DialogHeader>
+    <Dialog
+      open={open}
+      onOpenChange={onOpenChange}
+      title={
+        <>
+          <ShieldCheck className='text-primary h-5 w-5' />
+          {title}
+        </>
+      }
+      description={description}
+      contentClassName='top-[8vh] max-w-[calc(100%-1.5rem)] translate-y-0 overflow-hidden border-none shadow-xl sm:top-1/2 sm:max-w-md sm:translate-y-[-50%] sm:rounded-xl'
+      headerClassName='border-b pb-4 text-left'
+      titleClassName='flex items-center gap-2 text-lg font-semibold'
+      descriptionClassName='text-left'
+      contentHeight='auto'
+      bodyClassName='px-1 py-1'
+      showCloseButton={!state.loading}
+      footerClassName='bg-muted/30 border-t px-6 py-4 sm:flex-row sm:justify-end'
+      footer={
+        <>
+          <Button
+            type='button'
+            variant='outline'
+            disabled={state.loading}
+            onClick={onCancel}
+          >
+            {t('Cancel')}
+          </Button>
+          <Button
+            type='button'
+            onClick={handleVerify}
+            disabled={availableTabs.length === 0 || verifyDisabled}
+          >
+            {state.loading && <Loader2 className='h-4 w-4 animate-spin' />}
+            {t('Verify')}
+          </Button>
+        </>
+      }
+    >
+      {availableTabs.length === 0 ? (
+        <div className='grid place-items-center gap-4 text-center'>
+          <div className='bg-muted flex h-16 w-16 items-center justify-center rounded-2xl'>
+            <ShieldCheck className='text-muted-foreground h-8 w-8' />
+          </div>
+          <p className='text-muted-foreground text-sm'>
+            {t(
+              'Enable Two-factor Authentication or Passkey in your profile to unlock sensitive operations.'
+            )}
+          </p>
+        </div>
+      ) : (
+        <Tabs
+          value={activeMethod ?? availableTabs[0]}
+          onValueChange={(value) => onMethodChange(value as VerificationMethod)}
+          className='gap-4'
+        >
+          <TabsList>
+            {methods.has2FA && (
+              <TabsTrigger value='2fa'>{t('Authenticator code')}</TabsTrigger>
+            )}
+            {methods.hasPasskey && methods.passkeySupported && (
+              <TabsTrigger value='passkey'>{t('Passkey')}</TabsTrigger>
+            )}
+          </TabsList>
 
-          <div className='flex-1 overflow-y-auto px-6 py-5'>
-            {availableTabs.length === 0 ? (
-              <div className='grid place-items-center gap-4 text-center'>
-                <div className='bg-muted flex h-16 w-16 items-center justify-center rounded-2xl'>
-                  <ShieldCheck className='text-muted-foreground h-8 w-8' />
-                </div>
-                <p className='text-muted-foreground text-sm'>
-                  {t(
-                    'Enable Two-factor Authentication or Passkey in your profile to unlock sensitive operations.'
-                  )}
-                </p>
-              </div>
-            ) : (
-              <Tabs
-                value={activeMethod ?? availableTabs[0]}
-                onValueChange={(value) =>
-                  onMethodChange(value as VerificationMethod)
+          <TabsContent value='2fa' className='space-y-3'>
+            <p className='text-muted-foreground text-sm'>
+              {t(
+                'Enter the 6-digit Time-based One-Time Password or 8-character backup code from your authenticator app.'
+              )}
+            </p>
+            <Input
+              inputMode='numeric'
+              maxLength={8}
+              value={state.code}
+              onChange={(event) => onCodeChange(event.target.value)}
+              placeholder={t('Enter verification code')}
+              disabled={state.loading}
+              autoFocus={activeMethod === '2fa'}
+              onKeyDown={(event) => {
+                if (event.key === 'Enter' && !verifyDisabled) {
+                  event.preventDefault()
+                  handleVerify()
                 }
-                className='gap-4'
-              >
-                <TabsList>
-                  {methods.has2FA && (
-                    <TabsTrigger value='2fa'>
-                      {t('Authenticator code')}
-                    </TabsTrigger>
-                  )}
-                  {methods.hasPasskey && methods.passkeySupported && (
-                    <TabsTrigger value='passkey'>{t('Passkey')}</TabsTrigger>
-                  )}
-                </TabsList>
+              }}
+            />
+          </TabsContent>
 
-                <TabsContent value='2fa' className='space-y-3'>
-                  <p className='text-muted-foreground text-sm'>
+          <TabsContent value='passkey' className='space-y-4'>
+            <div className='bg-muted/50 flex items-center justify-center rounded-lg p-4'>
+              <div className='text-muted-foreground flex items-center gap-3'>
+                <KeyRound className='text-primary h-6 w-6' />
+                <div className='text-left text-sm'>
+                  <p className='text-foreground font-medium'>
+                    {t('Use your Passkey')}
+                  </p>
+                  <p>
                     {t(
-                      'Enter the 6-digit Time-based One-Time Password or 8-character backup code from your authenticator app.'
+                      'We will prompt your device to confirm using biometrics or your hardware key.'
                     )}
                   </p>
-                  <Input
-                    inputMode='numeric'
-                    maxLength={8}
-                    value={state.code}
-                    onChange={(event) => onCodeChange(event.target.value)}
-                    placeholder={t('Enter verification code')}
-                    disabled={state.loading}
-                    autoFocus={activeMethod === '2fa'}
-                    onKeyDown={(event) => {
-                      if (event.key === 'Enter' && !verifyDisabled) {
-                        event.preventDefault()
-                        handleVerify()
-                      }
-                    }}
-                  />
-                </TabsContent>
-
-                <TabsContent value='passkey' className='space-y-4'>
-                  <div className='bg-muted/50 flex items-center justify-center rounded-lg p-4'>
-                    <div className='text-muted-foreground flex items-center gap-3'>
-                      <KeyRound className='text-primary h-6 w-6' />
-                      <div className='text-left text-sm'>
-                        <p className='text-foreground font-medium'>
-                          {t('Use your Passkey')}
-                        </p>
-                        <p>
-                          {t(
-                            'We will prompt your device to confirm using biometrics or your hardware key.'
-                          )}
-                        </p>
-                      </div>
-                    </div>
-                  </div>
-                  {!methods.passkeySupported && (
-                    <p className='text-destructive text-sm'>
-                      {t('This device does not support Passkey verification.')}
-                    </p>
-                  )}
-                </TabsContent>
-              </Tabs>
+                </div>
+              </div>
+            </div>
+            {!methods.passkeySupported && (
+              <p className='text-destructive text-sm'>
+                {t('This device does not support Passkey verification.')}
+              </p>
             )}
-          </div>
-
-          <DialogFooter className='bg-muted/30 border-t px-6 py-4 sm:flex-row sm:justify-end'>
-            <Button
-              type='button'
-              variant='outline'
-              disabled={state.loading}
-              onClick={onCancel}
-            >
-              {t('Cancel')}
-            </Button>
-            <Button
-              type='button'
-              onClick={handleVerify}
-              disabled={availableTabs.length === 0 || verifyDisabled}
-            >
-              {state.loading && <Loader2 className='h-4 w-4 animate-spin' />}
-              {t('Verify')}
-            </Button>
-          </DialogFooter>
-        </div>
-      </DialogContent>
+          </TabsContent>
+        </Tabs>
+      )}
     </Dialog>
   )
 }

web/default/src/features/auth/sign-in/components/user-auth-form.tsx

@@ -32,14 +32,6 @@ import {
 import { cn } from '@/lib/utils'
 import { useStatus } from '@/hooks/use-status'
 import { Button } from '@/components/ui/button'
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog'
 import {
   Form,
   FormControl,
@@ -50,6 +42,7 @@ import {
 } from '@/components/ui/form'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
+import { Dialog } from '@/components/dialog'
 import { PasswordInput } from '@/components/password-input'
 import { Turnstile } from '@/components/turnstile'
 import { login, wechatLoginByCode } from '@/features/auth/api'
@@ -414,43 +407,16 @@ export function UserAuthForm({
         <Dialog
           open={isWeChatDialogOpen}
           onOpenChange={handleWeChatDialogChange}
-        >
-          <DialogContent className='max-w-sm'>
-            <DialogHeader className='text-left'>
-              <DialogTitle>{t('WeChat sign in')}</DialogTitle>
-              <DialogDescription>
-                {t(
-                  'Scan the QR code to follow the official account and reply with “验证码” to receive your verification code.'
-                )}
-              </DialogDescription>
-            </DialogHeader>
-
-            {wechatQrCodeUrl ? (
-              <div className='flex justify-center'>
-                <img
-                  src={wechatQrCodeUrl}
-                  alt={t('WeChat login QR code')}
-                  className='h-40 w-40 rounded-md border object-contain'
-                />
-              </div>
-            ) : (
-              <p className='text-muted-foreground text-sm'>
-                {t('QR code is not configured. Please contact support.')}
-              </p>
-            )}
-
-            <div className='grid gap-2'>
-              <Label htmlFor='wechat-code'>{t('Verification code')}</Label>
-              <Input
-                id='wechat-code'
-                placeholder={t('Enter the verification code')}
-                value={wechatCode}
-                onChange={(event) => setWeChatCode(event.target.value)}
-                autoComplete='one-time-code'
-              />
-            </div>
-
-            <DialogFooter>
+          title={t('WeChat sign in')}
+          description={t(
+            'Scan the QR code to follow the official account and reply with “验证码” to receive your verification code.'
+          )}
+          contentClassName='max-w-sm'
+          headerClassName='text-left'
+          contentHeight='auto'
+          bodyClassName='space-y-4'
+          footer={
+            <>
               <Button
                 type='button'
                 variant='outline'
@@ -474,8 +440,32 @@ export function UserAuthForm({
                 ) : null}
                 {t('Confirm')}
               </Button>
-            </DialogFooter>
-          </DialogContent>
+            </>
+          }
+        >
+          {wechatQrCodeUrl ? (
+            <div className='flex justify-center'>
+              <img
+                src={wechatQrCodeUrl}
+                alt={t('WeChat login QR code')}
+                className='h-40 w-40 rounded-md border object-contain'
+              />
+            </div>
+          ) : (
+            <p className='text-muted-foreground text-sm'>
+              {t('QR code is not configured. Please contact support.')}
+            </p>
+          )}
+          <div className='grid gap-2'>
+            <Label htmlFor='wechat-code'>{t('Verification code')}</Label>
+            <Input
+              id='wechat-code'
+              placeholder={t('Enter the verification code')}
+              value={wechatCode}
+              onChange={(event) => setWeChatCode(event.target.value)}
+              autoComplete='one-time-code'
+            />
+          </div>
         </Dialog>
       )}
     </Form>

web/default/src/features/auth/sign-up/components/sign-up-form.tsx

@@ -26,14 +26,6 @@ import { toast } from 'sonner'
 import { cn } from '@/lib/utils'
 import { useStatus } from '@/hooks/use-status'
 import { Button } from '@/components/ui/button'
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog'
 import {
   Form,
   FormControl,
@@ -44,6 +36,7 @@ import {
 } from '@/components/ui/form'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
+import { Dialog } from '@/components/dialog'
 import { PasswordInput } from '@/components/password-input'
 import { Turnstile } from '@/components/turnstile'
 import { register, wechatLoginByCode } from '@/features/auth/api'
@@ -387,43 +380,16 @@ export function SignUpForm({
         <Dialog
           open={isWeChatDialogOpen}
           onOpenChange={handleWeChatDialogChange}
-        >
-          <DialogContent className='max-w-sm'>
-            <DialogHeader className='text-left'>
-              <DialogTitle>{t('WeChat sign in')}</DialogTitle>
-              <DialogDescription>
-                {t(
-                  'Scan the QR code to follow the official account and reply with “验证码” to receive your verification code.'
-                )}
-              </DialogDescription>
-            </DialogHeader>
-
-            {wechatQrCodeUrl ? (
-              <div className='flex justify-center'>
-                <img
-                  src={wechatQrCodeUrl}
-                  alt={t('WeChat login QR code')}
-                  className='h-40 w-40 rounded-md border object-contain'
-                />
-              </div>
-            ) : (
-              <p className='text-muted-foreground text-sm'>
-                {t('QR code is not configured. Please contact support.')}
-              </p>
-            )}
-
-            <div className='grid gap-2'>
-              <Label htmlFor='wechat-code'>{t('Verification code')}</Label>
-              <Input
-                id='wechat-code'
-                placeholder={t('Enter the verification code')}
-                value={wechatCode}
-                onChange={(event) => setWeChatCode(event.target.value)}
-                autoComplete='one-time-code'
-              />
-            </div>
-
-            <DialogFooter>
+          title={t('WeChat sign in')}
+          description={t(
+            'Scan the QR code to follow the official account and reply with “验证码” to receive your verification code.'
+          )}
+          contentClassName='max-w-sm'
+          headerClassName='text-left'
+          contentHeight='auto'
+          bodyClassName='space-y-4'
+          footer={
+            <>
               <Button
                 type='button'
                 variant='outline'
@@ -447,8 +413,32 @@ export function SignUpForm({
                 ) : null}
                 {t('Confirm')}
               </Button>
-            </DialogFooter>
-          </DialogContent>
+            </>
+          }
+        >
+          {wechatQrCodeUrl ? (
+            <div className='flex justify-center'>
+              <img
+                src={wechatQrCodeUrl}
+                alt={t('WeChat login QR code')}
+                className='h-40 w-40 rounded-md border object-contain'
+              />
+            </div>
+          ) : (
+            <p className='text-muted-foreground text-sm'>
+              {t('QR code is not configured. Please contact support.')}
+            </p>
+          )}
+          <div className='grid gap-2'>
+            <Label htmlFor='wechat-code'>{t('Verification code')}</Label>
+            <Input
+              id='wechat-code'
+              placeholder={t('Enter the verification code')}
+              value={wechatCode}
+              onChange={(event) => setWeChatCode(event.target.value)}
+              autoComplete='one-time-code'
+            />
+          </div>
         </Dialog>
       )}
     </Form>

web/default/src/features/channels/components/channels-columns.tsx

@@ -35,7 +35,6 @@ import {
   formatTimestampToDate,
   formatQuota as formatQuotaValue,
 } from '@/lib/format'
-import { getLobeIcon } from '@/lib/lobe-icon'
 import { truncateText } from '@/lib/utils'
 import { Button } from '@/components/ui/button'
 import { Checkbox } from '@/components/ui/checkbox'
@@ -46,8 +45,9 @@ import {
   TooltipTrigger,
 } from '@/components/ui/tooltip'
 import { ConfirmDialog } from '@/components/confirm-dialog'
-import { DataTableColumnHeader } from '@/components/data-table/column-header'
+import { DataTableColumnHeader } from '@/components/data-table'
 import { GroupBadge } from '@/components/group-badge'
+import { ProviderBadge } from '@/components/provider-badge'
 import { StatusBadge, StatusBadgeList } from '@/components/status-badge'
 import { TableId } from '@/components/table-id'
 import { TruncatedText } from '@/components/truncated-text'
@@ -623,7 +623,6 @@ export function useChannelsColumns(): ColumnDef<Channel>[] {
         const typeNameKey = getChannelTypeLabel(type)
         const typeName = t(typeNameKey)
         const iconName = getChannelTypeIcon(type)
-        const icon = getLobeIcon(`${iconName}.Color`, 14)
         const channel = row.original as Channel
         const isMultiKey = isMultiKeyChannel(channel)
         const multiKeyMode = channel.channel_info?.multi_key_mode ?? 'random'
@@ -657,16 +656,12 @@ export function useChannelsColumns(): ColumnDef<Channel>[] {
                 </Tooltip>
               </TooltipProvider>
             )}
-            <StatusBadge
-              autoColor={typeName}
-              size='sm'
+            <ProviderBadge
+              iconKey={iconName}
+              label={typeName}
               copyable={false}
               showDot={false}
-              className='gap-1 pl-1'
-            >
-              {icon}
-              <span className='truncate'>{typeName}</span>
-            </StatusBadge>
+            />
             {isIonet && (
               <TooltipProvider delay={100}>
                 <Tooltip>

web/default/src/features/channels/components/channels-table.tsx

@@ -16,20 +16,15 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 For commercial licensing, please contact support@quantumnous.com
 */
-import { useState, useMemo, useEffect } from 'react'
+import { useState, useMemo } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { getRouteApi } from '@tanstack/react-router'
 import {
-  getCoreRowModel,
-  useReactTable,
-  getExpandedRowModel,
   type OnChangeFn,
   type SortingState,
-  type VisibilityState,
-  type ExpandedState,
   type Row,
 } from '@tanstack/react-table'
-import { useDebounce, useMediaQuery } from '@/hooks'
+import { useMediaQuery } from '@/hooks'
 import { useTranslation } from 'react-i18next'
 import { getLobeIcon } from '@/lib/lobe-icon'
 import { useTableUrlState } from '@/hooks/use-table-url-state'
@@ -38,6 +33,8 @@ import {
   DISABLED_ROW_DESKTOP,
   DISABLED_ROW_MOBILE,
   DataTablePage,
+  useDebouncedColumnFilter,
+  useDataTable,
 } from '@/components/data-table'
 import { getChannels, searchChannels, getGroups } from '../api'
 import {
@@ -81,12 +78,6 @@ export function ChannelsTable() {
 
   // Table state
   const [sorting, setSorting] = useState<SortingState>([])
-  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({
-    models: false,
-    tag: false,
-  })
-  const [rowSelection, setRowSelection] = useState({})
-  const [expanded, setExpanded] = useState<ExpandedState>({})
 
   // URL state management
   const {
@@ -116,35 +107,24 @@ export function ChannelsTable() {
   // Extract filters from column filters
   const statusFilter =
     (columnFilters.find((f) => f.id === 'status')?.value as string[]) || []
-  const typeFilter =
-    (columnFilters.find((f) => f.id === 'type')?.value as string[]) || []
+  const typeFilter = useMemo(
+    () => (columnFilters.find((f) => f.id === 'type')?.value as string[]) || [],
+    [columnFilters]
+  )
   const groupFilter =
     (columnFilters.find((f) => f.id === 'group')?.value as string[]) || []
-  const modelFilterFromUrl =
-    (columnFilters.find((f) => f.id === 'model')?.value as string) || ''
-
-  // Local state for immediate input feedback
-  const [modelFilterInput, setModelFilterInput] = useState(modelFilterFromUrl)
-  const debouncedModelFilter = useDebounce(modelFilterInput, 500)
-
-  // Sync local input with URL when URL changes (e.g., from back/forward navigation)
-  useEffect(() => {
-    setModelFilterInput(modelFilterFromUrl)
-  }, [modelFilterFromUrl])
-
-  // Update URL when debounced value changes
-  useEffect(() => {
-    if (debouncedModelFilter !== modelFilterFromUrl) {
-      onColumnFiltersChange((prev) => {
-        const filtered = prev.filter((f) => f.id !== 'model')
-        return debouncedModelFilter
-          ? [...filtered, { id: 'model', value: debouncedModelFilter }]
-          : filtered
-      })
-    }
-  }, [debouncedModelFilter, modelFilterFromUrl, onColumnFiltersChange])
-
-  const modelFilter = modelFilterFromUrl
+  const {
+    value: modelFilter,
+    inputValue: modelFilterInput,
+    onChange: onModelFilterInputChange,
+    onCompositionStart: onModelFilterCompositionStart,
+    onCompositionEnd: onModelFilterCompositionEnd,
+    resetInput: resetModelFilterInput,
+  } = useDebouncedColumnFilter({
+    columnFilters,
+    columnId: 'model',
+    onColumnFiltersChange,
+  })
 
   // Determine whether to use search or regular list API
   const shouldSearch = Boolean(globalFilter?.trim() || modelFilter.trim())
@@ -279,41 +259,31 @@ export function ChannelsTable() {
   const columns = useChannelsColumns()
 
   // React Table instance
-  const table = useReactTable({
+  const { table } = useDataTable({
     data: channels,
     columns,
-    pageCount: Math.ceil(totalCount / pagination.pageSize),
-    state: {
-      sorting,
-      columnFilters,
-      columnVisibility,
-      rowSelection,
-      pagination,
-      expanded,
-      globalFilter,
+    totalCount,
+    sorting,
+    initialColumnVisibility: {
+      models: false,
+      tag: false,
     },
+    columnFilters,
+    pagination,
+    globalFilter,
     enableRowSelection: (row: Row<Channel>) => !isTagAggregateRow(row.original),
-    onRowSelectionChange: setRowSelection,
     onSortingChange: handleSortingChange,
     onColumnFiltersChange,
-    onColumnVisibilityChange: setColumnVisibility,
     onPaginationChange,
-    onExpandedChange: setExpanded,
     onGlobalFilterChange,
-    getCoreRowModel: getCoreRowModel(),
-    getExpandedRowModel: getExpandedRowModel(),
     getSubRows: (row: Channel & { children?: Channel[] }) => row.children,
     manualPagination: true,
     manualSorting: true,
     manualFiltering: true,
+    withExpandedRowModel: true,
+    ensurePageInRange,
   })
 
-  // Ensure page is in range when total count changes
-  const pageCount = table.getPageCount()
-  useEffect(() => {
-    ensurePageInRange(pageCount)
-  }, [pageCount, ensurePageInRange])
-
   // Prepare filter options from existing channel types only.
   const typeFilterOptions = useMemo(() => {
     const counts = typeCounts || {}
@@ -385,11 +355,17 @@ export function ChannelsTable() {
       applyHeaderSize
       toolbarProps={{
         searchPlaceholder: t('Filter by name, ID, or key...'),
+        searchDebounceMs: 500,
+        onReset: () => {
+          resetModelFilterInput()
+        },
         additionalSearch: (
           <Input
             placeholder={t('Filter by model...')}
             value={modelFilterInput}
-            onChange={(e) => setModelFilterInput(e.target.value)}
+            onChange={onModelFilterInputChange}
+            onCompositionStart={onModelFilterCompositionStart}
+            onCompositionEnd={onModelFilterCompositionEnd}
             className='w-full sm:w-[150px] lg:w-[180px]'
           />
         ),

web/default/src/features/channels/components/data-table-bulk-actions.tsx

@@ -22,14 +22,6 @@ import { type Table } from '@tanstack/react-table'
 import { Power, PowerOff, Tag, Trash2 } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { Button } from '@/components/ui/button'
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import {
@@ -38,6 +30,7 @@ import {
   TooltipTrigger,
 } from '@/components/ui/tooltip'
 import { DataTableBulkActions as BulkActionsToolbar } from '@/components/data-table'
+import { Dialog } from '@/components/dialog'
 import {
   handleBatchDelete,
   handleBatchDisable,
@@ -188,29 +181,21 @@ export function DataTableBulkActions<TData>({
       </BulkActionsToolbar>
 
       {/* Set Tag Dialog */}
-      <Dialog open={showTagDialog} onOpenChange={setShowTagDialog}>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>{t('Set Tag')}</DialogTitle>
-            <DialogDescription>
-              {t('Set a tag for')} {selectedIds.length}{' '}
-              {t('selected channel(s). Leave empty to remove tag.')}
-            </DialogDescription>
-          </DialogHeader>
-
-          <div className='grid gap-4 py-4'>
-            <div className='grid gap-2'>
-              <Label htmlFor='tag'>{t('Tag')}</Label>
-              <Input
-                id='tag'
-                placeholder={t('Enter tag name (optional)')}
-                value={tagValue}
-                onChange={(e) => setTagValue(e.target.value)}
-              />
-            </div>
-          </div>
-
-          <DialogFooter>
+      <Dialog
+        open={showTagDialog}
+        onOpenChange={setShowTagDialog}
+        title={t('Set Tag')}
+        description={
+          <>
+            {t('Set a tag for')}
+            {selectedIds.length}{' '}
+            {t('selected channel(s). Leave empty to remove tag.')}
+          </>
+        }
+        contentHeight='auto'
+        bodyClassName='space-y-4'
+        footer={
+          <>
             <Button
               variant='outline'
               onClick={() => {
@@ -221,22 +206,37 @@ export function DataTableBulkActions<TData>({
               {t('Cancel')}
             </Button>
             <Button onClick={handleSetTag}>{t('Set Tag')}</Button>
-          </DialogFooter>
-        </DialogContent>
+          </>
+        }
+      >
+        <div className='grid gap-4 py-4'>
+          <div className='grid gap-2'>
+            <Label htmlFor='tag'>{t('Tag')}</Label>
+            <Input
+              id='tag'
+              placeholder={t('Enter tag name (optional)')}
+              value={tagValue}
+              onChange={(e) => setTagValue(e.target.value)}
+            />
+          </div>
+        </div>
       </Dialog>
 
       {/* Delete Confirmation Dialog */}
-      <Dialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>{t('Delete Channels?')}</DialogTitle>
-            <DialogDescription>
-              {t('Are you sure you want to delete')} {selectedIds.length}{' '}
-              {t('channel(s)? This action cannot be undone.')}
-            </DialogDescription>
-          </DialogHeader>
-
-          <DialogFooter>
+      <Dialog
+        open={showDeleteConfirm}
+        onOpenChange={setShowDeleteConfirm}
+        title={t('Delete Channels?')}
+        description={
+          <>
+            {t('Are you sure you want to delete')}
+            {selectedIds.length}{' '}
+            {t('channel(s)? This action cannot be undone.')}
+          </>
+        }
+        contentHeight='auto'
+        footer={
+          <>
             <Button
               variant='outline'
               onClick={() => setShowDeleteConfirm(false)}
@@ -246,8 +246,10 @@ export function DataTableBulkActions<TData>({
             <Button variant='destructive' onClick={handleDeleteAll}>
               {t('Delete')}
             </Button>
-          </DialogFooter>
-        </DialogContent>
+          </>
+        }
+      >
+        {' '}
       </Dialog>
     </>
   )

web/default/src/features/channels/components/dialogs/balance-query-dialog.tsx

@@ -24,14 +24,7 @@ import { toast } from 'sonner'
 import { formatCurrencyFromUSD } from '@/lib/currency'
 import { formatTimestampToDate } from '@/lib/format'
 import { Button } from '@/components/ui/button'
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog'
+import { Dialog } from '@/components/dialog'
 import { getCodexUsage, updateChannelBalance } from '../../api'
 import { channelsQueryKeys } from '../../lib'
 import { useChannels } from '../channels-provider'
@@ -161,53 +154,55 @@ export function BalanceQueryDialog({
   }
 
   return (
-    <Dialog open={open} onOpenChange={handleClose}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>{t('Query Balance')}</DialogTitle>
-          <DialogDescription>
-            {t('Update balance for:')} <strong>{currentRow.name}</strong>
-          </DialogDescription>
-        </DialogHeader>
-
-        <div className='space-y-4 py-4'>
-          {/* Current Balance Display */}
-          <div className='bg-muted/50 rounded-lg border p-4'>
-            <div className='text-muted-foreground mb-2 flex items-center gap-2 text-sm'>
-              <DollarSign className='h-4 w-4' />
-              <span>{t('Current Balance')}</span>
-            </div>
-            <div className='text-2xl font-bold'>
-              {balance !== null
-                ? formatBalance(balance)
-                : formatBalance(currentRow.balance)}
-            </div>
-            <div className='text-muted-foreground mt-2 text-xs'>
-              {t('Last updated:')}{' '}
-              {formatDate(
-                balanceUpdatedTime ?? currentRow.balance_updated_time
-              )}
-            </div>
-          </div>
-
-          {/* Balance Update Button */}
-          <Button
-            className='w-full'
-            onClick={handleQueryBalance}
-            disabled={isQuerying}
-          >
-            {isQuerying && <Loader2 className='mr-2 h-4 w-4 animate-spin' />}
-            {!isQuerying && <RefreshCw className='mr-2 h-4 w-4' />}
-            {isQuerying ? t('Querying...') : t('Update Balance')}
-          </Button>
-        </div>
-
-        <DialogFooter>
+    <Dialog
+      open={open}
+      onOpenChange={handleClose}
+      title={t('Query Balance')}
+      description={
+        <>
+          {t('Update balance for:')}
+          <strong>{currentRow.name}</strong>
+        </>
+      }
+      contentHeight='auto'
+      bodyClassName='space-y-4'
+      footer={
+        <>
           <Button variant='outline' onClick={handleClose} disabled={isQuerying}>
             {t('Close')}
           </Button>
-        </DialogFooter>
-      </DialogContent>
+        </>
+      }
+    >
+      <div className='space-y-4 py-4'>
+        {/* Current Balance Display */}
+        <div className='bg-muted/50 rounded-lg border p-4'>
+          <div className='text-muted-foreground mb-2 flex items-center gap-2 text-sm'>
+            <DollarSign className='h-4 w-4' />
+            <span>{t('Current Balance')}</span>
+          </div>
+          <div className='text-2xl font-bold'>
+            {balance !== null
+              ? formatBalance(balance)
+              : formatBalance(currentRow.balance)}
+          </div>
+          <div className='text-muted-foreground mt-2 text-xs'>
+            {t('Last updated:')}{' '}
+            {formatDate(balanceUpdatedTime ?? currentRow.balance_updated_time)}
+          </div>
+        </div>
+
+        {/* Balance Update Button */}
+        <Button
+          className='w-full'
+          onClick={handleQueryBalance}
+          disabled={isQuerying}
+        >
+          {isQuerying && <Loader2 className='mr-2 h-4 w-4 animate-spin' />}
+          {!isQuerying && <RefreshCw className='mr-2 h-4 w-4' />}
+          {isQuerying ? t('Querying...') : t('Update Balance')}
+        </Button>
+      </div>
     </Dialog>
   )
 }

web/default/src/features/channels/components/dialogs/channel-test-dialog.tsx

@@ -21,10 +21,6 @@ import {
   type ColumnDef,
   type RowSelectionState,
   type Table as TanStackTable,
-  flexRender,
-  getCoreRowModel,
-  getPaginationRowModel,
-  useReactTable,
 } from '@tanstack/react-table'
 import { Check, Copy, Info, Loader2, Settings } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
@@ -33,14 +29,6 @@ import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard'
 import { useIsMobile } from '@/hooks/use-mobile'
 import { Button } from '@/components/ui/button'
 import { Checkbox } from '@/components/ui/checkbox'
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import {
@@ -60,21 +48,18 @@ import {
   SheetTitle,
 } from '@/components/ui/sheet'
 import { Switch } from '@/components/ui/switch'
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table'
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
 } from '@/components/ui/tooltip'
-import { DataTableBulkActions as BulkActionsToolbar } from '@/components/data-table'
-import { DataTablePagination } from '@/components/data-table/pagination'
+import {
+  DataTableBulkActions as BulkActionsToolbar,
+  DataTablePagination,
+  DataTableView,
+  useDataTable,
+} from '@/components/data-table'
+import { Dialog } from '@/components/dialog'
 import {
   sideDrawerContentClassName,
   sideDrawerFooterClassName,
@@ -207,7 +192,7 @@ function getTestTableColumnClass(columnId: string) {
     case 'status':
       return 'w-70 min-w-70 max-w-70 whitespace-normal'
     case 'actions':
-      return 'bg-popover sticky right-0 z-20 w-24 min-w-24 border-l shadow-[-8px_0_8px_-8px_rgb(0_0_0_/_0.2)] whitespace-nowrap sm:w-28 sm:min-w-28'
+      return 'bg-popover w-24 min-w-24 whitespace-nowrap sm:w-28 sm:min-w-28'
     default:
       return undefined
   }
@@ -234,6 +219,14 @@ export function ChannelTestDialog({
     pageIndex: 0,
     pageSize: 10,
   })
+  const endpointSelectItems = useMemo(
+    () =>
+      endpointTypeOptions.map((option) => ({
+        value: option.value,
+        label: t(option.label),
+      })),
+    [t]
+  )
 
   const resetState = useCallback(() => {
     setEndpointType('auto')
@@ -509,18 +502,17 @@ export function ChannelTestDialog({
     ]
   )
 
-  const table = useReactTable({
+  const { table } = useDataTable({
     data: tableData,
     columns,
-    state: {
-      rowSelection,
-      pagination,
-    },
+    rowSelection,
+    pagination,
     enableRowSelection: true,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
     onRowSelectionChange: setRowSelection,
     onPaginationChange: setPagination,
+    withFilteredRowModel: false,
+    withSortedRowModel: false,
+    withFacetedRowModel: false,
   })
 
   if (!currentRow) {
@@ -529,179 +521,137 @@ export function ChannelTestDialog({
 
   return (
     <>
-      <Dialog open={open} onOpenChange={handleClose}>
-        <DialogContent className='max-h-[90vh] overflow-hidden sm:max-w-3xl'>
-          <DialogHeader>
-            <DialogTitle>{t('Test Channel Connection')}</DialogTitle>
-            <DialogDescription>
-              {t('Test connectivity for:')} <strong>{currentRow.name}</strong>
-            </DialogDescription>
-          </DialogHeader>
-
-          <div className='max-h-[78vh] space-y-4 overflow-y-auto py-4 pr-1'>
-            <div className='grid gap-4 md:grid-cols-2'>
-              <div className='grid gap-2'>
-                <Label htmlFor='endpoint-type'>{t('Endpoint Type')}</Label>
-                <Select
-                  items={[
-                    ...endpointTypeOptions.map((option) => {
-                      const itemValue = option.value
-                      return { value: itemValue, label: t(option.label) }
-                    }),
-                  ]}
-                  value={endpointType}
-                  onValueChange={(v) => v !== null && setEndpointType(v)}
-                >
-                  <SelectTrigger id='endpoint-type'>
-                    <SelectValue placeholder={t('Auto detect (default)')} />
-                  </SelectTrigger>
-                  <SelectContent alignItemWithTrigger={false}>
-                    <SelectGroup>
-                      {endpointTypeOptions.map((option) => {
-                        const itemValue = option.value
-                        return (
-                          <SelectItem key={itemValue} value={itemValue}>
-                            {t(option.label)}
-                          </SelectItem>
-                        )
-                      })}
-                    </SelectGroup>
-                  </SelectContent>
-                </Select>
-                <p className='text-muted-foreground text-xs'>
-                  {t(
-                    'Override the endpoint used for testing. Leave empty to auto detect.'
-                  )}
-                </p>
-              </div>
-              <div className='grid gap-2'>
-                <Label htmlFor='stream-toggle'>{t('Stream Mode')}</Label>
-                <div className='flex items-center gap-2'>
-                  <Switch
-                    id='stream-toggle'
-                    checked={isStreamTest}
-                    onCheckedChange={setIsStreamTest}
-                    disabled={streamDisabled}
-                  />
-                  <span className='text-sm'>
-                    {isStreamTest ? t('Enabled') : t('Disabled')}
-                  </span>
-                </div>
-                <p className='text-muted-foreground text-xs'>
-                  {t('Enable streaming mode for the test request.')}
-                </p>
-              </div>
-            </div>
-
-            <div className='space-y-3 max-sm:has-[div[role="toolbar"]]:pb-16'>
-              <div className='flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between'>
-                <div>
-                  <p className='text-sm font-medium'>{t('Channel models')}</p>
-                  <p className='text-muted-foreground text-xs'>
-                    {t('Select models to run batch tests.')}
-                  </p>
-                </div>
-                <Input
-                  placeholder={t('Filter models...')}
-                  value={searchTerm}
-                  onChange={(e) => setSearchTerm(e.target.value)}
-                  className='sm:w-64'
-                />
-              </div>
-
-              <div className='space-y-3'>
-                <div
-                  className='overflow-hidden rounded-md border'
-                  role='region'
-                  aria-label={t('Channel models')}
-                >
-                  <div className='max-h-90 overflow-auto **:data-[slot=table-container]:overflow-visible'>
-                    <Table className='w-max min-w-full table-auto'>
-                      <colgroup>
-                        <col className='w-10 min-w-10' />
-                        <col className='w-auto' />
-                        <col className='w-70' />
-                        <col className='w-24 sm:w-28' />
-                      </colgroup>
-                      <TableHeader>
-                        {table.getHeaderGroups().map((headerGroup) => (
-                          <TableRow key={headerGroup.id}>
-                            {headerGroup.headers.map((header) => (
-                              <TableHead
-                                key={header.id}
-                                className={getTestTableColumnClass(
-                                  header.column.id
-                                )}
-                              >
-                                {header.isPlaceholder
-                                  ? null
-                                  : flexRender(
-                                      header.column.columnDef.header,
-                                      header.getContext()
-                                    )}
-                              </TableHead>
-                            ))}
-                          </TableRow>
-                        ))}
-                      </TableHeader>
-                      <TableBody>
-                        {table.getRowModel().rows.length ? (
-                          table.getRowModel().rows.map((row) => (
-                            <TableRow
-                              key={row.id}
-                              data-state={
-                                row.getIsSelected() ? 'selected' : undefined
-                              }
-                            >
-                              {row.getVisibleCells().map((cell) => (
-                                <TableCell
-                                  key={cell.id}
-                                  className={getTestTableColumnClass(
-                                    cell.column.id
-                                  )}
-                                >
-                                  {flexRender(
-                                    cell.column.columnDef.cell,
-                                    cell.getContext()
-                                  )}
-                                </TableCell>
-                              ))}
-                            </TableRow>
-                          ))
-                        ) : (
-                          <TableRow>
-                            <TableCell
-                              colSpan={table.getVisibleLeafColumns().length}
-                              className='text-muted-foreground h-16 text-center text-sm'
-                            >
-                              {models.length
-                                ? 'No models matched your search.'
-                                : 'This channel has no configured models.'}
-                            </TableCell>
-                          </TableRow>
-                        )}
-                      </TableBody>
-                    </Table>
-                  </div>
-                </div>
-
-                <DataTablePagination table={table} />
-              </div>
-
-              <TestModelsBulkActions
-                table={table}
-                disabled={isAnyTesting}
-                onTestSelected={handleBatchTest}
-              />
-            </div>
-          </div>
-
-          <DialogFooter>
+      <Dialog
+        open={open}
+        onOpenChange={handleClose}
+        title={t('Test Channel Connection')}
+        description={
+          <>
+            {t('Test connectivity for:')}
+            <strong>{currentRow.name}</strong>
+          </>
+        }
+        contentClassName='max-h-[90vh] overflow-hidden sm:max-w-3xl'
+        contentHeight='auto'
+        bodyClassName='space-y-4'
+        footer={
+          <>
             <Button variant='outline' onClick={handleClose}>
               {t('Close')}
             </Button>
-          </DialogFooter>
-        </DialogContent>
+          </>
+        }
+      >
+        <div className='max-h-[78vh] space-y-4 overflow-y-auto py-4 pr-1'>
+          <div className='grid gap-4 md:grid-cols-2'>
+            <div className='grid gap-2'>
+              <Label htmlFor='endpoint-type'>{t('Endpoint Type')}</Label>
+              <Select
+                items={endpointSelectItems}
+                value={endpointType}
+                onValueChange={(v) => v !== null && setEndpointType(v)}
+              >
+                <SelectTrigger id='endpoint-type'>
+                  <SelectValue placeholder={t('Auto detect (default)')} />
+                </SelectTrigger>
+                <SelectContent alignItemWithTrigger={false}>
+                  <SelectGroup>
+                    {endpointSelectItems.map((option) => (
+                      <SelectItem key={option.value} value={option.value}>
+                        {option.label}
+                      </SelectItem>
+                    ))}
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+              <p className='text-muted-foreground text-xs'>
+                {t(
+                  'Override the endpoint used for testing. Leave empty to auto detect.'
+                )}
+              </p>
+            </div>
+            <div className='grid gap-2'>
+              <Label htmlFor='stream-toggle'>{t('Stream Mode')}</Label>
+              <div className='flex items-center gap-2'>
+                <Switch
+                  id='stream-toggle'
+                  checked={isStreamTest}
+                  onCheckedChange={setIsStreamTest}
+                  disabled={streamDisabled}
+                />
+                <span className='text-sm'>
+                  {isStreamTest ? t('Enabled') : t('Disabled')}
+                </span>
+              </div>
+              <p className='text-muted-foreground text-xs'>
+                {t('Enable streaming mode for the test request.')}
+              </p>
+            </div>
+          </div>
+
+          <div className='space-y-3 max-sm:has-[div[role="toolbar"]]:pb-16'>
+            <div className='flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between'>
+              <div>
+                <p className='text-sm font-medium'>{t('Channel models')}</p>
+                <p className='text-muted-foreground text-xs'>
+                  {t('Select models to run batch tests.')}
+                </p>
+              </div>
+              <Input
+                placeholder={t('Filter models...')}
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                className='sm:w-64'
+              />
+            </div>
+
+            <div className='space-y-3'>
+              <DataTableView
+                table={table}
+                containerClassName='rounded-md'
+                containerProps={{
+                  role: 'region',
+                  'aria-label': t('Channel models'),
+                }}
+                tableContainerClassName='max-h-90 overflow-auto **:data-[slot=table-container]:overflow-visible'
+                tableClassName='w-max min-w-full table-auto'
+                pinnedColumns={[
+                  {
+                    columnId: 'actions',
+                    side: 'right',
+                    className: 'w-24 min-w-24 sm:w-28 sm:min-w-28',
+                    cellClassName: 'bg-popover',
+                  },
+                ]}
+                colgroup={
+                  <colgroup>
+                    <col className='w-10 min-w-10' />
+                    <col className='w-auto' />
+                    <col className='w-70' />
+                    <col className='w-24 sm:w-28' />
+                  </colgroup>
+                }
+                getColumnClassName={(columnId) =>
+                  getTestTableColumnClass(columnId)
+                }
+                emptyContent={
+                  models.length
+                    ? t('No models matched your search.')
+                    : t('This channel has no configured models.')
+                }
+                emptyCellClassName='text-muted-foreground h-16 text-center text-sm'
+              />
+
+              <DataTablePagination table={table} />
+            </div>
+
+            <TestModelsBulkActions
+              table={table}
+              disabled={isAnyTesting}
+              onTestSelected={handleBatchTest}
+            />
+          </div>
+        </div>
       </Dialog>
       <FailureDetailsSheet
         details={failureDetails}

web/default/src/features/channels/components/dialogs/codex-oauth-dialog.tsx

@@ -24,15 +24,8 @@ import { tryPrettyJson } from '@/lib/utils'
 import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard'
 import { Alert, AlertDescription } from '@/components/ui/alert'
 import { Button } from '@/components/ui/button'
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog'
 import { Input } from '@/components/ui/input'
+import { Dialog } from '@/components/dialog'
 import { completeCodexOAuth, startCodexOAuth } from '../../api'
 
 type CodexOAuthDialogProps = {
@@ -129,78 +122,18 @@ export function CodexOAuthDialog({
   }
 
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className='sm:max-w-2xl'>
-        <DialogHeader>
-          <DialogTitle>{t('Codex Authorization')}</DialogTitle>
-          <DialogDescription>
-            {t(
-              'Generate a Codex OAuth credential and paste it into the channel key field.'
-            )}
-          </DialogDescription>
-        </DialogHeader>
-
-        <div className='space-y-4'>
-          <Alert>
-            <AlertDescription>
-              {t(
-                '1) Click "Open authorization page" and complete login. 2) Your browser may redirect to localhost (it is OK if the page does not load). 3) Copy the full URL from the address bar and paste it below. 4) Click "Generate credential".'
-              )}
-            </AlertDescription>
-          </Alert>
-
-          <div className='flex flex-wrap gap-2'>
-            <Button onClick={handleStart} disabled={state.isStarting}>
-              {state.isStarting ? (
-                <Loader2 className='mr-2 h-4 w-4 animate-spin' />
-              ) : (
-                <ExternalLink className='mr-2 h-4 w-4' />
-              )}
-              {t('Open authorization page')}
-            </Button>
-
-            <Button
-              type='button'
-              variant='outline'
-              disabled={!canCopyAuthorizeUrl}
-              onClick={async () => {
-                if (!state.authorizeUrl) return
-                await copyToClipboard(state.authorizeUrl)
-              }}
-              aria-label={t('Copy authorization link')}
-              title={t('Copy authorization link')}
-            >
-              {copiedText === state.authorizeUrl ? (
-                <Check className='mr-2 h-4 w-4 text-green-600' />
-              ) : (
-                <Copy className='mr-2 h-4 w-4' />
-              )}
-              {t('Copy authorization link')}
-            </Button>
-          </div>
-
-          <div className='space-y-2'>
-            <div className='text-sm font-medium'>{t('Callback URL')}</div>
-            <Input
-              value={state.callbackUrl}
-              onChange={(e) =>
-                setState((prev) => ({ ...prev, callbackUrl: e.target.value }))
-              }
-              placeholder={t(
-                'Paste the full callback URL (includes code & state)'
-              )}
-              autoComplete='off'
-              spellCheck={false}
-            />
-            <div className='text-muted-foreground text-xs'>
-              {t(
-                'Tip: The generated key is a JSON credential including access_token / refresh_token / account_id.'
-              )}
-            </div>
-          </div>
-        </div>
-
-        <DialogFooter>
+    <Dialog
+      open={open}
+      onOpenChange={onOpenChange}
+      title={t('Codex Authorization')}
+      description={t(
+        'Generate a Codex OAuth credential and paste it into the channel key field.'
+      )}
+      contentClassName='sm:max-w-2xl'
+      contentHeight='auto'
+      bodyClassName='space-y-4'
+      footer={
+        <>
           <Button
             type='button'
             variant='outline'
@@ -215,8 +148,68 @@ export function CodexOAuthDialog({
             )}
             {state.isCompleting ? t('Generating...') : t('Generate credential')}
           </Button>
-        </DialogFooter>
-      </DialogContent>
+        </>
+      }
+    >
+      <div className='space-y-4'>
+        <Alert>
+          <AlertDescription>
+            {t(
+              '1) Click "Open authorization page" and complete login. 2) Your browser may redirect to localhost (it is OK if the page does not load). 3) Copy the full URL from the address bar and paste it below. 4) Click "Generate credential".'
+            )}
+          </AlertDescription>
+        </Alert>
+
+        <div className='flex flex-wrap gap-2'>
+          <Button onClick={handleStart} disabled={state.isStarting}>
+            {state.isStarting ? (
+              <Loader2 className='mr-2 h-4 w-4 animate-spin' />
+            ) : (
+              <ExternalLink className='mr-2 h-4 w-4' />
+            )}
+            {t('Open authorization page')}
+          </Button>
+
+          <Button
+            type='button'
+            variant='outline'
+            disabled={!canCopyAuthorizeUrl}
+            onClick={async () => {
+              if (!state.authorizeUrl) return
+              await copyToClipboard(state.authorizeUrl)
+            }}
+            aria-label={t('Copy authorization link')}
+            title={t('Copy authorization link')}
+          >
+            {copiedText === state.authorizeUrl ? (
+              <Check className='mr-2 h-4 w-4 text-green-600' />
+            ) : (
+              <Copy className='mr-2 h-4 w-4' />
+            )}
+            {t('Copy authorization link')}
+          </Button>
+        </div>
+
+        <div className='space-y-2'>
+          <div className='text-sm font-medium'>{t('Callback URL')}</div>
+          <Input
+            value={state.callbackUrl}
+            onChange={(e) =>
+              setState((prev) => ({ ...prev, callbackUrl: e.target.value }))
+            }
+            placeholder={t(
+              'Paste the full callback URL (includes code & state)'
+            )}
+            autoComplete='off'
+            spellCheck={false}
+          />
+          <div className='text-muted-foreground text-xs'>
+            {t(
+              'Tip: The generated key is a JSON credential including access_token / refresh_token / account_id.'
+            )}
+          </div>
+        </div>
+      </div>
     </Dialog>
   )
 }

web/default/src/features/channels/components/dialogs/codex-usage-dialog.tsx

@@ -31,16 +31,9 @@ import { useTranslation } from 'react-i18next'
 import dayjs from '@/lib/dayjs'
 import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard'
 import { Button } from '@/components/ui/button'
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog'
 import { Progress } from '@/components/ui/progress'
 import { ScrollArea } from '@/components/ui/scroll-area'
+import { Dialog } from '@/components/dialog'
 import { StatusBadge, type StatusBadgeProps } from '@/components/status-badge'
 
 type CodexRateLimitWindow = {
@@ -414,177 +407,23 @@ export function CodexUsageDialog({
   }, [response])
 
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className='sm:max-w-3xl'>
-        <DialogHeader>
-          <DialogTitle className='flex items-center gap-2'>
-            {t('Codex Account & Usage')}
-          </DialogTitle>
-          <DialogDescription>
-            {t('Channel:')} <strong>{channelName || '-'}</strong>{' '}
-            {channelId ? `(#${channelId})` : ''}
-          </DialogDescription>
-        </DialogHeader>
-
-        <div className='space-y-4'>
-          {errorMessage && (
-            <div className='rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700 dark:border-red-800 dark:bg-red-950/30 dark:text-red-400'>
-              {errorMessage}
-            </div>
-          )}
-
-          {/* Account summary */}
-          <div className='rounded-lg border p-4'>
-            <div className='flex flex-wrap items-center justify-between gap-2'>
-              <div className='flex flex-wrap items-center gap-2'>
-                <StatusBadge
-                  label={accountBadge.label}
-                  variant={accountBadge.variant}
-                  copyable={false}
-                />
-                {statusBadge}
-                {typeof response?.upstream_status === 'number' && (
-                  <StatusBadge
-                    label={`${t('Status:')} ${response.upstream_status}`}
-                    variant='neutral'
-                    copyable={false}
-                  />
-                )}
-              </div>
-              {onRefresh && (
-                <Button
-                  type='button'
-                  variant='outline'
-                  size='sm'
-                  onClick={onRefresh}
-                  disabled={Boolean(isRefreshing)}
-                >
-                  <RefreshCw className='mr-1.5 h-3.5 w-3.5' />
-                  {t('Refresh')}
-                </Button>
-              )}
-            </div>
-
-            {/* Account identity info */}
-            <div className='bg-muted/30 mt-3 rounded-md px-3 py-2'>
-              <CopyableField
-                icon={<User className='h-3.5 w-3.5' />}
-                label='User ID'
-                value={payload?.user_id}
-                mono
-              />
-              <CopyableField
-                icon={<Mail className='h-3.5 w-3.5' />}
-                label={t('Email')}
-                value={payload?.email}
-              />
-              <CopyableField
-                icon={<Hash className='h-3.5 w-3.5' />}
-                label='Account ID'
-                value={payload?.account_id}
-                mono
-              />
-            </div>
-          </div>
-
-          {/* Rate limit windows */}
-          <div className='space-y-5'>
-            <div>
-              <div className='mb-1 text-sm font-medium'>
-                {t('Rate Limit Windows')}
-              </div>
-              <p className='text-muted-foreground mb-3 text-xs'>
-                {t(
-                  'Tracks current account base limits and additional metered usage on Codex upstream.'
-                )}
-              </p>
-              <RateLimitGroupSection
-                title={t('Base Limits')}
-                description={t('Base rate limit windows for this account.')}
-                source={payload}
-              />
-            </div>
-
-            {additionalRateLimits.length > 0 && (
-              <div className='space-y-4 border-t pt-4'>
-                <div>
-                  <div className='text-sm font-medium'>
-                    {t('Additional Limits')}
-                  </div>
-                  <p className='text-muted-foreground text-xs'>
-                    {t(
-                      'Per-feature metered windows split by model or capability.'
-                    )}
-                  </p>
-                </div>
-                <div className='space-y-4'>
-                  {additionalRateLimits.map((item, index) => {
-                    const limitName =
-                      item.limit_name ||
-                      item.metered_feature ||
-                      `${t('Additional Limit')} ${index + 1}`
-                    return (
-                      <div
-                        key={`${limitName}-${item.metered_feature ?? ''}-${index}`}
-                        className={index > 0 ? 'border-t pt-4' : ''}
-                      >
-                        <RateLimitGroupSection
-                          title={limitName}
-                          description={t('Additional metered capability')}
-                          source={item}
-                          meteredFeature={item.metered_feature}
-                        />
-                      </div>
-                    )
-                  })}
-                </div>
-              </div>
-            )}
-          </div>
-
-          {/* Raw JSON collapsible */}
-          <div className='rounded-lg border'>
-            <button
-              type='button'
-              className='hover:bg-muted/40 flex w-full items-center justify-between gap-2 p-3 transition-colors'
-              onClick={() => setShowRawJson((v) => !v)}
-            >
-              <div className='text-sm font-medium'>{t('Raw JSON')}</div>
-              {showRawJson ? (
-                <ChevronUp className='text-muted-foreground h-4 w-4' />
-              ) : (
-                <ChevronDown className='text-muted-foreground h-4 w-4' />
-              )}
-            </button>
-            {showRawJson && (
-              <>
-                <div className='flex justify-end border-t px-3 py-2'>
-                  <Button
-                    type='button'
-                    variant='outline'
-                    size='sm'
-                    onClick={() => copyToClipboard(rawJsonText)}
-                    disabled={!rawJsonText}
-                  >
-                    {copiedText === rawJsonText ? (
-                      <Check className='mr-1.5 h-3.5 w-3.5 text-green-600' />
-                    ) : (
-                      <Copy className='mr-1.5 h-3.5 w-3.5' />
-                    )}
-                    {t('Copy')}
-                  </Button>
-                </div>
-                <ScrollArea className='max-h-[50vh]'>
-                  <pre className='bg-muted/30 m-0 p-3 text-xs break-words whitespace-pre-wrap'>
-                    {rawJsonText || '-'}
-                  </pre>
-                </ScrollArea>
-              </>
-            )}
-          </div>
-        </div>
-
-        <DialogFooter>
+    <Dialog
+      open={open}
+      onOpenChange={onOpenChange}
+      title={t('Codex Account & Usage')}
+      description={
+        <>
+          {t('Channel:')}
+          <strong>{channelName || '-'}</strong>{' '}
+          {channelId ? `(#${channelId})` : ''}
+        </>
+      }
+      contentClassName='sm:max-w-3xl'
+      titleClassName='flex items-center gap-2'
+      contentHeight='auto'
+      bodyClassName='space-y-4'
+      footer={
+        <>
           <Button
             type='button'
             variant='outline'
@@ -592,8 +431,166 @@ export function CodexUsageDialog({
           >
             {t('Close')}
           </Button>
-        </DialogFooter>
-      </DialogContent>
+        </>
+      }
+    >
+      <div className='space-y-4'>
+        {errorMessage && (
+          <div className='rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700 dark:border-red-800 dark:bg-red-950/30 dark:text-red-400'>
+            {errorMessage}
+          </div>
+        )}
+
+        {/* Account summary */}
+        <div className='rounded-lg border p-4'>
+          <div className='flex flex-wrap items-center justify-between gap-2'>
+            <div className='flex flex-wrap items-center gap-2'>
+              <StatusBadge
+                label={accountBadge.label}
+                variant={accountBadge.variant}
+                copyable={false}
+              />
+              {statusBadge}
+              {typeof response?.upstream_status === 'number' && (
+                <StatusBadge
+                  label={`${t('Status:')} ${response.upstream_status}`}
+                  variant='neutral'
+                  copyable={false}
+                />
+              )}
+            </div>
+            {onRefresh && (
+              <Button
+                type='button'
+                variant='outline'
+                size='sm'
+                onClick={onRefresh}
+                disabled={Boolean(isRefreshing)}
+              >
+                <RefreshCw className='mr-1.5 h-3.5 w-3.5' />
+                {t('Refresh')}
+              </Button>
+            )}
+          </div>
+
+          {/* Account identity info */}
+          <div className='bg-muted/30 mt-3 rounded-md px-3 py-2'>
+            <CopyableField
+              icon={<User className='h-3.5 w-3.5' />}
+              label='User ID'
+              value={payload?.user_id}
+              mono
+            />
+            <CopyableField
+              icon={<Mail className='h-3.5 w-3.5' />}
+              label={t('Email')}
+              value={payload?.email}
+            />
+            <CopyableField
+              icon={<Hash className='h-3.5 w-3.5' />}
+              label='Account ID'
+              value={payload?.account_id}
+              mono
+            />
+          </div>
+        </div>
+
+        {/* Rate limit windows */}
+        <div className='space-y-5'>
+          <div>
+            <div className='mb-1 text-sm font-medium'>
+              {t('Rate Limit Windows')}
+            </div>
+            <p className='text-muted-foreground mb-3 text-xs'>
+              {t(
+                'Tracks current account base limits and additional metered usage on Codex upstream.'
+              )}
+            </p>
+            <RateLimitGroupSection
+              title={t('Base Limits')}
+              description={t('Base rate limit windows for this account.')}
+              source={payload}
+            />
+          </div>
+
+          {additionalRateLimits.length > 0 && (
+            <div className='space-y-4 border-t pt-4'>
+              <div>
+                <div className='text-sm font-medium'>
+                  {t('Additional Limits')}
+                </div>
+                <p className='text-muted-foreground text-xs'>
+                  {t(
+                    'Per-feature metered windows split by model or capability.'
+                  )}
+                </p>
+              </div>
+              <div className='space-y-4'>
+                {additionalRateLimits.map((item, index) => {
+                  const limitName =
+                    item.limit_name ||
+                    item.metered_feature ||
+                    `${t('Additional Limit')} ${index + 1}`
+                  return (
+                    <div
+                      key={`${limitName}-${item.metered_feature ?? ''}-${index}`}
+                      className={index > 0 ? 'border-t pt-4' : ''}
+                    >
+                      <RateLimitGroupSection
+                        title={limitName}
+                        description={t('Additional metered capability')}
+                        source={item}
+                        meteredFeature={item.metered_feature}
+                      />
+                    </div>
+                  )
+                })}
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Raw JSON collapsible */}
+        <div className='rounded-lg border'>
+          <button
+            type='button'
+            className='hover:bg-muted/40 flex w-full items-center justify-between gap-2 p-3 transition-colors'
+            onClick={() => setShowRawJson((v) => !v)}
+          >
+            <div className='text-sm font-medium'>{t('Raw JSON')}</div>
+            {showRawJson ? (
+              <ChevronUp className='text-muted-foreground h-4 w-4' />
+            ) : (
+              <ChevronDown className='text-muted-foreground h-4 w-4' />
+            )}
+          </button>
+          {showRawJson && (
+            <>
+              <div className='flex justify-end border-t px-3 py-2'>
+                <Button
+                  type='button'
+                  variant='outline'
+                  size='sm'
+                  onClick={() => copyToClipboard(rawJsonText)}
+                  disabled={!rawJsonText}
+                >
+                  {copiedText === rawJsonText ? (
+                    <Check className='mr-1.5 h-3.5 w-3.5 text-green-600' />
+                  ) : (
+                    <Copy className='mr-1.5 h-3.5 w-3.5' />
+                  )}
+                  {t('Copy')}
+                </Button>
+              </div>
+              <ScrollArea className='max-h-[50vh]'>
+                <pre className='bg-muted/30 m-0 p-3 text-xs break-words whitespace-pre-wrap'>
+                  {rawJsonText || '-'}
+                </pre>
+              </ScrollArea>
+            </>
+          )}
+        </div>
+      </div>
     </Dialog>
   )
 }

web/default/src/features/channels/components/dialogs/copy-channel-dialog.tsx

@@ -22,16 +22,9 @@ import { Loader2 } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { Button } from '@/components/ui/button'
 import { Checkbox } from '@/components/ui/checkbox'
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
+import { Dialog } from '@/components/dialog'
 import { handleCopyChannel } from '../../lib'
 import { useChannels } from '../channels-provider'
 
@@ -74,45 +67,20 @@ export function CopyChannelDialog({
   }
 
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>{t('Copy Channel')}</DialogTitle>
-          <DialogDescription>
-            {t('Create a copy of:')} <strong>{currentRow.name}</strong>
-          </DialogDescription>
-        </DialogHeader>
-
-        <div className='space-y-4 py-4'>
-          <div className='space-y-2'>
-            <Label htmlFor='suffix'>{t('Name Suffix')}</Label>
-            <Input
-              id='suffix'
-              placeholder={t('_copy')}
-              value={suffix}
-              onChange={(e) => setSuffix(e.target.value)}
-              disabled={isCopying}
-            />
-            <p className='text-muted-foreground text-xs'>
-              {t('New name will be:')} {currentRow.name}
-              {suffix}
-            </p>
-          </div>
-
-          <div className='flex items-center space-x-2'>
-            <Checkbox
-              id='reset-balance'
-              checked={resetBalance}
-              onCheckedChange={(checked) => setResetBalance(!!checked)}
-              disabled={isCopying}
-            />
-            <Label htmlFor='reset-balance' className='text-sm font-normal'>
-              {t('Reset balance and used quota')}
-            </Label>
-          </div>
-        </div>
-
-        <DialogFooter>
+    <Dialog
+      open={open}
+      onOpenChange={onOpenChange}
+      title={t('Copy Channel')}
+      description={
+        <>
+          {t('Create a copy of:')}
+          <strong>{currentRow.name}</strong>
+        </>
+      }
+      contentHeight='auto'
+      bodyClassName='space-y-4'
+      footer={
+        <>
           <Button
             variant='outline'
             onClick={() => onOpenChange(false)}
@@ -122,10 +90,39 @@ export function CopyChannelDialog({
           </Button>
           <Button onClick={handleCopy} disabled={isCopying}>
             {isCopying && <Loader2 className='mr-2 h-4 w-4 animate-spin' />}
-            {isCopying ? 'Copying...' : 'Copy Channel'}
+            {isCopying ? t('Copying...') : t('Copy Channel')}
           </Button>
-        </DialogFooter>
-      </DialogContent>
+        </>
+      }
+    >
+      <div className='space-y-4 py-4'>
+        <div className='space-y-2'>
+          <Label htmlFor='suffix'>{t('Name Suffix')}</Label>
+          <Input
+            id='suffix'
+            placeholder={t('_copy')}
+            value={suffix}
+            onChange={(e) => setSuffix(e.target.value)}
+            disabled={isCopying}
+          />
+          <p className='text-muted-foreground text-xs'>
+            {t('New name will be:')} {currentRow.name}
+            {suffix}
+          </p>
+        </div>
+
+        <div className='flex items-center space-x-2'>
+          <Checkbox
+            id='reset-balance'
+            checked={resetBalance}
+            onCheckedChange={(checked) => setResetBalance(!!checked)}
+            disabled={isCopying}
+          />
+          <Label htmlFor='reset-balance' className='text-sm font-normal'>
+            {t('Reset balance and used quota')}
+          </Label>
+        </div>
+      </div>
     </Dialog>
   )
 }

web/default/src/features/channels/components/dialogs/edit-tag-dialog.tsx

@@ -22,14 +22,6 @@ import { Loader2 } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { toast } from 'sonner'
 import { Button } from '@/components/ui/button'
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { ScrollArea } from '@/components/ui/scroll-area'
@@ -43,6 +35,7 @@ import {
 } from '@/components/ui/select'
 import { Separator } from '@/components/ui/separator'
 import { Textarea } from '@/components/ui/textarea'
+import { Dialog } from '@/components/dialog'
 import { GroupBadge } from '@/components/group-badge'
 import { StatusBadge } from '@/components/status-badge'
 import {
@@ -222,216 +215,23 @@ export function EditTagDialog({ open, onOpenChange }: EditTagDialogProps) {
   if (!currentTag) return null
 
   return (
-    <Dialog open={open} onOpenChange={handleClose}>
-      <DialogContent className='max-h-[90vh] max-w-2xl'>
-        <DialogHeader>
-          <DialogTitle>
-            {t('Edit Tag:')} {currentTag}
-          </DialogTitle>
-          <DialogDescription>
-            {t(
-              'Batch edit all channels with this tag. Leave fields empty to keep current values.'
-            )}
-          </DialogDescription>
-        </DialogHeader>
-
-        <ScrollArea className='max-h-[60vh] pr-4'>
-          <div className='space-y-6'>
-            {/* Tag Name */}
-            <div className='space-y-2'>
-              <Label htmlFor='new-tag'>
-                {t('Tag Name')}
-                <span className='text-muted-foreground ml-2 text-xs'>
-                  {t('(Leave empty to dissolve tag)')}
-                </span>
-              </Label>
-              <Input
-                id='new-tag'
-                value={newTag}
-                onChange={(e) => setNewTag(e.target.value)}
-                placeholder={t('Enter new tag name or leave empty')}
-              />
-            </div>
-
-            <Separator />
-
-            {/* Models */}
-            <div className='space-y-2'>
-              <Label>
-                {t('Models')}
-                <span className='text-muted-foreground ml-2 text-xs'>
-                  {t("(Override all channels' models)")}
-                </span>
-              </Label>
-
-              {isLoadingTagModels ? (
-                <div className='flex items-center gap-2 py-4'>
-                  <Loader2 className='h-4 w-4 animate-spin' />
-                  <span className='text-muted-foreground text-sm'>
-                    {t('Loading current models...')}
-                  </span>
-                </div>
-              ) : (
-                <>
-                  <div className='flex min-h-[60px] flex-wrap gap-2 rounded-md border p-3'>
-                    {selectedModels.length > 0 ? (
-                      selectedModels.map((model) => (
-                        <StatusBadge
-                          key={model}
-                          variant='neutral'
-                          className='cursor-pointer transition-opacity hover:opacity-70'
-                          copyable={false}
-                          onClick={() => handleRemoveModel(model)}
-                        >
-                          {model} ×
-                        </StatusBadge>
-                      ))
-                    ) : (
-                      <span className='text-muted-foreground text-sm'>
-                        {t('No models selected')}
-                      </span>
-                    )}
-                  </div>
-
-                  <div className='flex gap-2'>
-                    <Select<string>
-                      items={[
-                        ...availableModels.map((model) => ({
-                          value: model,
-                          label: model,
-                        })),
-                      ]}
-                      onValueChange={(value) => {
-                        if (value === null) return
-                        if (!selectedModels.includes(value)) {
-                          setSelectedModels([...selectedModels, value])
-                        }
-                      }}
-                    >
-                      <SelectTrigger className='flex-1'>
-                        <SelectValue
-                          placeholder={t('Add from available models...')}
-                        />
-                      </SelectTrigger>
-                      <SelectContent alignItemWithTrigger={false}>
-                        <SelectGroup>
-                          <ScrollArea className='h-60'>
-                            {availableModels.map((model) => (
-                              <SelectItem key={model} value={model}>
-                                {model}
-                              </SelectItem>
-                            ))}
-                          </ScrollArea>
-                        </SelectGroup>
-                      </SelectContent>
-                    </Select>
-                  </div>
-
-                  <div className='flex gap-2'>
-                    <Input
-                      placeholder={t('Custom model (comma-separated)')}
-                      value={customModel}
-                      onChange={(e) => setCustomModel(e.target.value)}
-                      onKeyDown={(e) => {
-                        if (e.key === 'Enter') {
-                          e.preventDefault()
-                          handleAddCustomModel()
-                        }
-                      }}
-                    />
-                    <Button
-                      type='button'
-                      variant='secondary'
-                      onClick={handleAddCustomModel}
-                    >
-                      {t('Add')}
-                    </Button>
-                  </div>
-                </>
-              )}
-            </div>
-
-            <Separator />
-
-            {/* Model Mapping */}
-            <div className='space-y-2'>
-              <Label htmlFor='model-mapping'>
-                {t('Model Mapping (JSON)')}
-                <span className='text-muted-foreground ml-2 text-xs'>
-                  {t('(Optional: redirect model names)')}
-                </span>
-              </Label>
-              <Textarea
-                id='model-mapping'
-                value={modelMapping}
-                onChange={(e) => setModelMapping(e.target.value)}
-                placeholder={'{\n  "gpt-3.5-turbo": "gpt-3.5-turbo-0125"\n}'}
-                rows={4}
-                className='font-mono text-sm'
-              />
-              <div className='flex gap-2'>
-                <Button
-                  type='button'
-                  variant='outline'
-                  size='sm'
-                  onClick={() =>
-                    setModelMapping(
-                      JSON.stringify(
-                        { 'gpt-3.5-turbo': 'gpt-3.5-turbo-0125' },
-                        null,
-                        2
-                      )
-                    )
-                  }
-                >
-                  {t('Example')}
-                </Button>
-                <Button
-                  type='button'
-                  variant='outline'
-                  size='sm'
-                  onClick={() => setModelMapping(JSON.stringify({}, null, 2))}
-                >
-                  {t('Clear Mapping')}
-                </Button>
-                <Button
-                  type='button'
-                  variant='outline'
-                  size='sm'
-                  onClick={() => setModelMapping('')}
-                >
-                  {t('No Change')}
-                </Button>
-              </div>
-            </div>
-
-            <Separator />
-
-            {/* Groups */}
-            <div className='space-y-2'>
-              <Label>
-                {t('Groups')}
-                <span className='text-muted-foreground ml-2 text-xs'>
-                  {t("(Override all channels' groups)")}
-                </span>
-              </Label>
-              <div className='flex min-h-[60px] flex-wrap gap-2 rounded-md border p-3'>
-                {availableGroups.map((group) => (
-                  <GroupBadge
-                    key={group}
-                    group={group}
-                    className={`cursor-pointer rounded-sm transition-opacity hover:opacity-70 ${
-                      selectedGroups.includes(group) ? 'bg-muted/70 px-1' : ''
-                    }`}
-                    onClick={() => handleToggleGroup(group)}
-                  />
-                ))}
-              </div>
-            </div>
-          </div>
-        </ScrollArea>
-
-        <DialogFooter>
+    <Dialog
+      open={open}
+      onOpenChange={handleClose}
+      title={
+        <>
+          {t('Edit Tag:')}
+          {currentTag}
+        </>
+      }
+      description={t(
+        'Batch edit all channels with this tag. Leave fields empty to keep current values.'
+      )}
+      contentClassName='max-h-[90vh] max-w-2xl'
+      contentHeight='auto'
+      bodyClassName='space-y-4'
+      footer={
+        <>
           <Button variant='outline' onClick={handleClose}>
             {t('Cancel')}
           </Button>
@@ -439,8 +239,204 @@ export function EditTagDialog({ open, onOpenChange }: EditTagDialogProps) {
             {isSubmitting && <Loader2 className='mr-2 h-4 w-4 animate-spin' />}
             {t('Save Changes')}
           </Button>
-        </DialogFooter>
-      </DialogContent>
+        </>
+      }
+    >
+      <ScrollArea className='max-h-[60vh] pr-4'>
+        <div className='space-y-6'>
+          {/* Tag Name */}
+          <div className='space-y-2'>
+            <Label htmlFor='new-tag'>
+              {t('Tag Name')}
+              <span className='text-muted-foreground ml-2 text-xs'>
+                {t('(Leave empty to dissolve tag)')}
+              </span>
+            </Label>
+            <Input
+              id='new-tag'
+              value={newTag}
+              onChange={(e) => setNewTag(e.target.value)}
+              placeholder={t('Enter new tag name or leave empty')}
+            />
+          </div>
+
+          <Separator />
+
+          {/* Models */}
+          <div className='space-y-2'>
+            <Label>
+              {t('Models')}
+              <span className='text-muted-foreground ml-2 text-xs'>
+                {t("(Override all channels' models)")}
+              </span>
+            </Label>
+
+            {isLoadingTagModels ? (
+              <div className='flex items-center gap-2 py-4'>
+                <Loader2 className='h-4 w-4 animate-spin' />
+                <span className='text-muted-foreground text-sm'>
+                  {t('Loading current models...')}
+                </span>
+              </div>
+            ) : (
+              <>
+                <div className='flex min-h-[60px] flex-wrap gap-2 rounded-md border p-3'>
+                  {selectedModels.length > 0 ? (
+                    selectedModels.map((model) => (
+                      <StatusBadge
+                        key={model}
+                        variant='neutral'
+                        className='cursor-pointer transition-opacity hover:opacity-70'
+                        copyable={false}
+                        onClick={() => handleRemoveModel(model)}
+                      >
+                        {model} ×
+                      </StatusBadge>
+                    ))
+                  ) : (
+                    <span className='text-muted-foreground text-sm'>
+                      {t('No models selected')}
+                    </span>
+                  )}
+                </div>
+
+                <div className='flex gap-2'>
+                  <Select<string>
+                    items={[
+                      ...availableModels.map((model) => ({
+                        value: model,
+                        label: model,
+                      })),
+                    ]}
+                    onValueChange={(value) => {
+                      if (value === null) return
+                      if (!selectedModels.includes(value)) {
+                        setSelectedModels([...selectedModels, value])
+                      }
+                    }}
+                  >
+                    <SelectTrigger className='flex-1'>
+                      <SelectValue
+                        placeholder={t('Add from available models...')}
+                      />
+                    </SelectTrigger>
+                    <SelectContent alignItemWithTrigger={false}>
+                      <SelectGroup>
+                        <ScrollArea className='h-60'>
+                          {availableModels.map((model) => (
+                            <SelectItem key={model} value={model}>
+                              {model}
+                            </SelectItem>
+                          ))}
+                        </ScrollArea>
+                      </SelectGroup>
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                <div className='flex gap-2'>
+                  <Input
+                    placeholder={t('Custom model (comma-separated)')}
+                    value={customModel}
+                    onChange={(e) => setCustomModel(e.target.value)}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter') {
+                        e.preventDefault()
+                        handleAddCustomModel()
+                      }
+                    }}
+                  />
+                  <Button
+                    type='button'
+                    variant='secondary'
+                    onClick={handleAddCustomModel}
+                  >
+                    {t('Add')}
+                  </Button>
+                </div>
+              </>
+            )}
+          </div>
+
+          <Separator />
+
+          {/* Model Mapping */}
+          <div className='space-y-2'>
+            <Label htmlFor='model-mapping'>
+              {t('Model Mapping (JSON)')}
+              <span className='text-muted-foreground ml-2 text-xs'>
+                {t('(Optional: redirect model names)')}
+              </span>
+            </Label>
+            <Textarea
+              id='model-mapping'
+              value={modelMapping}
+              onChange={(e) => setModelMapping(e.target.value)}
+              placeholder={'{\n  "gpt-3.5-turbo": "gpt-3.5-turbo-0125"\n}'}
+              rows={4}
+              className='font-mono text-sm'
+            />
+            <div className='flex gap-2'>
+              <Button
+                type='button'
+                variant='outline'
+                size='sm'
+                onClick={() =>
+                  setModelMapping(
+                    JSON.stringify(
+                      { 'gpt-3.5-turbo': 'gpt-3.5-turbo-0125' },
+                      null,
+                      2
+                    )
+                  )
+                }
+              >
+                {t('Example')}
+              </Button>
+              <Button
+                type='button'
+                variant='outline'
+                size='sm'
+                onClick={() => setModelMapping(JSON.stringify({}, null, 2))}
+              >
+                {t('Clear Mapping')}
+              </Button>
+              <Button
+                type='button'
+                variant='outline'
+                size='sm'
+                onClick={() => setModelMapping('')}
+              >
+                {t('No Change')}
+              </Button>
+            </div>
+          </div>
+
+          <Separator />
+
+          {/* Groups */}
+          <div className='space-y-2'>
+            <Label>
+              {t('Groups')}
+              <span className='text-muted-foreground ml-2 text-xs'>
+                {t("(Override all channels' groups)")}
+              </span>
+            </Label>
+            <div className='flex min-h-[60px] flex-wrap gap-2 rounded-md border p-3'>
+              {availableGroups.map((group) => (
+                <GroupBadge
+                  key={group}
+                  group={group}
+                  className={`cursor-pointer rounded-sm transition-opacity hover:opacity-70 ${
+                    selectedGroups.includes(group) ? 'bg-muted/70 px-1' : ''
+                  }`}
+                  onClick={() => handleToggleGroup(group)}
+                />
+              ))}
+            </div>
+          </div>
+        </div>
+      </ScrollArea>
     </Dialog>
   )
 }