2459 lines
109 KiB
TypeScript
2459 lines
109 KiB
TypeScript
import { FormEvent, startTransition, useEffect, useState } from "react";
|
|
|
|
type PageKey = "overview" | "requests" | "profiles" | "rules" | "logs";
|
|
type Tone = "" | "success" | "error";
|
|
type ReasoningMatchMode = "formula_518n_minus_2" | "manual";
|
|
type AuthMode = "passthrough" | "fixed_bearer" | "manual_bearer" | "auth_json";
|
|
|
|
type GatewayConfig = {
|
|
profile_name?: string;
|
|
image_profile_name?: string;
|
|
listen_host?: string;
|
|
listen_port?: number;
|
|
management_access_key?: string;
|
|
management_access_key_configured?: boolean;
|
|
upstream_base_url?: string;
|
|
upstream_auth_mode?: string;
|
|
upstream_auth_env?: string | null;
|
|
upstream_auth_json_key?: string | null;
|
|
image_base_url?: string;
|
|
image_auth_mode?: string;
|
|
image_auth_env?: string | null;
|
|
image_auth_json_key?: string | null;
|
|
request_history_limit?: number;
|
|
model_remap?: string;
|
|
endpoints?: string[];
|
|
reasoning_match_mode?: ReasoningMatchMode;
|
|
reasoning_equals?: number[];
|
|
retryable_status_codes?: number[];
|
|
retryable_error_messages?: string[];
|
|
upstream_fetch_retry_attempts?: number;
|
|
upstream_fetch_retry_backoff_ms?: number;
|
|
non_stream_status_code?: number;
|
|
log_match?: boolean;
|
|
};
|
|
|
|
type Metrics = {
|
|
started_at?: string;
|
|
persistent_since?: string | null;
|
|
total_proxy_request_count?: number;
|
|
inspected_response_count?: number;
|
|
matched_response_count?: number;
|
|
reasoning_516_count?: number;
|
|
reasoning_516_ratio?: number;
|
|
token_totals?: {
|
|
input_tokens?: number;
|
|
output_tokens?: number;
|
|
total_tokens?: number;
|
|
reasoning_tokens?: number;
|
|
cached_tokens?: number;
|
|
};
|
|
observed_reasoning_counts?: Record<string, number>;
|
|
observed_reasoning_counts_total_keys?: number;
|
|
observed_reasoning_counts_omitted?: number;
|
|
};
|
|
|
|
type StatusPayload = {
|
|
ok: boolean;
|
|
listen?: string;
|
|
config?: GatewayConfig;
|
|
state?: {
|
|
provider_name?: string;
|
|
codex_current_base_url?: string;
|
|
latest_backup_path?: string;
|
|
};
|
|
paths?: {
|
|
config_path?: string;
|
|
profiles_dir?: string;
|
|
image_profiles_dir?: string;
|
|
log_path?: string;
|
|
thread_rules_path?: string;
|
|
};
|
|
metrics?: Metrics;
|
|
};
|
|
|
|
type Usage = {
|
|
input_tokens?: number | null;
|
|
output_tokens?: number | null;
|
|
total_tokens?: number | null;
|
|
reasoning_tokens?: number | null;
|
|
cached_tokens?: number | null;
|
|
};
|
|
|
|
type RequestEntry = {
|
|
seq: number;
|
|
request_id?: string | null;
|
|
response_id?: string | null;
|
|
thread_id?: string | null;
|
|
lifecycle_state?: string | null;
|
|
started_at?: string;
|
|
first_response_at?: string | null;
|
|
first_response_delay_ms?: number | null;
|
|
finished_at?: string | null;
|
|
last_activity_at?: string | null;
|
|
duration_ms?: number | null;
|
|
profile_name?: string;
|
|
method?: string;
|
|
path?: string;
|
|
request_body_bytes?: number | null;
|
|
response_bytes_received?: number | null;
|
|
model?: string | null;
|
|
requested_model?: string | null;
|
|
forwarded_model?: string | null;
|
|
reasoning_effort?: string | null;
|
|
reasoning_summary?: string | null;
|
|
response_stream?: boolean;
|
|
stream_chunk_count?: number | null;
|
|
usage_last_updated_at?: string | null;
|
|
upstream_attempt_count?: number | null;
|
|
reasoning_guard_enabled?: boolean;
|
|
reasoning_guard_thread_override?: string | null;
|
|
reasoning_retry_enabled?: boolean;
|
|
reasoning_retry_query_count?: number | null;
|
|
reasoning_retry_round_count?: number | null;
|
|
reasoning_retry_current_round?: number | null;
|
|
reasoning_retry_current_width?: number | null;
|
|
reasoning_retry_current_firsts?: Array<{
|
|
round?: number | null;
|
|
slot?: number | null;
|
|
first_response_at?: string | null;
|
|
first_response_delay_ms?: number | null;
|
|
outcome?: string | null;
|
|
status_code?: number | null;
|
|
upstream_status_code?: number | null;
|
|
reasoning_tokens?: number | null;
|
|
matched?: boolean | null;
|
|
}> | null;
|
|
reasoning_retry_winner_round?: number | null;
|
|
reasoning_retry_winner_slot?: number | null;
|
|
reasoning_retry_stop_reason?: string | null;
|
|
reasoning_retry_thread_mode?: string | null;
|
|
reasoning_retry_extra_inspected_count?: number | null;
|
|
reasoning_retry_extra_matched_count?: number | null;
|
|
reasoning_retry_extra_usage?: Usage | null;
|
|
reasoning_retry_extra_reasoning_counts?: Record<string, number> | null;
|
|
matched?: boolean;
|
|
status_code?: number | null;
|
|
upstream_status_code?: number | null;
|
|
upstream?: {
|
|
origin?: string;
|
|
path?: string;
|
|
route?: "default" | "images" | string;
|
|
auth_mode?: string;
|
|
auth_source?: string;
|
|
authorization_configured?: boolean;
|
|
status?: number;
|
|
content_type?: string;
|
|
} | null;
|
|
reasoning_tokens?: number | null;
|
|
usage?: Usage | null;
|
|
error?: string | null;
|
|
};
|
|
|
|
type RequestsPayload = {
|
|
total_entries?: number;
|
|
latest_seq?: number;
|
|
entries?: RequestEntry[];
|
|
};
|
|
|
|
type ThreadRuleEntry = {
|
|
thread_id: string;
|
|
reasoning_intercept_enabled: boolean;
|
|
updated_at?: string | null;
|
|
};
|
|
|
|
type ThreadRulesPayload = {
|
|
ok: boolean;
|
|
thread_rules_path?: string;
|
|
rules?: ThreadRuleEntry[];
|
|
saved_rule?: ThreadRuleEntry | null;
|
|
removed_rule?: ThreadRuleEntry | null;
|
|
message?: string;
|
|
};
|
|
|
|
type ProfileFormModel = {
|
|
listen_host?: string;
|
|
listen_port?: string;
|
|
upstream_base_url?: string;
|
|
auth_mode?: string;
|
|
auth_env?: string;
|
|
auth_file?: string;
|
|
manual_secret_file?: string;
|
|
manual_secret_configured?: boolean;
|
|
auth_json_path?: string;
|
|
auth_json_key?: string;
|
|
request_history_limit?: string;
|
|
model_remap?: string;
|
|
reasoning_match_mode?: ReasoningMatchMode;
|
|
reasoning_equals?: string;
|
|
retryable_status_codes?: string;
|
|
retryable_error_messages?: string[];
|
|
upstream_fetch_retry_attempts?: string;
|
|
upstream_fetch_retry_backoff_ms?: string;
|
|
endpoints?: string[];
|
|
};
|
|
|
|
type Profile = {
|
|
name: string;
|
|
active: boolean;
|
|
file_path?: string;
|
|
summary?: {
|
|
listen_host?: string;
|
|
listen_port?: string;
|
|
upstream_base_url?: string;
|
|
auth_mode?: string;
|
|
auth_source?: string;
|
|
request_history_limit?: string;
|
|
model_remap?: string;
|
|
reasoning_match_mode?: ReasoningMatchMode;
|
|
reasoning_equals?: string;
|
|
};
|
|
form?: ProfileFormModel;
|
|
};
|
|
|
|
type ImageProfileFormModel = {
|
|
base_url?: string;
|
|
auth_mode?: string;
|
|
auth_env?: string;
|
|
auth_file?: string;
|
|
manual_secret_file?: string;
|
|
manual_secret_configured?: boolean;
|
|
auth_json_path?: string;
|
|
auth_json_key?: string;
|
|
};
|
|
|
|
type ImageProfile = {
|
|
name: string;
|
|
active: boolean;
|
|
file_path?: string;
|
|
summary?: {
|
|
base_url?: string;
|
|
auth_mode?: string;
|
|
auth_source?: string;
|
|
};
|
|
form?: ImageProfileFormModel;
|
|
};
|
|
|
|
type ProfilesPayload = {
|
|
profiles_dir?: string;
|
|
active_profile?: string;
|
|
applied_profile?: {
|
|
profile?: string;
|
|
hot_swapped?: boolean;
|
|
listen?: string;
|
|
upstream_base_url?: string;
|
|
} | null;
|
|
profiles?: Profile[];
|
|
};
|
|
|
|
type ImageProfilesPayload = {
|
|
image_profiles_dir?: string;
|
|
active_image_profile?: string;
|
|
applied_image_profile?: {
|
|
image_profile?: string;
|
|
hot_swapped?: boolean;
|
|
image_base_url?: string;
|
|
} | null;
|
|
image_profiles?: ImageProfile[];
|
|
};
|
|
|
|
type LogEntry = {
|
|
seq: number;
|
|
at?: string;
|
|
message?: string;
|
|
};
|
|
|
|
type LogsPayload = {
|
|
total_entries?: number;
|
|
latest_seq?: number;
|
|
entries?: LogEntry[];
|
|
};
|
|
|
|
type MessageState = {
|
|
text: string;
|
|
tone: Tone;
|
|
};
|
|
|
|
type ProfileFormState = {
|
|
name: string;
|
|
listen_host: string;
|
|
listen_port: string;
|
|
upstream_base_url: string;
|
|
auth_mode: AuthMode;
|
|
auth_env: string;
|
|
auth_file: string;
|
|
manual_secret: string;
|
|
manual_secret_file: string;
|
|
manual_secret_configured: boolean;
|
|
auth_json_path: string;
|
|
auth_json_key: string;
|
|
request_history_limit: string;
|
|
model_remap: string;
|
|
reasoning_match_mode: ReasoningMatchMode;
|
|
reasoning_equals: string;
|
|
retryable_status_codes: string;
|
|
retryable_error_messages: string;
|
|
upstream_fetch_retry_attempts: string;
|
|
upstream_fetch_retry_backoff_ms: string;
|
|
endpoints: string;
|
|
};
|
|
|
|
type ImageProfileFormState = {
|
|
name: string;
|
|
base_url: string;
|
|
auth_mode: AuthMode;
|
|
auth_env: string;
|
|
auth_file: string;
|
|
manual_secret: string;
|
|
manual_secret_file: string;
|
|
manual_secret_configured: boolean;
|
|
auth_json_path: string;
|
|
auth_json_key: string;
|
|
};
|
|
|
|
type RuleFormState = {
|
|
reasoning_match_mode: ReasoningMatchMode;
|
|
reasoning_equals: string;
|
|
retryable_status_codes: string;
|
|
retryable_error_messages: string;
|
|
upstream_fetch_retry_attempts: string;
|
|
upstream_fetch_retry_backoff_ms: string;
|
|
endpoints: string;
|
|
non_stream_status_code: string;
|
|
log_match: boolean;
|
|
};
|
|
|
|
const api = {
|
|
status: "/__codex_retry_gateway/api/status",
|
|
config: "/__codex_retry_gateway/api/config",
|
|
logs: "/__codex_retry_gateway/api/logs",
|
|
requests: "/__codex_retry_gateway/api/requests",
|
|
threadRules: "/__codex_retry_gateway/api/thread-rules",
|
|
profiles: "/__codex_retry_gateway/api/profiles",
|
|
profileProbe: "/__codex_retry_gateway/api/profiles/probe",
|
|
profileSwitch: "/__codex_retry_gateway/api/profiles/switch",
|
|
imageProfiles: "/__codex_retry_gateway/api/image-profiles",
|
|
imageProfileProbe: "/__codex_retry_gateway/api/image-profiles/probe",
|
|
imageProfileSwitch: "/__codex_retry_gateway/api/image-profiles/switch",
|
|
restore: "/__codex_retry_gateway/api/restore",
|
|
};
|
|
|
|
const ACCESS_KEY_STORAGE_KEY = "codex_retry_gateway_access_key";
|
|
|
|
const REQUEST_PAGE_SIZE = 20;
|
|
const LOG_PAGE_SIZE = 200;
|
|
|
|
const zhNumberFormatter = new Intl.NumberFormat("zh-CN");
|
|
const zhTimestampFormatter = new Intl.DateTimeFormat("zh-CN", {
|
|
year: "numeric",
|
|
month: "2-digit",
|
|
day: "2-digit",
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
second: "2-digit",
|
|
hourCycle: "h23",
|
|
});
|
|
|
|
type ProfileProbePayload = {
|
|
ok: boolean;
|
|
profile?: string;
|
|
image_profile?: string;
|
|
upstream_base_url?: string;
|
|
image_base_url?: string;
|
|
auth_mode?: string;
|
|
auth_source?: string;
|
|
authorization_configured?: boolean;
|
|
model_remap?: string;
|
|
probes?: Array<{
|
|
kind?: string;
|
|
target?: string;
|
|
status?: number;
|
|
requested_model?: string;
|
|
forwarded_model?: string;
|
|
content_type?: string;
|
|
body_preview?: string;
|
|
}>;
|
|
};
|
|
|
|
const pageCopy: Record<PageKey, { title: string; subtitle: string; index: string }> = {
|
|
overview: {
|
|
title: "概览",
|
|
subtitle: "当前 gateway 运行态，以及基于持久请求记录回灌的累计统计。",
|
|
index: "01",
|
|
},
|
|
requests: {
|
|
title: "请求",
|
|
subtitle: "每次请求的时间戳、状态、token usage 和命中情况。",
|
|
index: "02",
|
|
},
|
|
profiles: {
|
|
title: "Profiles",
|
|
subtitle: "文本和图片上游分别保存、探测与热切换，互不改写对方配置。",
|
|
index: "03",
|
|
},
|
|
rules: {
|
|
title: "规则",
|
|
subtitle: "热更新当前拦截规则；profile 默认规则请在 Profiles 页保存。",
|
|
index: "04",
|
|
},
|
|
logs: {
|
|
title: "日志",
|
|
subtitle: "当前进程的实时日志，不含请求正文或响应正文。",
|
|
index: "05",
|
|
},
|
|
};
|
|
|
|
const defaultProfileForm: ProfileFormState = {
|
|
name: "",
|
|
listen_host: "100.115.235.115",
|
|
listen_port: "4610",
|
|
upstream_base_url: "",
|
|
auth_mode: "passthrough",
|
|
auth_env: "CODEX_RETRY_GATEWAY_UPSTREAM_API_KEY",
|
|
auth_file: "",
|
|
manual_secret: "",
|
|
manual_secret_file: "",
|
|
manual_secret_configured: false,
|
|
auth_json_path: "",
|
|
auth_json_key: "OPENAI_API_KEY",
|
|
request_history_limit: "0",
|
|
model_remap: "",
|
|
reasoning_match_mode: "formula_518n_minus_2",
|
|
reasoning_equals: "516,1034,1552",
|
|
retryable_status_codes: "429,503",
|
|
retryable_error_messages: "Selected model is at capacity. Please try a different model.\nstream disconnected before completion: Concurrency limit exceeded for account, please retry later",
|
|
upstream_fetch_retry_attempts: "5",
|
|
upstream_fetch_retry_backoff_ms: "350",
|
|
endpoints: "/responses\n/chat/completions\n/v1/responses\n/v1/chat/completions",
|
|
};
|
|
|
|
const defaultImageProfileForm: ImageProfileFormState = {
|
|
name: "",
|
|
base_url: "",
|
|
auth_mode: "fixed_bearer",
|
|
auth_env: "CODEX_RETRY_GATEWAY_IMAGE_API_KEY",
|
|
auth_file: "",
|
|
manual_secret: "",
|
|
manual_secret_file: "",
|
|
manual_secret_configured: false,
|
|
auth_json_path: "",
|
|
auth_json_key: "OPENAI_API_KEY",
|
|
};
|
|
|
|
function numberFormat(value: unknown) {
|
|
return typeof value === "number" && Number.isFinite(value)
|
|
? zhNumberFormatter.format(value)
|
|
: "-";
|
|
}
|
|
|
|
function timestamp(value?: string | null) {
|
|
if (!value) {
|
|
return "-";
|
|
}
|
|
const date = new Date(value);
|
|
return Number.isNaN(date.getTime()) ? value : zhTimestampFormatter.format(date);
|
|
}
|
|
|
|
function durationSeconds(value?: number | null) {
|
|
return typeof value === "number" && Number.isFinite(value) ? `${(value / 1000).toFixed(2)} s` : "-";
|
|
}
|
|
|
|
function compactDurationSeconds(value?: number | null) {
|
|
if (typeof value !== "number" || !Number.isFinite(value) || value <= 0) {
|
|
return "?";
|
|
}
|
|
const seconds = value / 1000;
|
|
if (seconds >= 100) {
|
|
return `${seconds.toFixed(0)}s`;
|
|
}
|
|
return `${seconds.toFixed(1).replace(/\\.0$/, "")}s`;
|
|
}
|
|
|
|
function secondsSince(startedAt: string | null | undefined, updatedAt: string | null | undefined) {
|
|
if (!startedAt || !updatedAt) {
|
|
return "-";
|
|
}
|
|
const startedMs = new Date(startedAt).getTime();
|
|
const updatedMs = new Date(updatedAt).getTime();
|
|
if (Number.isNaN(startedMs) || Number.isNaN(updatedMs)) {
|
|
return "-";
|
|
}
|
|
return `${Math.max(0, (updatedMs - startedMs) / 1000).toFixed(1)} s`;
|
|
}
|
|
|
|
function bytesFormat(value?: number | null) {
|
|
if (typeof value !== "number" || !Number.isFinite(value)) {
|
|
return "-";
|
|
}
|
|
if (value < 1024) {
|
|
return `${value} B`;
|
|
}
|
|
if (value < 1024 * 1024) {
|
|
return `${(value / 1024).toFixed(1)} KB`;
|
|
}
|
|
return `${(value / 1024 / 1024).toFixed(2)} MB`;
|
|
}
|
|
|
|
function lifecycleTone(value?: string | null) {
|
|
if (value === "finish") {
|
|
return "";
|
|
}
|
|
if (value === "receive_first") {
|
|
return "warn";
|
|
}
|
|
return "pending";
|
|
}
|
|
|
|
function percent(value?: number) {
|
|
return typeof value === "number" && Number.isFinite(value) ? `${(value * 100).toFixed(2)}%` : "0.00%";
|
|
}
|
|
|
|
function effectiveInputTokens(inputTokens?: number | null, cachedTokens?: number | null) {
|
|
if (typeof inputTokens !== "number" || !Number.isFinite(inputTokens)) {
|
|
return null;
|
|
}
|
|
const cached = typeof cachedTokens === "number" && Number.isFinite(cachedTokens) ? cachedTokens : 0;
|
|
return Math.max(0, inputTokens - cached);
|
|
}
|
|
|
|
function cachedRatio(inputTokens?: number | null, cachedTokens?: number | null) {
|
|
if (typeof inputTokens !== "number" || !Number.isFinite(inputTokens) || inputTokens <= 0) {
|
|
return null;
|
|
}
|
|
const cached = typeof cachedTokens === "number" && Number.isFinite(cachedTokens) ? cachedTokens : 0;
|
|
return Math.max(0, Math.min(1, cached / inputTokens));
|
|
}
|
|
|
|
function requestPrimaryId(entry: RequestEntry) {
|
|
return entry.response_id || entry.request_id || "-";
|
|
}
|
|
|
|
function hasReasoningRetryInfo(entry: RequestEntry) {
|
|
return Boolean(
|
|
entry.reasoning_retry_enabled ||
|
|
entry.reasoning_retry_thread_mode ||
|
|
entry.reasoning_retry_query_count ||
|
|
entry.reasoning_retry_round_count ||
|
|
entry.reasoning_retry_stop_reason,
|
|
);
|
|
}
|
|
|
|
function retryRoundWidthText(entry: RequestEntry) {
|
|
const round = entry.reasoning_retry_current_round || entry.reasoning_retry_round_count || 0;
|
|
const width = entry.reasoning_retry_current_width || 0;
|
|
if (!round) {
|
|
return "-";
|
|
}
|
|
return width ? `${numberFormat(round)}(${numberFormat(width)})` : numberFormat(round);
|
|
}
|
|
|
|
function retryFirstLabel(first: NonNullable<RequestEntry["reasoning_retry_current_firsts"]>[number], fallbackRound?: number | null) {
|
|
const round = first.round ?? fallbackRound ?? null;
|
|
const slot = first.slot ?? null;
|
|
if (typeof round === "number" && Number.isInteger(round)) {
|
|
if (typeof slot === "number" && Number.isInteger(slot) && slot > 1) {
|
|
return `${numberFormat(round)}-${numberFormat(slot)}`;
|
|
}
|
|
return numberFormat(round);
|
|
}
|
|
if (typeof slot === "number" && Number.isInteger(slot)) {
|
|
return `#${numberFormat(slot)}`;
|
|
}
|
|
return "?";
|
|
}
|
|
|
|
function retryFirstText(
|
|
first: NonNullable<RequestEntry["reasoning_retry_current_firsts"]>[number],
|
|
fallbackRound?: number | null,
|
|
) {
|
|
const delay = durationSeconds(first.first_response_delay_ms);
|
|
const outcome = first.outcome || "pending";
|
|
const reasoning = typeof first.reasoning_tokens === "number" ? ` r${numberFormat(first.reasoning_tokens)}` : "";
|
|
const status = typeof first.status_code === "number" ? ` ${first.status_code}` : "";
|
|
return `${retryFirstLabel(first, fallbackRound)} ${delay} ${outcome}${status}${reasoning}`;
|
|
}
|
|
|
|
function retryFirstCompactText(
|
|
first: NonNullable<RequestEntry["reasoning_retry_current_firsts"]>[number],
|
|
) {
|
|
return compactDurationSeconds(first.first_response_delay_ms);
|
|
}
|
|
|
|
function formatRetryStopReason(value?: string | null) {
|
|
const reason = `${value || ""}`.trim();
|
|
if (!reason) {
|
|
return "-";
|
|
}
|
|
const labels: Record<string, string> = {
|
|
success: "成功",
|
|
missing_thread_id: "缺少 thread_id",
|
|
thread_guard_disabled: "thread 已关闭拦截",
|
|
completed_without_retry: "未触发调度",
|
|
reasoning_guard: "reasoning 命中",
|
|
retryable_upstream_error: "上游可重试错误",
|
|
fatal: "致命错误",
|
|
exhausted_without_winner: "无赢家",
|
|
};
|
|
return labels[reason] || reason;
|
|
}
|
|
|
|
function formatRetryThreadMode(value?: string | null) {
|
|
const mode = `${value || ""}`.trim();
|
|
if (!mode || mode === "disabled") {
|
|
return "未启用";
|
|
}
|
|
if (mode === "thread_guard_disabled") {
|
|
return "thread 已关闭拦截";
|
|
}
|
|
if (mode === "thread_id") {
|
|
return "按 thread_id";
|
|
}
|
|
if (mode === "missing_thread_id") {
|
|
return "缺少 thread_id";
|
|
}
|
|
return mode;
|
|
}
|
|
|
|
function sortedReasoningCounts(value?: Record<string, number> | null) {
|
|
return Object.entries(value || {}).sort((left, right) => {
|
|
const countDelta = Number(right[1] || 0) - Number(left[1] || 0);
|
|
if (countDelta !== 0) {
|
|
return countDelta;
|
|
}
|
|
return Number(left[0] || 0) - Number(right[0] || 0);
|
|
});
|
|
}
|
|
|
|
function formatThreadGuardOverride(value?: string | null) {
|
|
const override = `${value || ""}`.trim();
|
|
if (override === "disabled") {
|
|
return "已关闭";
|
|
}
|
|
if (override === "enabled") {
|
|
return "强制开启";
|
|
}
|
|
return "默认开启";
|
|
}
|
|
|
|
function threadGuardBadgeTone(value?: string | null) {
|
|
const override = `${value || ""}`.trim();
|
|
if (override === "disabled") {
|
|
return "warn";
|
|
}
|
|
if (override === "enabled") {
|
|
return "success";
|
|
}
|
|
return "";
|
|
}
|
|
|
|
function splitList(value: string) {
|
|
return value
|
|
.split(/[\s,]+/)
|
|
.map((item) => item.trim())
|
|
.filter(Boolean);
|
|
}
|
|
|
|
function splitLines(value: string) {
|
|
return value
|
|
.split(/\r?\n/)
|
|
.map((item) => item.trim())
|
|
.filter(Boolean);
|
|
}
|
|
|
|
function normalizeReasoningMode(value: unknown): ReasoningMatchMode {
|
|
return value === "manual" ? "manual" : "formula_518n_minus_2";
|
|
}
|
|
|
|
function formatReasoningMode(mode: ReasoningMatchMode) {
|
|
return mode === "manual" ? "manual" : "518n-2";
|
|
}
|
|
|
|
function formatReasoningRule(mode: ReasoningMatchMode, reasoningEquals?: string) {
|
|
if (mode === "manual") {
|
|
return reasoningEquals || "-";
|
|
}
|
|
return "516, 1034, 1552, ...";
|
|
}
|
|
|
|
async function fetchJson<T>(url: string, options?: RequestInit): Promise<T> {
|
|
const headers = new Headers(options?.headers || {});
|
|
const accessKey = window.localStorage.getItem(ACCESS_KEY_STORAGE_KEY)?.trim();
|
|
if (accessKey && !headers.has("x-codex-retry-gateway-key")) {
|
|
headers.set("x-codex-retry-gateway-key", accessKey);
|
|
}
|
|
const response = await fetch(url, { cache: "no-store", ...options, headers });
|
|
const payload = await response.json();
|
|
if (!response.ok) {
|
|
throw new Error(payload?.error?.message || "请求失败");
|
|
}
|
|
return payload as T;
|
|
}
|
|
|
|
function profileFormFromStatus(status: StatusPayload | null): ProfileFormState {
|
|
const config = status?.config || {};
|
|
return {
|
|
...defaultProfileForm,
|
|
listen_host: config.listen_host || defaultProfileForm.listen_host,
|
|
listen_port: String(config.listen_port || defaultProfileForm.listen_port),
|
|
upstream_base_url: config.upstream_base_url || "",
|
|
auth_mode: (config.upstream_auth_mode as ProfileFormState["auth_mode"]) || "passthrough",
|
|
auth_env: config.upstream_auth_env || defaultProfileForm.auth_env,
|
|
manual_secret: "",
|
|
manual_secret_file: "",
|
|
manual_secret_configured: false,
|
|
auth_json_key: config.upstream_auth_json_key || defaultProfileForm.auth_json_key,
|
|
request_history_limit: String(config.request_history_limit ?? defaultProfileForm.request_history_limit),
|
|
model_remap: config.model_remap || "",
|
|
reasoning_match_mode: normalizeReasoningMode(config.reasoning_match_mode),
|
|
reasoning_equals: Array.isArray(config.reasoning_equals)
|
|
? config.reasoning_equals.join(",")
|
|
: defaultProfileForm.reasoning_equals,
|
|
retryable_status_codes: Array.isArray(config.retryable_status_codes)
|
|
? config.retryable_status_codes.join(",")
|
|
: defaultProfileForm.retryable_status_codes,
|
|
retryable_error_messages: Array.isArray(config.retryable_error_messages)
|
|
? config.retryable_error_messages.join("\n")
|
|
: defaultProfileForm.retryable_error_messages,
|
|
upstream_fetch_retry_attempts: String(
|
|
config.upstream_fetch_retry_attempts ?? defaultProfileForm.upstream_fetch_retry_attempts,
|
|
),
|
|
upstream_fetch_retry_backoff_ms: String(
|
|
config.upstream_fetch_retry_backoff_ms ?? defaultProfileForm.upstream_fetch_retry_backoff_ms,
|
|
),
|
|
endpoints: Array.isArray(config.endpoints) ? config.endpoints.join("\n") : defaultProfileForm.endpoints,
|
|
};
|
|
}
|
|
|
|
function profileFormFromProfile(profile: Profile): ProfileFormState {
|
|
const form = profile.form || {};
|
|
return {
|
|
...defaultProfileForm,
|
|
name: profile.name,
|
|
listen_host: form.listen_host || "",
|
|
listen_port: form.listen_port || "",
|
|
upstream_base_url: form.upstream_base_url || "",
|
|
auth_mode: (form.auth_mode as ProfileFormState["auth_mode"]) || "passthrough",
|
|
auth_env: form.auth_env || "",
|
|
auth_file: form.auth_file || "",
|
|
manual_secret: "",
|
|
manual_secret_file: form.manual_secret_file || "",
|
|
manual_secret_configured: Boolean(form.manual_secret_configured),
|
|
auth_json_path: form.auth_json_path || "",
|
|
auth_json_key: form.auth_json_key || "OPENAI_API_KEY",
|
|
request_history_limit: form.request_history_limit || defaultProfileForm.request_history_limit,
|
|
model_remap: form.model_remap || "",
|
|
reasoning_match_mode: normalizeReasoningMode(form.reasoning_match_mode),
|
|
reasoning_equals: form.reasoning_equals || defaultProfileForm.reasoning_equals,
|
|
retryable_status_codes: form.retryable_status_codes || defaultProfileForm.retryable_status_codes,
|
|
retryable_error_messages: Array.isArray(form.retryable_error_messages)
|
|
? form.retryable_error_messages.join("\n")
|
|
: defaultProfileForm.retryable_error_messages,
|
|
upstream_fetch_retry_attempts:
|
|
form.upstream_fetch_retry_attempts || defaultProfileForm.upstream_fetch_retry_attempts,
|
|
upstream_fetch_retry_backoff_ms:
|
|
form.upstream_fetch_retry_backoff_ms || defaultProfileForm.upstream_fetch_retry_backoff_ms,
|
|
endpoints: Array.isArray(form.endpoints) ? form.endpoints.join("\n") : "",
|
|
};
|
|
}
|
|
|
|
function imageProfileFormFromStatus(status: StatusPayload | null): ImageProfileFormState {
|
|
const config = status?.config || {};
|
|
return {
|
|
...defaultImageProfileForm,
|
|
name: config.image_profile_name || "",
|
|
base_url: config.image_base_url || "",
|
|
auth_mode: (config.image_auth_mode as AuthMode) || defaultImageProfileForm.auth_mode,
|
|
auth_env: config.image_auth_env || defaultImageProfileForm.auth_env,
|
|
auth_json_key: config.image_auth_json_key || defaultImageProfileForm.auth_json_key,
|
|
};
|
|
}
|
|
|
|
function imageProfileFormFromProfile(profile: ImageProfile): ImageProfileFormState {
|
|
const form = profile.form || {};
|
|
return {
|
|
...defaultImageProfileForm,
|
|
name: profile.name,
|
|
base_url: form.base_url || "",
|
|
auth_mode: (form.auth_mode as AuthMode) || defaultImageProfileForm.auth_mode,
|
|
auth_env: form.auth_env || defaultImageProfileForm.auth_env,
|
|
auth_file: form.auth_file || "",
|
|
manual_secret: "",
|
|
manual_secret_file: form.manual_secret_file || "",
|
|
manual_secret_configured: Boolean(form.manual_secret_configured),
|
|
auth_json_path: form.auth_json_path || "",
|
|
auth_json_key: form.auth_json_key || defaultImageProfileForm.auth_json_key,
|
|
};
|
|
}
|
|
|
|
function ruleFormFromStatus(status: StatusPayload | null): RuleFormState {
|
|
const config = status?.config || {};
|
|
return {
|
|
reasoning_match_mode: normalizeReasoningMode(config.reasoning_match_mode),
|
|
reasoning_equals: Array.isArray(config.reasoning_equals) ? config.reasoning_equals.join(", ") : "",
|
|
retryable_status_codes: Array.isArray(config.retryable_status_codes)
|
|
? config.retryable_status_codes.join(", ")
|
|
: defaultProfileForm.retryable_status_codes,
|
|
retryable_error_messages: Array.isArray(config.retryable_error_messages)
|
|
? config.retryable_error_messages.join("\n")
|
|
: defaultProfileForm.retryable_error_messages,
|
|
upstream_fetch_retry_attempts: String(
|
|
config.upstream_fetch_retry_attempts ?? defaultProfileForm.upstream_fetch_retry_attempts,
|
|
),
|
|
upstream_fetch_retry_backoff_ms: String(
|
|
config.upstream_fetch_retry_backoff_ms ?? defaultProfileForm.upstream_fetch_retry_backoff_ms,
|
|
),
|
|
endpoints: Array.isArray(config.endpoints) ? config.endpoints.join("\n") : "",
|
|
non_stream_status_code: String(config.non_stream_status_code || 502),
|
|
log_match: Boolean(config.log_match),
|
|
};
|
|
}
|
|
|
|
export default function App() {
|
|
useEffect(() => {
|
|
const url = new URL(window.location.href);
|
|
const accessKey = url.searchParams.get("key")?.trim();
|
|
if (!accessKey) {
|
|
return;
|
|
}
|
|
window.localStorage.setItem(ACCESS_KEY_STORAGE_KEY, accessKey);
|
|
url.searchParams.delete("key");
|
|
window.history.replaceState({}, "", url.toString());
|
|
}, []);
|
|
|
|
const [page, setPage] = useState<PageKey>(() => {
|
|
const hash = window.location.hash.replace("#", "") as PageKey;
|
|
return pageCopy[hash] ? hash : "overview";
|
|
});
|
|
const [status, setStatus] = useState<StatusPayload | null>(null);
|
|
const [requests, setRequests] = useState<RequestEntry[]>([]);
|
|
const [requestsTotal, setRequestsTotal] = useState(0);
|
|
const [requestsMeta, setRequestsMeta] = useState("正在读取请求记录...");
|
|
const [threadRules, setThreadRules] = useState<ThreadRuleEntry[]>([]);
|
|
const [threadRulesMeta, setThreadRulesMeta] = useState("正在读取 thread 规则...");
|
|
const [profiles, setProfiles] = useState<Profile[]>([]);
|
|
const [profilesMeta, setProfilesMeta] = useState("正在读取 profiles...");
|
|
const [imageProfiles, setImageProfiles] = useState<ImageProfile[]>([]);
|
|
const [imageProfilesMeta, setImageProfilesMeta] = useState("正在读取图片 profiles...");
|
|
const [logs, setLogs] = useState<string>("正在读取日志...");
|
|
const [logsMeta, setLogsMeta] = useState("正在读取日志...");
|
|
const [latestLogSeq, setLatestLogSeq] = useState(0);
|
|
const [requestQuery, setRequestQuery] = useState("");
|
|
const [requestFilter, setRequestFilter] = useState("all");
|
|
const [requestLimit, setRequestLimit] = useState(REQUEST_PAGE_SIZE);
|
|
const [ruleForm, setRuleForm] = useState<RuleFormState>(ruleFormFromStatus(null));
|
|
const [profileForm, setProfileForm] = useState<ProfileFormState>(defaultProfileForm);
|
|
const [imageProfileForm, setImageProfileForm] = useState<ImageProfileFormState>(defaultImageProfileForm);
|
|
const [ruleMessage, setRuleMessage] = useState<MessageState>({ text: "", tone: "" });
|
|
const [threadRuleMessage, setThreadRuleMessage] = useState<MessageState>({ text: "", tone: "" });
|
|
const [profileMessage, setProfileMessage] = useState<MessageState>({ text: "", tone: "" });
|
|
const [profileProbeResult, setProfileProbeResult] = useState<ProfileProbePayload | null>(null);
|
|
const [imageProfileMessage, setImageProfileMessage] = useState<MessageState>({ text: "", tone: "" });
|
|
const [imageProfileProbeResult, setImageProfileProbeResult] = useState<ProfileProbePayload | null>(null);
|
|
const [probingProfile, setProbingProfile] = useState("");
|
|
const [deletingProfile, setDeletingProfile] = useState("");
|
|
const [switchingTo, setSwitchingTo] = useState("");
|
|
const [probingImageProfile, setProbingImageProfile] = useState("");
|
|
const [deletingImageProfile, setDeletingImageProfile] = useState("");
|
|
const [switchingImageTo, setSwitchingImageTo] = useState("");
|
|
const [restoreRequested, setRestoreRequested] = useState(false);
|
|
const [shouldSyncProfileFormToActive, setShouldSyncProfileFormToActive] = useState(true);
|
|
const [shouldSyncImageProfileFormToActive, setShouldSyncImageProfileFormToActive] = useState(true);
|
|
const [threadRuleBusyThreadId, setThreadRuleBusyThreadId] = useState("");
|
|
|
|
const metrics = status?.metrics || {};
|
|
const tokens = metrics.token_totals || {};
|
|
const currentPage = pageCopy[page];
|
|
const effectiveInputTotal = effectiveInputTokens(tokens.input_tokens, tokens.cached_tokens);
|
|
const cachedTotalRatio = cachedRatio(tokens.input_tokens, tokens.cached_tokens);
|
|
|
|
const reasoningChips = Object.entries(metrics.observed_reasoning_counts || {}).sort(
|
|
(left, right) => Number(right[1]) - Number(left[1]),
|
|
);
|
|
|
|
async function loadStatus(refreshRuleForm = false) {
|
|
const payload = await fetchJson<StatusPayload>(api.status);
|
|
startTransition(() => {
|
|
setStatus(payload);
|
|
if (refreshRuleForm) {
|
|
setRuleForm(ruleFormFromStatus(payload));
|
|
setProfileForm(profileFormFromStatus(payload));
|
|
setImageProfileForm(imageProfileFormFromStatus(payload));
|
|
}
|
|
});
|
|
}
|
|
|
|
async function loadRequests(limitOverride = requestLimit) {
|
|
const url = new URL(api.requests, window.location.origin);
|
|
url.searchParams.set("limit", String(limitOverride));
|
|
if (requestQuery.trim()) {
|
|
url.searchParams.set("query", requestQuery.trim());
|
|
}
|
|
if (requestFilter !== "all") {
|
|
url.searchParams.set("filter", requestFilter);
|
|
}
|
|
const payload = await fetchJson<RequestsPayload>(url.toString());
|
|
const entries = payload.entries || [];
|
|
startTransition(() => {
|
|
setRequests(entries);
|
|
setRequestsTotal(payload.total_entries ?? entries.length);
|
|
setRequestsMeta(
|
|
`查询命中 ${payload.total_entries ?? entries.length} 条，当前展示最近 ${entries.length} 条，最新序号 ${payload.latest_seq ?? 0}。`,
|
|
);
|
|
});
|
|
}
|
|
|
|
async function loadThreadRules() {
|
|
const payload = await fetchJson<ThreadRulesPayload>(api.threadRules);
|
|
const rules = payload.rules || [];
|
|
startTransition(() => {
|
|
setThreadRules(rules);
|
|
setThreadRulesMeta(`当前覆盖 ${rules.length} 个 thread；文件：${payload.thread_rules_path || "-"}`);
|
|
});
|
|
}
|
|
|
|
async function loadProfiles() {
|
|
const [payload, imagePayload] = await Promise.all([
|
|
fetchJson<ProfilesPayload>(api.profiles),
|
|
fetchJson<ImageProfilesPayload>(api.imageProfiles),
|
|
]);
|
|
const items = payload.profiles || [];
|
|
const imageItems = imagePayload.image_profiles || [];
|
|
startTransition(() => {
|
|
setProfiles(items);
|
|
setProfilesMeta(`目录：${payload.profiles_dir || "-"}；当前运行：${payload.active_profile || "-"}。`);
|
|
setImageProfiles(imageItems);
|
|
setImageProfilesMeta(`目录：${imagePayload.image_profiles_dir || "-"}；当前运行：${imagePayload.active_image_profile || "未配置"}。`);
|
|
});
|
|
}
|
|
|
|
async function loadLogs(incremental = false) {
|
|
const url = new URL(api.logs, window.location.origin);
|
|
if (incremental && latestLogSeq > 0) {
|
|
url.searchParams.set("since_seq", String(latestLogSeq));
|
|
} else {
|
|
url.searchParams.set("limit", String(LOG_PAGE_SIZE));
|
|
}
|
|
const payload = await fetchJson<LogsPayload>(url.toString());
|
|
const rendered = (payload.entries || [])
|
|
.map((entry) => `${entry.at || "-"} ${entry.message || ""}`)
|
|
.join("\n");
|
|
startTransition(() => {
|
|
setLogs((current) => {
|
|
if (!incremental || latestLogSeq === 0) {
|
|
return rendered || "当前还没有日志。";
|
|
}
|
|
return rendered ? `${current.trim()}\n${rendered}` : current;
|
|
});
|
|
setLogsMeta(`已载入 ${payload.total_entries ?? payload.entries?.length ?? 0} 条日志，最新序号 ${payload.latest_seq ?? latestLogSeq}。`);
|
|
if (typeof payload.latest_seq === "number") {
|
|
setLatestLogSeq(payload.latest_seq);
|
|
}
|
|
});
|
|
}
|
|
|
|
async function loadPageData(targetPage: PageKey, { incrementalLogs = true } = {}) {
|
|
if (targetPage === "requests") {
|
|
await loadRequests();
|
|
return;
|
|
}
|
|
if (targetPage === "rules") {
|
|
await loadThreadRules();
|
|
return;
|
|
}
|
|
if (targetPage === "profiles") {
|
|
await loadProfiles();
|
|
return;
|
|
}
|
|
if (targetPage === "logs") {
|
|
await loadLogs(incrementalLogs && latestLogSeq > 0);
|
|
}
|
|
}
|
|
|
|
async function refreshLiveData(targetPage: PageKey = page) {
|
|
if (restoreRequested || switchingTo || switchingImageTo) {
|
|
return;
|
|
}
|
|
const tasks: Array<Promise<unknown>> = [loadStatus(false)];
|
|
if (targetPage !== "overview") {
|
|
tasks.push(loadPageData(targetPage, { incrementalLogs: true }));
|
|
}
|
|
await Promise.all(tasks);
|
|
}
|
|
|
|
useEffect(() => {
|
|
window.location.hash = page;
|
|
}, [page]);
|
|
|
|
useEffect(() => {
|
|
if (page === "profiles") {
|
|
setShouldSyncProfileFormToActive(true);
|
|
setShouldSyncImageProfileFormToActive(true);
|
|
}
|
|
}, [page]);
|
|
|
|
useEffect(() => {
|
|
const onHashChange = () => {
|
|
const next = window.location.hash.replace("#", "") as PageKey;
|
|
if (pageCopy[next]) {
|
|
setPage(next);
|
|
}
|
|
};
|
|
window.addEventListener("hashchange", onHashChange);
|
|
return () => window.removeEventListener("hashchange", onHashChange);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
loadStatus(true).catch((error) => {
|
|
setRuleMessage({ text: error?.message || String(error), tone: "error" });
|
|
});
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const timer = window.setInterval(() => {
|
|
loadStatus(false).catch((error) => {
|
|
setRuleMessage({ text: error?.message || String(error), tone: "error" });
|
|
});
|
|
}, 10000);
|
|
return () => window.clearInterval(timer);
|
|
}, [restoreRequested, switchingTo, switchingImageTo]);
|
|
|
|
useEffect(() => {
|
|
if (page !== "requests" && page !== "logs" && page !== "rules") {
|
|
return;
|
|
}
|
|
const timer = window.setInterval(() => {
|
|
loadPageData(page, { incrementalLogs: true }).catch((error) => {
|
|
if (page === "rules") {
|
|
setThreadRuleMessage({ text: error?.message || String(error), tone: "error" });
|
|
return;
|
|
}
|
|
setRuleMessage({ text: error?.message || String(error), tone: "error" });
|
|
});
|
|
}, 2500);
|
|
return () => window.clearInterval(timer);
|
|
}, [page, requestQuery, requestFilter, latestLogSeq, requestLimit]);
|
|
|
|
useEffect(() => {
|
|
if (page === "overview" || page === "requests") {
|
|
return;
|
|
}
|
|
loadPageData(page, { incrementalLogs: false }).catch((error) => {
|
|
if (page === "rules") {
|
|
setThreadRuleMessage({ text: error?.message || String(error), tone: "error" });
|
|
return;
|
|
}
|
|
setRuleMessage({ text: error?.message || String(error), tone: "error" });
|
|
});
|
|
}, [page]);
|
|
|
|
useEffect(() => {
|
|
if (page !== "profiles" || !shouldSyncProfileFormToActive) {
|
|
return;
|
|
}
|
|
const activeProfile = profiles.find((profile) => profile.active);
|
|
if (!activeProfile) {
|
|
return;
|
|
}
|
|
setProfileForm(profileFormFromProfile(activeProfile));
|
|
setProfileMessage({ text: "", tone: "" });
|
|
setShouldSyncProfileFormToActive(false);
|
|
}, [page, profiles, shouldSyncProfileFormToActive]);
|
|
|
|
useEffect(() => {
|
|
if (page !== "profiles" || !shouldSyncImageProfileFormToActive) {
|
|
return;
|
|
}
|
|
const activeProfile = imageProfiles.find((profile) => profile.active);
|
|
if (!activeProfile) {
|
|
return;
|
|
}
|
|
setImageProfileForm(imageProfileFormFromProfile(activeProfile));
|
|
setImageProfileMessage({ text: "", tone: "" });
|
|
setShouldSyncImageProfileFormToActive(false);
|
|
}, [page, imageProfiles, shouldSyncImageProfileFormToActive]);
|
|
|
|
async function saveRules(event: FormEvent) {
|
|
event.preventDefault();
|
|
setRuleMessage({ text: "正在保存配置...", tone: "" });
|
|
try {
|
|
const payload = await fetchJson<StatusPayload>(api.config, {
|
|
method: "POST",
|
|
headers: { "content-type": "application/json" },
|
|
body: JSON.stringify({
|
|
reasoning_match_mode: ruleForm.reasoning_match_mode,
|
|
reasoning_equals: splitList(ruleForm.reasoning_equals)
|
|
.map((value) => Number.parseInt(value, 10))
|
|
.filter((value) => Number.isInteger(value)),
|
|
retryable_status_codes: splitList(ruleForm.retryable_status_codes)
|
|
.map((value) => Number.parseInt(value, 10))
|
|
.filter((value) => Number.isInteger(value)),
|
|
retryable_error_messages: splitLines(ruleForm.retryable_error_messages),
|
|
upstream_fetch_retry_attempts: Number.parseInt(ruleForm.upstream_fetch_retry_attempts, 10),
|
|
upstream_fetch_retry_backoff_ms: Number.parseInt(ruleForm.upstream_fetch_retry_backoff_ms, 10),
|
|
endpoints: splitLines(ruleForm.endpoints),
|
|
non_stream_status_code: Number.parseInt(ruleForm.non_stream_status_code, 10),
|
|
log_match: ruleForm.log_match,
|
|
}),
|
|
});
|
|
setStatus(payload);
|
|
setRuleForm(ruleFormFromStatus(payload));
|
|
setRuleMessage({ text: "配置已保存，并已对当前 gateway 立即生效。", tone: "success" });
|
|
} catch (error) {
|
|
setRuleMessage({ text: error instanceof Error ? error.message : String(error), tone: "error" });
|
|
}
|
|
}
|
|
|
|
async function updateThreadRule(threadId: string, reasoningInterceptEnabled: boolean) {
|
|
if (!threadId.trim()) {
|
|
return;
|
|
}
|
|
setThreadRuleBusyThreadId(threadId);
|
|
setThreadRuleMessage({
|
|
text: reasoningInterceptEnabled ? `正在为 ${threadId} 开启拦截...` : `正在为 ${threadId} 关闭拦截...`,
|
|
tone: "",
|
|
});
|
|
try {
|
|
const payload = await fetchJson<ThreadRulesPayload>(api.threadRules, {
|
|
method: "POST",
|
|
headers: { "content-type": "application/json" },
|
|
body: JSON.stringify({
|
|
thread_id: threadId,
|
|
reasoning_intercept_enabled: reasoningInterceptEnabled,
|
|
}),
|
|
});
|
|
setThreadRules(payload.rules || []);
|
|
setThreadRulesMeta(`当前覆盖 ${(payload.rules || []).length} 个 thread；文件：${payload.thread_rules_path || "-"}`);
|
|
setThreadRuleMessage({
|
|
text: payload.message || (reasoningInterceptEnabled ? "thread 已开启拦截" : "thread 已关闭拦截"),
|
|
tone: "success",
|
|
});
|
|
await Promise.all([loadStatus(false), loadRequests(requestLimit), loadThreadRules()]);
|
|
} catch (error) {
|
|
setThreadRuleMessage({ text: error instanceof Error ? error.message : String(error), tone: "error" });
|
|
} finally {
|
|
setThreadRuleBusyThreadId("");
|
|
}
|
|
}
|
|
|
|
async function restoreThreadRule(threadId: string) {
|
|
if (!threadId.trim()) {
|
|
return;
|
|
}
|
|
setThreadRuleBusyThreadId(threadId);
|
|
setThreadRuleMessage({ text: `正在恢复 ${threadId} 的默认策略...`, tone: "" });
|
|
try {
|
|
const payload = await fetchJson<ThreadRulesPayload>(`${api.threadRules}/${encodeURIComponent(threadId)}`, {
|
|
method: "DELETE",
|
|
});
|
|
setThreadRules(payload.rules || []);
|
|
setThreadRulesMeta(`当前覆盖 ${(payload.rules || []).length} 个 thread；文件：${payload.thread_rules_path || "-"}`);
|
|
setThreadRuleMessage({ text: payload.message || "thread 已恢复默认拦截策略", tone: "success" });
|
|
await Promise.all([loadStatus(false), loadRequests(requestLimit), loadThreadRules()]);
|
|
} catch (error) {
|
|
setThreadRuleMessage({ text: error instanceof Error ? error.message : String(error), tone: "error" });
|
|
} finally {
|
|
setThreadRuleBusyThreadId("");
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
setRequestLimit(REQUEST_PAGE_SIZE);
|
|
}, [requestQuery, requestFilter]);
|
|
|
|
useEffect(() => {
|
|
if (page !== "requests") {
|
|
return;
|
|
}
|
|
const timer = window.setTimeout(() => {
|
|
loadRequests(requestLimit).catch((error) => {
|
|
setRuleMessage({ text: error?.message || String(error), tone: "error" });
|
|
});
|
|
}, 180);
|
|
return () => window.clearTimeout(timer);
|
|
}, [page, requestQuery, requestFilter, requestLimit]);
|
|
|
|
async function saveProfile(event: FormEvent) {
|
|
event.preventDefault();
|
|
setProfileMessage({ text: "正在保存 profile...", tone: "" });
|
|
try {
|
|
const payload = await fetchJson<ProfilesPayload>(api.profiles, {
|
|
method: "POST",
|
|
headers: { "content-type": "application/json" },
|
|
body: JSON.stringify({
|
|
name: profileForm.name,
|
|
listen_host: profileForm.listen_host,
|
|
listen_port: Number.parseInt(profileForm.listen_port, 10),
|
|
upstream_base_url: profileForm.upstream_base_url,
|
|
auth_mode: profileForm.auth_mode,
|
|
auth_env: profileForm.auth_env,
|
|
auth_file: profileForm.auth_file,
|
|
manual_secret: profileForm.manual_secret,
|
|
manual_secret_file: profileForm.manual_secret_file,
|
|
manual_secret_configured: profileForm.manual_secret_configured,
|
|
auth_json_path: profileForm.auth_json_path,
|
|
auth_json_key: profileForm.auth_json_key,
|
|
request_history_limit: Number.parseInt(profileForm.request_history_limit, 10),
|
|
model_remap: profileForm.model_remap,
|
|
reasoning_match_mode: profileForm.reasoning_match_mode,
|
|
reasoning_equals: splitList(profileForm.reasoning_equals),
|
|
retryable_status_codes: splitList(profileForm.retryable_status_codes),
|
|
retryable_error_messages: splitLines(profileForm.retryable_error_messages),
|
|
upstream_fetch_retry_attempts: Number.parseInt(profileForm.upstream_fetch_retry_attempts, 10),
|
|
upstream_fetch_retry_backoff_ms: Number.parseInt(profileForm.upstream_fetch_retry_backoff_ms, 10),
|
|
endpoints: splitLines(profileForm.endpoints),
|
|
}),
|
|
});
|
|
setProfiles(payload.profiles || []);
|
|
setProfilesMeta(`目录：${payload.profiles_dir || "-"}；当前运行：${payload.active_profile || "-"}。`);
|
|
setProfileForm((current) => ({
|
|
...current,
|
|
manual_secret: "",
|
|
manual_secret_configured: current.auth_mode === "manual_bearer",
|
|
}));
|
|
setProfileMessage({
|
|
text: payload.applied_profile ? "profile 已保存，并已对当前运行实例后台热应用。" : "profile 已保存。需要运行它时，点击左侧卡片里的“切换”。",
|
|
tone: "success",
|
|
});
|
|
} catch (error) {
|
|
setProfileMessage({ text: error instanceof Error ? error.message : String(error), tone: "error" });
|
|
}
|
|
}
|
|
|
|
function editProfile(profile: Profile) {
|
|
setShouldSyncProfileFormToActive(false);
|
|
setProfileForm(profileFormFromProfile(profile));
|
|
setProfileMessage({ text: "编辑后保存 profile env；如果保存的是当前运行 profile，后端会直接后台热应用。", tone: "" });
|
|
}
|
|
|
|
async function switchProfile(profile: Profile) {
|
|
if (profile.active) {
|
|
return;
|
|
}
|
|
if (!window.confirm(`切换到 profile "${profile.name}" 会尝试后台热切换，不重启当前 gateway。确定继续吗？`)) {
|
|
return;
|
|
}
|
|
setSwitchingTo(profile.name);
|
|
try {
|
|
await fetchJson(api.profileSwitch, {
|
|
method: "POST",
|
|
headers: { "content-type": "application/json" },
|
|
body: JSON.stringify({ profile: profile.name }),
|
|
});
|
|
waitForProfile(profile.name);
|
|
} catch (error) {
|
|
setSwitchingTo("");
|
|
setProfileMessage({ text: error instanceof Error ? error.message : String(error), tone: "error" });
|
|
}
|
|
}
|
|
|
|
async function probeProfile(profile: Profile) {
|
|
setProbingProfile(profile.name);
|
|
setProfileMessage({ text: `正在探测 profile ${profile.name}...`, tone: "" });
|
|
try {
|
|
const payload = await fetchJson<ProfileProbePayload>(api.profileProbe, {
|
|
method: "POST",
|
|
headers: { "content-type": "application/json" },
|
|
body: JSON.stringify({
|
|
profile: profile.name,
|
|
model: "gpt-5.5-fast",
|
|
input: "ping",
|
|
}),
|
|
});
|
|
setProfileProbeResult(payload);
|
|
setProfileMessage({ text: `profile ${profile.name} 探针已完成，不影响当前运行实例。`, tone: "success" });
|
|
} catch (error) {
|
|
setProfileMessage({ text: error instanceof Error ? error.message : String(error), tone: "error" });
|
|
} finally {
|
|
setProbingProfile("");
|
|
}
|
|
}
|
|
|
|
async function removeProfile(profile: Profile) {
|
|
if (profile.active) {
|
|
setProfileMessage({ text: "当前运行的 profile 不能直接删除；请先切换到其他 profile。", tone: "error" });
|
|
return;
|
|
}
|
|
if (!window.confirm(`删除 profile "${profile.name}" 会移除对应 env 文件。确定继续吗？`)) {
|
|
return;
|
|
}
|
|
setDeletingProfile(profile.name);
|
|
try {
|
|
const payload = await fetchJson<ProfilesPayload>(`${api.profiles}/${encodeURIComponent(profile.name)}`, {
|
|
method: "DELETE",
|
|
});
|
|
setProfiles(payload.profiles || []);
|
|
setProfilesMeta(`目录：${payload.profiles_dir || "-"}；当前运行：${payload.active_profile || "-"}。`);
|
|
if (profileForm.name === profile.name) {
|
|
setProfileForm(defaultProfileForm);
|
|
}
|
|
if (profileProbeResult?.profile === profile.name) {
|
|
setProfileProbeResult(null);
|
|
}
|
|
setProfileMessage({ text: `profile ${profile.name} 已删除。`, tone: "success" });
|
|
} catch (error) {
|
|
setProfileMessage({ text: error instanceof Error ? error.message : String(error), tone: "error" });
|
|
} finally {
|
|
setDeletingProfile("");
|
|
}
|
|
}
|
|
|
|
async function saveImageProfile(event: FormEvent) {
|
|
event.preventDefault();
|
|
setImageProfileMessage({ text: "正在保存图片 profile...", tone: "" });
|
|
try {
|
|
const payload = await fetchJson<ImageProfilesPayload>(api.imageProfiles, {
|
|
method: "POST",
|
|
headers: { "content-type": "application/json" },
|
|
body: JSON.stringify({
|
|
name: imageProfileForm.name,
|
|
base_url: imageProfileForm.base_url,
|
|
auth_mode: imageProfileForm.auth_mode,
|
|
auth_env: imageProfileForm.auth_env,
|
|
auth_file: imageProfileForm.auth_file,
|
|
manual_secret: imageProfileForm.manual_secret,
|
|
manual_secret_file: imageProfileForm.manual_secret_file,
|
|
manual_secret_configured: imageProfileForm.manual_secret_configured,
|
|
auth_json_path: imageProfileForm.auth_json_path,
|
|
auth_json_key: imageProfileForm.auth_json_key,
|
|
}),
|
|
});
|
|
setImageProfiles(payload.image_profiles || []);
|
|
setImageProfilesMeta(`目录：${payload.image_profiles_dir || "-"}；当前运行：${payload.active_image_profile || "未配置"}。`);
|
|
setImageProfileForm((current) => ({
|
|
...current,
|
|
manual_secret: "",
|
|
manual_secret_configured: current.auth_mode === "manual_bearer",
|
|
}));
|
|
setImageProfileMessage({
|
|
text: payload.applied_image_profile
|
|
? "图片 profile 已保存，并已对当前运行实例后台热应用。"
|
|
: "图片 profile 已保存。需要运行它时，点击左侧卡片里的“切换”。",
|
|
tone: "success",
|
|
});
|
|
} catch (error) {
|
|
setImageProfileMessage({ text: error instanceof Error ? error.message : String(error), tone: "error" });
|
|
}
|
|
}
|
|
|
|
function editImageProfile(profile: ImageProfile) {
|
|
setShouldSyncImageProfileFormToActive(false);
|
|
setImageProfileForm(imageProfileFormFromProfile(profile));
|
|
setImageProfileMessage({ text: "编辑后保存图片 profile env；如果保存的是当前运行 profile，后端会直接后台热应用。", tone: "" });
|
|
}
|
|
|
|
async function switchImageProfile(profile: ImageProfile) {
|
|
if (profile.active) {
|
|
return;
|
|
}
|
|
if (!window.confirm(`切换到图片 profile "${profile.name}" 会立即改写 /images/* 的上游，不重启 gateway。确定继续吗？`)) {
|
|
return;
|
|
}
|
|
setSwitchingImageTo(profile.name);
|
|
try {
|
|
await fetchJson(api.imageProfileSwitch, {
|
|
method: "POST",
|
|
headers: { "content-type": "application/json" },
|
|
body: JSON.stringify({ profile: profile.name }),
|
|
});
|
|
waitForImageProfile(profile.name);
|
|
} catch (error) {
|
|
setSwitchingImageTo("");
|
|
setImageProfileMessage({ text: error instanceof Error ? error.message : String(error), tone: "error" });
|
|
}
|
|
}
|
|
|
|
async function probeImageProfile(profile: ImageProfile) {
|
|
setProbingImageProfile(profile.name);
|
|
setImageProfileMessage({ text: `正在探测图片 profile ${profile.name}...`, tone: "" });
|
|
try {
|
|
const payload = await fetchJson<ProfileProbePayload>(api.imageProfileProbe, {
|
|
method: "POST",
|
|
headers: { "content-type": "application/json" },
|
|
body: JSON.stringify({ profile: profile.name }),
|
|
});
|
|
setImageProfileProbeResult(payload);
|
|
setImageProfileMessage({ text: `图片 profile ${profile.name} 探针已完成，不影响当前运行实例。`, tone: "success" });
|
|
} catch (error) {
|
|
setImageProfileMessage({ text: error instanceof Error ? error.message : String(error), tone: "error" });
|
|
} finally {
|
|
setProbingImageProfile("");
|
|
}
|
|
}
|
|
|
|
async function removeImageProfile(profile: ImageProfile) {
|
|
if (profile.active) {
|
|
setImageProfileMessage({ text: "当前运行的图片 profile 不能直接删除；请先切换到其他图片 profile。", tone: "error" });
|
|
return;
|
|
}
|
|
if (!window.confirm(`删除图片 profile "${profile.name}" 会移除对应 env 文件。确定继续吗？`)) {
|
|
return;
|
|
}
|
|
setDeletingImageProfile(profile.name);
|
|
try {
|
|
const payload = await fetchJson<ImageProfilesPayload>(`${api.imageProfiles}/${encodeURIComponent(profile.name)}`, {
|
|
method: "DELETE",
|
|
});
|
|
setImageProfiles(payload.image_profiles || []);
|
|
setImageProfilesMeta(`目录：${payload.image_profiles_dir || "-"}；当前运行：${payload.active_image_profile || "未配置"}。`);
|
|
if (imageProfileForm.name === profile.name) {
|
|
setImageProfileForm(defaultImageProfileForm);
|
|
}
|
|
if (imageProfileProbeResult?.image_profile === profile.name) {
|
|
setImageProfileProbeResult(null);
|
|
}
|
|
setImageProfileMessage({ text: `图片 profile ${profile.name} 已删除。`, tone: "success" });
|
|
} catch (error) {
|
|
setImageProfileMessage({ text: error instanceof Error ? error.message : String(error), tone: "error" });
|
|
} finally {
|
|
setDeletingImageProfile("");
|
|
}
|
|
}
|
|
|
|
function waitForProfile(profileName: string) {
|
|
const deadline = Date.now() + 12000;
|
|
const tick = async () => {
|
|
if (Date.now() > deadline) {
|
|
setSwitchingTo("");
|
|
setProfileMessage({ text: "热切换已提交，但暂时没有看到当前实例切到目标 profile。", tone: "error" });
|
|
return;
|
|
}
|
|
try {
|
|
const payload = await fetchJson<StatusPayload>(api.status);
|
|
if (payload.config?.profile_name === profileName) {
|
|
setSwitchingTo("");
|
|
setShouldSyncProfileFormToActive(true);
|
|
Promise.all([loadStatus(true), loadProfiles()]).catch(() => {});
|
|
return;
|
|
}
|
|
} catch {
|
|
// keep polling
|
|
}
|
|
window.setTimeout(tick, 500);
|
|
};
|
|
window.setTimeout(tick, 300);
|
|
}
|
|
|
|
function waitForImageProfile(profileName: string) {
|
|
const deadline = Date.now() + 12000;
|
|
const tick = async () => {
|
|
if (Date.now() > deadline) {
|
|
setSwitchingImageTo("");
|
|
setImageProfileMessage({ text: "图片热切换已提交，但暂时没有看到当前实例切到目标 profile。", tone: "error" });
|
|
return;
|
|
}
|
|
try {
|
|
const payload = await fetchJson<StatusPayload>(api.status);
|
|
if (payload.config?.image_profile_name === profileName) {
|
|
setSwitchingImageTo("");
|
|
setShouldSyncImageProfileFormToActive(true);
|
|
Promise.all([loadStatus(true), loadProfiles()]).catch(() => {});
|
|
return;
|
|
}
|
|
} catch {
|
|
// keep polling
|
|
}
|
|
window.setTimeout(tick, 500);
|
|
};
|
|
window.setTimeout(tick, 300);
|
|
}
|
|
|
|
async function restoreConfig() {
|
|
if (!window.confirm("恢复后会关闭当前 gateway，并把 Codex 配置切回原上游。确定继续吗？")) {
|
|
return;
|
|
}
|
|
setRestoreRequested(true);
|
|
setRuleMessage({ text: "正在触发恢复，页面很快会失联...", tone: "" });
|
|
try {
|
|
await fetchJson(api.restore, {
|
|
method: "POST",
|
|
headers: { "content-type": "application/json" },
|
|
body: JSON.stringify({}),
|
|
});
|
|
setRuleMessage({ text: "恢复脚本已启动，等待 gateway 关闭。", tone: "success" });
|
|
} catch (error) {
|
|
setRestoreRequested(false);
|
|
setRuleMessage({ text: error instanceof Error ? error.message : String(error), tone: "error" });
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div className="app-shell">
|
|
<aside className="sidebar">
|
|
<div className="brand">
|
|
<span className="eyebrow">Gateway Console</span>
|
|
<h1>Codex Retry Gateway</h1>
|
|
<p>分页面管理 profile、请求 token、拦截规则和运行日志。页面只记录元数据，不保存请求正文或响应正文。</p>
|
|
</div>
|
|
|
|
<nav className="nav" aria-label="Gateway pages">
|
|
{(Object.keys(pageCopy) as PageKey[]).map((key) => (
|
|
<button
|
|
key={key}
|
|
type="button"
|
|
data-active={page === key}
|
|
onClick={() => setPage(key)}
|
|
>
|
|
{pageCopy[key].title} <span>{pageCopy[key].index}</span>
|
|
</button>
|
|
))}
|
|
</nav>
|
|
|
|
<SideCard label="当前 Profile" value={status?.config?.profile_name || "-"} strong />
|
|
<SideCard label="当前图片 Profile" value={status?.config?.image_profile_name || "未配置"} />
|
|
<SideCard label="监听地址" value={status?.listen || "-"} />
|
|
<SideCard label="Auth 模式" value={status?.config?.upstream_auth_mode || "-"} />
|
|
</aside>
|
|
|
|
<main className="content">
|
|
<header className="topbar">
|
|
<div>
|
|
<h2>{currentPage.title}</h2>
|
|
<p>{currentPage.subtitle}</p>
|
|
</div>
|
|
<div className="toolbar">
|
|
<button className="ghost" type="button" onClick={() => refreshLiveData()}>
|
|
刷新
|
|
</button>
|
|
<a className="badge" href={api.status}>
|
|
status api
|
|
</a>
|
|
</div>
|
|
</header>
|
|
|
|
{page === "overview" && (
|
|
<section className="page" data-active="true">
|
|
<div className="grid">
|
|
<Card
|
|
title="运行态"
|
|
hint="配置、provider、Codex 当前 base_url 和 profile 状态。"
|
|
badge={status?.ok ? "online" : "读取中"}
|
|
>
|
|
<div className="stat-grid">
|
|
<Stat label="Profile" value={status?.config?.profile_name || "-"} />
|
|
<Stat label="代理请求" value={numberFormat(metrics.total_proxy_request_count || 0)} />
|
|
<Stat label="检查响应" value={numberFormat(metrics.inspected_response_count || 0)} />
|
|
<Stat label="规则命中" value={numberFormat(metrics.matched_response_count || 0)} />
|
|
</div>
|
|
</Card>
|
|
|
|
<Card title="Token Totals" hint="按持久请求记录累计；重启后会从 requests history 回灌。">
|
|
<div className="token-strip">
|
|
<TokenCard label="Input" value={numberFormat(effectiveInputTotal ?? 0)} />
|
|
<TokenCard label="Output" value={numberFormat(tokens.output_tokens || 0)} />
|
|
<TokenCard label="Total" value={numberFormat(tokens.total_tokens || 0)} />
|
|
<TokenCard label="Reasoning" value={numberFormat(tokens.reasoning_tokens || 0)} />
|
|
<TokenCard
|
|
label="Cached"
|
|
value={`${numberFormat(tokens.cached_tokens || 0)}${cachedTotalRatio !== null ? ` (${percent(cachedTotalRatio)})` : ""}`}
|
|
/>
|
|
</div>
|
|
</Card>
|
|
|
|
<div className="grid two">
|
|
<Card title="连接信息">
|
|
<InfoList
|
|
rows={[
|
|
["监听地址", status?.listen || "-"],
|
|
["文本上游", status?.config?.upstream_base_url || "-"],
|
|
["文本认证", status?.config?.upstream_auth_mode || "passthrough"],
|
|
["图片 Profile", status?.config?.image_profile_name || "未配置"],
|
|
["图片上游", status?.config?.image_base_url || "未配置"],
|
|
["图片认证", status?.config?.image_base_url ? status?.config?.image_auth_mode || "fixed_bearer" : "未启用"],
|
|
["Provider", status?.state?.provider_name || "未检测到安装状态"],
|
|
["Codex Base URL", status?.state?.codex_current_base_url || "-"],
|
|
]}
|
|
/>
|
|
</Card>
|
|
|
|
<Card title="规则观察">
|
|
<InfoList
|
|
rows={[
|
|
["516 命中", numberFormat(metrics.reasoning_516_count || 0)],
|
|
["516 占比", percent(metrics.reasoning_516_ratio || 0)],
|
|
["累计起点", timestamp(metrics.persistent_since || metrics.started_at)],
|
|
["本次启动", timestamp(metrics.started_at)],
|
|
["Config", status?.paths?.config_path || "-"],
|
|
["备份", status?.state?.latest_backup_path || "-"],
|
|
]}
|
|
/>
|
|
<div className="chips">
|
|
{reasoningChips.length === 0 ? (
|
|
<span className="chip">还没有 reasoning 观测</span>
|
|
) : (
|
|
<>
|
|
{reasoningChips.map(([reasoning, count]) => (
|
|
<span className="chip" key={reasoning}>
|
|
reasoning {reasoning}: {count}
|
|
</span>
|
|
))}
|
|
{(metrics.observed_reasoning_counts_omitted || 0) > 0 ? (
|
|
<span className="chip">
|
|
其余 {metrics.observed_reasoning_counts_omitted} 项未展开
|
|
</span>
|
|
) : null}
|
|
</>
|
|
)}
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
{page === "requests" && (
|
|
<section className="page" data-active="true">
|
|
<Card
|
|
title="请求记录"
|
|
hint={requestsMeta}
|
|
actions={
|
|
<div className="toolbar compact-toolbar">
|
|
<input
|
|
type="search"
|
|
value={requestQuery}
|
|
placeholder="搜索模型 / 路径 / 状态"
|
|
onChange={(event) => setRequestQuery(event.target.value)}
|
|
/>
|
|
<select value={requestFilter} onChange={(event) => setRequestFilter(event.target.value)}>
|
|
<option value="all">全部请求</option>
|
|
<option value="matched">规则命中</option>
|
|
<option value="stream">流式响应</option>
|
|
<option value="error">有错误</option>
|
|
</select>
|
|
<button className="secondary" type="button" onClick={() => loadRequests()}>
|
|
刷新请求
|
|
</button>
|
|
<button
|
|
className="ghost"
|
|
type="button"
|
|
disabled={requests.length >= requestsTotal && requestsTotal > 0}
|
|
onClick={() => setRequestLimit((current) => current + REQUEST_PAGE_SIZE)}
|
|
>
|
|
更多
|
|
</button>
|
|
</div>
|
|
}
|
|
>
|
|
<div className="request-list">
|
|
{requests.length === 0 ? (
|
|
<div className="empty-state">没有匹配的请求记录。</div>
|
|
) : (
|
|
requests.map((entry) => {
|
|
const usage = entry.usage || {};
|
|
const upstream = entry.upstream || {};
|
|
const statusTone = entry.error ? "error" : entry.matched ? "warn" : "";
|
|
const effectiveInput = effectiveInputTokens(usage.input_tokens, usage.cached_tokens);
|
|
const cachedHitRatio = cachedRatio(usage.input_tokens, usage.cached_tokens);
|
|
const showReasoningRetry = hasReasoningRetryInfo(entry);
|
|
const retryReasoningCounts = sortedReasoningCounts(entry.reasoning_retry_extra_reasoning_counts);
|
|
const retryCurrentFirsts = Array.isArray(entry.reasoning_retry_current_firsts)
|
|
? entry.reasoning_retry_current_firsts
|
|
: [];
|
|
const threadRuleBusy = Boolean(entry.thread_id) && threadRuleBusyThreadId === entry.thread_id;
|
|
return (
|
|
<article className="request-card" key={entry.seq}>
|
|
<div className="request-head">
|
|
<div>
|
|
<div className="request-title">
|
|
<span className={`badge ${statusTone}`}>{entry.status_code ?? "-"}</span>
|
|
<strong>{entry.profile_name || status?.config?.profile_name || "-"}</strong>
|
|
<span className={`badge ${lifecycleTone(entry.lifecycle_state)}`}>{entry.lifecycle_state || "sent"}</span>
|
|
<span className="meta-pill meta-sent">
|
|
<span className="meta-key">发</span>
|
|
{timestamp(entry.started_at)}
|
|
</span>
|
|
{retryCurrentFirsts.length > 0 ? (
|
|
<span className="meta-pill meta-first meta-first-list-pill">
|
|
<span className="meta-key">首</span>
|
|
{retryCurrentFirsts.map((first, index) => (
|
|
<span className="meta-first-mini" key={`${first.round || entry.reasoning_retry_current_round || "r"}-${first.slot || index}`}>
|
|
{retryFirstCompactText(first)}
|
|
</span>
|
|
))}
|
|
</span>
|
|
) : (
|
|
<span className="meta-pill meta-first">
|
|
<span className="meta-key">首</span>
|
|
{durationSeconds(entry.first_response_delay_ms)}
|
|
</span>
|
|
)}
|
|
<span className="meta-pill meta-total">
|
|
<span className="meta-key">总</span>
|
|
{durationSeconds(entry.duration_ms)}
|
|
</span>
|
|
<span className="meta-pill meta-progress">
|
|
<span className="meta-key">更</span>
|
|
{timestamp(entry.last_activity_at || entry.usage_last_updated_at)}
|
|
</span>
|
|
<span className="meta-pill meta-body">
|
|
<span className="meta-key">体</span>
|
|
{bytesFormat(entry.request_body_bytes)}
|
|
</span>
|
|
<span className="meta-pill meta-stream">
|
|
<span className="meta-key">流</span>
|
|
{entry.response_stream
|
|
? `${numberFormat(entry.stream_chunk_count)} chunk / ${bytesFormat(entry.response_bytes_received)} / ${secondsSince(entry.started_at, entry.last_activity_at || entry.usage_last_updated_at || entry.finished_at)}`
|
|
: "-"}
|
|
</span>
|
|
{showReasoningRetry ? (
|
|
<span className="meta-pill meta-retry">
|
|
<span className="meta-key">重打</span>
|
|
{`${retryRoundWidthText(entry)} / ${numberFormat(entry.reasoning_retry_query_count || 0)}q`}
|
|
</span>
|
|
) : null}
|
|
<span className="meta-pill meta-received">
|
|
<span className="meta-key">收</span>
|
|
{timestamp(entry.finished_at)}
|
|
</span>
|
|
</div>
|
|
<div className="request-subtitle">
|
|
<code>{`${entry.method || "-"} ${entry.path || "-"}`}</code>
|
|
<span className="hint">{entry.response_stream ? "stream" : "non-stream"}</span>
|
|
<span className="hint">id {requestPrimaryId(entry)}</span>
|
|
<span className="hint">thread {entry.thread_id || "-"}</span>
|
|
</div>
|
|
</div>
|
|
<div className="request-badges">
|
|
{entry.matched ? <span className="badge warn">matched</span> : <span className="badge">pass</span>}
|
|
{entry.error ? <span className="badge error">error</span> : null}
|
|
<span className={`badge ${threadGuardBadgeTone(entry.reasoning_guard_thread_override)}`}>
|
|
guard {formatThreadGuardOverride(entry.reasoning_guard_thread_override)}
|
|
</span>
|
|
{showReasoningRetry ? (
|
|
<span className={`badge ${entry.reasoning_retry_stop_reason === "success" ? "success" : "warn"}`}>
|
|
retry {formatRetryStopReason(entry.reasoning_retry_stop_reason)}
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="request-grid">
|
|
<div className="request-block">
|
|
<label>模型</label>
|
|
<code>{entry.requested_model || entry.model || "-"}</code>
|
|
<span className="hint">
|
|
{entry.forwarded_model && entry.forwarded_model !== entry.requested_model
|
|
? `转发为 ${entry.forwarded_model}`
|
|
: entry.forwarded_model || "-"}
|
|
</span>
|
|
<span className="hint">
|
|
{entry.reasoning_effort
|
|
? `强度 ${entry.reasoning_effort}`
|
|
: "强度 -"}
|
|
{entry.reasoning_summary ? ` / summary ${entry.reasoning_summary}` : ""}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="request-block">
|
|
<label>{upstream.route === "images" ? "图片上游" : "文本上游"}</label>
|
|
<code>{`${upstream.origin || "-"}${upstream.path || ""}`}</code>
|
|
<span className="hint">
|
|
{upstream.auth_mode || "-"} / {upstream.auth_source || "-"}
|
|
{upstream.authorization_configured === false ? " / no auth" : ""}
|
|
</span>
|
|
<span className="hint">
|
|
重试 {numberFormat(entry.upstream_attempt_count)} 次
|
|
{entry.upstream_status_code ? ` / upstream ${entry.upstream_status_code}` : ""}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="request-block">
|
|
<label>Token</label>
|
|
<div className="request-token-row">
|
|
<span className="token-pill token-in">in {numberFormat(effectiveInput)}</span>
|
|
<span className="token-pill token-out">out {numberFormat(usage.output_tokens)}</span>
|
|
<span className="token-pill token-cached">cached {numberFormat(usage.cached_tokens)}{cachedHitRatio !== null ? ` (${percent(cachedHitRatio)})` : ""}</span>
|
|
<span className="token-pill token-reasoning">reasoning {numberFormat(entry.reasoning_tokens ?? usage.reasoning_tokens)}</span>
|
|
<span className="token-pill token-total">total {numberFormat(usage.total_tokens)}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="request-block">
|
|
<label>IDs</label>
|
|
<code>{`response ${entry.response_id || "-"}`}</code>
|
|
<span className="hint">{`request ${entry.request_id || "-"}`}</span>
|
|
<span className="hint">{`thread ${entry.thread_id || "-"}`}</span>
|
|
{entry.thread_id ? (
|
|
<div className="thread-rule-actions">
|
|
<button
|
|
className="ghost"
|
|
type="button"
|
|
disabled={threadRuleBusy || entry.reasoning_guard_thread_override === "enabled"}
|
|
onClick={() => updateThreadRule(entry.thread_id || "", true)}
|
|
>
|
|
{threadRuleBusy && entry.reasoning_guard_thread_override !== "enabled" ? "处理中" : "开启拦截"}
|
|
</button>
|
|
<button
|
|
className="ghost"
|
|
type="button"
|
|
disabled={threadRuleBusy || entry.reasoning_guard_thread_override === "disabled"}
|
|
onClick={() => updateThreadRule(entry.thread_id || "", false)}
|
|
>
|
|
{threadRuleBusy && entry.reasoning_guard_thread_override !== "disabled" ? "处理中" : "关闭拦截"}
|
|
</button>
|
|
{entry.reasoning_guard_thread_override && entry.reasoning_guard_thread_override !== "default" ? (
|
|
<button
|
|
className="secondary"
|
|
type="button"
|
|
disabled={threadRuleBusy}
|
|
onClick={() => restoreThreadRule(entry.thread_id || "")}
|
|
>
|
|
{threadRuleBusy ? "处理中" : "恢复默认"}
|
|
</button>
|
|
) : null}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
|
|
{showReasoningRetry ? (
|
|
<div className="request-block reasoning-retry-block">
|
|
<label>Reasoning Retry</label>
|
|
<code>{formatRetryThreadMode(entry.reasoning_retry_thread_mode)}</code>
|
|
<span className="hint">
|
|
guard {formatThreadGuardOverride(entry.reasoning_guard_thread_override)}
|
|
</span>
|
|
<span className="hint">
|
|
schedule 1,1,2,2,4,4... / query {numberFormat(entry.reasoning_retry_query_count || 0)}
|
|
{" / "}
|
|
round {retryRoundWidthText(entry)}
|
|
</span>
|
|
<span className="hint">
|
|
winner {entry.reasoning_retry_winner_round && entry.reasoning_retry_winner_slot
|
|
? `round ${entry.reasoning_retry_winner_round} slot ${entry.reasoning_retry_winner_slot}`
|
|
: "-"}
|
|
{" / "}
|
|
stop {formatRetryStopReason(entry.reasoning_retry_stop_reason)}
|
|
</span>
|
|
<span className="hint">
|
|
extra matched {numberFormat(entry.reasoning_retry_extra_matched_count || 0)}
|
|
{" / "}
|
|
inspected {numberFormat(entry.reasoning_retry_extra_inspected_count || 0)}
|
|
{" / "}
|
|
extra reasoning {numberFormat(entry.reasoning_retry_extra_usage?.reasoning_tokens)}
|
|
</span>
|
|
{retryReasoningCounts.length > 0 ? (
|
|
<div className="retry-chip-row">
|
|
{retryReasoningCounts.slice(0, 4).map(([reasoning, count]) => (
|
|
<span className="chip compact-chip" key={reasoning}>
|
|
{reasoning}: {numberFormat(count)}
|
|
</span>
|
|
))}
|
|
</div>
|
|
) : null}
|
|
{retryCurrentFirsts.length > 0 ? (
|
|
<div className="retry-first-list" aria-label="current retry wave first responses">
|
|
{retryCurrentFirsts.map((first, index) => (
|
|
<span
|
|
className={`retry-first-chip ${first.first_response_delay_ms == null ? "pending" : ""}`}
|
|
key={`${first.round || entry.reasoning_retry_current_round || "r"}-${first.slot || index}`}
|
|
title={`first ${timestamp(first.first_response_at)} / upstream ${first.upstream_status_code ?? "-"}`}
|
|
>
|
|
{retryFirstText(first, entry.reasoning_retry_current_round)}
|
|
</span>
|
|
))}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</article>
|
|
);
|
|
})
|
|
)}
|
|
</div>
|
|
</Card>
|
|
</section>
|
|
)}
|
|
|
|
{page === "profiles" && (
|
|
<section className="page" data-active="true">
|
|
<div className="grid profile-layout">
|
|
<Card
|
|
title="文本 Profile 列表"
|
|
hint={profilesMeta}
|
|
actions={
|
|
<button
|
|
className="secondary"
|
|
type="button"
|
|
onClick={() => {
|
|
setShouldSyncProfileFormToActive(false);
|
|
setProfileForm(profileFormFromStatus(status));
|
|
setProfileMessage({ text: "", tone: "" });
|
|
}}
|
|
>
|
|
新建文本 Profile
|
|
</button>
|
|
}
|
|
>
|
|
<div className="grid profile-list-grid">
|
|
{profiles.length === 0 ? (
|
|
<div className="profile-card">当前还没有 profile env 文件。</div>
|
|
) : (
|
|
profiles.map((profile) => (
|
|
<article className="profile-card compact-profile-card" data-active-profile={profile.active} key={profile.name}>
|
|
<div className="profile-head">
|
|
<div className="profile-meta">
|
|
<h3>{profile.name}</h3>
|
|
<div className="profile-path hint">{profile.file_path || ""}</div>
|
|
</div>
|
|
<div className="profile-actions">
|
|
{profile.active ? <span className="badge">当前运行</span> : <span className="badge warn">可切换</span>}
|
|
<button className="ghost" type="button" onClick={() => editProfile(profile)}>
|
|
编辑
|
|
</button>
|
|
<button className="ghost" type="button" disabled={probingProfile === profile.name} onClick={() => probeProfile(profile)}>
|
|
{probingProfile === profile.name ? "探测中" : "探针"}
|
|
</button>
|
|
<button className="danger" type="button" disabled={deletingProfile === profile.name} onClick={() => removeProfile(profile)}>
|
|
{deletingProfile === profile.name ? "删除中" : "删除"}
|
|
</button>
|
|
<button className="primary" type="button" disabled={profile.active} onClick={() => switchProfile(profile)}>
|
|
切换
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="mini-stats">
|
|
<MiniStat label="监听" value={`${profile.summary?.listen_host || "-"}:${profile.summary?.listen_port || "-"}`} />
|
|
<MiniStat label="文本上游" value={profile.summary?.upstream_base_url || "-"} />
|
|
<MiniStat label="文本认证" value={`${profile.summary?.auth_mode || "passthrough"} / ${profile.summary?.auth_source || "-"}`} />
|
|
<MiniStat label="History" value={profile.summary?.request_history_limit || "0"} />
|
|
<MiniStat label="Model Remap" value={profile.summary?.model_remap || "-"} />
|
|
<MiniStat
|
|
label="Reasoning"
|
|
value={formatReasoningRule(
|
|
normalizeReasoningMode(profile.summary?.reasoning_match_mode),
|
|
profile.summary?.reasoning_equals,
|
|
)}
|
|
/>
|
|
<MiniStat
|
|
label="Rule Mode"
|
|
value={formatReasoningMode(normalizeReasoningMode(profile.summary?.reasoning_match_mode))}
|
|
/>
|
|
</div>
|
|
</article>
|
|
))
|
|
)}
|
|
</div>
|
|
</Card>
|
|
|
|
<Card title={profileForm.name ? `编辑文本 ${profileForm.name}` : "编辑文本 Profile"} hint="手动 token/password 只能写入系统 secret 文件，保存后不会从后端读回或展示。">
|
|
<form onSubmit={saveProfile}>
|
|
<Field label="Profile 名称">
|
|
<input value={profileForm.name} placeholder="default 或 sub2api-auth-json" onChange={(event) => setProfileForm({ ...profileForm, name: event.target.value })} />
|
|
</Field>
|
|
<div className="field-row">
|
|
<Field label="监听 Host">
|
|
<input value={profileForm.listen_host} placeholder="100.115.235.115" onChange={(event) => setProfileForm({ ...profileForm, listen_host: event.target.value })} />
|
|
</Field>
|
|
<Field label="监听 Port">
|
|
<input type="number" min={1} max={65535} value={profileForm.listen_port} onChange={(event) => setProfileForm({ ...profileForm, listen_port: event.target.value })} />
|
|
</Field>
|
|
</div>
|
|
<Field label="文本上游 Base URL">
|
|
<input value={profileForm.upstream_base_url} placeholder="https://example.com/v1" onChange={(event) => setProfileForm({ ...profileForm, upstream_base_url: event.target.value })} />
|
|
</Field>
|
|
<Field label="Model Remap" hint="每行一个 from=to，也支持用分号分隔；例如 gpt-5.5-fast=gpt-5.5;gpt-5.4-fast=gpt-5.4。切换 profile 后会自动把请求模型改写为目标 provider 可用模型。">
|
|
<textarea value={profileForm.model_remap} onChange={(event) => setProfileForm({ ...profileForm, model_remap: event.target.value })} />
|
|
</Field>
|
|
<Field label="文本 Auth 模式">
|
|
<select value={profileForm.auth_mode} onChange={(event) => setProfileForm({ ...profileForm, auth_mode: event.target.value as ProfileFormState["auth_mode"] })}>
|
|
<option value="passthrough">passthrough：透传 Codex Authorization</option>
|
|
<option value="manual_bearer">manual_bearer：手动写入系统 secret 文件</option>
|
|
<option value="fixed_bearer">fixed_bearer：从 env/file 读取 Bearer</option>
|
|
<option value="auth_json">auth_json：从 ~/.codex/auth.json 读取字段</option>
|
|
</select>
|
|
</Field>
|
|
{profileForm.auth_mode === "manual_bearer" && (
|
|
<Field
|
|
label="文本 Token / Password"
|
|
hint={profileForm.manual_secret_configured ? "系统中已有 secret；留空表示保留现有值，填入新值会覆盖写入。" : "只写入系统 secret 文件，保存后不会显示或返回。"}
|
|
>
|
|
<input
|
|
type="password"
|
|
value={profileForm.manual_secret}
|
|
autoComplete="new-password"
|
|
placeholder={profileForm.manual_secret_configured ? "已配置；留空保留" : "输入一次 token/password"}
|
|
onChange={(event) => setProfileForm({ ...profileForm, manual_secret: event.target.value })}
|
|
/>
|
|
</Field>
|
|
)}
|
|
{profileForm.auth_mode === "fixed_bearer" && (
|
|
<>
|
|
<Field label="文本 Token 环境变量名" hint="只填变量名，不填 token 值。">
|
|
<input value={profileForm.auth_env} placeholder="CODEX_RETRY_GATEWAY_UPSTREAM_API_KEY" onChange={(event) => setProfileForm({ ...profileForm, auth_env: event.target.value })} />
|
|
</Field>
|
|
<Field label="文本 Token 文件路径">
|
|
<input value={profileForm.auth_file} placeholder="/run/secrets/provider-token" onChange={(event) => setProfileForm({ ...profileForm, auth_file: event.target.value })} />
|
|
</Field>
|
|
</>
|
|
)}
|
|
{profileForm.auth_mode === "auth_json" && (
|
|
<>
|
|
<Field label="文本 auth.json 路径">
|
|
<input value={profileForm.auth_json_path} placeholder="留空表示 ~/.codex/auth.json" onChange={(event) => setProfileForm({ ...profileForm, auth_json_path: event.target.value })} />
|
|
</Field>
|
|
<Field label="文本 auth.json 字段名" hint="这里填 JSON key，例如 OPENAI_API_KEY，不粘贴 sk- 开头的密钥值。">
|
|
<input value={profileForm.auth_json_key} placeholder="OPENAI_API_KEY" onChange={(event) => setProfileForm({ ...profileForm, auth_json_key: event.target.value })} />
|
|
</Field>
|
|
</>
|
|
)}
|
|
<Field label="History Limit" hint="0 表示不裁剪；正整数表示后台持久化记录的保留上限。">
|
|
<input
|
|
type="number"
|
|
min={0}
|
|
value={profileForm.request_history_limit}
|
|
onChange={(event) => setProfileForm({ ...profileForm, request_history_limit: event.target.value })}
|
|
/>
|
|
</Field>
|
|
<Field label="reasoning_match_mode" hint="`518n-2` 会命中 516、1034、1552 等；`manual` 则只按下面的列表拦截。">
|
|
<select
|
|
value={profileForm.reasoning_match_mode}
|
|
onChange={(event) =>
|
|
setProfileForm({ ...profileForm, reasoning_match_mode: normalizeReasoningMode(event.target.value) })
|
|
}
|
|
>
|
|
<option value="formula_518n_minus_2">formula_518n_minus_2</option>
|
|
<option value="manual">manual</option>
|
|
</select>
|
|
</Field>
|
|
<Field label="reasoning_equals">
|
|
<input value={profileForm.reasoning_equals} placeholder="516,1034,1552" onChange={(event) => setProfileForm({ ...profileForm, reasoning_equals: event.target.value })} />
|
|
</Field>
|
|
<Field label="retryable_status_codes">
|
|
<input value={profileForm.retryable_status_codes} placeholder="429,503" onChange={(event) => setProfileForm({ ...profileForm, retryable_status_codes: event.target.value })} />
|
|
</Field>
|
|
<Field label="retryable_error_messages" hint="每行一条错误文案；上游 JSON 错误包含任一行时会转成本地重试状态码。">
|
|
<textarea value={profileForm.retryable_error_messages} onChange={(event) => setProfileForm({ ...profileForm, retryable_error_messages: event.target.value })} />
|
|
</Field>
|
|
<div className="field-row">
|
|
<Field label="upstream_fetch_retry_attempts">
|
|
<input type="number" min={1} value={profileForm.upstream_fetch_retry_attempts} onChange={(event) => setProfileForm({ ...profileForm, upstream_fetch_retry_attempts: event.target.value })} />
|
|
</Field>
|
|
<Field label="upstream_fetch_retry_backoff_ms">
|
|
<input type="number" min={0} step={50} value={profileForm.upstream_fetch_retry_backoff_ms} onChange={(event) => setProfileForm({ ...profileForm, upstream_fetch_retry_backoff_ms: event.target.value })} />
|
|
</Field>
|
|
</div>
|
|
<Field label="endpoints">
|
|
<textarea value={profileForm.endpoints} onChange={(event) => setProfileForm({ ...profileForm, endpoints: event.target.value })} />
|
|
</Field>
|
|
<div className="toolbar">
|
|
<button className="primary" type="submit">
|
|
保存 Profile
|
|
</button>
|
|
<button className="ghost" type="button" onClick={() => setProfileForm(profileFormFromStatus(status))}>
|
|
清空表单
|
|
</button>
|
|
</div>
|
|
<Message message={profileMessage} />
|
|
</form>
|
|
</Card>
|
|
|
|
<Card title="文本 Profile 探针" hint="不切换当前 gateway，只对选定文本 profile 做上游连通性与最小请求探测。默认测试模型是 gpt-5.5-fast，若配置了 remap，会显示实际转发模型。">
|
|
{profileProbeResult ? (
|
|
<div className="grid">
|
|
<InfoList
|
|
rows={[
|
|
["Profile", profileProbeResult.profile || "-"],
|
|
["上游", profileProbeResult.upstream_base_url || "-"],
|
|
["Auth", `${profileProbeResult.auth_mode || "-"} / ${profileProbeResult.auth_source || "-"}`],
|
|
["Model Remap", profileProbeResult.model_remap || "-"],
|
|
]}
|
|
/>
|
|
{(profileProbeResult.probes || []).map((probe) => (
|
|
<div className="profile-card" key={`${probe.kind}-${probe.target}`}>
|
|
<div className="profile-head">
|
|
<div>
|
|
<h3>{probe.kind || "probe"}</h3>
|
|
<div className="hint">{probe.target || "-"}</div>
|
|
</div>
|
|
<span className="badge">{probe.status ?? "-"}</span>
|
|
</div>
|
|
<div className="mini-stats">
|
|
<MiniStat label="请求模型" value={probe.requested_model || "-"} />
|
|
<MiniStat label="转发模型" value={probe.forwarded_model || "-"} />
|
|
<MiniStat label="Content-Type" value={probe.content_type || "-"} />
|
|
</div>
|
|
<pre className="log-output">{probe.body_preview || "无返回摘要"}</pre>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="hint">先在左侧 profile 卡片点击“探针”，这里会显示不切换情况下的探测结果。</div>
|
|
)}
|
|
</Card>
|
|
|
|
<Card
|
|
title="图片 Profile 列表"
|
|
hint={imageProfilesMeta}
|
|
actions={
|
|
<button
|
|
className="secondary"
|
|
type="button"
|
|
onClick={() => {
|
|
setShouldSyncImageProfileFormToActive(false);
|
|
setImageProfileForm(defaultImageProfileForm);
|
|
setImageProfileMessage({ text: "", tone: "" });
|
|
}}
|
|
>
|
|
新建图片 Profile
|
|
</button>
|
|
}
|
|
>
|
|
<div className="grid profile-list-grid">
|
|
{imageProfiles.length === 0 ? (
|
|
<div className="profile-card">当前还没有图片 profile env 文件。</div>
|
|
) : (
|
|
imageProfiles.map((profile) => (
|
|
<article className="profile-card compact-profile-card" data-active-profile={profile.active} key={profile.name}>
|
|
<div className="profile-head">
|
|
<div className="profile-meta">
|
|
<h3>{profile.name}</h3>
|
|
<div className="profile-path hint">{profile.file_path || ""}</div>
|
|
</div>
|
|
<div className="profile-actions">
|
|
{profile.active ? <span className="badge">当前运行</span> : <span className="badge warn">可切换</span>}
|
|
<button className="ghost" type="button" onClick={() => editImageProfile(profile)}>
|
|
编辑
|
|
</button>
|
|
<button className="ghost" type="button" disabled={probingImageProfile === profile.name} onClick={() => probeImageProfile(profile)}>
|
|
{probingImageProfile === profile.name ? "探测中" : "探针"}
|
|
</button>
|
|
<button className="danger" type="button" disabled={deletingImageProfile === profile.name} onClick={() => removeImageProfile(profile)}>
|
|
{deletingImageProfile === profile.name ? "删除中" : "删除"}
|
|
</button>
|
|
<button className="primary" type="button" disabled={profile.active} onClick={() => switchImageProfile(profile)}>
|
|
切换
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="mini-stats">
|
|
<MiniStat label="图片上游" value={profile.summary?.base_url || "回退文本上游"} />
|
|
<MiniStat label="图片认证" value={`${profile.summary?.auth_mode || "fixed_bearer"} / ${profile.summary?.auth_source || "-"}`} />
|
|
</div>
|
|
</article>
|
|
))
|
|
)}
|
|
</div>
|
|
</Card>
|
|
|
|
<Card title={imageProfileForm.name ? `编辑图片 ${imageProfileForm.name}` : "编辑图片 Profile"} hint="图片 API key 只写入系统 secret 文件，保存后不会从后端读回或展示。">
|
|
<form onSubmit={saveImageProfile}>
|
|
<Field label="图片 Profile 名称">
|
|
<input value={imageProfileForm.name} placeholder="image-primary" onChange={(event) => setImageProfileForm({ ...imageProfileForm, name: event.target.value })} />
|
|
</Field>
|
|
<Field label="图片上游 Base URL" hint="留空时 /images/* 和 /v1/images/* 回退到当前文本上游。">
|
|
<input value={imageProfileForm.base_url} placeholder="https://image-provider.example/v1" onChange={(event) => setImageProfileForm({ ...imageProfileForm, base_url: event.target.value })} />
|
|
</Field>
|
|
<Field label="图片 Auth 模式">
|
|
<select value={imageProfileForm.auth_mode} onChange={(event) => setImageProfileForm({ ...imageProfileForm, auth_mode: event.target.value as AuthMode })}>
|
|
<option value="passthrough">passthrough：透传 Codex Authorization</option>
|
|
<option value="manual_bearer">manual_bearer：手动写入系统 secret 文件</option>
|
|
<option value="fixed_bearer">fixed_bearer：从 env/file 读取 Bearer</option>
|
|
<option value="auth_json">auth_json：从 ~/.codex/auth.json 读取字段</option>
|
|
</select>
|
|
</Field>
|
|
{imageProfileForm.auth_mode === "manual_bearer" && (
|
|
<Field
|
|
label="图片 API Key"
|
|
hint={imageProfileForm.manual_secret_configured ? "系统中已有图片 key；留空表示保留，填入新值会覆盖写入。" : "只写入系统 secret 文件，保存后不会显示或返回。"}
|
|
>
|
|
<input
|
|
type="password"
|
|
value={imageProfileForm.manual_secret}
|
|
autoComplete="new-password"
|
|
placeholder={imageProfileForm.manual_secret_configured ? "已配置；留空保留" : "输入一次图片 API key"}
|
|
onChange={(event) => setImageProfileForm({ ...imageProfileForm, manual_secret: event.target.value })}
|
|
/>
|
|
</Field>
|
|
)}
|
|
{imageProfileForm.auth_mode === "fixed_bearer" && (
|
|
<>
|
|
<Field label="图片 Key 环境变量名" hint="只填变量名，不填 key 值。">
|
|
<input value={imageProfileForm.auth_env} placeholder="CODEX_RETRY_GATEWAY_IMAGE_API_KEY" onChange={(event) => setImageProfileForm({ ...imageProfileForm, auth_env: event.target.value })} />
|
|
</Field>
|
|
<Field label="图片 Key 文件路径">
|
|
<input value={imageProfileForm.auth_file} placeholder="/run/secrets/image-provider-token" onChange={(event) => setImageProfileForm({ ...imageProfileForm, auth_file: event.target.value })} />
|
|
</Field>
|
|
</>
|
|
)}
|
|
{imageProfileForm.auth_mode === "auth_json" && (
|
|
<>
|
|
<Field label="图片 auth.json 路径">
|
|
<input value={imageProfileForm.auth_json_path} placeholder="留空表示 ~/.codex/auth.json" onChange={(event) => setImageProfileForm({ ...imageProfileForm, auth_json_path: event.target.value })} />
|
|
</Field>
|
|
<Field label="图片 auth.json 字段名">
|
|
<input value={imageProfileForm.auth_json_key} placeholder="OPENAI_API_KEY" onChange={(event) => setImageProfileForm({ ...imageProfileForm, auth_json_key: event.target.value })} />
|
|
</Field>
|
|
</>
|
|
)}
|
|
<div className="toolbar">
|
|
<button className="primary" type="submit">
|
|
保存图片 Profile
|
|
</button>
|
|
<button className="ghost" type="button" onClick={() => setImageProfileForm(defaultImageProfileForm)}>
|
|
清空表单
|
|
</button>
|
|
</div>
|
|
<Message message={imageProfileMessage} />
|
|
</form>
|
|
</Card>
|
|
|
|
<Card title="图片 Profile 探针" hint="不切换当前 gateway，只对选定图片 profile 请求 /v1/models 检查连通性和认证。">
|
|
{imageProfileProbeResult ? (
|
|
<div className="grid">
|
|
<InfoList
|
|
rows={[
|
|
["图片 Profile", imageProfileProbeResult.image_profile || "-"],
|
|
["上游", imageProfileProbeResult.image_base_url || "-"],
|
|
["Auth", `${imageProfileProbeResult.auth_mode || "-"} / ${imageProfileProbeResult.auth_source || "-"}`],
|
|
]}
|
|
/>
|
|
{(imageProfileProbeResult.probes || []).map((probe) => (
|
|
<div className="profile-card" key={`${probe.kind}-${probe.target}`}>
|
|
<div className="profile-head">
|
|
<div>
|
|
<h3>{probe.kind || "probe"}</h3>
|
|
<div className="hint">{probe.target || "-"}</div>
|
|
</div>
|
|
<span className="badge">{probe.status ?? "-"}</span>
|
|
</div>
|
|
<div className="mini-stats">
|
|
<MiniStat label="Content-Type" value={probe.content_type || "-"} />
|
|
</div>
|
|
<pre className="log-output">{probe.body_preview || "无返回摘要"}</pre>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="hint">先在图片 profile 卡片点击“探针”，这里会显示不切换情况下的探测结果。</div>
|
|
)}
|
|
</Card>
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
{page === "rules" && (
|
|
<section className="page" data-active="true">
|
|
<div className="grid rules-layout">
|
|
<Card title="当前运行规则" hint="保存后会热生效，只影响当前正在运行的 gateway config；长期 profile 默认值请去 Profiles 页保存。">
|
|
<form onSubmit={saveRules}>
|
|
<Field label="reasoning_match_mode" hint="`518n-2` 会命中 516、1034、1552 等；切到 `manual` 时才只按手写列表判断。">
|
|
<select
|
|
value={ruleForm.reasoning_match_mode}
|
|
onChange={(event) =>
|
|
setRuleForm({ ...ruleForm, reasoning_match_mode: normalizeReasoningMode(event.target.value) })
|
|
}
|
|
>
|
|
<option value="formula_518n_minus_2">formula_518n_minus_2</option>
|
|
<option value="manual">manual</option>
|
|
</select>
|
|
</Field>
|
|
<Field label="reasoning_equals">
|
|
<input value={ruleForm.reasoning_equals} placeholder="例如：516, 1034, 1552" onChange={(event) => setRuleForm({ ...ruleForm, reasoning_equals: event.target.value })} />
|
|
</Field>
|
|
<Field label="retryable_status_codes">
|
|
<input value={ruleForm.retryable_status_codes} placeholder="例如：429, 503" onChange={(event) => setRuleForm({ ...ruleForm, retryable_status_codes: event.target.value })} />
|
|
</Field>
|
|
<Field label="retryable_error_messages" hint="每行一条错误文案；命中后会转成本地 non_stream_status_code。">
|
|
<textarea value={ruleForm.retryable_error_messages} onChange={(event) => setRuleForm({ ...ruleForm, retryable_error_messages: event.target.value })} />
|
|
</Field>
|
|
<div className="field-row">
|
|
<Field label="upstream_fetch_retry_attempts">
|
|
<input type="number" min={1} value={ruleForm.upstream_fetch_retry_attempts} onChange={(event) => setRuleForm({ ...ruleForm, upstream_fetch_retry_attempts: event.target.value })} />
|
|
</Field>
|
|
<Field label="upstream_fetch_retry_backoff_ms">
|
|
<input type="number" min={0} step={50} value={ruleForm.upstream_fetch_retry_backoff_ms} onChange={(event) => setRuleForm({ ...ruleForm, upstream_fetch_retry_backoff_ms: event.target.value })} />
|
|
</Field>
|
|
</div>
|
|
<Field label="endpoints">
|
|
<textarea value={ruleForm.endpoints} onChange={(event) => setRuleForm({ ...ruleForm, endpoints: event.target.value })} />
|
|
</Field>
|
|
<div className="field-row">
|
|
<Field label="non_stream_status_code">
|
|
<input type="number" min={100} max={599} value={ruleForm.non_stream_status_code} onChange={(event) => setRuleForm({ ...ruleForm, non_stream_status_code: event.target.value })} />
|
|
</Field>
|
|
<label className="inline-toggle">
|
|
<input type="checkbox" checked={ruleForm.log_match} onChange={(event) => setRuleForm({ ...ruleForm, log_match: event.target.checked })} />
|
|
命中时写日志
|
|
</label>
|
|
</div>
|
|
<div className="toolbar">
|
|
<button className="primary" type="submit">
|
|
保存并立即生效
|
|
</button>
|
|
<button className="danger" type="button" onClick={restoreConfig}>
|
|
恢复 Codex 原设置并关闭网关
|
|
</button>
|
|
</div>
|
|
<Message message={ruleMessage} />
|
|
</form>
|
|
</Card>
|
|
|
|
<Card title="Thread 覆盖" hint={threadRulesMeta}>
|
|
<div className="thread-rule-list">
|
|
{threadRules.length === 0 ? (
|
|
<div className="empty-state">当前没有按 thread_id 的拦截覆盖，全部走默认规则。</div>
|
|
) : (
|
|
threadRules.map((rule) => {
|
|
const busy = threadRuleBusyThreadId === rule.thread_id;
|
|
return (
|
|
<article className="thread-rule-card" key={rule.thread_id}>
|
|
<div className="thread-rule-head">
|
|
<div>
|
|
<strong>{rule.thread_id}</strong>
|
|
<div className="hint">更新于 {timestamp(rule.updated_at)}</div>
|
|
</div>
|
|
<span className={`badge ${threadGuardBadgeTone(rule.reasoning_intercept_enabled ? "enabled" : "disabled")}`}>
|
|
{rule.reasoning_intercept_enabled ? "强制开启" : "已关闭"}
|
|
</span>
|
|
</div>
|
|
<div className="thread-rule-actions">
|
|
<button className="ghost" type="button" disabled={busy || rule.reasoning_intercept_enabled} onClick={() => updateThreadRule(rule.thread_id, true)}>
|
|
{busy && !rule.reasoning_intercept_enabled ? "处理中" : "开启拦截"}
|
|
</button>
|
|
<button className="ghost" type="button" disabled={busy || !rule.reasoning_intercept_enabled} onClick={() => updateThreadRule(rule.thread_id, false)}>
|
|
{busy && rule.reasoning_intercept_enabled ? "处理中" : "关闭拦截"}
|
|
</button>
|
|
<button className="secondary" type="button" disabled={busy} onClick={() => restoreThreadRule(rule.thread_id)}>
|
|
{busy ? "处理中" : "恢复默认"}
|
|
</button>
|
|
</div>
|
|
</article>
|
|
);
|
|
})
|
|
)}
|
|
</div>
|
|
<Message message={threadRuleMessage} />
|
|
</Card>
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
{page === "logs" && (
|
|
<section className="page" data-active="true">
|
|
<Card
|
|
title="实时日志"
|
|
hint={logsMeta}
|
|
actions={
|
|
<button className="secondary" type="button" onClick={() => loadLogs(false)}>
|
|
刷新日志
|
|
</button>
|
|
}
|
|
>
|
|
<pre className="log-output">{logs}</pre>
|
|
</Card>
|
|
</section>
|
|
)}
|
|
</main>
|
|
</div>
|
|
|
|
<div className="switch-overlay" data-active={Boolean(switchingTo)}>
|
|
<div className="switch-dialog">
|
|
<span className="eyebrow">Profile Switch</span>
|
|
<h2>正在切换到 {switchingTo}</h2>
|
|
<p className="muted">gateway 正在后台热切换当前运行配置，页面会自动等待目标 profile 生效。</p>
|
|
<div className="progress-line">
|
|
<span />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function Card({
|
|
title,
|
|
hint,
|
|
badge,
|
|
actions,
|
|
children,
|
|
}: {
|
|
title: string;
|
|
hint?: string;
|
|
badge?: string;
|
|
actions?: React.ReactNode;
|
|
children: React.ReactNode;
|
|
}) {
|
|
return (
|
|
<div className="card">
|
|
<div className="card-inner">
|
|
<div className="card-head">
|
|
<div>
|
|
<h3>{title}</h3>
|
|
{hint ? <div className="hint">{hint}</div> : null}
|
|
</div>
|
|
{badge ? <span className="badge">{badge}</span> : actions}
|
|
</div>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Field({ label, hint, children }: { label: string; hint?: string; children: React.ReactNode }) {
|
|
return (
|
|
<label className="field">
|
|
<span>{label}</span>
|
|
{children}
|
|
{hint ? <span className="hint">{hint}</span> : null}
|
|
</label>
|
|
);
|
|
}
|
|
|
|
function Stat({ label, value }: { label: string; value: string }) {
|
|
return (
|
|
<div className="stat">
|
|
<label>{label}</label>
|
|
<strong>{value}</strong>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function TokenCard({ label, value }: { label: string; value: string }) {
|
|
return (
|
|
<div className="token-card">
|
|
<label>{label}</label>
|
|
<strong>{value}</strong>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function InfoList({ rows }: { rows: Array<[string, string]> }) {
|
|
return (
|
|
<div className="info-list">
|
|
{rows.map(([label, value]) => (
|
|
<div className="info-row" key={label}>
|
|
<label>{label}</label>
|
|
<span>{value}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function MiniStat({ label, value }: { label: string; value: string }) {
|
|
return (
|
|
<div className="mini-stat">
|
|
<label>{label}</label>
|
|
<span>{value}</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function SideCard({ label, value, strong = false }: { label: string; value: string; strong?: boolean }) {
|
|
return (
|
|
<div className="side-card">
|
|
<label>{label}</label>
|
|
{strong ? <strong>{value}</strong> : <span>{value}</span>}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Message({ message }: { message: MessageState }) {
|
|
return (
|
|
<div className="message" data-tone={message.tone}>
|
|
{message.text}
|
|
</div>
|
|
);
|
|
}
|