diff --git a/apps/ai-game-creator-shell/src/features/runtime-config/RuntimeConfigDialog.tsx b/apps/ai-game-creator-shell/src/features/runtime-config/RuntimeConfigDialog.tsx
index c8c9fdd23..df6e2469e 100644
--- a/apps/ai-game-creator-shell/src/features/runtime-config/RuntimeConfigDialog.tsx
+++ b/apps/ai-game-creator-shell/src/features/runtime-config/RuntimeConfigDialog.tsx
@@ -1,5 +1,19 @@
-import { Plus, Trash2, Zap } from 'lucide-react';
-import { type FormEvent, Fragment, useEffect, useRef, useState } from 'react';
+import {
+  Bot,
+  Cable,
+  CheckCircle2,
+  CircleAlert,
+  LoaderCircle,
+  Plus,
+  RotateCcw,
+  Save,
+  Settings2,
+  SlidersHorizontal,
+  Trash2,
+  X,
+  Zap,
+} from 'lucide-react';
+import { type FormEvent, useEffect, useRef, useState } from 'react';
 
 import { createGameCreationAppSeedTasks } from '../../../../../packages/shared/src/contracts/gameCreationApp';
 import {
@@ -82,6 +96,40 @@ const runtimeAgentModes = new Set<GameCreatorAgentMode>([
   'provider',
 ]);
 
+type RuntimeSettingsSection = 'general' | 'agents' | 'connections' | 'advanced';
+
+const runtimeSettingsSections = [
+  {
+    id: 'general',
+    label: '常用设置',
+    description: '运行方式与默认模型',
+    icon: Settings2,
+  },
+  {
+    id: 'agents',
+    label: 'Agent 模型',
+    description: '按角色覆盖默认模型',
+    icon: Bot,
+  },
+  {
+    id: 'connections',
+    label: '连接与工具',
+    description: 'MCP 与外部服务',
+    icon: Cable,
+  },
+  {
+    id: 'advanced',
+    label: '高级参数',
+    description: '上下文、超时与重试',
+    icon: SlidersHorizontal,
+  },
+] as const satisfies ReadonlyArray<{
+  id: RuntimeSettingsSection;
+  label: string;
+  description: string;
+  icon: typeof Settings2;
+}>;
+
 const defaultRuntimeMcpServerConfig: GameCreatorMcpServerConfig = {
   enabled: true,
   required: false,
@@ -534,6 +582,9 @@ export function RuntimeConfigDialog({
   const [runtimeConfigDraft, setRuntimeConfigDraft] =
     useState<GameCreatorAppConfig>(defaultRuntimeConfigDraft);
   const [runtimeConfigBusy, setRuntimeConfigBusy] = useState(false);
+  const [activeSection, setActiveSection] =
+    useState<RuntimeSettingsSection>('general');
+  const [expandedAgentIds, setExpandedAgentIds] = useState<string[]>([]);
   const [newMcpServerId, setNewMcpServerId] = useState('');
   const [mcpStructuredDrafts, setMcpStructuredDrafts] = useState<
     Record<string, RuntimeMcpStructuredDraft>
@@ -858,6 +909,24 @@ export function RuntimeConfigDialog({
     }
   }
 
+  const selectedSection =
+    runtimeSettingsSections.find((section) => section.id === activeSection) ??
+    runtimeSettingsSections[0];
+  const configuredAgentCount = Object.values(
+    runtimeConfigDraft.agentLlm ?? {},
+  ).filter((config) =>
+    Object.values(config).some((value) => value !== undefined && value !== ''),
+  ).length;
+  const runtimeConfigStatusTone = runtimeConfigBusy
+    ? 'busy'
+    : /^(已保存|已读取|已恢复默认|已添加|已移除|MCP 已连接)/.test(
+          runtimeConfigStatus,
+        )
+      ? 'success'
+      : runtimeConfigStatus === '未读取'
+        ? 'neutral'
+        : 'warning';
+
   return (
     <div
       className="settings-overlay"
@@ -865,952 +934,1130 @@ export function RuntimeConfigDialog({
       onMouseDown={(event) => closeDialogOnBackdropMouseDown(event, onClose)}
     >
       <form
-        className="settings-panel"
+        className="settings-panel runtime-settings-panel"
         role="dialog"
         aria-label="运行时配置"
         aria-modal="true"
         onSubmit={handleRuntimeConfigSave}
         onKeyDown={(event) => closeDialogOnEscape(event, onClose)}
       >
-        <header className="panel-header">
-          <h2>运行时配置</h2>
-          <div className="panel-actions">
+        <header className="runtime-settings-header">
+          <div>
+            <span className="runtime-settings-eyebrow">AI GAME CREATOR</span>
+            <h2>Agent 设置</h2>
+          </div>
+          <button
+            className="runtime-settings-close"
+            type="button"
+            aria-label="关闭 Agent 设置"
+            onClick={onClose}
+          >
+            <X size={18} aria-hidden="true" />
+          </button>
+        </header>
+        <div className="runtime-settings-layout">
+          <aside className="runtime-settings-nav" aria-label="设置分类">
+            <nav>
+              {runtimeSettingsSections.map((section) => {
+                const Icon = section.icon;
+                return (
+                  <button
+                    key={section.id}
+                    type="button"
+                    className={activeSection === section.id ? 'is-active' : ''}
+                    aria-current={
+                      activeSection === section.id ? 'page' : undefined
+                    }
+                    onClick={() => setActiveSection(section.id)}
+                  >
+                    <Icon size={17} aria-hidden="true" />
+                    <span>
+                      <strong>{section.label}</strong>
+                      <small>{section.description}</small>
+                    </span>
+                  </button>
+                );
+              })}
+            </nav>
+            <div className="runtime-settings-config-state">
+              <span>配置文件</span>
+              <strong>{runtimeConfigPath ? '已载入' : '等待载入'}</strong>
+              {runtimeConfigPath ? (
+                <small title={runtimeConfigPath}>{runtimeConfigPath}</small>
+              ) : null}
+            </div>
+          </aside>
+          <main className="runtime-settings-content">
+            <header className="runtime-settings-section-header">
+              <div>
+                <h3>{selectedSection.label}</h3>
+                <p>{selectedSection.description}</p>
+              </div>
+              {activeSection === 'agents' ? (
+                <span>{configuredAgentCount} 个角色已覆盖</span>
+              ) : activeSection === 'connections' ? (
+                <span>
+                  {Object.keys(runtimeConfigDraft.mcpServers).length} 个 MCP
+                </span>
+              ) : null}
+            </header>
+            <div className="settings-grid runtime-settings-fields">
+              {activeSection === 'general' ? (
+                <>
+                  <label>
+                    Agent 模式
+                    <select
+                      aria-label="Agent 模式"
+                      value={runtimeConfigDraft.agentMode}
+                      onChange={(event) =>
+                        updateRuntimeAgentMode(
+                          event.currentTarget.value as GameCreatorAgentMode,
+                        )
+                      }
+                    >
+                      {!runtimeAgentModes.has(runtimeConfigDraft.agentMode) ? (
+                        <option value={runtimeConfigDraft.agentMode}>
+                          {runtimeConfigDraft.agentMode}（当前配置）
+                        </option>
+                      ) : null}
+                      <option value="codex_app_server">Codex App Server</option>
+                      <option value="codex_cli">Codex CLI</option>
+                      <option value="provider">HTTP Provider</option>
+                    </select>
+                  </label>
+                  {runtimeConfigDraft.agentMode !== 'codex_cli' ? (
+                    <>
+                      <label>
+                        LLM Provider
+                        <select
+                          aria-label="LLM Provider"
+                          value={resolveRuntimeLlmProviderPresetId(
+                            runtimeConfigDraft.llm,
+                          )}
+                          onChange={(event) =>
+                            updateRuntimeLlmProviderPreset(
+                              event.currentTarget
+                                .value as RuntimeLlmProviderPresetId,
+                            )
+                          }
+                        >
+                          <option value="custom">自定义</option>
+                          {runtimeLlmProviderPresets.map((preset) => (
+                            <option key={preset.id} value={preset.id}>
+                              {preset.label}
+                            </option>
+                          ))}
+                        </select>
+                      </label>
+                      <label>
+                        LLM API Key
+                        <input
+                          aria-label="LLM API Key"
+                          autoComplete="off"
+                          type="password"
+                          value={runtimeConfigDraft.llm.apiKey}
+                          onChange={(event) =>
+                            updateRuntimeLlmConfig(
+                              'apiKey',
+                              event.currentTarget.value,
+                            )
+                          }
+                        />
+                      </label>
+                      <label>
+                        LLM Base URL
+                        <input
+                          aria-label="LLM Base URL"
+                          value={runtimeConfigDraft.llm.baseUrl}
+                          onChange={(event) =>
+                            updateRuntimeLlmConfig(
+                              'baseUrl',
+                              event.currentTarget.value,
+                            )
+                          }
+                        />
+                      </label>
+                      <label>
+                        LLM 模型
+                        <input
+                          aria-label="LLM 模型"
+                          value={runtimeConfigDraft.llm.model}
+                          onChange={(event) =>
+                            updateRuntimeLlmConfig(
+                              'model',
+                              event.currentTarget.value,
+                            )
+                          }
+                        />
+                      </label>
+                      <label>
+                        LLM API 类型
+                        <select
+                          aria-label="LLM API 类型"
+                          value={runtimeConfigDraft.llm.apiKind}
+                          onChange={(event) =>
+                            updateRuntimeLlmConfig(
+                              'apiKind',
+                              event.currentTarget
+                                .value as GameCreatorLlmApiKind,
+                            )
+                          }
+                        >
+                          <option value="openai_responses">
+                            openai_responses
+                          </option>
+                          <option value="openai_chat">openai_chat</option>
+                          <option value="anthropic">anthropic</option>
+                        </select>
+                      </label>
+                      <label>
+                        LLM 推理档
+                        <select
+                          aria-label="LLM 推理档"
+                          value={runtimeConfigDraft.llm.reasoningEffort}
+                          onChange={(event) =>
+                            updateRuntimeLlmConfig(
+                              'reasoningEffort',
+                              event.currentTarget
+                                .value as GameCreatorLlmReasoningEffort,
+                            )
+                          }
+                        >
+                          {gameCreatorLlmReasoningEfforts.map((effort) => (
+                            <option key={effort} value={effort}>
+                              {effort}
+                            </option>
+                          ))}
+                        </select>
+                      </label>
+                      <label className="settings-checkbox">
+                        <input
+                          aria-label="LLM 流式请求"
+                          type="checkbox"
+                          checked={runtimeConfigDraft.llm.stream}
+                          onChange={(event) =>
+                            updateRuntimeLlmConfig(
+                              'stream',
+                              event.currentTarget.checked,
+                            )
+                          }
+                        />
+                        LLM 流式请求
+                      </label>
+                      <label className="settings-checkbox">
+                        <input
+                          aria-label="LLM 联网检索"
+                          type="checkbox"
+                          checked={runtimeConfigDraft.llm.webSearchEnabled}
+                          onChange={(event) =>
+                            updateRuntimeLlmConfig(
+                              'webSearchEnabled',
+                              event.currentTarget.checked,
+                            )
+                          }
+                        />
+                        LLM 联网检索
+                      </label>
+                    </>
+                  ) : null}
+                </>
+              ) : null}
+              {activeSection === 'advanced' &&
+              runtimeConfigDraft.agentMode !== 'codex_cli' ? (
+                <>
+                  <label>
+                    LLM 上下文窗口 tokens
+                    <input
+                      aria-label="LLM 上下文窗口 tokens"
+                      type="number"
+                      min="1"
+                      value={runtimeConfigDraft.llm.contextWindowTokens}
+                      onChange={(event) =>
+                        updateRuntimeLlmConfig(
+                          'contextWindowTokens',
+                          Math.max(1, Number(event.currentTarget.value) || 1),
+                        )
+                      }
+                    />
+                  </label>
+                  <label>
+                    LLM 自动压缩阈值 tokens
+                    <input
+                      aria-label="LLM 自动压缩阈值 tokens"
+                      type="number"
+                      min="1"
+                      value={runtimeConfigDraft.llm.autoCompactTokenLimit}
+                      onChange={(event) =>
+                        updateRuntimeLlmConfig(
+                          'autoCompactTokenLimit',
+                          Math.max(1, Number(event.currentTarget.value) || 1),
+                        )
+                      }
+                    />
+                  </label>
+                  <label>
+                    LLM 工具输出上限 tokens
+                    <input
+                      aria-label="LLM 工具输出上限 tokens"
+                      type="number"
+                      min="1"
+                      value={runtimeConfigDraft.llm.toolOutputTokenLimit}
+                      onChange={(event) =>
+                        updateRuntimeLlmConfig(
+                          'toolOutputTokenLimit',
+                          Math.max(1, Number(event.currentTarget.value) || 1),
+                        )
+                      }
+                    />
+                  </label>
+                  <label>
+                    LLM 超时 ms
+                    <input
+                      aria-label="LLM 超时 ms"
+                      type="number"
+                      min="1000"
+                      value={runtimeConfigDraft.llm.requestTimeoutMs}
+                      onChange={(event) =>
+                        updateRuntimeLlmConfig(
+                          'requestTimeoutMs',
+                          Math.max(
+                            1000,
+                            Number(event.currentTarget.value) || 1000,
+                          ),
+                        )
+                      }
+                    />
+                  </label>
+                  <label>
+                    LLM 重试次数
+                    <input
+                      aria-label="LLM 重试次数"
+                      type="number"
+                      min="0"
+                      value={runtimeConfigDraft.llm.maxRetries}
+                      onChange={(event) =>
+                        updateRuntimeLlmConfig(
+                          'maxRetries',
+                          Math.max(0, Number(event.currentTarget.value) || 0),
+                        )
+                      }
+                    />
+                  </label>
+                  <label>
+                    LLM 退避 ms
+                    <input
+                      aria-label="LLM 退避 ms"
+                      type="number"
+                      min="1"
+                      value={runtimeConfigDraft.llm.retryBackoffMs}
+                      onChange={(event) =>
+                        updateRuntimeLlmConfig(
+                          'retryBackoffMs',
+                          Math.max(1, Number(event.currentTarget.value) || 1),
+                        )
+                      }
+                    />
+                  </label>
+                </>
+              ) : null}
+              {activeSection === 'agents' &&
+              runtimeConfigDraft.agentMode !== 'codex_cli' ? (
+                <div className="runtime-agent-list">
+                  {runtimeAgentLlmRows.map((agent) => {
+                    const agentLlm =
+                      runtimeConfigDraft.agentLlm?.[agent.id] ?? {};
+                    const defaultReasoningEffort =
+                      runtimeAgentReasoningEffortDefaults[
+                        agent.id as keyof typeof runtimeAgentReasoningEffortDefaults
+                      ];
+                    return (
+                      <article className="runtime-agent-card" key={agent.id}>
+                        <button
+                          className="runtime-agent-card-summary"
+                          type="button"
+                          aria-expanded={expandedAgentIds.includes(agent.id)}
+                          onClick={() =>
+                            setExpandedAgentIds((current) =>
+                              current.includes(agent.id)
+                                ? current.filter((id) => id !== agent.id)
+                                : [...current, agent.id],
+                            )
+                          }
+                        >
+                          <span>
+                            <strong>{agent.label}</strong>
+                            <small>{agent.id}</small>
+                          </span>
+                          <span>
+                            {resolveRuntimeAgentLlmProviderPresetId(
+                              agentLlm,
+                            ) === 'inherit'
+                              ? `继承默认 · ${defaultReasoningEffort}`
+                              : `${agentLlm.model || '自定义模型'} · ${agentLlm.reasoningEffort || defaultReasoningEffort}`}
+                          </span>
+                        </button>
+                        {expandedAgentIds.includes(agent.id) ? (
+                          <div className="runtime-agent-card-fields">
+                            <label>
+                              {agent.label} LLM Provider
+                              <select
+                                aria-label={`${agent.label} LLM Provider`}
+                                value={resolveRuntimeAgentLlmProviderPresetId(
+                                  agentLlm,
+                                )}
+                                onChange={(event) =>
+                                  updateRuntimeAgentLlmProviderPreset(
+                                    agent.id,
+                                    event.currentTarget
+                                      .value as RuntimeAgentLlmProviderPresetId,
+                                  )
+                                }
+                              >
+                                <option value="inherit">继承</option>
+                                <option value="custom">自定义</option>
+                                {runtimeLlmProviderPresets.map((preset) => (
+                                  <option key={preset.id} value={preset.id}>
+                                    {preset.label}
+                                  </option>
+                                ))}
+                              </select>
+                            </label>
+                            <label>
+                              {agent.label} LLM API Key
+                              <input
+                                aria-label={`${agent.label} LLM API Key`}
+                                autoComplete="off"
+                                type="password"
+                                value={agentLlm.apiKey ?? ''}
+                                onChange={(event) =>
+                                  updateRuntimeAgentLlmConfig(
+                                    agent.id,
+                                    'apiKey',
+                                    event.currentTarget.value,
+                                  )
+                                }
+                              />
+                            </label>
+                            <label>
+                              {agent.label} LLM Base URL
+                              <input
+                                aria-label={`${agent.label} LLM Base URL`}
+                                value={agentLlm.baseUrl ?? ''}
+                                onChange={(event) =>
+                                  updateRuntimeAgentLlmConfig(
+                                    agent.id,
+                                    'baseUrl',
+                                    event.currentTarget.value,
+                                  )
+                                }
+                              />
+                            </label>
+                            <label>
+                              {agent.label} LLM 模型
+                              <input
+                                aria-label={`${agent.label} LLM 模型`}
+                                value={agentLlm.model ?? ''}
+                                onChange={(event) =>
+                                  updateRuntimeAgentLlmConfig(
+                                    agent.id,
+                                    'model',
+                                    event.currentTarget.value,
+                                  )
+                                }
+                              />
+                            </label>
+                            <label>
+                              {agent.label} LLM API 类型
+                              <select
+                                aria-label={`${agent.label} LLM API 类型`}
+                                value={agentLlm.apiKind ?? ''}
+                                onChange={(event) =>
+                                  updateRuntimeAgentLlmConfig(
+                                    agent.id,
+                                    'apiKind',
+                                    event.currentTarget.value
+                                      ? (event.currentTarget
+                                          .value as GameCreatorLlmApiKind)
+                                      : undefined,
+                                  )
+                                }
+                              >
+                                <option value="">继承</option>
+                                <option value="openai_responses">
+                                  openai_responses
+                                </option>
+                                <option value="openai_chat">openai_chat</option>
+                                <option value="anthropic">anthropic</option>
+                              </select>
+                            </label>
+                            <label>
+                              {agent.label} LLM 推理档
+                              <select
+                                aria-label={`${agent.label} LLM 推理档`}
+                                value={agentLlm.reasoningEffort ?? ''}
+                                onChange={(event) =>
+                                  updateRuntimeAgentLlmConfig(
+                                    agent.id,
+                                    'reasoningEffort',
+                                    event.currentTarget.value
+                                      ? (event.currentTarget
+                                          .value as GameCreatorLlmReasoningEffort)
+                                      : undefined,
+                                  )
+                                }
+                              >
+                                <option value="">
+                                  Agent 默认（{defaultReasoningEffort}）
+                                </option>
+                                {gameCreatorLlmReasoningEfforts.map(
+                                  (effort) => (
+                                    <option key={effort} value={effort}>
+                                      {effort}
+                                    </option>
+                                  ),
+                                )}
+                              </select>
+                            </label>
+                            <label>
+                              {agent.label} LLM 流式请求
+                              <select
+                                aria-label={`${agent.label} LLM 流式请求`}
+                                value={
+                                  agentLlm.stream === undefined
+                                    ? ''
+                                    : agentLlm.stream
+                                      ? 'true'
+                                      : 'false'
+                                }
+                                onChange={(event) =>
+                                  updateRuntimeAgentLlmConfig(
+                                    agent.id,
+                                    'stream',
+                                    event.currentTarget.value
+                                      ? event.currentTarget.value === 'true'
+                                      : undefined,
+                                  )
+                                }
+                              >
+                                <option value="">继承</option>
+                                <option value="true">开启</option>
+                                <option value="false">关闭</option>
+                              </select>
+                            </label>
+                            <label>
+                              {agent.label} LLM 联网检索
+                              <select
+                                aria-label={`${agent.label} LLM 联网检索`}
+                                value={
+                                  agentLlm.webSearchEnabled === undefined
+                                    ? ''
+                                    : agentLlm.webSearchEnabled
+                                      ? 'true'
+                                      : 'false'
+                                }
+                                onChange={(event) =>
+                                  updateRuntimeAgentLlmConfig(
+                                    agent.id,
+                                    'webSearchEnabled',
+                                    event.currentTarget.value
+                                      ? event.currentTarget.value === 'true'
+                                      : undefined,
+                                  )
+                                }
+                              >
+                                <option value="">继承</option>
+                                <option value="true">开启</option>
+                                <option value="false">关闭</option>
+                              </select>
+                            </label>
+                            <label>
+                              {agent.label} 上下文窗口 tokens
+                              <input
+                                aria-label={`${agent.label} 上下文窗口 tokens`}
+                                type="number"
+                                min="1"
+                                placeholder="继承"
+                                value={agentLlm.contextWindowTokens ?? ''}
+                                onChange={(event) =>
+                                  updateRuntimeAgentLlmConfig(
+                                    agent.id,
+                                    'contextWindowTokens',
+                                    event.currentTarget.value
+                                      ? Math.max(
+                                          1,
+                                          Number(event.currentTarget.value) ||
+                                            1,
+                                        )
+                                      : undefined,
+                                  )
+                                }
+                              />
+                            </label>
+                            <label>
+                              {agent.label} 自动压缩阈值 tokens
+                              <input
+                                aria-label={`${agent.label} 自动压缩阈值 tokens`}
+                                type="number"
+                                min="1"
+                                placeholder="继承"
+                                value={agentLlm.autoCompactTokenLimit ?? ''}
+                                onChange={(event) =>
+                                  updateRuntimeAgentLlmConfig(
+                                    agent.id,
+                                    'autoCompactTokenLimit',
+                                    event.currentTarget.value
+                                      ? Math.max(
+                                          1,
+                                          Number(event.currentTarget.value) ||
+                                            1,
+                                        )
+                                      : undefined,
+                                  )
+                                }
+                              />
+                            </label>
+                            <label>
+                              {agent.label} 工具输出上限 tokens
+                              <input
+                                aria-label={`${agent.label} 工具输出上限 tokens`}
+                                type="number"
+                                min="1"
+                                placeholder="继承"
+                                value={agentLlm.toolOutputTokenLimit ?? ''}
+                                onChange={(event) =>
+                                  updateRuntimeAgentLlmConfig(
+                                    agent.id,
+                                    'toolOutputTokenLimit',
+                                    event.currentTarget.value
+                                      ? Math.max(
+                                          1,
+                                          Number(event.currentTarget.value) ||
+                                            1,
+                                        )
+                                      : undefined,
+                                  )
+                                }
+                              />
+                            </label>
+                          </div>
+                        ) : null}
+                      </article>
+                    );
+                  })}
+                </div>
+              ) : null}
+              {activeSection === 'connections' ? (
+                <>
+                  <label>
+                    External Editor Base URL
+                    <input
+                      aria-label="External Editor Base URL"
+                      value={runtimeConfigDraft.editorApi.baseUrl}
+                      onChange={(event) =>
+                        updateRuntimeEditorConfig(
+                          'baseUrl',
+                          event.currentTarget.value,
+                        )
+                      }
+                    />
+                  </label>
+                  <label>
+                    External Editor API Key
+                    <input
+                      aria-label="External Editor API Key"
+                      autoComplete="off"
+                      type="password"
+                      value={runtimeConfigDraft.editorApi.apiKey}
+                      onChange={(event) =>
+                        updateRuntimeEditorConfig(
+                          'apiKey',
+                          event.currentTarget.value,
+                        )
+                      }
+                    />
+                  </label>
+                </>
+              ) : null}
+              {activeSection === 'connections' ? (
+                <section
+                  className="runtime-mcp-section"
+                  aria-label="MCP servers"
+                >
+                  <header className="runtime-mcp-header">
+                    <div>
+                      <h3>MCP servers</h3>
+                      <span>{`${Object.keys(runtimeConfigDraft.mcpServers).length} 个配置`}</span>
+                    </div>
+                    <button
+                      type="button"
+                      disabled={runtimeConfigBusy || !projectPath?.trim()}
+                      onClick={() => void testRuntimeMcpServers()}
+                    >
+                      <Zap size={15} aria-hidden="true" />
+                      测试连接
+                    </button>
+                  </header>
+                  <div className="runtime-mcp-add">
+                    <label>
+                      MCP server ID
+                      <input
+                        aria-label="MCP server ID"
+                        disabled={runtimeConfigBusy}
+                        maxLength={64}
+                        value={newMcpServerId}
+                        onChange={(event) =>
+                          setNewMcpServerId(event.currentTarget.value)
+                        }
+                      />
+                    </label>
+                    <button
+                      type="button"
+                      aria-label="添加 MCP server"
+                      title="添加 MCP server"
+                      disabled={runtimeConfigBusy || !newMcpServerId.trim()}
+                      onClick={addRuntimeMcpServer}
+                    >
+                      <Plus size={16} aria-hidden="true" />
+                    </button>
+                  </div>
+                  {Object.entries(runtimeConfigDraft.mcpServers).length ===
+                  0 ? (
+                    <p className="runtime-mcp-empty">尚未配置 MCP server</p>
+                  ) : (
+                    <div className="runtime-mcp-list">
+                      {Object.entries(runtimeConfigDraft.mcpServers).map(
+                        ([serverId, server]) => {
+                          const structuredDraft =
+                            mcpStructuredDrafts[serverId] ??
+                            runtimeMcpStructuredDraft(server);
+                          const serverStatus = mcpCatalog?.servers.find(
+                            (candidate) => candidate.serverId === serverId,
+                          );
+                          return (
+                            <article
+                              className="runtime-mcp-server"
+                              key={serverId}
+                            >
+                              <header>
+                                <div>
+                                  <strong>{serverId}</strong>
+                                  <span
+                                    className={
+                                      serverStatus?.connected
+                                        ? 'runtime-mcp-state is-connected'
+                                        : 'runtime-mcp-state'
+                                    }
+                                    title={serverStatus?.error ?? undefined}
+                                  >
+                                    {!server.enabled
+                                      ? '已停用'
+                                      : serverStatus
+                                        ? serverStatus.connected
+                                          ? `已连接 · ${serverStatus.toolCount} 个工具`
+                                          : '连接失败'
+                                        : server.transport === 'stdio'
+                                          ? 'STDIO · 未测试'
+                                          : 'HTTP · 未测试'}
+                                  </span>
+                                </div>
+                                <button
+                                  type="button"
+                                  aria-label={`删除 MCP server ${serverId}`}
+                                  title={`删除 ${serverId}`}
+                                  disabled={runtimeConfigBusy}
+                                  onClick={() =>
+                                    removeRuntimeMcpServer(serverId)
+                                  }
+                                >
+                                  <Trash2 size={15} aria-hidden="true" />
+                                </button>
+                              </header>
+                              <details>
+                                <summary>配置</summary>
+                                <div className="runtime-mcp-grid">
+                                  <label className="settings-checkbox">
+                                    <input
+                                      aria-label={`${serverId} 启用`}
+                                      type="checkbox"
+                                      checked={server.enabled}
+                                      onChange={(event) =>
+                                        updateRuntimeMcpServer(
+                                          serverId,
+                                          'enabled',
+                                          event.currentTarget.checked,
+                                        )
+                                      }
+                                    />
+                                    启用
+                                  </label>
+                                  <label className="settings-checkbox">
+                                    <input
+                                      aria-label={`${serverId} 必需`}
+                                      type="checkbox"
+                                      checked={server.required}
+                                      onChange={(event) =>
+                                        updateRuntimeMcpServer(
+                                          serverId,
+                                          'required',
+                                          event.currentTarget.checked,
+                                        )
+                                      }
+                                    />
+                                    必需
+                                  </label>
+                                  <label>
+                                    Transport
+                                    <select
+                                      aria-label={`${serverId} Transport`}
+                                      value={server.transport}
+                                      onChange={(event) =>
+                                        updateRuntimeMcpServer(
+                                          serverId,
+                                          'transport',
+                                          event.currentTarget
+                                            .value as GameCreatorMcpTransport,
+                                        )
+                                      }
+                                    >
+                                      <option value="stdio">STDIO</option>
+                                      <option value="streamableHttp">
+                                        Streamable HTTP
+                                      </option>
+                                    </select>
+                                  </label>
+                                  <label>
+                                    默认审批
+                                    <select
+                                      aria-label={`${serverId} 默认审批`}
+                                      value={server.defaultApprovalMode}
+                                      onChange={(event) =>
+                                        updateRuntimeMcpServer(
+                                          serverId,
+                                          'defaultApprovalMode',
+                                          event.currentTarget
+                                            .value as GameCreatorMcpApprovalMode,
+                                        )
+                                      }
+                                    >
+                                      <option value="auto">自动</option>
+                                      <option value="confirm">每次确认</option>
+                                      <option value="writes">写操作确认</option>
+                                      <option value="deny">禁用</option>
+                                    </select>
+                                  </label>
+                                  {server.transport === 'stdio' ? (
+                                    <>
+                                      <label>
+                                        Command
+                                        <input
+                                          aria-label={`${serverId} Command`}
+                                          value={server.command}
+                                          onChange={(event) =>
+                                            updateRuntimeMcpServer(
+                                              serverId,
+                                              'command',
+                                              event.currentTarget.value,
+                                            )
+                                          }
+                                        />
+                                      </label>
+                                      <label>
+                                        Working directory
+                                        <input
+                                          aria-label={`${serverId} Working directory`}
+                                          value={server.cwd}
+                                          onChange={(event) =>
+                                            updateRuntimeMcpServer(
+                                              serverId,
+                                              'cwd',
+                                              event.currentTarget.value,
+                                            )
+                                          }
+                                        />
+                                      </label>
+                                      <label className="runtime-mcp-field-wide">
+                                        Args JSON
+                                        <textarea
+                                          aria-label={`${serverId} Args JSON`}
+                                          rows={4}
+                                          spellCheck={false}
+                                          value={structuredDraft.args}
+                                          onChange={(event) =>
+                                            updateRuntimeMcpStructuredDraft(
+                                              serverId,
+                                              'args',
+                                              event.currentTarget.value,
+                                            )
+                                          }
+                                        />
+                                      </label>
+                                      <label className="runtime-mcp-field-wide">
+                                        Environment JSON
+                                        <textarea
+                                          aria-label={`${serverId} Environment JSON`}
+                                          autoComplete="off"
+                                          rows={5}
+                                          spellCheck={false}
+                                          value={structuredDraft.env}
+                                          onChange={(event) =>
+                                            updateRuntimeMcpStructuredDraft(
+                                              serverId,
+                                              'env',
+                                              event.currentTarget.value,
+                                            )
+                                          }
+                                        />
+                                      </label>
+                                    </>
+                                  ) : (
+                                    <>
+                                      <label className="runtime-mcp-field-wide">
+                                        URL
+                                        <input
+                                          aria-label={`${serverId} URL`}
+                                          value={server.url}
+                                          onChange={(event) =>
+                                            updateRuntimeMcpServer(
+                                              serverId,
+                                              'url',
+                                              event.currentTarget.value,
+                                            )
+                                          }
+                                        />
+                                      </label>
+                                      <label>
+                                        Bearer token
+                                        <input
+                                          aria-label={`${serverId} Bearer token`}
+                                          autoComplete="off"
+                                          type="password"
+                                          value={server.bearerToken}
+                                          onChange={(event) =>
+                                            updateRuntimeMcpServer(
+                                              serverId,
+                                              'bearerToken',
+                                              event.currentTarget.value,
+                                            )
+                                          }
+                                        />
+                                      </label>
+                                      <label className="settings-checkbox">
+                                        <input
+                                          aria-label={`${serverId} 允许不安全 localhost HTTP`}
+                                          type="checkbox"
+                                          checked={
+                                            server.allowInsecureLocalhost
+                                          }
+                                          onChange={(event) =>
+                                            updateRuntimeMcpServer(
+                                              serverId,
+                                              'allowInsecureLocalhost',
+                                              event.currentTarget.checked,
+                                            )
+                                          }
+                                        />
+                                        允许不安全 localhost HTTP
+                                      </label>
+                                      <label className="runtime-mcp-field-wide">
+                                        HTTP headers JSON
+                                        <textarea
+                                          aria-label={`${serverId} HTTP headers JSON`}
+                                          autoComplete="off"
+                                          rows={5}
+                                          spellCheck={false}
+                                          value={structuredDraft.httpHeaders}
+                                          onChange={(event) =>
+                                            updateRuntimeMcpStructuredDraft(
+                                              serverId,
+                                              'httpHeaders',
+                                              event.currentTarget.value,
+                                            )
+                                          }
+                                        />
+                                      </label>
+                                    </>
+                                  )}
+                                  <label>
+                                    启动超时 ms
+                                    <input
+                                      aria-label={`${serverId} 启动超时 ms`}
+                                      type="number"
+                                      min="250"
+                                      value={server.startupTimeoutMs}
+                                      onChange={(event) =>
+                                        updateRuntimeMcpServer(
+                                          serverId,
+                                          'startupTimeoutMs',
+                                          Math.max(
+                                            250,
+                                            Number(event.currentTarget.value) ||
+                                              250,
+                                          ),
+                                        )
+                                      }
+                                    />
+                                  </label>
+                                  <label>
+                                    工具超时 ms
+                                    <input
+                                      aria-label={`${serverId} 工具超时 ms`}
+                                      type="number"
+                                      min="250"
+                                      value={server.toolTimeoutMs}
+                                      onChange={(event) =>
+                                        updateRuntimeMcpServer(
+                                          serverId,
+                                          'toolTimeoutMs',
+                                          Math.max(
+                                            250,
+                                            Number(event.currentTarget.value) ||
+                                              250,
+                                          ),
+                                        )
+                                      }
+                                    />
+                                  </label>
+                                  <label className="runtime-mcp-field-wide">
+                                    允许工具 JSON
+                                    <textarea
+                                      aria-label={`${serverId} 允许工具 JSON`}
+                                      rows={4}
+                                      spellCheck={false}
+                                      value={structuredDraft.enabledTools}
+                                      onChange={(event) =>
+                                        updateRuntimeMcpStructuredDraft(
+                                          serverId,
+                                          'enabledTools',
+                                          event.currentTarget.value,
+                                        )
+                                      }
+                                    />
+                                  </label>
+                                  <label className="runtime-mcp-field-wide">
+                                    禁用工具 JSON
+                                    <textarea
+                                      aria-label={`${serverId} 禁用工具 JSON`}
+                                      rows={4}
+                                      spellCheck={false}
+                                      value={structuredDraft.disabledTools}
+                                      onChange={(event) =>
+                                        updateRuntimeMcpStructuredDraft(
+                                          serverId,
+                                          'disabledTools',
+                                          event.currentTarget.value,
+                                        )
+                                      }
+                                    />
+                                  </label>
+                                  <label className="runtime-mcp-field-wide">
+                                    工具覆盖 JSON
+                                    <textarea
+                                      aria-label={`${serverId} 工具覆盖 JSON`}
+                                      rows={6}
+                                      spellCheck={false}
+                                      value={structuredDraft.tools}
+                                      onChange={(event) =>
+                                        updateRuntimeMcpStructuredDraft(
+                                          serverId,
+                                          'tools',
+                                          event.currentTarget.value,
+                                        )
+                                      }
+                                    />
+                                  </label>
+                                </div>
+                              </details>
+                            </article>
+                          );
+                        },
+                      )}
+                    </div>
+                  )}
+                  {mcpCatalog ? (
+                    <section
+                      className="runtime-mcp-catalog"
+                      aria-label="MCP 连接状态"
+                    >
+                      <header>
+                        <strong>工具目录</strong>
+                        <span>{`${mcpCatalog.tools.length} 个工具`}</span>
+                      </header>
+                      {mcpCatalog.tools.length === 0 ? (
+                        <p className="runtime-mcp-empty">没有可用工具</p>
+                      ) : (
+                        <div className="runtime-mcp-tools">
+                          {mcpCatalog.tools.map((tool) => (
+                            <article key={`${tool.serverId}:${tool.name}`}>
+                              <div>
+                                <strong>{`${tool.serverId} / ${tool.title || tool.name}`}</strong>
+                                <span>{`${tool.effectiveApprovalMode}${tool.readOnlyHint ? ' · read-only' : ''}`}</span>
+                              </div>
+                              <pre>
+                                {JSON.stringify(tool.inputSchema, null, 2)}
+                              </pre>
+                            </article>
+                          ))}
+                        </div>
+                      )}
+                    </section>
+                  ) : null}
+                </section>
+              ) : null}
+            </div>
+          </main>
+        </div>
+        <footer className="runtime-settings-footer">
+          <p
+            className="status-line"
+            data-tone={runtimeConfigStatusTone}
+            role="status"
+            aria-live="polite"
+          >
+            {runtimeConfigStatusTone === 'busy' ? (
+              <LoaderCircle
+                className="is-spinning"
+                size={15}
+                aria-hidden="true"
+              />
+            ) : runtimeConfigStatusTone === 'success' ? (
+              <CheckCircle2 size={15} aria-hidden="true" />
+            ) : runtimeConfigStatusTone === 'warning' ? (
+              <CircleAlert size={15} aria-hidden="true" />
+            ) : null}
+            {runtimeConfigStatus}
+          </p>
+          <div className="runtime-settings-footer-actions">
             <button
               type="button"
+              aria-label="读取"
               disabled={runtimeConfigBusy}
               onClick={readRuntimeConfig}
             >
-              读取
+              重新读取
             </button>
             <button
               type="button"
               disabled={runtimeConfigBusy}
               onClick={resetRuntimeConfigDraft}
             >
+              <RotateCcw size={15} aria-hidden="true" />
               恢复默认
             </button>
-            <button type="button" onClick={onClose}>
-              关闭
-            </button>
-            <button type="submit" disabled={runtimeConfigBusy}>
-              保存
+            <button
+              className="runtime-settings-save"
+              type="submit"
+              aria-label="保存"
+              disabled={runtimeConfigBusy}
+            >
+              <Save size={15} aria-hidden="true" />
+              {runtimeConfigStatus === '正在保存'
+                ? '正在保存'
+                : runtimeConfigBusy
+                  ? '请稍候'
+                  : '保存设置'}
             </button>
           </div>
-        </header>
-        {runtimeConfigPath ? (
-          <p className="manifest-path">{runtimeConfigPath}</p>
-        ) : null}
-        <div className="settings-grid">
-          <label>
-            Agent 模式
-            <select
-              aria-label="Agent 模式"
-              value={runtimeConfigDraft.agentMode}
-              onChange={(event) =>
-                updateRuntimeAgentMode(
-                  event.currentTarget.value as GameCreatorAgentMode,
-                )
-              }
-            >
-              {!runtimeAgentModes.has(runtimeConfigDraft.agentMode) ? (
-                <option value={runtimeConfigDraft.agentMode}>
-                  {runtimeConfigDraft.agentMode}（当前配置）
-                </option>
-              ) : null}
-              <option value="codex_app_server">Codex App Server</option>
-              <option value="codex_cli">Codex CLI</option>
-              <option value="provider">HTTP Provider</option>
-            </select>
-          </label>
-          {runtimeConfigDraft.agentMode !== 'codex_cli' ? (
-            <>
-              <label>
-                LLM Provider
-                <select
-                  aria-label="LLM Provider"
-                  value={resolveRuntimeLlmProviderPresetId(
-                    runtimeConfigDraft.llm,
-                  )}
-                  onChange={(event) =>
-                    updateRuntimeLlmProviderPreset(
-                      event.currentTarget.value as RuntimeLlmProviderPresetId,
-                    )
-                  }
-                >
-                  <option value="custom">自定义</option>
-                  {runtimeLlmProviderPresets.map((preset) => (
-                    <option key={preset.id} value={preset.id}>
-                      {preset.label}
-                    </option>
-                  ))}
-                </select>
-              </label>
-              <label>
-                LLM API Key
-                <input
-                  aria-label="LLM API Key"
-                  autoComplete="off"
-                  type="password"
-                  value={runtimeConfigDraft.llm.apiKey}
-                  onChange={(event) =>
-                    updateRuntimeLlmConfig('apiKey', event.currentTarget.value)
-                  }
-                />
-              </label>
-              <label>
-                LLM Base URL
-                <input
-                  aria-label="LLM Base URL"
-                  value={runtimeConfigDraft.llm.baseUrl}
-                  onChange={(event) =>
-                    updateRuntimeLlmConfig('baseUrl', event.currentTarget.value)
-                  }
-                />
-              </label>
-              <label>
-                LLM 模型
-                <input
-                  aria-label="LLM 模型"
-                  value={runtimeConfigDraft.llm.model}
-                  onChange={(event) =>
-                    updateRuntimeLlmConfig('model', event.currentTarget.value)
-                  }
-                />
-              </label>
-              <label>
-                LLM API 类型
-                <select
-                  aria-label="LLM API 类型"
-                  value={runtimeConfigDraft.llm.apiKind}
-                  onChange={(event) =>
-                    updateRuntimeLlmConfig(
-                      'apiKind',
-                      event.currentTarget.value as GameCreatorLlmApiKind,
-                    )
-                  }
-                >
-                  <option value="openai_responses">openai_responses</option>
-                  <option value="openai_chat">openai_chat</option>
-                  <option value="anthropic">anthropic</option>
-                </select>
-              </label>
-              <label>
-                LLM 推理档
-                <select
-                  aria-label="LLM 推理档"
-                  value={runtimeConfigDraft.llm.reasoningEffort}
-                  onChange={(event) =>
-                    updateRuntimeLlmConfig(
-                      'reasoningEffort',
-                      event.currentTarget
-                        .value as GameCreatorLlmReasoningEffort,
-                    )
-                  }
-                >
-                  {gameCreatorLlmReasoningEfforts.map((effort) => (
-                    <option key={effort} value={effort}>
-                      {effort}
-                    </option>
-                  ))}
-                </select>
-              </label>
-              <label className="settings-checkbox">
-                <input
-                  aria-label="LLM 流式请求"
-                  type="checkbox"
-                  checked={runtimeConfigDraft.llm.stream}
-                  onChange={(event) =>
-                    updateRuntimeLlmConfig(
-                      'stream',
-                      event.currentTarget.checked,
-                    )
-                  }
-                />
-                LLM 流式请求
-              </label>
-              <label className="settings-checkbox">
-                <input
-                  aria-label="LLM 联网检索"
-                  type="checkbox"
-                  checked={runtimeConfigDraft.llm.webSearchEnabled}
-                  onChange={(event) =>
-                    updateRuntimeLlmConfig(
-                      'webSearchEnabled',
-                      event.currentTarget.checked,
-                    )
-                  }
-                />
-                LLM 联网检索
-              </label>
-              <label>
-                LLM 上下文窗口 tokens
-                <input
-                  aria-label="LLM 上下文窗口 tokens"
-                  type="number"
-                  min="1"
-                  value={runtimeConfigDraft.llm.contextWindowTokens}
-                  onChange={(event) =>
-                    updateRuntimeLlmConfig(
-                      'contextWindowTokens',
-                      Math.max(1, Number(event.currentTarget.value) || 1),
-                    )
-                  }
-                />
-              </label>
-              <label>
-                LLM 自动压缩阈值 tokens
-                <input
-                  aria-label="LLM 自动压缩阈值 tokens"
-                  type="number"
-                  min="1"
-                  value={runtimeConfigDraft.llm.autoCompactTokenLimit}
-                  onChange={(event) =>
-                    updateRuntimeLlmConfig(
-                      'autoCompactTokenLimit',
-                      Math.max(1, Number(event.currentTarget.value) || 1),
-                    )
-                  }
-                />
-              </label>
-              <label>
-                LLM 工具输出上限 tokens
-                <input
-                  aria-label="LLM 工具输出上限 tokens"
-                  type="number"
-                  min="1"
-                  value={runtimeConfigDraft.llm.toolOutputTokenLimit}
-                  onChange={(event) =>
-                    updateRuntimeLlmConfig(
-                      'toolOutputTokenLimit',
-                      Math.max(1, Number(event.currentTarget.value) || 1),
-                    )
-                  }
-                />
-              </label>
-              <label>
-                LLM 超时 ms
-                <input
-                  aria-label="LLM 超时 ms"
-                  type="number"
-                  min="1000"
-                  value={runtimeConfigDraft.llm.requestTimeoutMs}
-                  onChange={(event) =>
-                    updateRuntimeLlmConfig(
-                      'requestTimeoutMs',
-                      Math.max(1000, Number(event.currentTarget.value) || 1000),
-                    )
-                  }
-                />
-              </label>
-              <label>
-                LLM 重试次数
-                <input
-                  aria-label="LLM 重试次数"
-                  type="number"
-                  min="0"
-                  value={runtimeConfigDraft.llm.maxRetries}
-                  onChange={(event) =>
-                    updateRuntimeLlmConfig(
-                      'maxRetries',
-                      Math.max(0, Number(event.currentTarget.value) || 0),
-                    )
-                  }
-                />
-              </label>
-              <label>
-                LLM 退避 ms
-                <input
-                  aria-label="LLM 退避 ms"
-                  type="number"
-                  min="1"
-                  value={runtimeConfigDraft.llm.retryBackoffMs}
-                  onChange={(event) =>
-                    updateRuntimeLlmConfig(
-                      'retryBackoffMs',
-                      Math.max(1, Number(event.currentTarget.value) || 1),
-                    )
-                  }
-                />
-              </label>
-              {runtimeAgentLlmRows.map((agent) => {
-                const agentLlm = runtimeConfigDraft.agentLlm?.[agent.id] ?? {};
-                const defaultReasoningEffort =
-                  runtimeAgentReasoningEffortDefaults[
-                    agent.id as keyof typeof runtimeAgentReasoningEffortDefaults
-                  ];
-                return (
-                  <Fragment key={agent.id}>
-                    <label>
-                      {agent.label} LLM Provider
-                      <select
-                        aria-label={`${agent.label} LLM Provider`}
-                        value={resolveRuntimeAgentLlmProviderPresetId(agentLlm)}
-                        onChange={(event) =>
-                          updateRuntimeAgentLlmProviderPreset(
-                            agent.id,
-                            event.currentTarget
-                              .value as RuntimeAgentLlmProviderPresetId,
-                          )
-                        }
-                      >
-                        <option value="inherit">继承</option>
-                        <option value="custom">自定义</option>
-                        {runtimeLlmProviderPresets.map((preset) => (
-                          <option key={preset.id} value={preset.id}>
-                            {preset.label}
-                          </option>
-                        ))}
-                      </select>
-                    </label>
-                    <label>
-                      {agent.label} LLM API Key
-                      <input
-                        aria-label={`${agent.label} LLM API Key`}
-                        autoComplete="off"
-                        type="password"
-                        value={agentLlm.apiKey ?? ''}
-                        onChange={(event) =>
-                          updateRuntimeAgentLlmConfig(
-                            agent.id,
-                            'apiKey',
-                            event.currentTarget.value,
-                          )
-                        }
-                      />
-                    </label>
-                    <label>
-                      {agent.label} LLM Base URL
-                      <input
-                        aria-label={`${agent.label} LLM Base URL`}
-                        value={agentLlm.baseUrl ?? ''}
-                        onChange={(event) =>
-                          updateRuntimeAgentLlmConfig(
-                            agent.id,
-                            'baseUrl',
-                            event.currentTarget.value,
-                          )
-                        }
-                      />
-                    </label>
-                    <label>
-                      {agent.label} LLM 模型
-                      <input
-                        aria-label={`${agent.label} LLM 模型`}
-                        value={agentLlm.model ?? ''}
-                        onChange={(event) =>
-                          updateRuntimeAgentLlmConfig(
-                            agent.id,
-                            'model',
-                            event.currentTarget.value,
-                          )
-                        }
-                      />
-                    </label>
-                    <label>
-                      {agent.label} LLM API 类型
-                      <select
-                        aria-label={`${agent.label} LLM API 类型`}
-                        value={agentLlm.apiKind ?? ''}
-                        onChange={(event) =>
-                          updateRuntimeAgentLlmConfig(
-                            agent.id,
-                            'apiKind',
-                            event.currentTarget.value
-                              ? (event.currentTarget
-                                  .value as GameCreatorLlmApiKind)
-                              : undefined,
-                          )
-                        }
-                      >
-                        <option value="">继承</option>
-                        <option value="openai_responses">
-                          openai_responses
-                        </option>
-                        <option value="openai_chat">openai_chat</option>
-                        <option value="anthropic">anthropic</option>
-                      </select>
-                    </label>
-                    <label>
-                      {agent.label} LLM 推理档
-                      <select
-                        aria-label={`${agent.label} LLM 推理档`}
-                        value={agentLlm.reasoningEffort ?? ''}
-                        onChange={(event) =>
-                          updateRuntimeAgentLlmConfig(
-                            agent.id,
-                            'reasoningEffort',
-                            event.currentTarget.value
-                              ? (event.currentTarget
-                                  .value as GameCreatorLlmReasoningEffort)
-                              : undefined,
-                          )
-                        }
-                      >
-                        <option value="">
-                          Agent 默认（{defaultReasoningEffort}）
-                        </option>
-                        {gameCreatorLlmReasoningEfforts.map((effort) => (
-                          <option key={effort} value={effort}>
-                            {effort}
-                          </option>
-                        ))}
-                      </select>
-                    </label>
-                    <label>
-                      {agent.label} LLM 流式请求
-                      <select
-                        aria-label={`${agent.label} LLM 流式请求`}
-                        value={
-                          agentLlm.stream === undefined
-                            ? ''
-                            : agentLlm.stream
-                              ? 'true'
-                              : 'false'
-                        }
-                        onChange={(event) =>
-                          updateRuntimeAgentLlmConfig(
-                            agent.id,
-                            'stream',
-                            event.currentTarget.value
-                              ? event.currentTarget.value === 'true'
-                              : undefined,
-                          )
-                        }
-                      >
-                        <option value="">继承</option>
-                        <option value="true">开启</option>
-                        <option value="false">关闭</option>
-                      </select>
-                    </label>
-                    <label>
-                      {agent.label} LLM 联网检索
-                      <select
-                        aria-label={`${agent.label} LLM 联网检索`}
-                        value={
-                          agentLlm.webSearchEnabled === undefined
-                            ? ''
-                            : agentLlm.webSearchEnabled
-                              ? 'true'
-                              : 'false'
-                        }
-                        onChange={(event) =>
-                          updateRuntimeAgentLlmConfig(
-                            agent.id,
-                            'webSearchEnabled',
-                            event.currentTarget.value
-                              ? event.currentTarget.value === 'true'
-                              : undefined,
-                          )
-                        }
-                      >
-                        <option value="">继承</option>
-                        <option value="true">开启</option>
-                        <option value="false">关闭</option>
-                      </select>
-                    </label>
-                    <label>
-                      {agent.label} 上下文窗口 tokens
-                      <input
-                        aria-label={`${agent.label} 上下文窗口 tokens`}
-                        type="number"
-                        min="1"
-                        placeholder="继承"
-                        value={agentLlm.contextWindowTokens ?? ''}
-                        onChange={(event) =>
-                          updateRuntimeAgentLlmConfig(
-                            agent.id,
-                            'contextWindowTokens',
-                            event.currentTarget.value
-                              ? Math.max(
-                                  1,
-                                  Number(event.currentTarget.value) || 1,
-                                )
-                              : undefined,
-                          )
-                        }
-                      />
-                    </label>
-                    <label>
-                      {agent.label} 自动压缩阈值 tokens
-                      <input
-                        aria-label={`${agent.label} 自动压缩阈值 tokens`}
-                        type="number"
-                        min="1"
-                        placeholder="继承"
-                        value={agentLlm.autoCompactTokenLimit ?? ''}
-                        onChange={(event) =>
-                          updateRuntimeAgentLlmConfig(
-                            agent.id,
-                            'autoCompactTokenLimit',
-                            event.currentTarget.value
-                              ? Math.max(
-                                  1,
-                                  Number(event.currentTarget.value) || 1,
-                                )
-                              : undefined,
-                          )
-                        }
-                      />
-                    </label>
-                    <label>
-                      {agent.label} 工具输出上限 tokens
-                      <input
-                        aria-label={`${agent.label} 工具输出上限 tokens`}
-                        type="number"
-                        min="1"
-                        placeholder="继承"
-                        value={agentLlm.toolOutputTokenLimit ?? ''}
-                        onChange={(event) =>
-                          updateRuntimeAgentLlmConfig(
-                            agent.id,
-                            'toolOutputTokenLimit',
-                            event.currentTarget.value
-                              ? Math.max(
-                                  1,
-                                  Number(event.currentTarget.value) || 1,
-                                )
-                              : undefined,
-                          )
-                        }
-                      />
-                    </label>
-                  </Fragment>
-                );
-              })}
-            </>
-          ) : null}
-          <label>
-            External Editor Base URL
-            <input
-              aria-label="External Editor Base URL"
-              value={runtimeConfigDraft.editorApi.baseUrl}
-              onChange={(event) =>
-                updateRuntimeEditorConfig('baseUrl', event.currentTarget.value)
-              }
-            />
-          </label>
-          <label>
-            External Editor API Key
-            <input
-              aria-label="External Editor API Key"
-              autoComplete="off"
-              type="password"
-              value={runtimeConfigDraft.editorApi.apiKey}
-              onChange={(event) =>
-                updateRuntimeEditorConfig('apiKey', event.currentTarget.value)
-              }
-            />
-          </label>
-          <section className="runtime-mcp-section" aria-label="MCP servers">
-            <header className="runtime-mcp-header">
-              <div>
-                <h3>MCP servers</h3>
-                <span>{`${Object.keys(runtimeConfigDraft.mcpServers).length} 个配置`}</span>
-              </div>
-              <button
-                type="button"
-                disabled={runtimeConfigBusy || !projectPath?.trim()}
-                onClick={() => void testRuntimeMcpServers()}
-              >
-                <Zap size={15} aria-hidden="true" />
-                测试连接
-              </button>
-            </header>
-            <div className="runtime-mcp-add">
-              <label>
-                MCP server ID
-                <input
-                  aria-label="MCP server ID"
-                  disabled={runtimeConfigBusy}
-                  maxLength={64}
-                  value={newMcpServerId}
-                  onChange={(event) =>
-                    setNewMcpServerId(event.currentTarget.value)
-                  }
-                />
-              </label>
-              <button
-                type="button"
-                aria-label="添加 MCP server"
-                title="添加 MCP server"
-                disabled={runtimeConfigBusy || !newMcpServerId.trim()}
-                onClick={addRuntimeMcpServer}
-              >
-                <Plus size={16} aria-hidden="true" />
-              </button>
-            </div>
-            {Object.entries(runtimeConfigDraft.mcpServers).length === 0 ? (
-              <p className="runtime-mcp-empty">尚未配置 MCP server</p>
-            ) : (
-              <div className="runtime-mcp-list">
-                {Object.entries(runtimeConfigDraft.mcpServers).map(
-                  ([serverId, server]) => {
-                    const structuredDraft =
-                      mcpStructuredDrafts[serverId] ??
-                      runtimeMcpStructuredDraft(server);
-                    const serverStatus = mcpCatalog?.servers.find(
-                      (candidate) => candidate.serverId === serverId,
-                    );
-                    return (
-                      <article className="runtime-mcp-server" key={serverId}>
-                        <header>
-                          <div>
-                            <strong>{serverId}</strong>
-                            <span
-                              className={
-                                serverStatus?.connected
-                                  ? 'runtime-mcp-state is-connected'
-                                  : 'runtime-mcp-state'
-                              }
-                              title={serverStatus?.error ?? undefined}
-                            >
-                              {!server.enabled
-                                ? '已停用'
-                                : serverStatus
-                                  ? serverStatus.connected
-                                    ? `已连接 · ${serverStatus.toolCount} 个工具`
-                                    : '连接失败'
-                                  : server.transport === 'stdio'
-                                    ? 'STDIO · 未测试'
-                                    : 'HTTP · 未测试'}
-                            </span>
-                          </div>
-                          <button
-                            type="button"
-                            aria-label={`删除 MCP server ${serverId}`}
-                            title={`删除 ${serverId}`}
-                            disabled={runtimeConfigBusy}
-                            onClick={() => removeRuntimeMcpServer(serverId)}
-                          >
-                            <Trash2 size={15} aria-hidden="true" />
-                          </button>
-                        </header>
-                        <details>
-                          <summary>配置</summary>
-                          <div className="runtime-mcp-grid">
-                            <label className="settings-checkbox">
-                              <input
-                                aria-label={`${serverId} 启用`}
-                                type="checkbox"
-                                checked={server.enabled}
-                                onChange={(event) =>
-                                  updateRuntimeMcpServer(
-                                    serverId,
-                                    'enabled',
-                                    event.currentTarget.checked,
-                                  )
-                                }
-                              />
-                              启用
-                            </label>
-                            <label className="settings-checkbox">
-                              <input
-                                aria-label={`${serverId} 必需`}
-                                type="checkbox"
-                                checked={server.required}
-                                onChange={(event) =>
-                                  updateRuntimeMcpServer(
-                                    serverId,
-                                    'required',
-                                    event.currentTarget.checked,
-                                  )
-                                }
-                              />
-                              必需
-                            </label>
-                            <label>
-                              Transport
-                              <select
-                                aria-label={`${serverId} Transport`}
-                                value={server.transport}
-                                onChange={(event) =>
-                                  updateRuntimeMcpServer(
-                                    serverId,
-                                    'transport',
-                                    event.currentTarget
-                                      .value as GameCreatorMcpTransport,
-                                  )
-                                }
-                              >
-                                <option value="stdio">STDIO</option>
-                                <option value="streamableHttp">
-                                  Streamable HTTP
-                                </option>
-                              </select>
-                            </label>
-                            <label>
-                              默认审批
-                              <select
-                                aria-label={`${serverId} 默认审批`}
-                                value={server.defaultApprovalMode}
-                                onChange={(event) =>
-                                  updateRuntimeMcpServer(
-                                    serverId,
-                                    'defaultApprovalMode',
-                                    event.currentTarget
-                                      .value as GameCreatorMcpApprovalMode,
-                                  )
-                                }
-                              >
-                                <option value="auto">自动</option>
-                                <option value="confirm">每次确认</option>
-                                <option value="writes">写操作确认</option>
-                                <option value="deny">禁用</option>
-                              </select>
-                            </label>
-                            {server.transport === 'stdio' ? (
-                              <>
-                                <label>
-                                  Command
-                                  <input
-                                    aria-label={`${serverId} Command`}
-                                    value={server.command}
-                                    onChange={(event) =>
-                                      updateRuntimeMcpServer(
-                                        serverId,
-                                        'command',
-                                        event.currentTarget.value,
-                                      )
-                                    }
-                                  />
-                                </label>
-                                <label>
-                                  Working directory
-                                  <input
-                                    aria-label={`${serverId} Working directory`}
-                                    value={server.cwd}
-                                    onChange={(event) =>
-                                      updateRuntimeMcpServer(
-                                        serverId,
-                                        'cwd',
-                                        event.currentTarget.value,
-                                      )
-                                    }
-                                  />
-                                </label>
-                                <label className="runtime-mcp-field-wide">
-                                  Args JSON
-                                  <textarea
-                                    aria-label={`${serverId} Args JSON`}
-                                    rows={4}
-                                    spellCheck={false}
-                                    value={structuredDraft.args}
-                                    onChange={(event) =>
-                                      updateRuntimeMcpStructuredDraft(
-                                        serverId,
-                                        'args',
-                                        event.currentTarget.value,
-                                      )
-                                    }
-                                  />
-                                </label>
-                                <label className="runtime-mcp-field-wide">
-                                  Environment JSON
-                                  <textarea
-                                    aria-label={`${serverId} Environment JSON`}
-                                    autoComplete="off"
-                                    rows={5}
-                                    spellCheck={false}
-                                    value={structuredDraft.env}
-                                    onChange={(event) =>
-                                      updateRuntimeMcpStructuredDraft(
-                                        serverId,
-                                        'env',
-                                        event.currentTarget.value,
-                                      )
-                                    }
-                                  />
-                                </label>
-                              </>
-                            ) : (
-                              <>
-                                <label className="runtime-mcp-field-wide">
-                                  URL
-                                  <input
-                                    aria-label={`${serverId} URL`}
-                                    value={server.url}
-                                    onChange={(event) =>
-                                      updateRuntimeMcpServer(
-                                        serverId,
-                                        'url',
-                                        event.currentTarget.value,
-                                      )
-                                    }
-                                  />
-                                </label>
-                                <label>
-                                  Bearer token
-                                  <input
-                                    aria-label={`${serverId} Bearer token`}
-                                    autoComplete="off"
-                                    type="password"
-                                    value={server.bearerToken}
-                                    onChange={(event) =>
-                                      updateRuntimeMcpServer(
-                                        serverId,
-                                        'bearerToken',
-                                        event.currentTarget.value,
-                                      )
-                                    }
-                                  />
-                                </label>
-                                <label className="settings-checkbox">
-                                  <input
-                                    aria-label={`${serverId} 允许不安全 localhost HTTP`}
-                                    type="checkbox"
-                                    checked={server.allowInsecureLocalhost}
-                                    onChange={(event) =>
-                                      updateRuntimeMcpServer(
-                                        serverId,
-                                        'allowInsecureLocalhost',
-                                        event.currentTarget.checked,
-                                      )
-                                    }
-                                  />
-                                  允许不安全 localhost HTTP
-                                </label>
-                                <label className="runtime-mcp-field-wide">
-                                  HTTP headers JSON
-                                  <textarea
-                                    aria-label={`${serverId} HTTP headers JSON`}
-                                    autoComplete="off"
-                                    rows={5}
-                                    spellCheck={false}
-                                    value={structuredDraft.httpHeaders}
-                                    onChange={(event) =>
-                                      updateRuntimeMcpStructuredDraft(
-                                        serverId,
-                                        'httpHeaders',
-                                        event.currentTarget.value,
-                                      )
-                                    }
-                                  />
-                                </label>
-                              </>
-                            )}
-                            <label>
-                              启动超时 ms
-                              <input
-                                aria-label={`${serverId} 启动超时 ms`}
-                                type="number"
-                                min="250"
-                                value={server.startupTimeoutMs}
-                                onChange={(event) =>
-                                  updateRuntimeMcpServer(
-                                    serverId,
-                                    'startupTimeoutMs',
-                                    Math.max(
-                                      250,
-                                      Number(event.currentTarget.value) || 250,
-                                    ),
-                                  )
-                                }
-                              />
-                            </label>
-                            <label>
-                              工具超时 ms
-                              <input
-                                aria-label={`${serverId} 工具超时 ms`}
-                                type="number"
-                                min="250"
-                                value={server.toolTimeoutMs}
-                                onChange={(event) =>
-                                  updateRuntimeMcpServer(
-                                    serverId,
-                                    'toolTimeoutMs',
-                                    Math.max(
-                                      250,
-                                      Number(event.currentTarget.value) || 250,
-                                    ),
-                                  )
-                                }
-                              />
-                            </label>
-                            <label className="runtime-mcp-field-wide">
-                              允许工具 JSON
-                              <textarea
-                                aria-label={`${serverId} 允许工具 JSON`}
-                                rows={4}
-                                spellCheck={false}
-                                value={structuredDraft.enabledTools}
-                                onChange={(event) =>
-                                  updateRuntimeMcpStructuredDraft(
-                                    serverId,
-                                    'enabledTools',
-                                    event.currentTarget.value,
-                                  )
-                                }
-                              />
-                            </label>
-                            <label className="runtime-mcp-field-wide">
-                              禁用工具 JSON
-                              <textarea
-                                aria-label={`${serverId} 禁用工具 JSON`}
-                                rows={4}
-                                spellCheck={false}
-                                value={structuredDraft.disabledTools}
-                                onChange={(event) =>
-                                  updateRuntimeMcpStructuredDraft(
-                                    serverId,
-                                    'disabledTools',
-                                    event.currentTarget.value,
-                                  )
-                                }
-                              />
-                            </label>
-                            <label className="runtime-mcp-field-wide">
-                              工具覆盖 JSON
-                              <textarea
-                                aria-label={`${serverId} 工具覆盖 JSON`}
-                                rows={6}
-                                spellCheck={false}
-                                value={structuredDraft.tools}
-                                onChange={(event) =>
-                                  updateRuntimeMcpStructuredDraft(
-                                    serverId,
-                                    'tools',
-                                    event.currentTarget.value,
-                                  )
-                                }
-                              />
-                            </label>
-                          </div>
-                        </details>
-                      </article>
-                    );
-                  },
-                )}
-              </div>
-            )}
-            {mcpCatalog ? (
-              <section
-                className="runtime-mcp-catalog"
-                aria-label="MCP 连接状态"
-              >
-                <header>
-                  <strong>工具目录</strong>
-                  <span>{`${mcpCatalog.tools.length} 个工具`}</span>
-                </header>
-                {mcpCatalog.tools.length === 0 ? (
-                  <p className="runtime-mcp-empty">没有可用工具</p>
-                ) : (
-                  <div className="runtime-mcp-tools">
-                    {mcpCatalog.tools.map((tool) => (
-                      <article key={`${tool.serverId}:${tool.name}`}>
-                        <div>
-                          <strong>{`${tool.serverId} / ${tool.title || tool.name}`}</strong>
-                          <span>{`${tool.effectiveApprovalMode}${tool.readOnlyHint ? ' · read-only' : ''}`}</span>
-                        </div>
-                        <pre>{JSON.stringify(tool.inputSchema, null, 2)}</pre>
-                      </article>
-                    ))}
-                  </div>
-                )}
-              </section>
-            ) : null}
-          </section>
-        </div>
-        <p className="status-line">{runtimeConfigStatus}</p>
+        </footer>
       </form>
     </div>
   );
diff --git a/apps/ai-game-creator-shell/src/styles.css b/apps/ai-game-creator-shell/src/styles.css
index f16f270be..c9f977db6 100644
--- a/apps/ai-game-creator-shell/src/styles.css
+++ b/apps/ai-game-creator-shell/src/styles.css
@@ -3081,8 +3081,9 @@ h2 {
   z-index: 220;
   display: grid;
   place-items: center;
-  padding: 18px;
-  background: rgb(24 32 47 / 36%);
+  padding: 24px;
+  background: rgb(24 32 47 / 48%);
+  backdrop-filter: blur(6px);
 }
 
 .settings-panel {
@@ -3096,6 +3097,400 @@ h2 {
   background: #fff;
 }
 
+.runtime-settings-panel {
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  gap: 0;
+  width: min(1080px, 100%);
+  height: min(760px, calc(100dvh - 48px));
+  max-height: calc(100dvh - 48px);
+  padding: 0;
+  overflow: hidden;
+  border-color: var(--platform-modal-border);
+  border-radius: 18px;
+  background: var(--platform-modal-fill);
+  box-shadow: var(--platform-panel-shadow);
+}
+
+.runtime-settings-header,
+.runtime-settings-footer,
+.runtime-settings-section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.runtime-settings-header {
+  min-height: 76px;
+  padding: 15px 18px 14px 22px;
+  border-bottom: 1px solid var(--platform-line-soft);
+  background: var(--platform-desktop-topbar-fill);
+}
+
+.runtime-settings-header > div {
+  display: grid;
+  gap: 3px;
+}
+
+.runtime-settings-eyebrow {
+  color: var(--platform-accent);
+  font-size: 9px;
+  font-weight: 900;
+  letter-spacing: 0.16em;
+}
+
+.runtime-settings-header h2 {
+  margin: 0;
+  color: var(--platform-text-strong);
+  font-size: 20px;
+  letter-spacing: -0.02em;
+}
+
+.runtime-settings-close {
+  display: grid;
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  border: 1px solid var(--platform-surface-border);
+  border-radius: 10px;
+  background: var(--platform-button-ghost-fill);
+  color: var(--platform-button-ghost-text);
+  cursor: pointer;
+  place-items: center;
+}
+
+.runtime-settings-layout {
+  display: grid;
+  grid-template-columns: 224px minmax(0, 1fr);
+  min-height: 0;
+  overflow: hidden;
+}
+
+.runtime-settings-nav {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 18px;
+  min-height: 0;
+  padding: 16px 12px;
+  overflow-y: auto;
+  border-right: 1px solid var(--platform-line-soft);
+  background: var(--platform-nav-fill);
+}
+
+.runtime-settings-nav nav {
+  display: grid;
+  gap: 6px;
+}
+
+.runtime-settings-nav nav button {
+  display: grid;
+  grid-template-columns: 28px minmax(0, 1fr);
+  align-items: center;
+  gap: 8px;
+  min-height: 54px;
+  padding: 8px 10px;
+  border: 1px solid transparent;
+  border-radius: 12px;
+  background: transparent;
+  color: var(--platform-text-base);
+  text-align: left;
+  cursor: pointer;
+}
+
+.runtime-settings-nav nav button > svg {
+  color: var(--platform-text-soft);
+  justify-self: center;
+}
+
+.runtime-settings-nav nav button > span {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.runtime-settings-nav nav strong {
+  color: inherit;
+  font-size: 12px;
+}
+
+.runtime-settings-nav nav small {
+  overflow: hidden;
+  color: var(--platform-text-soft);
+  font-size: 9px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.runtime-settings-nav nav button:hover {
+  border-color: var(--platform-surface-border);
+  background: var(--platform-button-ghost-fill);
+}
+
+.runtime-settings-nav nav button.is-active {
+  border-color: var(--platform-nav-active-border);
+  background: var(--platform-nav-active-fill);
+  color: var(--platform-text-strong);
+  box-shadow: var(--platform-nav-active-shadow);
+}
+
+.runtime-settings-nav nav button.is-active > svg {
+  color: var(--platform-accent);
+}
+
+.runtime-settings-config-state {
+  display: grid;
+  gap: 3px;
+  padding: 10px;
+  border-top: 1px solid var(--platform-line-soft);
+}
+
+.runtime-settings-config-state span,
+.runtime-settings-config-state small {
+  color: var(--platform-text-soft);
+  font-size: 9px;
+}
+
+.runtime-settings-config-state strong {
+  color: var(--platform-text-base);
+  font-size: 11px;
+}
+
+.runtime-settings-config-state small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.runtime-settings-content {
+  min-width: 0;
+  min-height: 0;
+  padding: 22px 24px 28px;
+  overflow-y: auto;
+  background: var(--platform-desktop-panel-fill);
+  scrollbar-gutter: stable;
+}
+
+.runtime-settings-section-header {
+  min-height: 44px;
+  margin-bottom: 18px;
+}
+
+.runtime-settings-section-header > div {
+  display: grid;
+  gap: 4px;
+}
+
+.runtime-settings-section-header h3,
+.runtime-settings-section-header p {
+  margin: 0;
+}
+
+.runtime-settings-section-header h3 {
+  color: var(--platform-text-strong);
+  font-size: 17px;
+}
+
+.runtime-settings-section-header p,
+.runtime-settings-section-header > span {
+  color: var(--platform-text-soft);
+  font-size: 11px;
+}
+
+.runtime-settings-fields {
+  align-content: start;
+}
+
+.runtime-settings-fields > label {
+  padding: 13px;
+  border: 1px solid var(--platform-subpanel-border);
+  border-radius: 12px;
+  background: var(--platform-subpanel-fill);
+  color: var(--platform-text-base);
+}
+
+.runtime-settings-fields input,
+.runtime-settings-fields select,
+.runtime-mcp-grid input,
+.runtime-mcp-grid select,
+.runtime-mcp-grid textarea,
+.runtime-mcp-add input {
+  border-color: var(--platform-surface-border);
+  background: var(--platform-input-fill);
+  color: var(--platform-text-strong);
+}
+
+.runtime-settings-fields input:focus-visible,
+.runtime-settings-fields select:focus-visible,
+.runtime-mcp-grid input:focus-visible,
+.runtime-mcp-grid select:focus-visible,
+.runtime-mcp-grid textarea:focus-visible,
+.runtime-mcp-add input:focus-visible {
+  border-color: var(--platform-surface-hover-border);
+  outline: none;
+  box-shadow: 0 0 0 3px var(--platform-input-focus-ring);
+}
+
+.runtime-agent-list {
+  grid-column: 1 / -1;
+  display: grid;
+  gap: 8px;
+}
+
+.runtime-agent-card {
+  overflow: hidden;
+  border: 1px solid var(--platform-subpanel-border);
+  border-radius: 12px;
+  background: var(--platform-subpanel-fill);
+}
+
+.runtime-agent-card-summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  width: 100%;
+  min-height: 58px;
+  padding: 10px 14px;
+  border: 0;
+  background: transparent;
+  color: var(--platform-text-base);
+  text-align: left;
+  cursor: pointer;
+}
+
+.runtime-agent-card-summary:hover,
+.runtime-agent-card-summary[aria-expanded='true'] {
+  background: var(--platform-button-ghost-fill);
+}
+
+.runtime-agent-card-summary:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--platform-surface-hover-border);
+}
+
+.runtime-agent-card-summary > span:first-child {
+  display: grid;
+  gap: 2px;
+}
+
+.runtime-agent-card-summary strong {
+  color: var(--platform-text-strong);
+  font-size: 12px;
+}
+
+.runtime-agent-card-summary small,
+.runtime-agent-card-summary > span:last-child {
+  color: var(--platform-text-soft);
+  font-size: 10px;
+}
+
+.runtime-agent-card-fields {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+  padding: 14px;
+  border-top: 1px solid var(--platform-line-soft);
+}
+
+.runtime-agent-card-fields label {
+  display: grid;
+  gap: 6px;
+  min-width: 0;
+  color: var(--platform-text-base);
+  font-size: 11px;
+}
+
+.runtime-agent-card-fields input,
+.runtime-agent-card-fields select {
+  width: 100%;
+}
+
+.runtime-settings-footer {
+  min-height: 66px;
+  padding: 11px 18px 11px 22px;
+  border-top: 1px solid var(--platform-line-soft);
+  background: var(--platform-desktop-topbar-fill);
+}
+
+.runtime-settings-footer .status-line {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  margin: 0;
+  padding: 6px 9px;
+  overflow: hidden;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  color: var(--platform-text-soft);
+  font-size: 10px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.runtime-settings-footer .status-line[data-tone='success'] {
+  border-color: var(--platform-success-border);
+  background: var(--platform-success-fill);
+  color: var(--platform-success-text);
+}
+
+.runtime-settings-footer .status-line[data-tone='warning'] {
+  border-color: var(--platform-warm-border);
+  background: var(--platform-warm-bg);
+  color: var(--platform-warm-text);
+}
+
+.runtime-settings-footer .status-line[data-tone='busy'] {
+  border-color: var(--platform-nav-active-border);
+  background: var(--platform-nav-active-fill);
+  color: var(--platform-accent);
+}
+
+.runtime-settings-footer .status-line .is-spinning {
+  animation: runtime-settings-spin 0.9s linear infinite;
+}
+
+@keyframes runtime-settings-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.runtime-settings-footer-actions {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  flex: 0 0 auto;
+}
+
+.runtime-settings-footer-actions button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-height: 34px;
+  padding: 0 12px;
+  border: 1px solid var(--platform-surface-border);
+  border-radius: 9px;
+  background: var(--platform-button-secondary-fill);
+  color: var(--platform-button-secondary-text);
+  font-size: 11px;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.runtime-settings-footer-actions button:disabled {
+  cursor: wait;
+  opacity: 0.55;
+}
+
+.runtime-settings-footer-actions .runtime-settings-save {
+  border-color: var(--platform-button-primary-border);
+  background: var(--platform-button-primary-fill);
+  color: var(--platform-button-primary-text);
+}
+
 .settings-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -3138,8 +3533,10 @@ h2 {
   display: grid;
   gap: 10px;
   min-width: 0;
-  padding-top: 14px;
-  border-top: 1px solid #e2e7ef;
+  padding: 14px;
+  border: 1px solid var(--platform-subpanel-border);
+  border-radius: 12px;
+  background: var(--platform-subpanel-fill);
 }
 
 .runtime-mcp-header,
@@ -3161,14 +3558,14 @@ h2 {
 
 .runtime-mcp-header h3 {
   margin: 0;
-  color: #18202f;
+  color: var(--platform-text-strong);
   font-size: 14px;
 }
 
 .runtime-mcp-header span,
 .runtime-mcp-server span,
 .runtime-mcp-catalog span {
-  color: #647084;
+  color: var(--platform-text-soft);
   font-size: 12px;
 }
 
@@ -3181,10 +3578,10 @@ h2 {
   gap: 6px;
   height: 32px;
   padding: 0 10px;
-  border: 1px solid #cfd7e6;
-  border-radius: 6px;
-  color: #18202f;
-  background: #fff;
+  border: 1px solid var(--platform-surface-border);
+  border-radius: 9px;
+  color: var(--platform-button-secondary-text);
+  background: var(--platform-button-secondary-fill);
 }
 
 .runtime-mcp-header button:disabled,
@@ -3234,16 +3631,16 @@ h2 {
 .runtime-mcp-server {
   min-width: 0;
   padding: 10px 12px;
-  border: 1px solid #dce3ee;
-  border-radius: 7px;
-  background: #fbfcfe;
+  border: 1px solid var(--platform-surface-border);
+  border-radius: 10px;
+  background: var(--platform-input-fill);
 }
 
 .runtime-mcp-server > header strong,
 .runtime-mcp-catalog strong,
 .runtime-mcp-tools strong {
   min-width: 0;
-  color: #18202f;
+  color: var(--platform-text-strong);
   font-size: 13px;
   overflow-wrap: anywhere;
 }
@@ -3929,6 +4326,76 @@ iframe.preview-frame {
   }
 }
 
+@media (max-width: 760px) {
+  .settings-overlay {
+    padding: 0;
+  }
+
+  .runtime-settings-panel {
+    width: 100%;
+    height: 100dvh;
+    max-height: 100dvh;
+    border: 0;
+    border-radius: 0;
+  }
+
+  .runtime-settings-layout {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto minmax(0, 1fr);
+  }
+
+  .runtime-settings-nav {
+    display: block;
+    padding: 8px 10px;
+    overflow-x: auto;
+    border-right: 0;
+    border-bottom: 1px solid var(--platform-line-soft);
+  }
+
+  .runtime-settings-nav nav {
+    display: flex;
+    width: max-content;
+  }
+
+  .runtime-settings-nav nav button {
+    grid-template-columns: 20px auto;
+    min-height: 40px;
+  }
+
+  .runtime-settings-nav nav small,
+  .runtime-settings-config-state {
+    display: none;
+  }
+
+  .runtime-settings-content {
+    padding: 18px 14px 22px;
+  }
+
+  .runtime-agent-card-fields {
+    grid-template-columns: 1fr;
+  }
+
+  .runtime-agent-card-summary > span:last-child {
+    max-width: 48%;
+    text-align: right;
+  }
+
+  .runtime-settings-footer {
+    align-items: stretch;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .runtime-settings-footer-actions {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .runtime-settings-footer-actions button {
+    padding: 0 8px;
+  }
+}
+
 /* GameAgent V1.0 project workbench */
 .game-project-workbench {
   width: calc(100vw - 72px);
diff --git a/apps/ai-game-creator-shell/tests/appSurface/project-development.suite.ts b/apps/ai-game-creator-shell/tests/appSurface/project-development.suite.ts
index a4a3dbea6..b5d90e54c 100644
--- a/apps/ai-game-creator-shell/tests/appSurface/project-development.suite.ts
+++ b/apps/ai-game-creator-shell/tests/appSurface/project-development.suite.ts
@@ -4305,6 +4305,7 @@ export function registerProjectSupervisorSurfaceTests() {
     expect(
       await screen.findByRole('dialog', { name: '运行时配置' }),
     ).not.toBeNull();
+    fireEvent.click(screen.getByRole('button', { name: /连接与工具/ }));
     expect(screen.getByLabelText('External Editor Base URL')).toHaveProperty(
       'value',
       'http://127.0.0.1:8082',
@@ -10188,7 +10189,8 @@ export function registerProjectAgentStatusTests() {
       },
     );
     let runtimeUpdateHandler:
-      ((event: { payload: Record<string, unknown> }) => void) | null = null;
+      | ((event: { payload: Record<string, unknown> }) => void)
+      | null = null;
     const listen = vi.fn(
       async (
         eventName: string,
diff --git a/apps/ai-game-creator-shell/tests/appSurface/runtime-settings.suite.ts b/apps/ai-game-creator-shell/tests/appSurface/runtime-settings.suite.ts
index 1851a5e4c..dbf21eed7 100644
--- a/apps/ai-game-creator-shell/tests/appSurface/runtime-settings.suite.ts
+++ b/apps/ai-game-creator-shell/tests/appSurface/runtime-settings.suite.ts
@@ -412,16 +412,13 @@ export function registerRuntimeSettingsTests() {
 
     const dialog = await screen.findByRole('dialog', { name: '运行时配置' });
     expect(await screen.findByDisplayValue('gpt-launcher')).not.toBeNull();
+    fireEvent.click(screen.getByRole('button', { name: /高级参数/ }));
     expect(screen.getByLabelText('LLM 超时 ms')).toHaveProperty(
       'value',
       '1000',
     );
     expect(screen.getByLabelText('LLM 重试次数')).toHaveProperty('value', '0');
     expect(screen.getByLabelText('LLM 退避 ms')).toHaveProperty('value', '1');
-    expect(screen.getByLabelText('LLM API 类型')).toHaveProperty(
-      'value',
-      'openai_responses',
-    );
     expect(screen.getByLabelText('LLM 上下文窗口 tokens')).toHaveProperty(
       'value',
       '128000',
@@ -434,19 +431,11 @@ export function registerRuntimeSettingsTests() {
       'value',
       '12000',
     );
-    expect(screen.getByLabelText('External Editor Base URL')).toHaveProperty(
+    fireEvent.click(screen.getByRole('button', { name: /常用设置/ }));
+    expect(screen.getByLabelText('LLM API 类型')).toHaveProperty(
       'value',
-      'http://127.0.0.1:8082',
+      'openai_responses',
     );
-    expect(screen.getByLabelText('External Editor API Key')).toHaveProperty(
-      'type',
-      'password',
-    );
-    expect(
-      screen
-        .getByLabelText('External Editor API Key')
-        .getAttribute('autocomplete'),
-    ).toBe('off');
     fireEvent.change(screen.getByLabelText('LLM 模型'), {
       target: { value: 'gpt-launcher-updated' },
     });
@@ -466,10 +455,12 @@ export function registerRuntimeSettingsTests() {
       });
     });
     expect(
-      await screen.findByText(
-        '已保存：/home/test/AppData/game-creator.config.json',
-      ),
-    ).not.toBeNull();
+      (
+        await screen.findByText(
+          '已保存：/home/test/AppData/game-creator.config.json',
+        )
+      ).getAttribute('data-tone'),
+    ).toBe('success');
     fireEvent.mouseDown(dialog.parentElement as HTMLElement);
     expect(screen.queryByRole('dialog', { name: '运行时配置' })).toBeNull();
   });
@@ -569,6 +560,7 @@ export function registerRuntimeSettingsTests() {
     renderLauncherAt('/?launcher');
 
     fireEvent.click(screen.getByRole('button', { name: '配置' }));
+    fireEvent.click(await screen.findByRole('button', { name: /连接与工具/ }));
     const mcpRegion = await screen.findByRole('region', {
       name: 'MCP servers',
     });
@@ -869,15 +861,30 @@ export function registerPublishedRuntimeSettingsTests() {
     expect(
       screen.getByLabelText('LLM API Key').getAttribute('autocomplete'),
     ).toBe('off');
-    expect(screen.getByLabelText('External Editor API Key')).toHaveProperty(
-      'type',
-      'password',
-    );
+    fireEvent.click(screen.getByRole('button', { name: /连接与工具/ }));
+    expect(
+      screen.getByLabelText('External Editor API Key'),
+    ).toHaveProperty('type', 'password');
     expect(
       screen
         .getByLabelText('External Editor API Key')
         .getAttribute('autocomplete'),
     ).toBe('off');
+    fireEvent.click(screen.getByRole('button', { name: /Agent 模型/ }));
+    fireEvent.click(screen.getByRole('button', { name: /Planner planner/ }));
+    fireEvent.click(
+      screen.getByRole('button', {
+        name: /生成首版美术素材.*art-asset-plan/,
+      }),
+    );
+    fireEvent.click(
+      screen.getByRole('button', { name: /Generator generator/ }),
+    );
+    fireEvent.click(
+      screen.getByRole('button', {
+        name: /项目总控 Agent project-supervisor/,
+      }),
+    );
     expect(screen.getByLabelText('Planner LLM API Key')).toHaveProperty(
       'type',
       'password',
@@ -898,10 +905,6 @@ export function registerPublishedRuntimeSettingsTests() {
       'value',
       'claude-3-5-sonnet-latest',
     );
-    expect(screen.getByLabelText('LLM 推理档')).toHaveProperty(
-      'value',
-      'medium',
-    );
     expect(screen.getByLabelText('Planner LLM 推理档')).toHaveProperty(
       'value',
       'default',
@@ -923,10 +926,6 @@ export function registerPublishedRuntimeSettingsTests() {
     expect(
       screen.getByLabelText('生成首版美术素材 (art/Asset) LLM 流式请求'),
     ).toHaveProperty('value', 'true');
-    expect(screen.getByLabelText('LLM 联网检索')).toHaveProperty(
-      'checked',
-      false,
-    );
     expect(screen.getByLabelText('Planner LLM 联网检索')).toHaveProperty(
       'value',
       'false',
@@ -942,6 +941,12 @@ export function registerPublishedRuntimeSettingsTests() {
     expect(supervisorWebSearch).toHaveProperty('value', 'true');
     fireEvent.change(supervisorWebSearch, { target: { value: 'false' } });
     expect(supervisorWebSearch).toHaveProperty('value', 'false');
+    fireEvent.click(screen.getByRole('button', { name: /常用设置/ }));
+    expect(screen.getByLabelText('LLM 联网检索')).toHaveProperty(
+      'checked',
+      false,
+    );
+    fireEvent.click(screen.getByRole('button', { name: /高级参数/ }));
     expect(screen.getByLabelText('LLM 上下文窗口 tokens')).toHaveProperty(
       'value',
       '128000',
@@ -954,11 +959,17 @@ export function registerPublishedRuntimeSettingsTests() {
       'value',
       '12000',
     );
+    fireEvent.click(screen.getByRole('button', { name: /Agent 模型/ }));
     expect(screen.getByLabelText('Planner 上下文窗口 tokens')).toHaveProperty(
       'value',
       '',
     );
 
+    fireEvent.click(screen.getByRole('button', { name: /常用设置/ }));
+    expect(screen.getByLabelText('LLM 推理档')).toHaveProperty(
+      'value',
+      'medium',
+    );
     fireEvent.change(screen.getByLabelText('LLM API Key'), {
       target: { value: 'unit-new-secret-value' },
     });
@@ -973,6 +984,7 @@ export function registerPublishedRuntimeSettingsTests() {
     });
     fireEvent.click(screen.getByLabelText('LLM 流式请求'));
     fireEvent.click(screen.getByLabelText('LLM 联网检索'));
+    fireEvent.click(screen.getByRole('button', { name: /高级参数/ }));
     fireEvent.change(screen.getByLabelText('LLM 上下文窗口 tokens'), {
       target: { value: '160000' },
     });
@@ -991,6 +1003,7 @@ export function registerPublishedRuntimeSettingsTests() {
     fireEvent.change(screen.getByLabelText('LLM 退避 ms'), {
       target: { value: '800' },
     });
+    fireEvent.click(screen.getByRole('button', { name: /Agent 模型/ }));
     fireEvent.change(screen.getByLabelText('Generator LLM API Key'), {
       target: { value: 'generator-new-secret' },
     });
@@ -1018,6 +1031,7 @@ export function registerPublishedRuntimeSettingsTests() {
         target: { value: 'ark' },
       },
     );
+    fireEvent.click(screen.getByRole('button', { name: /连接与工具/ }));
     fireEvent.change(screen.getByLabelText('External Editor Base URL'), {
       target: { value: 'http://127.0.0.1:8099' },
     });
@@ -1092,10 +1106,12 @@ export function registerPublishedRuntimeSettingsTests() {
       within(runtimeConfigDialog).getByRole('button', { name: '读取' }),
     );
     expect(await screen.findByText(/已读取：/)).not.toBeNull();
+    fireEvent.click(screen.getByRole('button', { name: /常用设置/ }));
     expect(screen.getByLabelText('LLM 联网检索')).toHaveProperty(
       'checked',
       true,
     );
+    fireEvent.click(screen.getByRole('button', { name: /Agent 模型/ }));
     expect(screen.getByLabelText('项目总控 Agent LLM 联网检索')).toHaveProperty(
       'value',
       'false',
@@ -1107,6 +1123,7 @@ export function registerPublishedRuntimeSettingsTests() {
       'generator-new-secret',
     );
 
+    fireEvent.click(screen.getByRole('button', { name: /高级参数/ }));
     fireEvent.change(screen.getByLabelText('LLM 超时 ms'), {
       target: { value: '' },
     });
@@ -1137,6 +1154,7 @@ export function registerPublishedRuntimeSettingsTests() {
     );
 
     expect(screen.getByText('已恢复默认配置，保存后生效')).not.toBeNull();
+    fireEvent.click(screen.getByRole('button', { name: /常用设置/ }));
     expect(screen.getByLabelText('Agent 模式')).toHaveProperty(
       'value',
       'codex_app_server',
@@ -1158,10 +1176,12 @@ export function registerPublishedRuntimeSettingsTests() {
       'checked',
       false,
     );
+    fireEvent.click(screen.getByRole('button', { name: /Agent 模型/ }));
     expect(screen.getByLabelText('项目总控 Agent LLM 联网检索')).toHaveProperty(
       'value',
       '',
     );
+    fireEvent.click(screen.getByRole('button', { name: /高级参数/ }));
     expect(screen.getByLabelText('LLM 上下文窗口 tokens')).toHaveProperty(
       'value',
       '128000',
@@ -1174,10 +1194,10 @@ export function registerPublishedRuntimeSettingsTests() {
       'value',
       '12000',
     );
-    expect(screen.getByLabelText('External Editor Base URL')).toHaveProperty(
-      'value',
-      'http://127.0.0.1:8082',
-    );
+    fireEvent.click(screen.getByRole('button', { name: /连接与工具/ }));
+    expect(
+      screen.getByLabelText('External Editor Base URL'),
+    ).toHaveProperty('value', 'http://127.0.0.1:8082');
     fireEvent.click(
       within(runtimeConfigDialog).getByRole('button', { name: '保存' }),
     );
diff --git a/docs/project-memory/shared-memory/decision-log.md b/docs/project-memory/shared-memory/decision-log.md
index 4f1f34f8b..f71f5b5c3 100644
--- a/docs/project-memory/shared-memory/decision-log.md
+++ b/docs/project-memory/shared-memory/decision-log.md
@@ -7145,6 +7145,12 @@
 - HTTP 传输边界：根 H5 包不得依赖 Tauri guest 插件；AGC 独立包保留 `@tauri-apps/plugin-http`。Rust 插件显式关闭默认特性，只启用 `charset`、`cookies`、`http2` 和 `rustls-tls`，避免 `reqwest/system-proxy` 通过 Cargo feature union 把画布、Provider、Runtime 与本地回环夹具统一接入 OS 自动系统代理；如未来产品要求正式客户端继承系统代理，必须按各客户端明确设计并单独完成跨平台验证。
 - 运行决策：Godot 项目提交给 Project Supervisor 时使用 `standard` Run Profile，避免触发 Web 专用 `game/index.html`、HTTP preview 与自主 Web 完成门。Godot 编辑器启动和内嵌运行预览不在本切片范围。
 
+## 2026-08-12 AGC Agent 设置分层界面
+
+- `RuntimeConfigDialog` 保持现有配置字段、持久化格式、Runner 读取和 MCP 测试语义，只重构界面信息架构。
+- 设置页固定为“常用设置 / Agent 模型 / 连接与工具 / 高级参数”四类；默认只展示运行方式与默认模型，逐 Agent 覆盖按角色折叠，MCP、External Editor 连接和低频运行参数不进入首屏。
+- 设置壳复用 AGC 平台 tokens、按钮层级和响应式断点；桌面使用双栏 modal，窄屏改为横向分类导航和单列表单，底部保存动作常驻。
+
 ## 2026-08-11 Game Agent 通用 Goal Contract 与动态验收图
 
 - 决策：固定规则只负责安全、事实完整性和完成协议。根 Project Supervisor 必须先用 `agent.goal_contract` 把自己对当前用户最终意图的理解冻结为结构化 outcome、硬约束、偏好、禁止假设、开放问题和 acceptance nodes；同一根 Run 不允许改写。该合同摘要进入共享黑板，权威 JSON 绑定可信 root Run Profile、source task SHA-256 与 fingerprint。