feat: add gpt-5.4 + codex-spark support, matrix model selector, extended reasoning efforts

- Add gpt-5.4 (4 efforts: minimal/low/medium/high) and gpt-5.3-codex-spark (minimal/low) to models.yaml
- Update codex alias to gpt-5.4
- Generalize isCodexModelId → isCodexCompatibleId to match bare gpt-X.Y models
- Add /v1/models/catalog endpoint returning full CodexModelInfo[] with reasoning efforts
- Replace flat model dropdown with family × reasoning effort matrix selector in dashboard
- Add reasoning_effort to code examples when non-default effort is selected
- Bump client to v26.305.950 (build 863)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

CHANGELOG.md

@@ -8,6 +8,11 @@
 
 ### Added
 
+- GPT-5.4 + Codex Spark 模型支持：新增 `gpt-5.4`（4 种 effort: minimal/low/medium/high）和 `gpt-5.3-codex-spark`（minimal/low），`codex` 别名更新为 `gpt-5.4`
+- 扩展推理等级：支持 `minimal`、`xhigh` 等新 effort 值，客户端发送的任意 `reasoning_effort` 均透传到后端
+- 模型家族矩阵选择器：Dashboard 模型选择从平面下拉改为家族列表 + 推理等级按钮组，通过 `/v1/models/catalog` 端点获取完整目录
+- 泛化模型识别：`isCodexCompatibleId()` 同时匹配 `gpt-X.Y-codex-*` 和裸 `gpt-X.Y` 格式，确保新模型命名规范变化时自动接入
+- 代码示例动态 reasoning_effort：CodeExamples 组件根据选中的推理等级自动插入 `reasoning_effort` 参数
 - Reasoning/Thinking 输出支持：始终向 Codex API 发送 `summary: "auto"` 以获取推理摘要事件；OpenAI 路由在客户端发送 `reasoning_effort` 时以 `reasoning_content` 输出；Anthropic 路由在客户端发送 `thinking.type: enabled/adaptive` 时以 thinking block 输出；未知 SSE 事件记录到 debug 日志以便发现新事件类型
 - 图片输入支持：OpenAI、Anthropic、Gemini 三种格式的图片内容现在可以正确透传到 Codex 后端（`input_image` + data URI），此前图片被静默丢弃
 - 每窗口使用量计数器：Dashboard 主显示当前窗口内的请求数和 Token 用量，累计总量降为次要灰色小字；窗口过期时自动归零（时间驱动，零 API 开销），后端同步作为双保险校正

config/default.yaml

@@ -3,8 +3,8 @@ api:
   timeout_seconds: 60
 client:
   originator: Codex Desktop
-  app_version: 26.303.1606
-  build_number: "806"
+  app_version: 26.305.950
+  build_number: "863"
   platform: darwin
   arch: arm64
   chromium_version: "144"

config/models.yaml

@@ -7,6 +7,21 @@
 # Dynamic fetch merges with static; backend entries win for shared IDs.
 
 models:
+  # ── GPT-5.4 ──────────────────────────────────────────────────────
+  - id: gpt-5.4
+    displayName: GPT-5.4
+    description: Latest Codex flagship model
+    isDefault: false
+    supportedReasoningEfforts:
+      - { reasoningEffort: minimal, description: "Minimal reasoning" }
+      - { reasoningEffort: low,     description: "Fastest responses" }
+      - { reasoningEffort: medium,  description: "Balanced speed and quality" }
+      - { reasoningEffort: high,    description: "Deepest reasoning" }
+    defaultReasoningEffort: medium
+    inputModalities: [text, image]
+    supportsPersonality: true
+    upgrade: null
+
   # ── GPT-5.3 Codex family ──────────────────────────────────────────
   - id: gpt-5.3-codex
     displayName: GPT-5.3 Codex
@@ -79,6 +94,18 @@ models:
     supportsPersonality: false
     upgrade: null
 
+  - id: gpt-5.3-codex-spark
+    displayName: GPT-5.3 Codex Spark
+    description: GPT-5.3 Codex — ultra-lightweight, lowest latency
+    isDefault: false
+    supportedReasoningEfforts:
+      - { reasoningEffort: minimal, description: "Minimal reasoning" }
+      - { reasoningEffort: low,     description: "Fastest responses" }
+    defaultReasoningEffort: low
+    inputModalities: [text]
+    supportsPersonality: false
+    upgrade: null
+
   # ── GPT-5.2 Codex family ──────────────────────────────────────────
   - id: gpt-5.2-codex
     displayName: GPT-5.2 Codex
@@ -298,4 +325,4 @@ models:
     upgrade: null
 
 aliases:
-  codex: "gpt-5.2-codex"
+  codex: "gpt-5.4"

shared/hooks/use-status.ts

@@ -1,13 +1,62 @@
-import { useState, useEffect, useCallback } from "preact/hooks";
+import { useState, useEffect, useCallback, useMemo } from "preact/hooks";
+
+export interface CatalogModel {
+  id: string;
+  displayName: string;
+  supportedReasoningEfforts: { reasoningEffort: string; description: string }[];
+  defaultReasoningEffort: string;
+}
+
+export interface ModelFamily {
+  id: string;
+  displayName: string;
+  efforts: { reasoningEffort: string; description: string }[];
+  defaultEffort: string;
+}
+
+/**
+ * Extract model family ID from a model ID.
+ * gpt-5.3-codex-high → gpt-5.3-codex
+ * gpt-5.3-codex-spark → gpt-5.3-codex-spark (spark is a distinct family)
+ * gpt-5.4 → gpt-5.4
+ */
+function getFamilyId(id: string): string {
+  // Bare model: gpt-5.4
+  if (/^gpt-\d+(?:\.\d+)?$/.test(id)) return id;
+  // Spark family: gpt-X.Y-codex-spark
+  if (/^gpt-\d+(?:\.\d+)?-codex-spark$/.test(id)) return id;
+  // Mini family: gpt-X.Y-codex-mini
+  if (/^gpt-\d+(?:\.\d+)?-codex-mini$/.test(id)) return id;
+  // Codex base or tier variant (high/mid/low/max): family = gpt-X.Y-codex
+  const m = id.match(/^(gpt-\d+(?:\.\d+)?-codex)(?:-(?:high|mid|low|max))?$/);
+  if (m) return m[1];
+  // Legacy: gpt-5-codex, gpt-5-codex-mini
+  const legacy = id.match(/^(gpt-\d+-codex)(?:-(?:high|mid|low|max|mini))?$/);
+  if (legacy) return legacy[1];
+  return id;
+}
+
+/** Check if a model ID is a tier variant (not the base family model). */
+function isTierVariant(id: string): boolean {
+  return /^gpt-\d+(?:\.\d+)?-codex-(?:high|mid|low|max)$/.test(id);
+}
 
 export function useStatus(accountCount: number) {
   const [baseUrl, setBaseUrl] = useState("Loading...");
   const [apiKey, setApiKey] = useState("Loading...");
   const [models, setModels] = useState<string[]>(["codex"]);
   const [selectedModel, setSelectedModel] = useState("codex");
+  const [modelCatalog, setModelCatalog] = useState<CatalogModel[]>([]);
+  const [selectedEffort, setSelectedEffort] = useState("medium");
 
   const loadModels = useCallback(async () => {
     try {
+      // Fetch full catalog for effort info
+      const catalogResp = await fetch("/v1/models/catalog");
+      const catalogData: CatalogModel[] = await catalogResp.json();
+      setModelCatalog(catalogData);
+
+      // Also fetch model list (includes aliases)
       const resp = await fetch("/v1/models");
       const data = await resp.json();
       const ids: string[] = data.data.map((m: { id: string }) => m.id);
@@ -37,5 +86,35 @@ export function useStatus(accountCount: number) {
     loadStatus();
   }, [loadModels, accountCount]);
 
-  return { baseUrl, apiKey, models, selectedModel, setSelectedModel };
+  // Build model families — group catalog by family, excluding tier variants
+  const modelFamilies = useMemo((): ModelFamily[] => {
+    if (modelCatalog.length === 0) return [];
+
+    const familyMap = new Map<string, ModelFamily>();
+    for (const m of modelCatalog) {
+      const fid = getFamilyId(m.id);
+      // Only use the base family model (not tier variants) to define the family
+      if (isTierVariant(m.id)) continue;
+      if (familyMap.has(fid)) continue;
+      familyMap.set(fid, {
+        id: fid,
+        displayName: m.displayName,
+        efforts: m.supportedReasoningEfforts,
+        defaultEffort: m.defaultReasoningEffort,
+      });
+    }
+    return [...familyMap.values()];
+  }, [modelCatalog]);
+
+  return {
+    baseUrl,
+    apiKey,
+    models,
+    selectedModel,
+    setSelectedModel,
+    selectedEffort,
+    setSelectedEffort,
+    modelFamilies,
+    modelCatalog,
+  };
 }

src/models/model-store.ts

@@ -115,9 +115,11 @@ function normalizeBackendModel(raw: BackendModelEntry): NormalizedModelWithMeta
   };
 }
 
-/** Check if a model ID is a Codex model (gpt-X.Y-codex or gpt-X.Y-codex-tier). */
-function isCodexModelId(id: string): boolean {
-  return /^gpt-\d+(\.\d+)?-codex/.test(id);
+/** Check if a model ID is Codex-compatible (gpt-X.Y-codex-* or bare gpt-X.Y). */
+function isCodexCompatibleId(id: string): boolean {
+  if (/^gpt-\d+(\.\d+)?-codex/.test(id)) return true;
+  if (/^gpt-\d+(\.\d+)?$/.test(id)) return true;
+  return false;
 }
 
 /**
@@ -137,7 +139,7 @@ export function applyBackendModels(backendModels: BackendModelEntry[]): void {
   const staticIds = new Set(_catalog.map((m) => m.id));
   const filtered = backendModels.filter((raw) => {
     const id = raw.slug ?? raw.id ?? raw.name ?? "";
-    return staticIds.has(id) || isCodexModelId(id);
+    return staticIds.has(id) || isCodexCompatibleId(id);
   });
 
   const staticMap = new Map(_catalog.map((m) => [m.id, m]));

src/routes/models.ts

@@ -78,6 +78,11 @@ export function createModelRoutes(): Hono {
     });
   });
 
+  // Full catalog with reasoning efforts (for dashboard UI)
+  app.get("/v1/models/catalog", (c) => {
+    return c.json(getModelCatalog());
+  });
+
   // Extended endpoint: model details with reasoning efforts
   app.get("/v1/models/:modelId/info", (c) => {
     const modelId = c.req.param("modelId");

web/src/App.tsx

@@ -39,6 +39,9 @@ function Dashboard() {
             models={status.models}
             selectedModel={status.selectedModel}
             onModelChange={status.setSelectedModel}
+            modelFamilies={status.modelFamilies}
+            selectedEffort={status.selectedEffort}
+            onEffortChange={status.setSelectedEffort}
           />
           <AnthropicSetup
             apiKey={status.apiKey}
@@ -48,6 +51,7 @@ function Dashboard() {
             baseUrl={status.baseUrl}
             apiKey={status.apiKey}
             model={status.selectedModel}
+            reasoningEffort={status.selectedEffort}
           />
         </div>
       </main>

web/src/components/ApiConfig.tsx

@@ -1,6 +1,7 @@
 import { useT } from "../../../shared/i18n/context";
 import { CopyButton } from "./CopyButton";
 import { useCallback } from "preact/hooks";
+import type { ModelFamily } from "../../../shared/hooks/use-status";
 
 interface ApiConfigProps {
   baseUrl: string;
@@ -8,14 +9,53 @@ interface ApiConfigProps {
   models: string[];
   selectedModel: string;
   onModelChange: (model: string) => void;
+  modelFamilies: ModelFamily[];
+  selectedEffort: string;
+  onEffortChange: (effort: string) => void;
 }
 
-export function ApiConfig({ baseUrl, apiKey, models, selectedModel, onModelChange }: ApiConfigProps) {
+const EFFORT_LABELS: Record<string, string> = {
+  none: "None",
+  minimal: "Minimal",
+  low: "Low",
+  medium: "Medium",
+  high: "High",
+  xhigh: "XHigh",
+};
+
+export function ApiConfig({
+  baseUrl,
+  apiKey,
+  models,
+  selectedModel,
+  onModelChange,
+  modelFamilies,
+  selectedEffort,
+  onEffortChange,
+}: ApiConfigProps) {
   const t = useT();
 
   const getBaseUrl = useCallback(() => baseUrl, [baseUrl]);
   const getApiKey = useCallback(() => apiKey, [apiKey]);
 
+  // When a family is selected, update model + snap effort to default if current effort is unsupported
+  const handleFamilySelect = useCallback(
+    (family: ModelFamily) => {
+      onModelChange(family.id);
+      const supportedEfforts = family.efforts.map((e) => e.reasoningEffort);
+      if (!supportedEfforts.includes(selectedEffort)) {
+        onEffortChange(family.defaultEffort);
+      }
+    },
+    [onModelChange, onEffortChange, selectedEffort],
+  );
+
+  // Find the currently selected family's supported efforts
+  const currentFamily = modelFamilies.find((f) => f.id === selectedModel);
+  const currentEfforts = currentFamily?.efforts ?? [];
+
+  const showMatrix = modelFamilies.length > 0;
+
   return (
     <section class="bg-white dark:bg-card-dark border border-gray-200 dark:border-border-dark rounded-xl p-5 shadow-sm transition-colors">
       <div class="flex items-center justify-between mb-6 border-b border-slate-100 dark:border-border-dark pb-4">
@@ -41,25 +81,65 @@ export function ApiConfig({ baseUrl, apiKey, models, selectedModel, onModelChang
             <CopyButton getText={getBaseUrl} class="absolute right-2" titleKey="copyUrl" />
           </div>
         </div>
-        {/* Default Model */}
+        {/* Model selector — matrix or flat fallback */}
         <div class="space-y-1.5">
           <label class="text-xs font-semibold text-slate-700 dark:text-text-main">{t("defaultModel")}</label>
-          <div class="relative">
-            <select
-              class="w-full appearance-none pl-3 pr-10 py-2.5 bg-white dark:bg-bg-dark border border-gray-200 dark:border-border-dark rounded-lg text-[0.78rem] text-slate-700 dark:text-text-main font-medium focus:ring-1 focus:ring-primary focus:border-primary outline-none cursor-pointer transition-colors"
-              value={selectedModel}
-              onChange={(e) => onModelChange((e.target as HTMLSelectElement).value)}
-            >
-              {models.map((m) => (
-                <option key={m} value={m}>{m}</option>
-              ))}
-            </select>
-            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-slate-500 dark:text-text-dim">
-              <svg class="size-[18px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
-              </svg>
+          {showMatrix ? (
+            <div class="border border-gray-200 dark:border-border-dark rounded-lg overflow-hidden">
+              {/* Model family list */}
+              <div class="max-h-[200px] overflow-y-auto">
+                {modelFamilies.map((f) => (
+                  <button
+                    key={f.id}
+                    onClick={() => handleFamilySelect(f)}
+                    class={`w-full text-left px-3 py-2 text-[0.78rem] font-medium border-b border-gray-100 dark:border-border-dark last:border-b-0 transition-colors ${
+                      selectedModel === f.id
+                        ? "bg-primary/10 text-primary dark:bg-primary/20"
+                        : "text-slate-700 dark:text-text-main hover:bg-slate-50 dark:hover:bg-[#21262d]"
+                    }`}
+                  >
+                    {f.displayName}
+                  </button>
+                ))}
+              </div>
+              {/* Reasoning effort buttons for selected family */}
+              {currentEfforts.length > 1 && (
+                <div class="flex gap-1.5 p-2 bg-slate-50 dark:bg-bg-dark/50 border-t border-gray-200 dark:border-border-dark flex-wrap">
+                  {currentEfforts.map((e) => (
+                    <button
+                      key={e.reasoningEffort}
+                      onClick={() => onEffortChange(e.reasoningEffort)}
+                      title={e.description}
+                      class={`px-2.5 py-1 text-[0.7rem] font-semibold rounded transition-all ${
+                        selectedEffort === e.reasoningEffort
+                          ? "bg-primary text-white shadow-sm"
+                          : "bg-white dark:bg-[#21262d] text-slate-600 dark:text-text-dim border border-gray-200 dark:border-border-dark hover:border-primary/50"
+                      }`}
+                    >
+                      {EFFORT_LABELS[e.reasoningEffort] ?? e.reasoningEffort}
+                    </button>
+                  ))}
+                </div>
+              )}
             </div>
-          </div>
+          ) : (
+            <div class="relative">
+              <select
+                class="w-full appearance-none pl-3 pr-10 py-2.5 bg-white dark:bg-bg-dark border border-gray-200 dark:border-border-dark rounded-lg text-[0.78rem] text-slate-700 dark:text-text-main font-medium focus:ring-1 focus:ring-primary focus:border-primary outline-none cursor-pointer transition-colors"
+                value={selectedModel}
+                onChange={(e) => onModelChange((e.target as HTMLSelectElement).value)}
+              >
+                {models.map((m) => (
+                  <option key={m} value={m}>{m}</option>
+                ))}
+              </select>
+              <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-slate-500 dark:text-text-dim">
+                <svg class="size-[18px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+                </svg>
+              </div>
+            </div>
+          )}
         </div>
         {/* API Key */}
         <div class="space-y-1.5 md:col-span-2">

web/src/components/CodeExamples.tsx

@@ -21,8 +21,18 @@ function buildExamples(
   baseUrl: string,
   apiKey: string,
   model: string,
-  origin: string
+  origin: string,
+  reasoningEffort: string
 ): Record<string, string> {
+  const effortLine = reasoningEffort && reasoningEffort !== "medium"
+    ? `\n    reasoning_effort="${reasoningEffort}",`
+    : "";
+  const effortJson = reasoningEffort && reasoningEffort !== "medium"
+    ? `,\n    "reasoning_effort": "${reasoningEffort}"`
+    : "";
+  const effortJs = reasoningEffort && reasoningEffort !== "medium"
+    ? `\n    reasoning_effort: "${reasoningEffort}",`
+    : "";
   return {
     "openai-python": `from openai import OpenAI
 
@@ -33,7 +43,7 @@ client = OpenAI(
 
 response = client.chat.completions.create(
     model="${model}",
-    messages=[{"role": "user", "content": "Hello"}],
+    messages=[{"role": "user", "content": "Hello"}],${effortLine}
 )
 print(response.choices[0].message.content)`,
 
@@ -42,7 +52,7 @@ print(response.choices[0].message.content)`,
   -H "Authorization: Bearer ${apiKey}" \\
   -d '{
     "model": "${model}",
-    "messages": [{"role": "user", "content": "Hello"}]
+    "messages": [{"role": "user", "content": "Hello"}]${effortJson}
   }'`,
 
     "openai-node": `import OpenAI from "openai";
@@ -54,7 +64,7 @@ const client = new OpenAI({
 
 const stream = await client.chat.completions.create({
     model: "${model}",
-    messages: [{ role: "user", content: "Hello" }],
+    messages: [{ role: "user", content: "Hello" }],${effortJs}
     stream: true,
 });
 for await (const chunk of stream) {
@@ -137,17 +147,18 @@ interface CodeExamplesProps {
   baseUrl: string;
   apiKey: string;
   model: string;
+  reasoningEffort: string;
 }
 
-export function CodeExamples({ baseUrl, apiKey, model }: CodeExamplesProps) {
+export function CodeExamples({ baseUrl, apiKey, model, reasoningEffort }: CodeExamplesProps) {
   const t = useT();
   const [protocol, setProtocol] = useState<Protocol>("openai");
   const [codeLang, setCodeLang] = useState<CodeLang>("python");
 
   const origin = typeof window !== "undefined" ? window.location.origin : "";
   const examples = useMemo(
-    () => buildExamples(baseUrl, apiKey, model, origin),
-    [baseUrl, apiKey, model, origin]
+    () => buildExamples(baseUrl, apiKey, model, origin, reasoningEffort),
+    [baseUrl, apiKey, model, origin, reasoningEffort]
   );
 
   const currentCode = examples[`${protocol}-${codeLang}`] || "Loading...";