claude360 0.2.3 → 0.2.5

package/README.md

@@ -29,6 +29,8 @@
 | 功能 | 说明 |
 | --- | --- |
 | 一行命令安装 | Windows PowerShell / macOS / Linux bash 一行命令拉起 bootstrap，自动检测 Node/npm 与全局 npm 权限 |
+| 方向键交互 | 全部菜单 / 选择 / 确认使用方向键导航（↑↓ 移动、Enter 确认、Esc 返回、空格多选、←→ 切换 YES/NO），非 TTY / CI 环境自动降级为编号输入 |
+| 真实模型选择 | 模型列表来自 `GET /api/cli/models`（用户可用分组 × 模型元数据），展示模型 ID / 名称 / 标签 / 说明，保存真实 model id |
 | 浏览器设备授权 | 通过 `/api/cli/auth/*` 设备码流程换取受限 CLI 凭证，不接触账号密码 |
 | API Key 选择/创建 | 已有 Key 列表展示并选择；无 Key 时按后端分组倍率向导创建 |
 | 余额与分组展示 | 日常主菜单展示账户余额、当前 Key、当前分组与倍率（来自后端） |
@@ -173,6 +175,7 @@ CLI 仅依赖一组隔离的 `/api/cli` 接口，由 `newapi/controller/cli.go`
 | POST | `/api/cli/tokens/:id/reveal` | 校验归属并返回明文 Key，被限频且禁用缓存 |
 | POST | `/api/cli/tokens` | 按分组创建新 Key（受 `operation_setting.GetMaxUserTokens()` 约束） |
 | GET | `/api/cli/groups` | 用户可用分组（含 `display_name`、`ratio`、`description`） |
+| GET | `/api/cli/models` | 当前用户可用模型列表（含 `display_name`、`tags`、`description`、`recommended`；`tool` 参数预留） |
 | GET | `/api/cli/topup/options` | 后端配置的充值金额选项与最低额，包含 WeChat 启用状态 |
 | POST | `/api/cli/topup/wechat` | 创建微信 Native 订单，返回 `code_url`、`order_id`、`pay_money` |
 | GET | `/api/cli/topup/:order_id` | 查询订单状态（仅订单所属用户） |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude360",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "description": "Interactive Claude360 CLI for browser auth, API key setup, balance checks, top-up, Claude Code and Codex launch.",
   "type": "module",
   "bin": {
@@ -16,10 +16,14 @@
     "node": ">=18"
   },
   "dependencies": {
+    "@inquirer/core": "^11.2.1",
     "qrcode-terminal": "^0.12.0",
     "smol-toml": "^1.6.1"
   },
   "scripts": {
     "test": "node ./scripts/test.js"
+  },
+  "devDependencies": {
+    "@inquirer/testing": "^3.3.9"
   }
 }

package/src/diagnostics.js

@@ -5,7 +5,7 @@ import os from "node:os";
 
 import { resolveCodexConfigPath } from "./tool-launcher.js";
 import { sanitizeError, sanitizeText } from "./sanitize.js";
-import { renderSectionTitle, renderTable } from "./ui.js";
+import { renderHeader, renderSectionTitle, renderTable } from "./ui.js";
 
 export async function runDiagnostics({
   config = {},
@@ -179,7 +179,7 @@ export function formatDiagnosticsSummary(report, { width = 0 } = {}) {
     },
   ];
 
-  const lines = ["诊断报告"];
+  const lines = [renderHeader("诊断报告")];
   for (const group of groups) {
     lines.push("", renderSectionTitle(group.title));
     lines.push(renderTable({

package/src/index.js

@@ -1,5 +1,3 @@
-import readline from "node:readline/promises";
-import { stdin as input, stdout as output } from "node:process";
 import { execFile } from "node:child_process";
 import { readFile as fsReadFile } from "node:fs/promises";
 import { createRequire } from "node:module";
@@ -11,6 +9,8 @@ import { formatAccountStatus, loadAccountStatus } from "./account-status.js";
 import { colorEnabled, formatCheckLine, playBanner, renderBanner } from "./banner.js";
 import { runCcSwitchGenerator } from "./cc-switch.js";
 import { createConfigStore } from "./config-store.js";
+import { createPrompts, isInteractive } from "./prompts.js";
+import { renderHeader } from "./ui.js";
 import {
   commandVersion,
   defaultExecCommand,
@@ -72,9 +72,9 @@ export async function runCli({
   authenticateWithBrowser: authWithBrowser = authenticateWithBrowser,
   chooseOrCreateToken: chooseToken = chooseOrCreateToken,
   createToken = createNewToken,
-  promptSelect = defaultPromptSelect,
-  promptInput = defaultPromptInput,
-  confirm = defaultConfirm,
+  promptSelect,
+  promptInput,
+  confirm,
   openBrowser = defaultOpenBrowser,
   installOrUpdateTools = installTools,
   launchClaudeCode = startClaudeCode,
@@ -94,7 +94,7 @@ export async function runCli({
   configureClaudeModel = configureClaudeDefaultModel,
   configureCodexModel = configureCodexDefaultModel,
   importEnvPermissions = importClaudeEnvPermissions,
-  multiSelectInput = promptMultiSelect,
+  multiSelectInput,
   readFileImpl = fsReadFile,
   claudeDir = resolveClaudeDir(),
   codexDir = resolveCodexDir(),
@@ -114,6 +114,19 @@ export async function runCli({
   let api = createApiClient({ baseUrl, cliToken: config.cliToken || "" });
   // 仅在真实终端（writeLine 未被测试替换）启用彩色与动效
   const fancyOutput = writeLine === console.log && colorEnabled();
+  // 方向键交互：真实 TTY 且交互未被测试替换时启用（优化需求第五节），
+  // 非交互环境降级为编号输入，由 prompts.js 统一处理
+  const interactiveUi = writeLine === console.log && isInteractive();
+  if (!promptSelect || !promptInput || !confirm) {
+    const defaults = createPrompts({ interactive: interactiveUi, color: fancyOutput });
+    promptSelect = promptSelect || defaults.promptSelect;
+    promptInput = promptInput || defaults.promptInput;
+    confirm = confirm || defaults.confirm;
+    if (!multiSelectInput && interactiveUi) {
+      multiSelectInput = ({ message, choices, preselected }) => defaults.multiSelect({ message, choices, preselected });
+    }
+  }
+  multiSelectInput = multiSelectInput || promptMultiSelect;
 
   if (showBanner) {
     if (fancyOutput) {
@@ -121,7 +134,10 @@ export async function runCli({
     } else {
       writeLine(renderBanner({ version, baseUrl }));
     }
-    await showEnvironmentChecks();
+    // 首页保持低高度（优化需求 1）：环境检查仅在未登录 / 强制配置时展示
+    if (!config.cliToken || forceSetup) {
+      await showEnvironmentChecks();
+    }
   }
 
   // ──────────────────────────────────────────────
@@ -373,7 +389,7 @@ export async function runCli({
   // Claude360 Provider 菜单（PRD 8.5）
   async function runCodexProviderMenu() {
     while (true) {
-      writeLine("配置 Claude360 Provider\n");
+      writeLine(renderHeader("Codex Provider 配置", { color: fancyOutput }));
       writeLine("当前 Provider：claude360");
       writeLine("当前 Profile：claude360\n");
       const action = await promptSelect("请选择：", [
@@ -452,12 +468,12 @@ export async function runCli({
       configureLanguage: () => configureLanguage({ baseDir: claudeDir, filePath: claudeMemoryPath, promptSelect, writeLine }),
       configureStyle: () => configureStyle({ baseDir: claudeDir, filePath: claudeMemoryPath, promptSelect, writeLine }),
       installWorkflows: () => installClaudeWfs({ claudeDir, multiSelect, confirm, writeLine }),
-      installMcps: () => installMcps({ multiSelect, confirm, writeLine }),
+      installMcps: () => installMcps({ api, multiSelect, confirm, writeLine }),
       configureModel: () => configureClaudeModel({ api, claudeDir, promptSelect, writeLine }),
       importEnvPermissions: () => importEnvPermissions({ claudeDir, confirm, writeLine }),
       testConnection: testConnectionStep,
       askLaunch: async () => {
-        if (await confirm("初始化完成。是否立即启动 Claude Code？")) {
+        if (await confirm("初始化完成。是否立即启动 Claude Code？", { defaultYes: true })) {
           await doLaunchClaude();
         }
       },
@@ -486,10 +502,10 @@ export async function runCli({
         writeLine("✓ 已写入 Codex claude360 provider/profile（~/.codex/config.toml）");
       },
       checkCompat: checkCodexCompatStep,
-      installMcps: () => installCodexMcpServers({ codexDir, multiSelect, confirm, writeLine }),
+      installMcps: () => installCodexMcpServers({ api, codexDir, multiSelect, confirm, writeLine }),
       testConnection: testConnectionStep,
       askLaunch: async () => {
-        if (await confirm("初始化完成。是否立即启动 Codex？")) {
+        if (await confirm("初始化完成。是否立即启动 Codex？", { defaultYes: true })) {
           await doLaunchCodex();
         }
       },
@@ -700,6 +716,7 @@ export async function runCli({
     }
     const approved = await confirm(
       "将退出登录并清除本地保存的 CLI Token 与 API Key。\n不会删除 Claude360 网站上的账号或 API Key。\n是否继续？",
+      { danger: true },
     );
     if (!approved) {
       writeLine("已取消。");
@@ -713,7 +730,7 @@ export async function runCli({
   }
 
   async function doRelogin() {
-    const approved = await confirm("将重新进行浏览器授权并覆盖本地登录状态。是否继续？");
+    const approved = await confirm("将重新进行浏览器授权并覆盖本地登录状态。是否继续？", { danger: true });
     if (!approved) {
       return false;
     }
@@ -725,6 +742,7 @@ export async function runCli({
   async function doClearConfig() {
     const approved = await confirm(
       "该操作会清除本地 Claude360 CLI 登录状态和已保存 Key。\n不会删除 Claude360 网站上的账号或 API Key。\n是否继续？",
+      { danger: true },
     );
     if (!approved) {
       writeLine("已取消。");
@@ -743,7 +761,7 @@ export async function runCli({
 
   async function runBalanceTopUpMenu() {
     while (true) {
-      writeLine("余额与充值\n");
+      writeLine(renderHeader("余额与充值", { color: fancyOutput }));
       const me = await showBalanceAndUsage();
       if (me?.low_balance) {
         writeLine("状态：余额偏低，建议充值");
@@ -767,7 +785,7 @@ export async function runCli({
 
   async function doCreateKey() {
     const token = await createToken({ api, promptSelect, promptInput });
-    const useNow = await confirm(`已创建 API Key：${token.tokenName}。是否将其设为当前使用的 Key？`);
+    const useNow = await confirm(`已创建 API Key：${token.tokenName}。是否将其设为当前使用的 Key？`, { defaultYes: true });
     if (useNow) {
       await saveConfig({
         apiKey: token.apiKey,
@@ -809,7 +827,7 @@ export async function runCli({
           break;
         case "mcp":
           if (await confirmNotice()) {
-            await installMcps({ multiSelect, confirm, writeLine });
+            await installMcps({ api, multiSelect, confirm, writeLine });
           }
           break;
         case "model":
@@ -863,7 +881,7 @@ export async function runCli({
           break;
         case "mcp":
           if (await confirmNotice()) {
-            await installCodexMcpServers({ codexDir, multiSelect, confirm, writeLine });
+            await installCodexMcpServers({ api, codexDir, multiSelect, confirm, writeLine });
           }
           break;
         case "model":
@@ -902,7 +920,7 @@ export async function runCli({
       ]);
       switch (action) {
         case "claude_mcp":
-          await installMcps({ multiSelect, confirm, writeLine });
+          await installMcps({ api, multiSelect, confirm, writeLine });
           break;
         case "claude_skill": {
           const kind = await promptSelect("请选择要安装的内容：", [
@@ -918,7 +936,7 @@ export async function runCli({
           break;
         }
         case "codex_mcp":
-          await installCodexMcpServers({ codexDir, multiSelect, confirm, writeLine });
+          await installCodexMcpServers({ api, codexDir, multiSelect, confirm, writeLine });
           break;
         case "codex_agents":
           await installAgents({ confirm, writeLine });
@@ -1019,7 +1037,7 @@ export async function runCli({
         { label: "跳过", value: "skip" },
       ]);
       if (wantMcp === "mcp") {
-        await installMcps({ promptSelect, confirm, writeLine });
+        await installMcps({ api, multiSelect, confirm, writeLine });
       } else if (wantMcp === "skill") {
         await installSkills({ promptSelect, confirm, writeLine });
       }
@@ -1042,7 +1060,7 @@ export async function runCli({
     if (targets.length === 1) {
       const tool = targets[0];
       const label = tool === "claude" ? "Claude Code" : "Codex";
-      if (await confirm(`配置完成。是否立即启动 ${label}？`)) {
+      if (await confirm(`配置完成。是否立即启动 ${label}？`, { defaultYes: true })) {
         return tool === "claude" ? doLaunchClaude() : doLaunchCodex();
       }
       return true;
@@ -1071,7 +1089,12 @@ export async function runCli({
       }
     }
     while (true) {
-      const action = await promptMenu({ menu: buildFirstRunMenu(), promptInput, writeLine });
+      const action = await promptMenu({
+        menu: buildFirstRunMenu(),
+        promptInput,
+        writeLine,
+        select: interactiveUi ? promptSelect : undefined,
+      });
       switch (action) {
         case "setup_claude":
           if (await runFirstSetup(["claude"])) {
@@ -1121,12 +1144,53 @@ export async function runCli({
   // 日常菜单循环（PRD 第 11 章）
   // ──────────────────────────────────────────────
 
+  // 切换 Key / 模型（优化需求 1：常用操作直达入口）
+  async function runSwitchKeyModelMenu() {
+    while (true) {
+      const action = await promptSelect("切换 Key / 模型", [
+        { label: `切换 API Key（当前：${config.tokenName || "未选择"}）`, value: "key" },
+        { label: "Claude Code 默认模型", value: "claude_model" },
+        { label: "Codex 默认模型", value: "codex_model" },
+        { label: "返回", value: "back" },
+      ]);
+      switch (action) {
+        case "key": {
+          const token = await chooseToken({ api, promptSelect, promptInput, writeLine });
+          await saveConfig({
+            apiKey: token.apiKey,
+            selectedTokenId: token.tokenId,
+            tokenName: token.tokenName,
+            group: token.group,
+          });
+          writeLine(`✓ 当前 Key 已切换为 ${token.tokenName}`);
+          break;
+        }
+        case "claude_model":
+          await configureClaudeModel({ api, claudeDir, promptSelect, writeLine });
+          break;
+        case "codex_model":
+          await configureCodexModel({ api, codexDir, promptSelect, writeLine });
+          break;
+        default:
+          return;
+      }
+    }
+  }
+
   async function runDailyFlow() {
     while (true) {
+      if (interactiveUi) {
+        writeLine(renderHeader("主菜单", { color: fancyOutput }));
+      }
       const status = await loadAccountStatus({ api, config });
       writeLine(formatAccountStatus({ ...status, width: outputWidth() }));
       writeLine("");
-      const action = await promptMenu({ menu: buildDailyMenu(), promptInput, writeLine });
+      const action = await promptMenu({
+        menu: buildDailyMenu(),
+        promptInput,
+        writeLine,
+        select: interactiveUi ? promptSelect : undefined,
+      });
       switch (action) {
         case "launch_claude":
           if (await doLaunchClaude()) {
@@ -1141,6 +1205,9 @@ export async function runCli({
         case "balance_topup":
           await runBalanceTopUpMenu();
           break;
+        case "switch_key_model":
+          await runSwitchKeyModelMenu();
+          break;
         case "create_key":
           await doCreateKey();
           break;
@@ -1251,47 +1318,6 @@ function formatCliUsage() {
   ].join("\n");
 }
 
-async function defaultPromptSelect(message, choices) {
-  const rl = readline.createInterface({ input, output });
-  try {
-    writeChoices(message, choices);
-    const answer = await rl.question("> ");
-    const index = Number(answer) - 1;
-    if (Number.isInteger(index) && choices[index]) {
-      return choices[index].value;
-    }
-    const matched = choices.find((choice) => choice.value === answer);
-    if (matched) {
-      return matched.value;
-    }
-    throw new Error("选择无效");
-  } finally {
-    rl.close();
-  }
-}
-
-async function defaultPromptInput(message, defaultValue = "") {
-  const rl = readline.createInterface({ input, output });
-  try {
-    const suffix = defaultValue ? ` (${defaultValue})` : "";
-    const answer = await rl.question(`${message}${suffix}: `);
-    return answer.trim() || defaultValue;
-  } finally {
-    rl.close();
-  }
-}
-
-async function defaultConfirm(message) {
-  const answer = await defaultPromptInput(`${message}\n输入 yes 确认`, "no");
-  return ["yes", "y", "确认", "是", "继续"].includes(answer.trim().toLowerCase());
-}
-
-function writeChoices(message, choices) {
-  console.log(message);
-  choices.forEach((choice, index) => {
-    console.log(`${index + 1}. ${choice.label}`);
-  });
-}
 
 function defaultOpenBrowser(url) {
   const commands = {

package/src/init-config.js

@@ -10,6 +10,7 @@ import path from "node:path";
 import { createBackup } from "./backup.js";
 import { upsertMarkedBlock } from "./mcp-skill.js";
 import { upsertProfileKey, validateBasicToml } from "./tool-launcher.js";
+import { renderModelTable } from "./ui.js";
 
 const defaultFs = { copyFile, cp, mkdir, readFile, stat, writeFile };
 
@@ -190,32 +191,51 @@ export async function configurePromptStyle({
 }
 
 // ──────────────────────────────────────────────
-// Claude Code 默认模型（PRD 6.7）：模型名以后端返回为准，
-// 后端未提供时回退到 Claude Code 官方别名（sonnet/opus/haiku），
-// CLI 不硬编码具体模型 ID、倍率与计费规则。
+// Claude Code 默认模型（PRD 6.7 / 优化需求第 3 节）：
+// 模型列表从后端 GET /api/cli/models 拉取，展示真实模型 ID / 名称 /
+// 标签 / 说明，用户选择后保存真实 model id；CLI 不硬编码模型与档位。
+// 接口不可用时 Claude Code 回退官方别名（sonnet/opus/haiku）并明确提示，
+// 「推荐 / 高性能 / 经济」只作为标签注记，不代替真实模型。
 // ──────────────────────────────────────────────
 
-export const DEFAULT_MODEL_TIERS = [
-  { id: "recommended", label: "推荐模型   适合大多数代码任务", model: "sonnet" },
-  { id: "performance", label: "高性能模型 适合复杂架构和长上下文任务", model: "opus" },
-  { id: "economy", label: "经济模型   适合日常轻量任务", model: "haiku" },
+export const FALLBACK_CLAUDE_ALIASES = [
+  { id: "sonnet", display_name: "Sonnet（官方别名）", tags: ["推荐"], description: "适合大多数代码任务" },
+  { id: "opus", display_name: "Opus（官方别名）", tags: ["高性能"], description: "适合复杂架构和长上下文任务" },
+  { id: "haiku", display_name: "Haiku（官方别名）", tags: ["经济"], description: "适合日常轻量任务" },
 ];
 
-// 后端可选接口 GET /api/cli/models：{ tiers: [{ id, label, model }] }；
-// 不可用时回退内置映射。
-export async function loadModelTiers(api) {
+// 后端接口 GET /api/cli/models?tool=<claude_code|codex>：
+// { models: [{ id, display_name, description, tags, recommended, context_length }] }
+export async function loadAvailableModels(api, tool = "") {
   if (api && typeof api.get === "function") {
     try {
-      const data = await api.get("/api/cli/models");
-      const tiers = Array.isArray(data?.tiers) ? data.tiers : [];
-      if (tiers.length > 0 && tiers.every((tier) => tier.id && tier.label && tier.model)) {
-        return { tiers, source: "backend" };
+      const query = tool ? `?tool=${encodeURIComponent(tool)}` : "";
+      const data = await api.get(`/api/cli/models${query}`);
+      const models = (Array.isArray(data?.models) ? data.models : [])
+        .filter((model) => model && typeof model.id === "string" && model.id !== "");
+      if (models.length > 0) {
+        return { models, source: "backend" };
       }
     } catch {
-      // 后端暂未提供模型列表接口，使用内置映射
+      // 后端暂未提供模型列表接口或网络失败，由调用方决定回退策略
     }
   }
-  return { tiers: DEFAULT_MODEL_TIERS, source: "builtin" };
+  return { models: [], source: "unavailable" };
+}
+
+// 选项标签：真实模型 id 优先，display_name 与标签只作补充说明
+function formatModelChoiceLabel(model) {
+  const name = model.display_name && model.display_name !== model.id ? `（${model.display_name}）` : "";
+  const tags = Array.isArray(model.tags) && model.tags.length > 0 ? `  [${model.tags.join("/")}]` : "";
+  return `${model.id}${name}${tags}`;
+}
+
+async function selectModelFromList({ models, promptSelect, writeLine }) {
+  writeLine(renderModelTable(models, { width: process.stdout.columns || 0 }));
+  return promptSelect("请选择默认模型：", [
+    ...models.map((model) => ({ label: formatModelChoiceLabel(model), value: model.id, hint: model.description || "" })),
+    { label: "跳过", value: "skip" },
+  ]);
 }
 
 async function readJsonIfExists(fs, filePath) {
@@ -250,22 +270,23 @@ export async function configureClaudeDefaultModel({
   if (typeof promptSelect !== "function") {
     throw new Error("缺少选择输入");
   }
-  const { tiers } = await loadModelTiers(api);
-  const selected = await promptSelect("请选择默认模型：", [
-    ...tiers.map((tier) => ({ label: tier.label, value: tier.id })),
-    { label: "跳过", value: "skip" },
-  ]);
+  const { models, source } = await loadAvailableModels(api, "claude_code");
+  let list = models;
+  if (source !== "backend") {
+    writeLine("Claude360 后端暂未提供模型列表，以下为 Claude Code 官方模型别名：");
+    list = FALLBACK_CLAUDE_ALIASES;
+  }
+  const selected = await selectModelFromList({ models: list, promptSelect, writeLine });
   if (selected === "skip") {
     writeLine("已跳过默认模型配置。");
     return { skipped: true };
   }
-  const tier = tiers.find((item) => item.id === selected);
   const settingsPath = path.join(claudeDir, "settings.json");
   const settings = await readJsonIfExists(fs, settingsPath);
-  settings.model = tier.model;
+  settings.model = selected;
   await writeJsonWithBackup({ baseDir: claudeDir, filePath: settingsPath, json: settings, writeLine, fs, now });
-  writeLine(`✓ 默认模型已设置为 ${tier.model}（${settingsPath}）`);
-  return { skipped: false, model: tier.model };
+  writeLine(`✓ 默认模型已设置为 ${selected}（${settingsPath}）`);
+  return { skipped: false, model: selected };
 }
 
 // ──────────────────────────────────────────────
@@ -349,24 +370,20 @@ export async function configureCodexDefaultModel({
   if (typeof promptSelect !== "function") {
     throw new Error("缺少选择输入");
   }
-  const { tiers, source } = await loadModelTiers(api);
+  const { models, source } = await loadAvailableModels(api, "codex");
   if (source !== "backend") {
     writeLine("Claude360 后端暂未提供 Codex 模型列表，已跳过默认模型写入。");
     writeLine("可在启动 Codex 后使用 /model 命令选择模型。");
     return { skipped: true };
   }
-  const selected = await promptSelect("请选择默认模型：", [
-    ...tiers.map((tier) => ({ label: tier.label, value: tier.id })),
-    { label: "跳过", value: "skip" },
-  ]);
+  const selected = await selectModelFromList({ models, promptSelect, writeLine });
   if (selected === "skip") {
     writeLine("已跳过默认模型配置。");
     return { skipped: true };
   }
-  const tier = tiers.find((item) => item.id === selected);
   const configPath = path.join(codexDir, "config.toml");
   const current = await readFileIfExists(fs, configPath);
-  const next = `${upsertProfileKey(current, "claude360", "model", tier.model).trimEnd()}\n`;
+  const next = `${upsertProfileKey(current, "claude360", "model", selected).trimEnd()}\n`;
   const tomlError = validateBasicToml(next);
   if (tomlError) {
     writeLine(`× 生成的 Codex 配置 TOML 校验失败：${tomlError}\n已放弃写入，原配置保持不变。`);
@@ -378,6 +395,6 @@ export async function configureCodexDefaultModel({
   }
   await fs.mkdir(codexDir, { recursive: true });
   await fs.writeFile(configPath, next, "utf8");
-  writeLine(`✓ Codex 默认模型已设置为 ${tier.model}（${configPath}）`);
-  return { skipped: false, model: tier.model };
+  writeLine(`✓ Codex 默认模型已设置为 ${selected}（${configPath}）`);
+  return { skipped: false, model: selected };
 }

package/src/mcp-skill.js

@@ -78,6 +78,36 @@ export function resolveClaudeJsonPath({ homedir = os.homedir } = {}) {
   return path.join(homedir(), ".claude.json");
 }
 
+// 远程 MCP 项必须带完整安装信息才可用，避免脏数据进入安装流程
+function isValidRemoteMcp(mcp) {
+  return Boolean(
+    mcp
+    && typeof mcp.id === "string" && mcp.id !== ""
+    && typeof mcp.label === "string" && mcp.label !== ""
+    && Array.isArray(mcp.claudeArgs) && mcp.claudeArgs.length > 0
+    && mcp.codex && typeof mcp.codex.command === "string"
+    && Array.isArray(mcp.codex.args),
+  );
+}
+
+// MCP 列表远程优先（优化需求第 4 节）：GET /api/cli/mcps 返回
+// { mcps: [...] }；接口不可用或数据不合法时回退内置 RECOMMENDED_MCPS，
+// 避免列表长期写死在 CLI。
+export async function loadRecommendedMcps(api) {
+  if (api && typeof api.get === "function") {
+    try {
+      const data = await api.get("/api/cli/mcps");
+      const mcps = (Array.isArray(data?.mcps) ? data.mcps : []).filter(isValidRemoteMcp);
+      if (mcps.length > 0) {
+        return { mcps, source: "remote" };
+      }
+    } catch {
+      // 后端暂未提供 MCP 列表接口，回退内置推荐
+    }
+  }
+  return { mcps: RECOMMENDED_MCPS, source: "builtin" };
+}
+
 // 已安装的 Claude Code 用户级 MCP（读取 ~/.claude.json 的 mcpServers 键）
 export async function readInstalledClaudeMcps({
   claudeJsonPath = resolveClaudeJsonPath(),
@@ -95,18 +125,19 @@ export async function readInstalledClaudeMcps({
   }
 }
 
-// 多选推荐 MCP；已安装项展示为「已安装」且不可重复安装（PRD 6.6）
-async function selectMcps({ multiSelect, installedIds, writeLine }) {
-  const choices = RECOMMENDED_MCPS.map((mcp) => ({
-    label: `${mcp.label}${installedIds.includes(mcp.id) ? "（已安装）" : ""}`,
+// 多选推荐 MCP；展示推荐标识 ★、说明与平台兼容性，
+// 已安装项展示为「已安装」且不可重复安装（PRD 6.6 / 优化需求第 4 节）
+async function selectMcps({ mcps, multiSelect, installedIds, writeLine }) {
+  const choices = mcps.map((mcp) => ({
+    label: `${mcp.recommended ? "★ " : ""}${mcp.label}${installedIds.includes(mcp.id) ? "（已安装）" : ""}`,
     value: mcp.id,
-    hint: mcp.desc,
+    hint: `${mcp.desc || ""} · ${mcp.platforms || "全平台"}`,
   }));
-  const preselected = RECOMMENDED_MCPS
+  const preselected = mcps
     .filter((mcp) => mcp.recommended && !installedIds.includes(mcp.id))
     .map((mcp) => mcp.id);
   const selected = await multiSelect({
-    message: "请选择要安装的 MCP 服务（默认推荐 Context7 / Open Web Search / DeepWiki）：",
+    message: "请选择要安装的 MCP 服务（★ 为推荐项，已预选）：",
     choices,
     preselected,
   });
@@ -116,7 +147,7 @@ async function selectMcps({ multiSelect, installedIds, writeLine }) {
       writeLine(`已安装，跳过：${id}`);
       continue;
     }
-    fresh.push(RECOMMENDED_MCPS.find((mcp) => mcp.id === id));
+    fresh.push(mcps.find((mcp) => mcp.id === id));
   }
   return fresh;
 }
@@ -140,6 +171,7 @@ async function confirmHeavyMcps(mcps, confirm, writeLine) {
 }
 
 export async function installRecommendedMcps({
+  api,
   multiSelect,
   confirm,
   execCommand = defaultExec,
@@ -150,8 +182,9 @@ export async function installRecommendedMcps({
   if (typeof multiSelect !== "function" || typeof confirm !== "function") {
     throw new Error("缺少交互输入");
   }
+  const { mcps } = await loadRecommendedMcps(api);
   const installedIds = await readInstalledClaudeMcps({ claudeJsonPath, fs });
-  const fresh = await selectMcps({ multiSelect, installedIds, writeLine });
+  const fresh = await selectMcps({ mcps, multiSelect, installedIds, writeLine });
   if (fresh.length === 0) {
     writeLine("已跳过 MCP 安装。");
     return [];
@@ -225,6 +258,7 @@ export function buildCodexMcpTable(mcp) {
 }
 
 export async function installCodexMcps({
+  api,
   multiSelect,
   confirm,
   writeLine = console.log,
@@ -236,8 +270,9 @@ export async function installCodexMcps({
     throw new Error("缺少交互输入");
   }
   const configPath = path.join(codexDir, "config.toml");
+  const { mcps } = await loadRecommendedMcps(api);
   const installedIds = await readInstalledCodexMcps({ codexDir, fs });
-  const fresh = await selectMcps({ multiSelect, installedIds, writeLine });
+  const fresh = await selectMcps({ mcps, multiSelect, installedIds, writeLine });
   if (fresh.length === 0) {
     writeLine("已跳过 MCP 安装。");
     return [];

package/src/menu.js

@@ -48,35 +48,36 @@ export function buildDailyMenu() {
     title: "请选择功能：",
     sections: [
       {
-        title: "快速启动",
+        title: "常用操作",
         items: [
           { key: "1", label: "启动 Claude Code", value: "launch_claude", desc: "使用 Claude360 接入配置直接启动" },
           { key: "2", label: "启动 Codex", value: "launch_codex", desc: "使用 Claude360 接入配置直接启动" },
         ],
       },
       {
-        title: "Claude360",
+        title: "账户与充值",
         items: [
           { key: "3", label: "余额与充值", value: "balance_topup", desc: "查看余额用量，支持微信扫码充值" },
-          { key: "4", label: "创建新的 API Key", value: "create_key", desc: "在当前账号下新建一个 API Key" },
-          { key: "5", label: "打开 Claude360 控制台", value: "open_console", desc: "在浏览器中打开网页控制台" },
+          { key: "4", label: "切换 Key / 模型", value: "switch_key_model", desc: "切换当前 API Key 或默认模型" },
+          { key: "5", label: "创建新的 API Key", value: "create_key", desc: "在当前账号下新建一个 API Key" },
+          { key: "6", label: "打开 Claude360 控制台", value: "open_console", desc: "在浏览器中打开网页控制台" },
         ],
       },
       {
-        title: "工具配置",
+        title: "Key / 模型 / MCP 配置",
         items: [
-          { key: "6", label: "Claude Code 配置", value: "claude_code_menu", desc: "完整初始化、工作流、MCP、模型与记忆配置" },
-          { key: "7", label: "Codex 配置", value: "codex_menu", desc: "完整初始化、Provider、工作流与 MCP 配置" },
-          { key: "8", label: "一键完整初始化", value: "full_init", desc: "Claude Code / Codex 完整初始化向导" },
-          { key: "9", label: "推荐 MCP / Skill", value: "mcp_skill", desc: "安装推荐的 MCP、工作流与 Skill 增强" },
+          { key: "7", label: "Claude Code 配置", value: "claude_code_menu", desc: "完整初始化、工作流、MCP、模型与记忆配置" },
+          { key: "8", label: "Codex 配置", value: "codex_menu", desc: "完整初始化、Provider、工作流与 MCP 配置" },
+          { key: "9", label: "一键完整初始化", value: "full_init", desc: "Claude Code / Codex 完整初始化向导" },
+          { key: "M", label: "推荐 MCP / Skill", value: "mcp_skill", desc: "安装推荐的 MCP、工作流与 Skill 增强" },
           { key: "C", label: "生成 cc-switch 配置", value: "cc_switch", desc: "生成可导入 cc-switch 的供应商配置" },
         ],
       },
       {
-        title: "维护",
+        title: "维护与设置",
         items: [
-          { key: "D", label: "诊断与修复", value: "diagnostics_menu", desc: "一键诊断环境与配置问题并尝试修复" },
           { key: "B", label: "安装或更新工具", value: "install_tools", desc: "安装或升级 Claude Code / Codex / 本 CLI" },
+          { key: "D", label: "诊断与修复", value: "diagnostics_menu", desc: "一键诊断环境与配置问题并尝试修复" },
           { key: "0", label: "重新登录", value: "relogin", desc: "清除本地登录态后重新浏览器授权" },
           { key: "Q", label: "退出", value: "exit", desc: "退出 claude360 CLI" },
         ],
@@ -141,7 +142,15 @@ export function resolveMenuSelection(menu, input) {
   return byValue ? byValue.value : null;
 }
 
-export async function promptMenu({ menu, promptInput, writeLine = console.log } = {}) {
+export async function promptMenu({ menu, promptInput, select, writeLine = console.log } = {}) {
+  // 注入 select 时走方向键交互（优化需求一.2）：分组转为分隔行
+  if (typeof select === "function") {
+    const choices = menu.sections.flatMap((section) => [
+      ...(section.title ? [{ separator: renderSectionRule(section.title, false) }] : []),
+      ...section.items.map((item) => ({ label: item.label, value: item.value, hint: item.desc || "" })),
+    ]);
+    return select(menu.title || "请选择功能：", choices);
+  }
   if (typeof promptInput !== "function") {
     throw new Error("缺少菜单输入");
   }

package/src/prompts.js

@@ -0,0 +1,318 @@
+// 交互组件层（优化需求第 4 / 三 / 四 / 五节）：
+// TTY 下基于 @inquirer/core 提供方向键单选、空格多选、左右键 YES/NO 确认；
+// 非 TTY / CI 环境降级为编号输入，保证管道输出与测试稳定。
+// 所有页面通过 createPrompts() 拿到统一的 promptSelect / promptInput /
+// confirm / multiSelect，不再各自拼交互逻辑。
+
+import readline from "node:readline/promises";
+import { stdin as input, stdout as output } from "node:process";
+import {
+  createPrompt,
+  isDownKey,
+  isEnterKey,
+  isSpaceKey,
+  isTabKey,
+  isUpKey,
+  useKeypress,
+  usePagination,
+  useState,
+} from "@inquirer/core";
+
+import { promptMultiSelect } from "./menu.js";
+
+const ESC = "[";
+const RESET = `${ESC}0m`;
+const BOLD = `${ESC}1m`;
+const fg = (r, g, b) => `${ESC}38;2;${r};${g};${b}m`;
+const CYAN = fg(34, 211, 238);    // 品牌高亮：选中项
+const RED = fg(248, 113, 113);    // 危险操作：NO 高亮
+const GRAY = fg(100, 116, 139);   // 次要说明 / 未选中项
+const GREEN = fg(74, 222, 128);   // 完成态答案
+
+const paint = (color, sgr, text) => (color ? `${sgr}${text}${RESET}` : text);
+
+export function isInteractive(stream = process.stdout) {
+  if (process.env.CI) {
+    return false;
+  }
+  return Boolean(stream && stream.isTTY && process.stdin.isTTY);
+}
+
+// Esc 约定：选项里带 back / skip / exit 时，Esc 等价于选择它（需求二.2）
+export function resolveEscValue(choices = []) {
+  const hit = choices.find((choice) => ["back", "skip", "exit"].includes(choice?.value));
+  return hit ? hit.value : undefined;
+}
+
+// 确认行：选中项大写、加粗、高亮并带箭头；未选中项小写灰色（需求第四节）。
+// 终端无法局部放大字体，用大小写 + 颜色 + 箭头模拟视觉差异。
+export function renderConfirmLine(yesActive, { color = true, danger = false } = {}) {
+  const yes = yesActive
+    ? paint(color, `${BOLD}${CYAN}`, "▶ YES ◀")
+    : paint(color, GRAY, "yes");
+  const no = !yesActive
+    ? paint(color, `${BOLD}${danger ? RED : CYAN}`, "▶ NO ◀")
+    : paint(color, GRAY, "no");
+  return `   ${yes}     ${no}`;
+}
+
+// ──────────────────────────────────────────────
+// 交互组件（@inquirer/core 自定义 prompt）
+// ──────────────────────────────────────────────
+
+const PAGE_SIZE = 14;
+
+// 单选：方向键移动（跳过分隔行）、回车确认、Esc 返回 escValue
+export const interactiveSelect = createPrompt((config, done) => {
+  const { message, choices, escValue, color = true } = config;
+  const [status, setStatus] = useState("idle");
+  const firstIndex = choices.findIndex((choice) => !choice.separator);
+  const [active, setActive] = useState(Math.max(firstIndex, 0));
+
+  useKeypress((key) => {
+    if (status === "done") {
+      return;
+    }
+    if (isEnterKey(key)) {
+      setStatus("done");
+      done(choices[active].value);
+      return;
+    }
+    if (isUpKey(key) || isDownKey(key)) {
+      const direction = isUpKey(key) ? -1 : 1;
+      let next = active;
+      do {
+        next = (next + direction + choices.length) % choices.length;
+      } while (choices[next].separator);
+      setActive(next);
+      return;
+    }
+    if (key.name === "escape" && escValue !== undefined) {
+      setStatus("done");
+      done(escValue);
+    }
+  });
+
+  if (status === "done") {
+    return `${paint(color, BOLD, message)} ${paint(color, GREEN, choices[active]?.separator ? "" : String(choices[active]?.label ?? ""))}`;
+  }
+
+  const page = usePagination({
+    items: choices,
+    active,
+    pageSize: PAGE_SIZE,
+    loop: false,
+    renderItem({ item, isActive }) {
+      if (item.separator) {
+        return paint(color, GRAY, item.separator);
+      }
+      const hint = item.hint ? `  ${paint(color, GRAY, item.hint)}` : "";
+      if (isActive) {
+        return `${paint(color, `${BOLD}${CYAN}`, `❯ ${item.label}`)}${hint}`;
+      }
+      return `  ${item.label}${hint}`;
+    },
+  });
+  const help = paint(color, GRAY, `↑↓ 移动 · Enter 确认${escValue !== undefined ? " · Esc 返回" : ""}`);
+  return `${paint(color, BOLD, message)}\n${page}\n${help}`;
+});
+
+// 多选：空格选择/取消、a 全选、i 反选、回车确认、Esc 取消（需求第 4 节）
+export const interactiveMultiSelect = createPrompt((config, done) => {
+  const { message, choices, preselected = [], color = true } = config;
+  const [status, setStatus] = useState("idle");
+  const [active, setActive] = useState(0);
+  const [selected, setSelected] = useState(
+    () => new Set(preselected.filter((value) => choices.some((choice) => choice.value === value))),
+  );
+
+  const finish = (values) => {
+    setStatus("done");
+    done(values);
+  };
+
+  useKeypress((key) => {
+    if (status === "done") {
+      return;
+    }
+    if (isEnterKey(key)) {
+      finish(choices.filter((choice) => selected.has(choice.value)).map((choice) => choice.value));
+      return;
+    }
+    if (isUpKey(key) || isDownKey(key)) {
+      const direction = isUpKey(key) ? -1 : 1;
+      setActive((active + direction + choices.length) % choices.length);
+      return;
+    }
+    if (isSpaceKey(key)) {
+      const next = new Set(selected);
+      const value = choices[active].value;
+      if (next.has(value)) {
+        next.delete(value);
+      } else {
+        next.add(value);
+      }
+      setSelected(next);
+      return;
+    }
+    if (key.name === "a") {
+      setSelected(new Set(choices.map((choice) => choice.value)));
+      return;
+    }
+    if (key.name === "i") {
+      setSelected(new Set(choices.filter((choice) => !selected.has(choice.value)).map((choice) => choice.value)));
+      return;
+    }
+    if (key.name === "escape") {
+      finish([]);
+    }
+  });
+
+  if (status === "done") {
+    return `${paint(color, BOLD, message)} ${paint(color, GREEN, `已选 ${selected.size} 项`)}`;
+  }
+
+  const page = usePagination({
+    items: choices,
+    active,
+    pageSize: PAGE_SIZE,
+    loop: false,
+    renderItem({ item, isActive }) {
+      const mark = selected.has(item.value) ? paint(color, GREEN, "[x]") : "[ ]";
+      const hint = item.hint ? `  ${paint(color, GRAY, item.hint)}` : "";
+      const label = isActive ? paint(color, `${BOLD}${CYAN}`, `❯ ${mark} ${item.label}`) : `  ${mark} ${item.label}`;
+      return `${label}${hint}`;
+    },
+  });
+  const help = paint(color, GRAY, "↑↓ 移动 · 空格 选择 · a 全选 · i 反选 · Enter 确认 · Esc 取消");
+  return `${paint(color, BOLD, message)}\n${page}\n${help}`;
+});
+
+// 确认：左右方向键 / Tab 切换 YES、NO，回车确认，y / n 快捷，Esc 取消。
+// 默认值由调用方按风险设置：普通继续默认 YES，覆盖 / 删除 / 重置默认 NO。
+export const interactiveConfirm = createPrompt((config, done) => {
+  const { message, defaultYes = false, danger = false, color = true } = config;
+  const [status, setStatus] = useState("idle");
+  const [yes, setYes] = useState(Boolean(defaultYes));
+
+  const finish = (value) => {
+    setStatus("done");
+    setYes(value);
+    done(value);
+  };
+
+  useKeypress((key) => {
+    if (status === "done") {
+      return;
+    }
+    if (isEnterKey(key)) {
+      finish(yes);
+      return;
+    }
+    if (key.name === "left" || key.name === "right" || isTabKey(key)) {
+      setYes(!yes);
+      return;
+    }
+    if (key.name === "y") {
+      finish(true);
+      return;
+    }
+    if (key.name === "n" || key.name === "escape") {
+      finish(false);
+    }
+  });
+
+  if (status === "done") {
+    return `${paint(color, BOLD, message)} ${paint(color, GREEN, yes ? "YES" : "NO")}`;
+  }
+  const help = paint(color, GRAY, "←→ 切换 · Enter 确认 · Esc 取消");
+  return `${paint(color, BOLD, message)}\n\n${renderConfirmLine(yes, { color, danger })}\n\n${help}`;
+});
+
+// ──────────────────────────────────────────────
+// 降级实现：编号输入（非 TTY / CI 环境）
+// ──────────────────────────────────────────────
+
+async function defaultLineInput(message, defaultValue = "") {
+  const rl = readline.createInterface({ input, output });
+  try {
+    const suffix = defaultValue ? ` (${defaultValue})` : "";
+    const answer = await rl.question(`${message}${suffix}: `);
+    return answer.trim() || defaultValue;
+  } finally {
+    rl.close();
+  }
+}
+
+function createFallbackPrompts({ promptInput, writeLine }) {
+  const ask = promptInput || defaultLineInput;
+  const print = writeLine || console.log;
+  return {
+    promptInput: ask,
+    async promptSelect(message, choices) {
+      while (true) {
+        print(message);
+        choices.forEach((choice, index) => {
+          print(`${index + 1}. ${choice.label}`);
+        });
+        const answer = String(await ask("请输入编号") ?? "").trim();
+        const index = Number(answer) - 1;
+        if (Number.isInteger(index) && choices[index]) {
+          return choices[index].value;
+        }
+        const matched = choices.find((choice) => choice.value === answer);
+        if (matched) {
+          return matched.value;
+        }
+        print("选择无效，请重新输入。");
+      }
+    },
+    async confirm(message, { defaultYes = false } = {}) {
+      const suffix = defaultYes ? "(Y/n)" : "(y/N)";
+      const answer = String(await ask(`${message} ${suffix}`) ?? "").trim().toLowerCase();
+      if (answer === "") {
+        return defaultYes;
+      }
+      return ["yes", "y", "确认", "是", "继续"].includes(answer);
+    },
+    multiSelect(options) {
+      return promptMultiSelect({ ...options, promptInput: ask, writeLine: print });
+    },
+  };
+}
+
+// ──────────────────────────────────────────────
+// 工厂：根据环境返回统一交互接口
+// ──────────────────────────────────────────────
+
+// Ctrl+C 在 @inquirer 中抛 ExitPromptError，统一转为优雅退出
+async function guardExit(run) {
+  try {
+    return await run();
+  } catch (error) {
+    if (error?.name === "ExitPromptError") {
+      process.exit(130);
+    }
+    throw error;
+  }
+}
+
+export function createPrompts({
+  interactive = isInteractive(),
+  color = true,
+  promptInput,
+  writeLine,
+} = {}) {
+  if (!interactive) {
+    return createFallbackPrompts({ promptInput, writeLine });
+  }
+  return {
+    promptInput: promptInput || defaultLineInput,
+    promptSelect: (message, choices) =>
+      guardExit(() => interactiveSelect({ message, choices, escValue: resolveEscValue(choices), color })),
+    confirm: (message, { defaultYes = false, danger = false } = {}) =>
+      guardExit(() => interactiveConfirm({ message, defaultYes, danger, color })),
+    multiSelect: ({ message, choices, preselected }) =>
+      guardExit(() => interactiveMultiSelect({ message, choices, preselected, color })),
+  };
+}

package/src/topup.js

@@ -1,3 +1,5 @@
+import { renderKeyValueTable, renderSectionTitle } from "./ui.js";
+
 export async function loadTopUpOptions(api) {
   if (!api) {
     throw new Error("缺少 API client");
@@ -5,12 +7,22 @@ export async function loadTopUpOptions(api) {
   return api.get("/api/cli/topup/options");
 }
 
+// 轮询状态默认走单行刷新（TTY 用 \r 覆盖整行），避免重复刷屏（优化需求第 6 节）；
+// 空文本表示轮询结束，清行收尾
+function defaultWriteStatus(text) {
+  if (!process.stdout.isTTY) {
+    return;
+  }
+  process.stdout.write(`\r${text || ""}`);
+}
+
 export async function runWechatTopUp({
   api,
   promptSelect,
   promptInput,
   renderQr = renderTerminalQr,
   writeLine = console.log,
+  writeStatus = defaultWriteStatus,
   sleep = defaultSleep,
   pollIntervalMs = 3000,
   maxPolls = 60,
@@ -30,16 +42,22 @@ export async function runWechatTopUp({
     throw new Error("创建微信充值订单失败");
   }
 
-  writeLine("请使用微信扫码支付");
+  // 订单信息边框包裹，二维码区域带标题与支付状态
+  writeLine(renderSectionTitle("微信扫码支付"));
+  writeLine(renderKeyValueTable([
+    ["订单号", String(order.order_id)],
+    ["金额", String(order.money_display || order.money || amount)],
+    ["支付方式", "微信扫码"],
+  ]));
+  writeLine("请使用微信扫码支付：");
   await printQrOrCodeUrl({ codeUrl: order.code_url, renderQr, writeLine });
-  writeLine(`订单金额：${order.money_display || order.money || amount}`);
-  writeLine("订单状态：等待支付...");
   const status = await waitTopUpPaid({
     api,
     orderId: order.order_id,
     sleep,
     pollIntervalMs,
     maxPolls,
+    writeStatus,
   });
   const balance = await api.get("/api/cli/me");
   return { order, status, balance };
@@ -54,7 +72,7 @@ async function chooseTopUpAmount({ options, promptSelect, promptInput }) {
       throw new Error("缺少充值金额选择输入");
     }
     const selected = await promptSelect("选择充值金额", amountOptions.map((amount) => ({
-      label: `${amount}`,
+      label: `¥${amount}`,
       value: amount,
     })));
     if (!amountOptions.includes(selected)) {
@@ -88,19 +106,24 @@ async function printQrOrCodeUrl({ codeUrl, renderQr, writeLine }) {
   }
 }
 
-async function waitTopUpPaid({ api, orderId, sleep, pollIntervalMs, maxPolls }) {
+async function waitTopUpPaid({ api, orderId, sleep, pollIntervalMs, maxPolls, writeStatus = () => {} }) {
   for (let attempt = 0; attempt < maxPolls; attempt += 1) {
     const status = await api.get(`/api/cli/topup/order?order_id=${encodeURIComponent(orderId)}`);
     if (status?.status === "success") {
+      writeStatus("");
       return status;
     }
     if (status?.status && status.status !== "pending") {
+      writeStatus("");
       throw new Error(`充值订单状态异常：${status.status}`);
     }
+    // 单行状态刷新，不向常规输出重复打印等待文本
+    writeStatus(`等待支付中… 已等待 ${Math.round(((attempt + 1) * pollIntervalMs) / 1000)}s`);
     if (attempt < maxPolls - 1) {
       await sleep(pollIntervalMs);
     }
   }
+  writeStatus("");
   throw new Error("等待微信支付超时");
 }
 

package/src/ui.js

@@ -135,3 +135,73 @@ export function renderSectionTitle(title, { color = false, width = 46 } = {}) {
   }
   return `${BORDER_COLOR}${lead}${RESET}${BOLD}${HEAD_COLOR}${label}${RESET}${BORDER_COLOR}${tail}${RESET}`;
 }
+
+// ──────────────────────────────────────────────
+// 统一页面组件（优化需求第 5 / 一.1 节）
+// ──────────────────────────────────────────────
+
+// 页面标题区：品牌名 + 当前页面名，统一边框样式
+export function renderHeader(title, { subtitle = "", color = false } = {}) {
+  const label = `Claude360 CLI · ${title}`;
+  const inner = Math.max(cellWidth(label), cellWidth(subtitle)) + 2;
+  const line = (text) => {
+    const body = ` ${padCell(text, inner - 2)} `;
+    if (!color) {
+      return `│${body}│`;
+    }
+    return `${BORDER_COLOR}│${RESET}${BOLD}${HEAD_COLOR}${body}${RESET}${BORDER_COLOR}│${RESET}`;
+  };
+  const edge = (left, right) => {
+    const text = `${left}${"─".repeat(inner)}${right}`;
+    return color ? `${BORDER_COLOR}${text}${RESET}` : text;
+  };
+  const lines = [edge("┌", "┐"), line(label)];
+  if (subtitle) {
+    lines.push(line(subtitle));
+  }
+  lines.push(edge("└", "┘"));
+  return lines.join("\n");
+}
+
+// 信息盒子：info / warn / error / success 四种状态，
+// 颜色只增强层级，状态始终有文字前缀（需求二「不依赖颜色表达唯一信息」）
+const BOX_KINDS = {
+  info: { mark: "i", color: fg(125, 211, 252) },
+  warn: { mark: "!", color: fg(250, 204, 21) },
+  error: { mark: "×", color: fg(248, 113, 113) },
+  success: { mark: "✓", color: fg(74, 222, 128) },
+};
+
+export function renderBox(message, { kind = "info", color = false, width = 0 } = {}) {
+  const { mark, color: kindColor } = BOX_KINDS[kind] || BOX_KINDS.info;
+  const rawLines = String(message ?? "").split("\n");
+  const textLines = rawLines.map((line, index) => (index === 0 ? `${mark} ${line}` : `  ${line}`));
+  const maxAvailable = width > 4 ? width - 4 : 0;
+  const fitted = textLines.map((line) => (maxAvailable ? truncateDisplay(line, maxAvailable) : line));
+  const inner = Math.max(...fitted.map((line) => cellWidth(line))) + 2;
+  const edge = (left, right) => {
+    const text = `${left}${"─".repeat(inner)}${right}`;
+    return color ? `${kindColor}${text}${RESET}` : text;
+  };
+  const lines = [edge("┌", "┐")];
+  for (const line of fitted) {
+    const body = ` ${padCell(line, inner - 2)} `;
+    lines.push(color ? `${kindColor}│${RESET}${body}${kindColor}│${RESET}` : `│${body}│`);
+  }
+  lines.push(edge("└", "┘"));
+  return lines.join("\n");
+}
+
+// 模型表（优化需求第 3 节）：展示后端返回的真实模型信息
+export function renderModelTable(models = [], { color = false, width = 0 } = {}) {
+  return renderTable({
+    head: ["模型 ID", "名称", "标签", "上下文", "说明"],
+    rows: models.map((model) => [
+      model.id ?? "-",
+      model.display_name || "-",
+      Array.isArray(model.tags) && model.tags.length > 0 ? model.tags.join(",") : "-",
+      model.context_length ? String(model.context_length) : "-",
+      model.description || "-",
+    ]),
+  }, { color, width });
+}