claude360 0.2.5 → 0.2.7

package/README.md

@@ -115,25 +115,37 @@ claude360
 
 ## 日常使用
 
+主菜单按分组展示，TTY 环境下用 **方向键 + Enter** 选择（Esc 返回）；非 TTY / CI 环境自动降级为编号输入，编号以实际输出为准：
+
 ```
-Claude360
-1. 查看余额
-2. 微信扫码充值
-3. 启动 Claude Code
-4. 启动 Codex
-5. 安装或更新工具
-6. 切换 API Key / 分组
-7. 诊断
-8. 退出
+请选择功能：
+─── 常用操作 ───
+❯ 启动 Claude Code        使用 Claude360 接入配置直接启动
+  启动 Codex              使用 Claude360 接入配置直接启动
+─── 账户与充值 ───
+  余额与充值              查看余额用量，支持微信扫码充值
+  切换 Key / 模型         切换当前 API Key 或默认模型
+  创建新的 API Key        在当前账号下新建一个 API Key
+  打开 Claude360 控制台   在浏览器中打开网页控制台
+─── Key / 模型 / MCP 配置 ───
+  Claude Code 配置        完整初始化、工作流、MCP、模型与记忆配置
+  Codex 配置              完整初始化、Provider、工作流与 MCP 配置
+  一键完整初始化          Claude Code / Codex 完整初始化向导
+  推荐 MCP / Skill        安装推荐的 MCP、工作流与 Skill 增强
+  生成 cc-switch 配置     生成可导入 cc-switch 的供应商配置
+─── 维护与设置 ───
+  安装或更新工具          安装或升级 Claude Code / Codex / 本 CLI
+  诊断与修复              一键诊断环境与配置问题并尝试修复
+  重新登录                清除本地登录态后重新浏览器授权
+  退出                    退出 claude360 CLI
 ```
 
-- **查看余额**：调用 `GET /api/cli/me`，展示账号、余额、已用、当前 Key 名称与分组。
-- **微信扫码充值**：先取 `/api/cli/topup/options`，按后端校验通过的金额或最低额提交，再用 `qrcode-terminal` 在终端渲染 `code_url`，渲染失败时降级为纯文本 URL。轮询 `/api/cli/topup/order?order_id=`，支付完成自动刷新余额。
+- **余额与充值**：调用 `GET /api/cli/me`，展示账号、余额、已用、当前 Key 名称与分组；充值先取 `/api/cli/topup/options`，按后端校验通过的金额或最低额提交，再用 `qrcode-terminal` 在终端渲染 `code_url`，渲染失败时降级为纯文本 URL。轮询 `/api/cli/topup/order?order_id=`，支付完成自动刷新余额。
 - **启动 Claude Code**：调用 `claude` 子进程，并通过 `ANTHROPIC_BASE_URL` + `ANTHROPIC_AUTH_TOKEN` 注入。
 - **启动 Codex**：写入 `~/.codex/config.toml` 中 `[model_providers.claude360]` 与 `[profiles.claude360]`，发现既有冲突字段会先要求用户确认再覆盖，然后 `codex --profile claude360`，并通过 `CLAUDE360_API_KEY` 注入。
 - **安装或更新工具**：三选一菜单（仅 Claude Code / 仅 Codex / 两者），每步都需要确认。
-- **切换 API Key / 分组**：重新进入 Token 向导。
-- **诊断**：见下方“诊断与故障排查”。
+- **切换 Key / 模型**：重新进入 Token 向导，或从 `/api/cli/models` 拉取真实模型列表选择默认模型。
+- **诊断与修复**：见下方“诊断与故障排查”。
 
 ## 本地配置
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude360",
-  "version": "0.2.5",
+  "version": "0.2.7",
   "description": "Interactive Claude360 CLI for browser auth, API key setup, balance checks, top-up, Claude Code and Codex launch.",
   "type": "module",
   "bin": {

package/src/banner.js

@@ -3,24 +3,13 @@
 // 渲染函数默认无色（color: false），保证测试与管道输出稳定；
 // 运行时由 index.js 通过 playBanner / 显式 color 参数开启彩色。
 
-export const BRAND_BASE_URL = "https://claude360.xyz";
-
-const ESC = "\u001b[";
-const RESET = `${ESC}0m`;
-const BOLD = `${ESC}1m`;
-const DIM = `${ESC}2m`;
+import { BOLD, DIM, ESC, RESET, colorEnabled, colorLevel, fg, toLevel } from "./colors.js";
 
-const fg = (r, g, b) => `${ESC}38;2;${r};${g};${b}m`;
+export const BRAND_BASE_URL = "https://claude360.xyz";
 
-export function colorEnabled(stream = process.stdout) {
-  if (process.env.NO_COLOR !== undefined && process.env.NO_COLOR !== "") {
-    return false;
-  }
-  if (process.env.FORCE_COLOR && process.env.FORCE_COLOR !== "0") {
-    return true;
-  }
-  return Boolean(stream && stream.isTTY);
-}
+// colorEnabled / colorLevel 由 colors.js 统一提供，这里 re-export，
+// 以保持 menu.js / index.js 从 banner.js 导入的既有路径不变。
+export { colorEnabled, colorLevel };
 
 const LOGO_LINES = [
   " ██████╗██╗      █████╗ ██╗   ██╗██████╗ ███████╗██████╗  ██████╗  ██████╗ ",
@@ -93,7 +82,7 @@ const LOGO_EDGE_CHARS = new Set(["╔", "╗", "╚", "╝", "║", "═"]);
 // style:
 //   gradient      —— 整行按列渐变（logo 行、边框行）
 //   text:<sgr>    —— 边框字符渐变，其余字符用固定 SGR 样式（标语行）
-function paintLine(line, { phase, totalWidth, style }) {
+function paintLine(line, { phase, totalWidth, style, level = 2 }) {
   let out = "";
   let col = 0;
   let lastColor = "";
@@ -118,7 +107,7 @@ function paintLine(line, { phase, totalWidth, style }) {
         g = Math.round(g * 0.55);
         b = Math.round(b * 0.55);
       }
-      color = fg(r, g, b);
+      color = fg(r, g, b, level);
     } else {
       color = style;
     }
@@ -165,16 +154,17 @@ function buildBannerLayout({ version, baseUrl }) {
 
 // 终端太窄放不下大 logo 时的紧凑版
 function renderCompactBanner({ version, baseUrl, color, phase }) {
+  const level = toLevel(color);
   const lines = [
     "Claude360 CLI · 模型站接入助手",
     SUBLINE,
     `版本 v${version || "-"}  ·  官网 ${baseUrl}`,
   ];
-  if (!color) {
+  if (!level) {
     return lines.join("\n");
   }
   return [
-    paintLine(lines[0], { phase, totalWidth: displayWidth(lines[0]), style: "gradient" }),
+    paintLine(lines[0], { phase, totalWidth: displayWidth(lines[0]), style: "gradient", level }),
     `${DIM}${lines[1]}${RESET}`,
     `${DIM}${lines[2]}${RESET}`,
   ].join("\n");
@@ -191,19 +181,20 @@ export function renderBanner({
   if (columns > 0 && columns < totalWidth) {
     return renderCompactBanner({ version, baseUrl, color, phase });
   }
-  if (!color) {
+  const level = toLevel(color);
+  if (!level) {
     return rows.map((row) => row.text).join("\n");
   }
   const styles = {
-    title: `${BOLD}${fg(240, 246, 255)}`,
-    sub: `${fg(148, 163, 184)}`,
+    title: `${BOLD}${fg(240, 246, 255, level)}`,
+    sub: `${fg(148, 163, 184, level)}`,
   };
   return rows.map((row) => {
     if (row.style === "footer") {
       return `${DIM}${row.text}${RESET}`;
     }
     const style = row.style === "gradient" ? "gradient" : styles[row.style];
-    return paintLine(row.text, { phase, totalWidth, style });
+    return paintLine(row.text, { phase, totalWidth, style, level });
   }).join("\n");
 }
 
@@ -218,11 +209,12 @@ export async function playBanner({
   sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms)),
 } = {}) {
   const columns = stream && stream.columns ? stream.columns : 0;
-  const animated = colorEnabled(stream)
+  const level = colorLevel(stream);
+  const animated = level > 0
     && typeof stream.write === "function"
     && (!columns || columns >= buildBannerLayout({ version, baseUrl }).totalWidth);
   if (!animated) {
-    const text = renderBanner({ version, baseUrl, color: colorEnabled(stream), columns });
+    const text = renderBanner({ version, baseUrl, color: level, columns });
     if (stream && typeof stream.write === "function") {
       stream.write(text + "\n");
     } else {
@@ -235,7 +227,7 @@ export async function playBanner({
   try {
     for (let i = 0; i <= frames; i += 1) {
       const phase = i / frames;
-      stream.write(renderBanner({ version, baseUrl, color: true, phase }) + "\n");
+      stream.write(renderBanner({ version, baseUrl, color: level, phase }) + "\n");
       if (i < frames) {
         await sleep(intervalMs);
         stream.write(`${ESC}${lineCount}A`);
@@ -259,11 +251,12 @@ const CHECK_COLORS = {
 export function formatCheckLine(status, text, { color = false } = {}) {
   const symbols = { ok: CHECK_OK, warn: CHECK_WARN, fail: CHECK_FAIL };
   const symbol = symbols[status] || CHECK_WARN;
-  if (!color) {
+  const level = toLevel(color);
+  if (!level) {
     return `${symbol} ${text}`;
   }
   const [r, g, b] = CHECK_COLORS[status] || CHECK_COLORS.warn;
-  return `${fg(r, g, b)}${BOLD}${symbol}${RESET} ${text}`;
+  return `${fg(r, g, b, level)}${BOLD}${symbol}${RESET} ${text}`;
 }
 
 export function renderEnvironmentChecks(checks = [], { color = false } = {}) {

package/src/colors.js

@@ -0,0 +1,93 @@
+// 终端色彩能力检测与着色：truecolor(2) / 256 色(1) / 无色(0) 三档自适应。
+// 统一被 banner.js / menu.js / ui.js / prompts.js 复用，消除各文件重复的
+// ESC / RESET / fg 定义。macOS Terminal.app 等仅支持 256 色的终端无法解析
+// 24-bit 真彩色序列（38;2;r;g;b）会出现颜色错乱，这里在 256 色档把 RGB
+// 量化到 xterm-256 调色板，既保留渐变观感又避免错乱。
+
+export const ESC = "[";
+export const RESET = `${ESC}0m`;
+export const BOLD = `${ESC}1m`;
+export const DIM = `${ESC}2m`;
+
+// 终端色彩深度：0=无色，1=256 色，2=真彩色（24-bit）。
+// 仅检测能力（是否上色 + 用多深的色），不负责方向键 UI 判定（见 prompts.isInteractive）。
+export function colorLevel(stream = process.stdout) {
+  const { NO_COLOR, FORCE_COLOR, COLORTERM, TERM } = process.env;
+  if (NO_COLOR !== undefined && NO_COLOR !== "") {
+    return 0;
+  }
+  let forced = false;
+  if (FORCE_COLOR !== undefined && FORCE_COLOR !== "") {
+    if (FORCE_COLOR === "0" || FORCE_COLOR === "false") {
+      return 0;
+    }
+    if (FORCE_COLOR === "1") {
+      return 1;
+    }
+    if (FORCE_COLOR === "2" || FORCE_COLOR === "3") {
+      return 2;
+    }
+    forced = true; // 其它非空值：强制上色，色深仍按下方终端能力判定
+  }
+  if (!forced && !(stream && stream.isTTY)) {
+    return 0;
+  }
+  const colorterm = String(COLORTERM || "").toLowerCase();
+  if (colorterm.includes("truecolor") || colorterm.includes("24bit")) {
+    return 2;
+  }
+  const term = String(TERM || "").toLowerCase();
+  if (/-direct|kitty|iterm/.test(term)) {
+    return 2;
+  }
+  // 其余可上色场景统一按 256 色处理（含 *-256color、空 TERM、dumb 等），
+  // 保证「isTTY 即至少 256 色」，使 banner 动画在各类 CI 的 TERM 下稳定触发。
+  return 1;
+}
+
+export function colorEnabled(stream = process.stdout) {
+  return colorLevel(stream) > 0;
+}
+
+// 把 render / prompt 的 color 入参（boolean | 0 | 1 | 2）归一为 level。
+// true → 2（真彩色），保证既有「color: true」调用与测试行为完全不变。
+export function toLevel(color) {
+  if (color === true) {
+    return 2;
+  }
+  if (!color) {
+    return 0;
+  }
+  const n = Number(color);
+  if (!Number.isFinite(n) || n <= 0) {
+    return 0;
+  }
+  return n >= 2 ? 2 : 1;
+}
+
+// 24-bit RGB 量化到 xterm-256 调色板：232-255 灰阶 + 16-231 的 6×6×6 立方。
+export function rgbToAnsi256(r, g, b) {
+  if (r === g && g === b) {
+    if (r < 8) {
+      return 16;
+    }
+    if (r > 248) {
+      return 231;
+    }
+    return Math.round(((r - 8) / 247) * 24) + 232;
+  }
+  const q = (v) => Math.round((v / 255) * 5);
+  return 16 + 36 * q(r) + 6 * q(g) + q(b);
+}
+
+// 前景色：按 level 输出真彩色 / 256 色 / 空串。level 默认 2，
+// 使任何未显式降级的调用安全回退为真彩色（与改造前行为一致）。
+export function fg(r, g, b, level = 2) {
+  if (level >= 2) {
+    return `${ESC}38;2;${r};${g};${b}m`;
+  }
+  if (level === 1) {
+    return `${ESC}38;5;${rgbToAnsi256(r, g, b)}m`;
+  }
+  return "";
+}

package/src/index.js

@@ -6,7 +6,7 @@ import path from "node:path";
 import { ApiClient } from "./api-client.js";
 import { authenticateWithBrowser } from "./auth.js";
 import { formatAccountStatus, loadAccountStatus } from "./account-status.js";
-import { colorEnabled, formatCheckLine, playBanner, renderBanner } from "./banner.js";
+import { colorLevel, formatCheckLine, playBanner, renderBanner } from "./banner.js";
 import { runCcSwitchGenerator } from "./cc-switch.js";
 import { createConfigStore } from "./config-store.js";
 import { createPrompts, isInteractive } from "./prompts.js";
@@ -127,6 +127,9 @@ export async function runCli({
     }
   }
   multiSelectInput = multiSelectInput || promptMultiSelect;
+  // 覆盖 ~/.codex/config.toml 冲突字段属于危险操作：默认 NO，
+  // 交互模式下 NO 使用危险色高亮（审查 P2-3）
+  const confirmDanger = (message) => confirm(message, { danger: true });
 
   if (showBanner) {
     if (fancyOutput) {
@@ -497,7 +500,7 @@ export async function runCli({
       installWorkflows: () => installCodexWfs({ codexDir, multiSelect, confirm, writeLine }),
       configureProvider: async () => {
         await ensureApiKey();
-        await configureCodex({ config, confirmConflict: confirm, writeLine });
+        await configureCodex({ config, confirmConflict: confirmDanger, writeLine });
         await markConfigured("codex");
         writeLine("✓ 已写入 Codex claude360 provider/profile（~/.codex/config.toml）");
       },
@@ -640,7 +643,7 @@ export async function runCli({
     }
     await markConfigured("codex");
     writeLine("正在启动 Codex...");
-    await launchCodex({ config, confirmConflict: confirm, writeLine });
+    await launchCodex({ config, confirmConflict: confirmDanger, writeLine });
     return true;
   }
 
@@ -651,7 +654,7 @@ export async function runCli({
       return false;
     }
     await ensureApiKey();
-    await configureCodex({ config, confirmConflict: confirm, writeLine });
+    await configureCodex({ config, confirmConflict: confirmDanger, writeLine });
     await markConfigured("codex");
     writeLine("✓ 已写入 Codex claude360 provider/profile（~/.codex/config.toml）");
     return true;

package/src/init-config.js

@@ -205,7 +205,8 @@ export const FALLBACK_CLAUDE_ALIASES = [
 ];
 
 // 后端接口 GET /api/cli/models?tool=<claude_code|codex>：
-// { models: [{ id, display_name, description, tags, recommended, context_length }] }
+// { models: [{ id, display_name, description, tags, recommended }] }
+// （后端暂无上下文长度数据源，契约中不含 context_length）
 export async function loadAvailableModels(api, tool = "") {
   if (api && typeof api.get === "function") {
     try {

package/src/mcp-skill.js

@@ -78,16 +78,24 @@ 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),
-  );
+// 安全边界：远程接口只允许下发展示层元数据（label / desc / recommended /
+// platforms），安装命令（claudeArgs / codex）必须来自 CLI 内置受信清单；
+// 未知 id 直接丢弃，防止后端被攻破或响应被篡改时执行任意命令。
+export function normalizeRemoteMcp(mcp) {
+  if (!mcp || typeof mcp.id !== "string") {
+    return null;
+  }
+  const builtin = RECOMMENDED_MCPS.find((item) => item.id === mcp.id);
+  if (!builtin) {
+    return null;
+  }
+  return {
+    ...builtin,
+    label: typeof mcp.label === "string" && mcp.label !== "" ? mcp.label : builtin.label,
+    desc: typeof mcp.desc === "string" ? mcp.desc : builtin.desc,
+    recommended: Boolean(mcp.recommended ?? builtin.recommended),
+    platforms: typeof mcp.platforms === "string" ? mcp.platforms : builtin.platforms,
+  };
 }
 
 // MCP 列表远程优先（优化需求第 4 节）：GET /api/cli/mcps 返回
@@ -97,7 +105,9 @@ 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);
+      const mcps = (Array.isArray(data?.mcps) ? data.mcps : [])
+        .map(normalizeRemoteMcp)
+        .filter(Boolean);
       if (mcps.length > 0) {
         return { mcps, source: "remote" };
       }

package/src/menu.js

@@ -4,18 +4,19 @@
 // 渲染默认无色（color: false）以保证测试与管道输出稳定，
 // 真实终端下由 promptMenu 自动开启彩色分区样式。
 
-import { colorEnabled, displayWidth } from "./banner.js";
+import { displayWidth } from "./banner.js";
+import { BOLD, RESET, colorLevel, fg, toLevel } from "./colors.js";
 
-const ESC = "\u001b[";
-const RESET = `${ESC}0m`;
-const BOLD = `${ESC}1m`;
-const fg = (r, g, b) => `${ESC}38;2;${r};${g};${b}m`;
-
-const RULE_COLOR = fg(71, 85, 105);      // 分隔线：青灰
-const SECTION_COLOR = fg(34, 211, 238);  // 分区标题：亮青
-const KEY_COLOR = fg(125, 211, 252);     // 选择键：天蓝
-const EXIT_COLOR = fg(248, 113, 113);    // 退出键：红
-const DESC_COLOR = fg(100, 116, 139);    // 功能说明：暗灰
+// 分区/选择键配色：按色彩深度 level 现算（真彩色保留 RGB，256 色量化到调色板）。
+function palette(level) {
+  return {
+    rule: fg(71, 85, 105, level),     // 分隔线：青灰
+    section: fg(34, 211, 238, level), // 分区标题：亮青
+    key: fg(125, 211, 252, level),    // 选择键：天蓝
+    exit: fg(248, 113, 113, level),   // 退出键：红
+    desc: fg(100, 116, 139, level),   // 功能说明：暗灰
+  };
+}
 const MENU_RULE_WIDTH = 46;
 
 export function buildFirstRunMenu() {
@@ -88,36 +89,41 @@ export function buildDailyMenu() {
 
 // 分区标题渲染为 `─── 标题 ──────…` 形式的分隔线，让各组功能在视觉上彼此分开
 function renderSectionRule(title, color) {
+  const level = toLevel(color);
   const lead = "───";
   const label = ` ${title} `;
   const tail = "─".repeat(Math.max(4, MENU_RULE_WIDTH - lead.length - displayWidth(label)));
-  if (!color) {
+  if (!level) {
     return `${lead}${label}${tail}`;
   }
-  return `${RULE_COLOR}${lead}${RESET}${BOLD}${SECTION_COLOR}${label}${RESET}${RULE_COLOR}${tail}${RESET}`;
+  const c = palette(level);
+  return `${c.rule}${lead}${RESET}${BOLD}${c.section}${label}${RESET}${c.rule}${tail}${RESET}`;
 }
 
 function renderItem(item, color) {
+  const level = toLevel(color);
   const desc = item.desc ? ` - ${item.desc}` : "";
-  if (!color) {
+  if (!level) {
     return `  ${item.key}. ${item.label}${desc}`;
   }
-  const keyColor = item.value === "exit" ? EXIT_COLOR : KEY_COLOR;
-  const coloredDesc = desc ? `${DESC_COLOR}${desc}${RESET}` : "";
+  const c = palette(level);
+  const keyColor = item.value === "exit" ? c.exit : c.key;
+  const coloredDesc = desc ? `${c.desc}${desc}${RESET}` : "";
   return `  ${BOLD}${keyColor}${item.key}.${RESET} ${item.label}${coloredDesc}`;
 }
 
 export function renderMenu(menu, { color = false } = {}) {
+  const level = toLevel(color);
   const lines = [];
   if (menu.title) {
-    lines.push(color ? `${BOLD}${menu.title}${RESET}` : menu.title, "");
+    lines.push(level ? `${BOLD}${menu.title}${RESET}` : menu.title, "");
   }
   for (const section of menu.sections) {
     if (section.title) {
-      lines.push(renderSectionRule(section.title, color));
+      lines.push(renderSectionRule(section.title, level));
     }
     for (const item of section.items) {
-      lines.push(renderItem(item, color));
+      lines.push(renderItem(item, level));
     }
     lines.push("");
   }
@@ -155,7 +161,7 @@ export async function promptMenu({ menu, promptInput, select, writeLine = consol
     throw new Error("缺少菜单输入");
   }
   // 仅在输出未被测试替换且终端支持时启用彩色
-  const color = writeLine === console.log && colorEnabled();
+  const color = writeLine === console.log ? colorLevel() : 0;
   while (true) {
     writeLine(renderMenu(menu, { color }));
     const answer = await promptInput("请输入选项");

package/src/prompts.js

@@ -20,21 +20,28 @@ import {
 
 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);   // 完成态答案
+import { BOLD, RESET, colorLevel, fg, toLevel } from "./colors.js";
 
-const paint = (color, sgr, text) => (color ? `${sgr}${text}${RESET}` : text);
+// 交互配色：按色彩深度 level 现算（真彩色保留 RGB，256 色量化到调色板）。
+function palette(level) {
+  return {
+    cyan: fg(34, 211, 238, level),  // 品牌高亮：选中项
+    red: fg(248, 113, 113, level),  // 危险操作：NO 高亮
+    gray: fg(100, 116, 139, level), // 次要说明 / 未选中项
+    green: fg(74, 222, 128, level), // 完成态答案
+  };
+}
+
+const paint = (level, sgr, text) => (level ? `${sgr}${text}${RESET}` : text);
 
 export function isInteractive(stream = process.stdout) {
   if (process.env.CI) {
     return false;
   }
+  // TERM=dumb 的终端可能是 TTY，但不支持方向键 UI 与 ANSI 光标控制
+  if (process.env.TERM === "dumb") {
+    return false;
+  }
   return Boolean(stream && stream.isTTY && process.stdin.isTTY);
 }
 
@@ -47,12 +54,14 @@ export function resolveEscValue(choices = []) {
 // 确认行：选中项大写、加粗、高亮并带箭头；未选中项小写灰色（需求第四节）。
 // 终端无法局部放大字体，用大小写 + 颜色 + 箭头模拟视觉差异。
 export function renderConfirmLine(yesActive, { color = true, danger = false } = {}) {
+  const level = toLevel(color);
+  const c = palette(level);
   const yes = yesActive
-    ? paint(color, `${BOLD}${CYAN}`, "▶ YES ◀")
-    : paint(color, GRAY, "yes");
+    ? paint(level,`${BOLD}${c.cyan}`, "▶ YES ◀")
+    : paint(level,c.gray, "yes");
   const no = !yesActive
-    ? paint(color, `${BOLD}${danger ? RED : CYAN}`, "▶ NO ◀")
-    : paint(color, GRAY, "no");
+    ? paint(level,`${BOLD}${danger ? c.red : c.cyan}`, "▶ NO ◀")
+    : paint(level,c.gray, "no");
   return `   ${yes}     ${no}`;
 }
 
@@ -62,12 +71,30 @@ export function renderConfirmLine(yesActive, { color = true, danger = false } =
 
 const PAGE_SIZE = 14;
 
+// 防御：调用方传入空列表或全部为分隔行时，方向键取模运算会得到 NaN 或
+// 进入同步死循环，回车会访问 undefined.value。统一在渲染前抛出可读错误。
+function getSelectableIndexes(choices = []) {
+  return choices
+    .map((choice, index) => (choice && !choice.separator ? index : -1))
+    .filter((index) => index >= 0);
+}
+
+function assertSelectableChoices(message, choices) {
+  const indexes = getSelectableIndexes(choices);
+  if (indexes.length === 0) {
+    throw new Error(`${message || "选择列表"}缺少可选择项`);
+  }
+  return indexes;
+}
+
 // 单选：方向键移动（跳过分隔行）、回车确认、Esc 返回 escValue
 export const interactiveSelect = createPrompt((config, done) => {
-  const { message, choices, escValue, color = true } = config;
+  const { message, choices = [], escValue, color = true } = config;
+  const level = toLevel(color);
+  const c = palette(level);
+  const selectable = assertSelectableChoices(message, choices);
   const [status, setStatus] = useState("idle");
-  const firstIndex = choices.findIndex((choice) => !choice.separator);
-  const [active, setActive] = useState(Math.max(firstIndex, 0));
+  const [active, setActive] = useState(selectable[0]);
 
   useKeypress((key) => {
     if (status === "done") {
@@ -79,12 +106,9 @@ export const interactiveSelect = createPrompt((config, done) => {
       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);
+      const delta = isUpKey(key) ? -1 : 1;
+      const pos = selectable.indexOf(active);
+      setActive(selectable[(pos + delta + selectable.length) % selectable.length]);
       return;
     }
     if (key.name === "escape" && escValue !== undefined) {
@@ -94,7 +118,7 @@ export const interactiveSelect = createPrompt((config, done) => {
   });
 
   if (status === "done") {
-    return `${paint(color, BOLD, message)} ${paint(color, GREEN, choices[active]?.separator ? "" : String(choices[active]?.label ?? ""))}`;
+    return `${paint(level,BOLD, message)} ${paint(level,c.green, choices[active]?.separator ? "" : String(choices[active]?.label ?? ""))}`;
   }
 
   const page = usePagination({
@@ -104,22 +128,27 @@ export const interactiveSelect = createPrompt((config, done) => {
     loop: false,
     renderItem({ item, isActive }) {
       if (item.separator) {
-        return paint(color, GRAY, item.separator);
+        return paint(level,c.gray, item.separator);
       }
-      const hint = item.hint ? `  ${paint(color, GRAY, item.hint)}` : "";
+      const hint = item.hint ? `  ${paint(level,c.gray, item.hint)}` : "";
       if (isActive) {
-        return `${paint(color, `${BOLD}${CYAN}`, `❯ ${item.label}`)}${hint}`;
+        return `${paint(level,`${BOLD}${c.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}`;
+  const help = paint(level,c.gray, `↑↓ 移动 · Enter 确认${escValue !== undefined ? " · Esc 返回" : ""}`);
+  return `${paint(level,BOLD, message)}\n${page}\n${help}`;
 });
 
 // 多选：空格选择/取消、a 全选、i 反选、回车确认、Esc 取消（需求第 4 节）
 export const interactiveMultiSelect = createPrompt((config, done) => {
-  const { message, choices, preselected = [], color = true } = config;
+  const { message, choices = [], preselected = [], color = true } = config;
+  const level = toLevel(color);
+  const c = palette(level);
+  if (choices.length === 0) {
+    throw new Error(`${message || "多选列表"}缺少可选择项`);
+  }
   const [status, setStatus] = useState("idle");
   const [active, setActive] = useState(0);
   const [selected, setSelected] = useState(
@@ -169,7 +198,7 @@ export const interactiveMultiSelect = createPrompt((config, done) => {
   });
 
   if (status === "done") {
-    return `${paint(color, BOLD, message)} ${paint(color, GREEN, `已选 ${selected.size} 项`)}`;
+    return `${paint(level,BOLD, message)} ${paint(level,c.green, `已选 ${selected.size} 项`)}`;
   }
 
   const page = usePagination({
@@ -178,20 +207,22 @@ export const interactiveMultiSelect = createPrompt((config, done) => {
     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}`;
+      const mark = selected.has(item.value) ? paint(level,c.green, "[x]") : "[ ]";
+      const hint = item.hint ? `  ${paint(level,c.gray, item.hint)}` : "";
+      const label = isActive ? paint(level,`${BOLD}${c.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}`;
+  const help = paint(level,c.gray, "↑↓ 移动 · 空格 选择 · a 全选 · i 反选 · Enter 确认 · Esc 取消");
+  return `${paint(level,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 level = toLevel(color);
+  const c = palette(level);
   const [status, setStatus] = useState("idle");
   const [yes, setYes] = useState(Boolean(defaultYes));
 
@@ -223,10 +254,10 @@ export const interactiveConfirm = createPrompt((config, done) => {
   });
 
   if (status === "done") {
-    return `${paint(color, BOLD, message)} ${paint(color, GREEN, yes ? "YES" : "NO")}`;
+    return `${paint(level,BOLD, message)} ${paint(level,c.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}`;
+  const help = paint(level,c.gray, "←→ 切换 · Enter 确认 · Esc 取消");
+  return `${paint(level,BOLD, message)}\n\n${renderConfirmLine(yes, { color, danger })}\n\n${help}`;
 });
 
 // ──────────────────────────────────────────────
@@ -299,7 +330,7 @@ async function guardExit(run) {
 
 export function createPrompts({
   interactive = isInteractive(),
-  color = true,
+  color = colorLevel(),
   promptInput,
   writeLine,
 } = {}) {

package/src/ui.js

@@ -5,12 +5,15 @@
 
 import { displayWidth } from "./banner.js";
 
-const ESC = "\u001b[";
-const RESET = `${ESC}0m`;
-const BOLD = `${ESC}1m`;
-const fg = (r, g, b) => `${ESC}38;2;${r};${g};${b}m`;
-const BORDER_COLOR = fg(71, 85, 105);
-const HEAD_COLOR = fg(125, 211, 252);
+import { BOLD, RESET, fg, toLevel } from "./colors.js";
+
+// 表格/标题配色：按色彩深度 level 现算（真彩色保留 RGB，256 色量化到调色板）。
+function palette(level) {
+  return {
+    border: fg(71, 85, 105, level), // 边框：青灰
+    head: fg(125, 211, 252, level), // 表头：天蓝
+  };
+}
 
 // eslint-disable-next-line no-control-regex
 const ANSI_PATTERN = /\u001b\[[0-9;]*m/g;
@@ -47,17 +50,18 @@ function padCell(text, width) {
   return `${text}${" ".repeat(gap)}`;
 }
 
-function borderLine(widths, [left, mid, right], color) {
+function borderLine(widths, [left, mid, right], level) {
   const line = `${left}${widths.map((w) => "─".repeat(w + 2)).join(mid)}${right}`;
-  return color ? `${BORDER_COLOR}${line}${RESET}` : line;
+  return level ? `${palette(level).border}${line}${RESET}` : line;
 }
 
-function contentLine(cells, widths, { color, bold = false } = {}) {
-  const bar = color ? `${BORDER_COLOR}│${RESET}` : "│";
+function contentLine(cells, widths, { level = 0, bold = false } = {}) {
+  const c = level ? palette(level) : null;
+  const bar = level ? `${c.border}│${RESET}` : "│";
   const body = cells
     .map((cell, i) => {
       const padded = padCell(cell, widths[i]);
-      return bold && color ? ` ${BOLD}${HEAD_COLOR}${padded}${RESET} ` : ` ${padded} `;
+      return bold && level ? ` ${BOLD}${c.head}${padded}${RESET} ` : ` ${padded} `;
     })
     .join(bar);
   return `${bar}${body}${bar}`;
@@ -93,17 +97,18 @@ function resolveWidths(head, rows, width) {
 }
 
 export function renderTable({ head = [], rows = [] } = {}, { color = false, width = 0 } = {}) {
+  const level = toLevel(color);
   const widths = resolveWidths(head, rows, width);
   const fit = (row) => widths.map((w, i) => truncateDisplay(row[i] ?? "", w));
-  const lines = [borderLine(widths, ["┌", "┬", "┐"], color)];
+  const lines = [borderLine(widths, ["┌", "┬", "┐"], level)];
   if (head.length > 0) {
-    lines.push(contentLine(fit(head), widths, { color, bold: true }));
-    lines.push(borderLine(widths, ["├", "┼", "┤"], color));
+    lines.push(contentLine(fit(head), widths, { level, bold: true }));
+    lines.push(borderLine(widths, ["├", "┼", "┤"], level));
   }
   for (const row of rows) {
-    lines.push(contentLine(fit(row), widths, { color }));
+    lines.push(contentLine(fit(row), widths, { level }));
   }
-  lines.push(borderLine(widths, ["└", "┴", "┘"], color));
+  lines.push(borderLine(widths, ["└", "┴", "┘"], level));
   return lines.join("\n");
 }
 
@@ -127,13 +132,15 @@ export function renderStatusTable({ head = [], row = [] } = {}, { color = false,
 
 // 章节标题：与 menu.js 分区分隔线风格一致
 export function renderSectionTitle(title, { color = false, width = 46 } = {}) {
+  const level = toLevel(color);
   const lead = "───";
   const label = ` ${title} `;
   const tail = "─".repeat(Math.max(4, width - lead.length - displayWidth(label)));
-  if (!color) {
+  if (!level) {
     return `${lead}${label}${tail}`;
   }
-  return `${BORDER_COLOR}${lead}${RESET}${BOLD}${HEAD_COLOR}${label}${RESET}${BORDER_COLOR}${tail}${RESET}`;
+  const c = palette(level);
+  return `${c.border}${lead}${RESET}${BOLD}${c.head}${label}${RESET}${c.border}${tail}${RESET}`;
 }
 
 // ──────────────────────────────────────────────
@@ -142,18 +149,20 @@ export function renderSectionTitle(title, { color = false, width = 46 } = {}) {
 
 // 页面标题区：品牌名 + 当前页面名，统一边框样式
 export function renderHeader(title, { subtitle = "", color = false } = {}) {
+  const level = toLevel(color);
+  const c = level ? palette(level) : null;
   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) {
+    if (!level) {
       return `│${body}│`;
     }
-    return `${BORDER_COLOR}│${RESET}${BOLD}${HEAD_COLOR}${body}${RESET}${BORDER_COLOR}│${RESET}`;
+    return `${c.border}│${RESET}${BOLD}${c.head}${body}${RESET}${c.border}│${RESET}`;
   };
   const edge = (left, right) => {
     const text = `${left}${"─".repeat(inner)}${right}`;
-    return color ? `${BORDER_COLOR}${text}${RESET}` : text;
+    return level ? `${c.border}${text}${RESET}` : text;
   };
   const lines = [edge("┌", "┐"), line(label)];
   if (subtitle) {
@@ -165,15 +174,20 @@ export function renderHeader(title, { subtitle = "", color = false } = {}) {
 
 // 信息盒子：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) },
+// 四种状态：文字前缀（mark）始终存在，颜色仅增强层级（需求二「不依赖颜色表达唯一信息」）
+const BOX_MARKS = { info: "i", warn: "!", error: "×", success: "✓" };
+const BOX_RGB = {
+  info: [125, 211, 252],
+  warn: [250, 204, 21],
+  error: [248, 113, 113],
+  success: [74, 222, 128],
 };
 
 export function renderBox(message, { kind = "info", color = false, width = 0 } = {}) {
-  const { mark, color: kindColor } = BOX_KINDS[kind] || BOX_KINDS.info;
+  const level = toLevel(color);
+  const mark = BOX_MARKS[kind] || BOX_MARKS.info;
+  const [r, g, b] = BOX_RGB[kind] || BOX_RGB.info;
+  const kindColor = fg(r, g, b, level);
   const rawLines = String(message ?? "").split("\n");
   const textLines = rawLines.map((line, index) => (index === 0 ? `${mark} ${line}` : `  ${line}`));
   const maxAvailable = width > 4 ? width - 4 : 0;
@@ -181,26 +195,27 @@ export function renderBox(message, { kind = "info", color = false, width = 0 } =
   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;
+    return level ? `${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(level ? `${kindColor}│${RESET}${body}${kindColor}│${RESET}` : `│${body}│`);
   }
   lines.push(edge("└", "┘"));
   return lines.join("\n");
 }
 
-// 模型表（优化需求第 3 节）：展示后端返回的真实模型信息
+// 模型表（优化需求第 3 节）：展示后端返回的真实模型信息。
+// 字段契约与 /api/cli/models 对齐：id / display_name / tags / description；
+// 后端暂无上下文长度数据源，不渲染“上下文”列，名称列回退模型 ID。
 export function renderModelTable(models = [], { color = false, width = 0 } = {}) {
   return renderTable({
-    head: ["模型 ID", "名称", "标签", "上下文", "说明"],
+    head: ["模型 ID", "名称", "标签", "说明"],
     rows: models.map((model) => [
       model.id ?? "-",
-      model.display_name || "-",
+      model.display_name || model.id || "-",
       Array.isArray(model.tags) && model.tags.length > 0 ? model.tags.join(",") : "-",
-      model.context_length ? String(model.context_length) : "-",
       model.description || "-",
     ]),
   }, { color, width });