feat: group codex config settings

Author: linhay

docs-linhay/memory/2026-05-25.md

@@ -1,3 +1,4 @@
 # 2026-05-25
 
 - Settings Release Panel 重设计：`frontend/src/features/settings/components/SettingsReleasePanel.tsx` 改为信息矩阵 + 右侧操作区，并为当前版本、最新 release、GetTokens Git Hash、CLIProxyAPI Git Hash 增加 GitHub 外链入口。URL 构造逻辑收敛到 `settingsRelease.ts`，占位 hash（`DEV`、`—`）不显示外链；浏览器预览下外链走 `window.open`，Wails 桌面下走 `BrowserOpenURL`。验证：`npm run test:unit`、`npm run typecheck`、`npm run build` 通过；Playwright 预览截图落位 `docs-linhay/screenshots/20260525/settings/20260525-settings-release-panel-after-v02.png`。375px 预览暴露的是既有固定侧边栏桌面壳宽度问题，不作为本次 release panel 阻塞。
+- Codex `Feature 配置` 页面完成配置项语义分组与控件收敛：root 按启动默认、模型输出、权限沙箱、工作区文档、工具集成、高级兼容分组；features 按推荐稳定、实验性、高级、兼容旧项分组；notice 按安全提示、迁移提示、结构化 notice 分组；model providers 按 provider id 分组。分组只影响展示层，不改变 draft、preview、save 的字段路径和保留式 TOML patch 语义。固定 enum options 已统一渲染为 `SegmentedControl`，bool / boolean 继续使用 `ToggleSwitch`，并按本地 Codex 源码 `7d47056ea4` 的 `codex-rs/core/config.schema.json` 校准 `approvals_reviewer`、`personality`、`model_auto_compact_token_limit_scope`、`model_providers.*.wire_api` 等选项；布尔型缺省假值不会被误显示成 `false` 枚举项。验证：`go test ./internal/wailsapp -run 'TestGetCodexFeatureConfigReturnsTypedRootDefinitionsAndValues|TestGetCodexFeatureConfigReturnsAllModelProviderSchemaFields'`、`node --test frontend/src/features/status/tests/codexFeatureConfig.test.mjs`、`npm --prefix frontend run typecheck`、`npm --prefix frontend run build` 通过；浏览器确认 `http://127.0.0.1:34115/#frame=codex` 已出现实际非空分组标题，且 DOM 命中 `SegmentedControl: 16`、`ToggleSwitch: 79`、`selectCount: 0`。

docs-linhay/spaces/20260502-codex-config-toml-settings/README.md

@@ -40,6 +40,7 @@ GetTokens 已经在状态页支持把本地 relay service 的 `apiKey / baseURL
 - [x] 保存后无关顶层键、注释、MCP section、agents section、未知 provider 字段保持不变。
 - [x] 当现有 `config.toml` 语法明显无法安全 patch 时，停止写入并给出错误，不生成破坏性覆盖。
 - [x] 新增 Go 单元测试覆盖 `[features]` 读取、diff、merge、异常输入、未知字段保留；前端测试覆盖开关派生状态、保存前校验与 Codex 二级路由迁移。
+- [x] `Feature 配置` 页面不再以长列表展示，root、features、notice、model providers 均按语义分组，用户能先定位配置域再修改具体键。
 - [ ] 与现有“一键应用到本地 Codex 配置”共用后端保留式 TOML patch 工具，不出现两套写入规则。
 
 说明：本期实现已经使用同一类“保留原文件、只 patch 受控字段”的写入语义，但尚未把既有 relay 一键应用链路重构到同一个 helper；该项保留为后续内部收敛任务。
@@ -62,7 +63,7 @@ GetTokens 已经在状态页支持把本地 relay service 的 `apiKey / baseURL
 
 ## 当前状态
 - 状态：implemented
-- 最近更新：2026-05-23
+- 最近更新：2026-05-25
 
 ## 实施结果
 1. 后端新增 `GetCodexFeatureConfig`、`PreviewCodexFeatureConfig`、`SaveCodexFeatureConfig`，并通过根层 `main.App` wrapper 暴露到 Wails bindings。
@@ -77,6 +78,8 @@ GetTokens 已经在状态页支持把本地 relay service 的 `apiKey / baseURL
 10. Gemini 用量入口暂不暴露，后续 Gemini 能力成型后再单独纳入导航。
 11. 旧 `#frame=session-management`、`#frame=vendor-status`、`#frame=usage-desk` 路由和本地存储值保留兼容迁移，统一进入 `Codex` 对应二级项。
 12. 实现截图：[`20260502-codex-config-codex-menu-after-v01.png`](screenshots/20260502/codex-config/20260502-codex-config-codex-menu-after-v01.png)。
+13. `Feature 配置` 长列表已追加展示分组：root 按启动默认、模型输出、权限沙箱、工作区文档、工具集成、高级兼容分组；features 按推荐稳定、实验性、高级、兼容旧项分组；notice 按安全提示、迁移提示、结构化 notice 分组；model providers 按 provider id 分组。分组仅影响展示，不改变 draft、preview、save 的字段路径和写入语义。
+14. 固定枚举值控件已从原生 select 收敛为 `SegmentedControl`；bool / boolean 仍使用 `ToggleSwitch`。当前值不在枚举 options 中时临时并入 segment 头部展示，布尔型缺省假值不会被渲染成 `false` 枚举项。枚举 options 已按本地 Codex 源码 `7d47056ea4` 的 `codex-rs/core/config.schema.json` 校准：`approvals_reviewer`、`cli_auth_credentials_store`、`mcp_oauth_credentials_store`、`model_auto_compact_token_limit_scope`、`personality`、`model_providers.*.wire_api` 等不再使用旧值。
 
 ## 验证记录
 1. `go test ./...`
@@ -98,3 +101,11 @@ GetTokens 已经在状态页支持把本地 relay service 的 `apiKey / baseURL
 8. 浏览器 MCP 导航被自动审批超时阻塞后，改用 headless Chrome + CDP 验证 `http://127.0.0.1:34115/#frame=codex`；12 秒后页面 `loading=false`，DOM 命中 `Codex Root Settings`、`Codex Model Providers`、`Codex Features`、`Codex Notices`、`hide_rate_limit_model_nudge`、`approval_policy`、`request_max_retries`、`supports_websockets`、`multi_agent_v2`、`apps_mcp_path_override`、`network_proxy`、`model_migrations`、`external_config_migration_prompts`。
 
 补充：`npm --prefix frontend run test:unit` 当前 416 项中 415 通过，失败项为 `frontend/src/features/accounts/tests/accountFilters.test.mjs` 的 `AccountsToolbar keeps status, resource, and source filters in the new order`，属于 accounts 工具栏既有工作区改动，不在本次 Codex 配置页修改范围。
+
+## 2026-05-25 追加验证
+1. `node --test frontend/src/features/status/tests/codexFeatureConfig.test.mjs`
+2. `npm --prefix frontend run typecheck`
+3. `npm --prefix frontend run build`
+4. 浏览器重新加载 `http://127.0.0.1:34115/#frame=codex`，页面命中分组标题 `启动与默认`、`模型与输出`、`权限与沙箱`、`工作区与文档`、`工具与集成`、`高级与兼容`、`推荐与稳定`、`实验性`、`兼容与旧项`、`安全提示`、`迁移提示`，确认配置项已从长列表收敛为分组列表；空分组不会渲染。
+5. 追加控件形态验收：同一页面 DOM 命中 `SegmentedControl: 16`、`ToggleSwitch: 79`、`selectCount: 0`，固定枚举已改为 segment，bool 仍为 toggle。
+6. 追加 Codex 源码校准：对照 `docs-linhay/references/codex` 当前 `main`（`7d47056ea4`）的 `codex-rs/core/config.schema.json`，并用 `go test ./internal/wailsapp -run 'TestGetCodexFeatureConfigReturnsTypedRootDefinitionsAndValues|TestGetCodexFeatureConfigReturnsAllModelProviderSchemaFields'` 锁定关键 enum options。

frontend/src/components/ui/SegmentedControl.tsx

@@ -3,38 +3,41 @@ import type { SegmentedOption } from '../../types';
 
 interface SegmentedControlProps<T extends string> {
   options: ReadonlyArray<SegmentedOption<T>>;
-  value: T;
+  value: T | '';
+  disabled?: boolean;
   onChange: (value: T) => void;
 }
 
 export default function SegmentedControl<T extends string>({
   options,
   value,
+  disabled = false,
   onChange,
 }: SegmentedControlProps<T>) {
-  const selectedIndex = Math.max(
-    options.findIndex((option) => option.id === value),
-    0,
-  );
+  const selectedIndex = options.findIndex((option) => option.id === value);
   const segmentCount = Math.max(options.length, 1);
   const indicatorStyle: CSSProperties = {
     width: `calc(100% / ${segmentCount})`,
-    transform: `translateX(${selectedIndex * 100}%)`,
+    opacity: selectedIndex >= 0 ? 1 : 0,
+    transform: `translateX(${Math.max(selectedIndex, 0) * 100}%)`,
   };
 
   return (
     <div
       data-design-system-component="true"
       data-design-system-component-name="SegmentedControl"
-      className="relative flex w-full max-w-sm overflow-hidden border-[1px] border-[color:color-mix(in_srgb,var(--border-color)_55%,transparent)] bg-[var(--bg-main)]"
+      className={`relative flex w-full max-w-sm overflow-hidden border-[1px] border-[color:color-mix(in_srgb,var(--border-color)_55%,transparent)] bg-[var(--bg-main)] ${
+        disabled ? 'opacity-60' : ''
+      }`}
     >
       {options.map((option, index) => (
         <button
           type="button"
           key={option.id}
           aria-pressed={value === option.id}
+          disabled={disabled}
           onClick={() => onChange(option.id)}
-          className={`relative flex min-h-[var(--gt-control-segmented-min-height,34px)] flex-1 items-center justify-center px-[var(--gt-control-segmented-padding-inline,10px)] text-[length:var(--gt-control-segmented-font-size,9px)] font-bold leading-none transition-colors focus-visible:z-10 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--border-color)] ${
+          className={`relative flex min-h-[var(--gt-control-segmented-min-height,34px)] flex-1 items-center justify-center px-[var(--gt-control-segmented-padding-inline,10px)] text-[length:var(--gt-control-segmented-font-size,9px)] font-bold leading-none transition-colors focus-visible:z-10 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--border-color)] disabled:cursor-not-allowed ${
             index !== options.length - 1 ? 'border-r-[1px] border-[color:color-mix(in_srgb,var(--border-color)_35%,transparent)]' : ''
           } ${
             value === option.id

frontend/src/features/status/components/StatusCodexFeaturesSection.tsx

@@ -5,6 +5,7 @@ import type {
   CodexFeatureRow,
   CodexFeatureStageFilter,
 } from '../model/codexFeatureConfig';
+import { groupCodexFeatureRows } from '../model/codexFeatureConfig';
 import { renderCodexValueEditor } from '../model/codexValueEditor';
 
 const codexFeatureStageFilters: CodexFeatureStageFilter[] = [
@@ -72,6 +73,13 @@ export default function StatusCodexFeaturesSection({
   const visibleCount = rows.length;
   const totalCount = snapshot?.items.filter((item) => item.section === 'features').length || 0;
   const isBusy = isLoading || isSaving;
+  const groupedRows = groupCodexFeatureRows(rows);
+
+  function resolveGroupTitle(groupId: string) {
+    const translationKey = `status.codex_features_group_${groupId}`;
+    const translated = t(translationKey);
+    return translated !== translationKey ? translated : groupId;
+  }
 
   return (
     <section className="relative overflow-hidden border-2 border-[var(--border-color)] bg-[var(--bg-surface)]">
@@ -132,50 +140,66 @@ export default function StatusCodexFeaturesSection({
         </div>
       ) : null}
 
-      <div className="divide-y-2 divide-[var(--border-color)]">
-        {rows.map((row) => (
-          <div
-            key={row.key}
-            className={`grid gap-3 px-4 py-3 md:grid-cols-[minmax(0,1fr)_5rem] md:items-center ${
-              row.stage === 'unknown' || row.stage === 'unsupported' ? 'bg-[var(--bg-main)]' : ''
-            }`}
-          >
-            <div className="min-w-0">
-              <div className="break-all font-mono text-[length:var(--font-size-ui-md)] font-black tracking-wide text-[var(--text-primary)]">
-                {row.key}
+      <div>
+        {groupedRows.map((group, groupIndex) => (
+          <div key={group.id} className={`${groupIndex > 0 ? 'border-t-2 border-[var(--border-color)]' : ''}`}>
+            <div className="flex flex-wrap items-center justify-between gap-2 border-b-2 border-dashed border-[var(--border-color)] bg-[var(--bg-main)] px-4 py-2">
+              <div className="text-[length:var(--font-size-ui-xs)] font-black italic uppercase tracking-[0.18em] text-[var(--text-primary)]">
+                {resolveGroupTitle(group.id)}
+              </div>
+              <div className="text-[length:var(--font-size-ui-xs)] font-black uppercase tracking-[0.18em] text-[var(--text-muted)]">
+                {group.rows.length} {t('design_system.items')}
               </div>
-              <div className="mt-1 flex flex-wrap items-center gap-2 text-[length:var(--font-size-ui-sm)] font-bold tracking-wide text-[var(--text-muted)]">
-                <span
-                  className={`inline-flex shrink-0 border-2 px-2 py-0.5 text-[length:var(--font-size-ui-xs)] font-black tracking-[0.14em] ${
-                    row.stage === 'unknown' || row.stage === 'unsupported' || row.stage === 'removed'
-                      ? 'border-[var(--border-color)] bg-[var(--bg-surface)] text-[var(--color-status-danger)]'
-                      : 'border-[var(--border-color)] bg-[var(--text-primary)] text-[var(--bg-main)]'
+            </div>
+            <div className="divide-y-2 divide-[var(--border-color)]">
+              {group.rows.map((row) => (
+                <div
+                  key={row.key}
+                  className={`grid gap-3 px-4 py-3 md:grid-cols-[minmax(0,1fr)_5rem] md:items-center ${
+                    row.stage === 'unknown' || row.stage === 'unsupported' ? 'bg-[var(--bg-main)]' : ''
                   }`}
                 >
-                  {t(`status.codex_features_stage_${row.stage}`)}
-                </span>
-                {row.hiddenByDefault ? (
-                  <span className="inline-flex shrink-0 border-2 border-[var(--border-color)] bg-[var(--bg-surface)] px-2 py-0.5 text-[length:var(--font-size-ui-xs)] font-black tracking-[0.14em] text-[var(--text-muted)]">
-                    {t('status.codex_features_hidden_default')}
-                  </span>
-                ) : null}
-                <span className="min-w-0">{resolveCodexFeatureDescription(t, row)}</span>
-              </div>
-              {row.legacyAliases.length > 0 ? (
-                <div className="mt-2 inline-flex max-w-full border-2 border-dashed border-[var(--border-color)] px-2 py-1 text-[length:var(--font-size-ui-xs)] font-black uppercase tracking-[0.14em] text-[var(--text-primary)]">
-                  <span className="truncate">
-                    {t('status.codex_features_legacy_alias')}: {row.legacyAliases.join(', ')}
-                  </span>
+                  <div className="min-w-0">
+                    <div className="break-all font-mono text-[length:var(--font-size-ui-md)] font-black tracking-wide text-[var(--text-primary)]">
+                      {row.key}
+                    </div>
+                    <div className="mt-1 flex flex-wrap items-center gap-2 text-[length:var(--font-size-ui-sm)] font-bold tracking-wide text-[var(--text-muted)]">
+                      <span
+                        className={`inline-flex shrink-0 border-2 px-2 py-0.5 text-[length:var(--font-size-ui-xs)] font-black tracking-[0.14em] ${
+                          row.stage === 'unknown' || row.stage === 'unsupported' || row.stage === 'removed'
+                            ? 'border-[var(--border-color)] bg-[var(--bg-surface)] text-[var(--color-status-danger)]'
+                            : 'border-[var(--border-color)] bg-[var(--text-primary)] text-[var(--bg-main)]'
+                        }`}
+                      >
+                        {t(`status.codex_features_stage_${row.stage}`)}
+                      </span>
+                      {row.hiddenByDefault ? (
+                        <span className="inline-flex shrink-0 border-2 border-[var(--border-color)] bg-[var(--bg-surface)] px-2 py-0.5 text-[length:var(--font-size-ui-xs)] font-black tracking-[0.14em] text-[var(--text-muted)]">
+                          {t('status.codex_features_hidden_default')}
+                        </span>
+                      ) : null}
+                      <span className="min-w-0">{resolveCodexFeatureDescription(t, row)}</span>
+                    </div>
+                    {row.legacyAliases.length > 0 ? (
+                      <div className="mt-2 inline-flex max-w-full border-2 border-dashed border-[var(--border-color)] px-2 py-1 text-[length:var(--font-size-ui-xs)] font-black uppercase tracking-[0.14em] text-[var(--text-primary)]">
+                        <span className="truncate">
+                          {t('status.codex_features_legacy_alias')}: {row.legacyAliases.join(', ')}
+                        </span>
+                      </div>
+                    ) : null}
+                    {row.unsupported ? (
+                      <div className="mt-2 text-[length:var(--font-size-ui-xs)] font-black uppercase tracking-[0.14em] text-[var(--text-muted)]">
+                        {t('status.codex_features_unsupported_hint')}
+                      </div>
+                    ) : null}
+                  </div>
+                  <div className="flex justify-start md:justify-center">
+                    <div className="w-full max-w-[22rem]">
+                      {renderCodexValueEditor(row, row.readOnly || isBusy, onChangeFeature)}
+                    </div>
+                  </div>
                 </div>
-              ) : null}
-              {row.unsupported ? (
-                <div className="mt-2 text-[length:var(--font-size-ui-xs)] font-black uppercase tracking-[0.14em] text-[var(--text-muted)]">
-                  {t('status.codex_features_unsupported_hint')}
-                </div>
-              ) : null}
-            </div>
-            <div className="flex justify-start md:justify-center">
-              <div className="w-full max-w-[22rem]">{renderCodexValueEditor(row, row.readOnly || isBusy, onChangeFeature)}</div>
+              ))}
             </div>
           </div>
         ))}