feat: localize gui console

Author: JinFanZheng

CHANGELOG.md

@@ -5,6 +5,7 @@
 ### Added
 
 - `web-tools gui` local-only management console for setup status, provider/env management, smoke tests, diagnostics export, and Agent handoff commands.
+- GUI language detection with Chinese UI for `zh*` browser languages and English fallback for all other languages.
 - `web-tools setup --check --json` readiness report with non-sensitive repair suggestions for CLI and GUI consumers.
 - `web-tools setup` for one-command Agent setup, optional provider configuration, skill install, and doctor checks.
 - User env file auto-loading from `~/.config/web-tools/.env`, with `WEB_TOOLS_ENV` override support.

README.md

@@ -170,6 +170,8 @@ web-tools gui --no-open --port 0
 
 The GUI binds to `127.0.0.1` by default. It can inspect setup readiness, configure the BigModel provider, write `~/.config/web-tools/.env`, run basic search/reader smoke tests, export non-sensitive diagnostics, and generate Agent handoff commands. It never displays or returns secret values; `config.json` stores only environment variable names such as `ZHIPU_APIKEY`.
 
+The GUI follows the browser language by default: Chinese browsers get Chinese UI, all other languages default to English. A language selector is available in the header.
+
 For agents and scripts, prefer the non-interactive CLI:
 
 ```bash

README.zh-CN.md

@@ -171,6 +171,8 @@ GUI 默认绑定 `127.0.0.1`。它可以检查 setup 状态、配置 BigModel pr
 
 GUI 不展示、不返回 secret 明文；`config.json` 只保存 `ZHIPU_APIKEY` 这样的环境变量名，不保存 token 值。
 
+GUI 默认跟随浏览器语言：中文浏览器显示中文，其他语言默认显示英文；页面右上角也可以手动切换语言。
+
 Agent 和脚本默认仍然应该使用非交互 CLI：
 
 ```bash

internal/gui/assets/app.js

@@ -1,10 +1,122 @@
 const state = {
   status: null,
   guide: null,
+  lang: detectLanguage(),
 };
 
 const $ = (id) => document.getElementById(id);
 
+const messages = {
+  en: {
+    appTitle: "Local Console",
+    languageLabel: "Language",
+    setupStatus: "Setup Status",
+    refresh: "Refresh",
+    provider: "Provider",
+    pending: "pending",
+    authEnv: "Auth env",
+    searchAuto: "Search auto",
+    readerFallback: "Reader fallback",
+    saveProvider: "Save Provider",
+    envFile: "Env File",
+    key: "Key",
+    value: "Value",
+    overwrite: "Overwrite",
+    saveEnv: "Save Env",
+    searchTest: "Search Test",
+    query: "Query",
+    runSearch: "Run Search",
+    readerTest: "Reader Test",
+    runReader: "Run Reader",
+    agentGuide: "Agent Guide",
+    copy: "Copy",
+    copied: "Copied",
+    diagnostics: "Diagnostics",
+    exportJson: "Export JSON",
+    version: "version",
+    skillInstalled: "skill installed",
+    skillMissing: "skill missing",
+    authReady: "auth ready",
+    authMissing: "auth missing",
+    readerAutoOn: "reader auto on",
+    readerAutoOff: "reader auto off",
+    configured: "configured",
+    missing: "missing",
+    repository: "Repository",
+    installCLI: "Install CLI",
+    installSkill: "Install or update skill",
+    check: "Check",
+    usage: "Usage",
+    readerAuto: "Reader auto",
+    repair: "Repair",
+  },
+  zh: {
+    appTitle: "本地控制台",
+    languageLabel: "语言",
+    setupStatus: "设置状态",
+    refresh: "刷新",
+    provider: "Provider",
+    pending: "待检查",
+    authEnv: "认证环境变量",
+    searchAuto: "搜索自动链",
+    readerFallback: "读取 fallback",
+    saveProvider: "保存 Provider",
+    envFile: "Env 文件",
+    key: "键",
+    value: "值",
+    overwrite: "覆盖已有值",
+    saveEnv: "保存 Env",
+    searchTest: "搜索测试",
+    query: "查询",
+    runSearch: "运行搜索",
+    readerTest: "读取测试",
+    runReader: "运行读取",
+    agentGuide: "Agent 指引",
+    copy: "复制",
+    copied: "已复制",
+    diagnostics: "诊断",
+    exportJson: "导出 JSON",
+    version: "版本",
+    skillInstalled: "skill 已安装",
+    skillMissing: "skill 缺失",
+    authReady: "认证可用",
+    authMissing: "认证缺失",
+    readerAutoOn: "reader auto 已启用",
+    readerAutoOff: "reader auto 未启用",
+    configured: "已配置",
+    missing: "缺失",
+    repository: "仓库",
+    installCLI: "安装 CLI",
+    installSkill: "安装或更新 skill",
+    check: "检查",
+    usage: "使用示例",
+    readerAuto: "Reader auto",
+    repair: "修复建议",
+  },
+};
+
+function t(key) {
+  return messages[state.lang][key] || messages.en[key] || key;
+}
+
+function detectLanguage() {
+  const saved = localStorage.getItem("web-tools-language");
+  if (saved === "zh" || saved === "en") return saved;
+  const langs = navigator.languages && navigator.languages.length ? navigator.languages : [navigator.language || "en"];
+  return langs.some((lang) => String(lang).toLowerCase().startsWith("zh")) ? "zh" : "en";
+}
+
+function applyLanguage() {
+  document.documentElement.lang = state.lang === "zh" ? "zh-CN" : "en";
+  document.title = state.lang === "zh" ? "web-tools 控制台" : "web-tools console";
+  document.querySelectorAll("[data-i18n]").forEach((el) => {
+    el.textContent = t(el.dataset.i18n);
+  });
+  $("refresh").title = t("refresh");
+  const selector = $("language-select");
+  selector.value = state.lang;
+}
+
 async function api(path, options = {}) {
   const res = await fetch(path, {
     headers: { "Content-Type": "application/json" },
@@ -30,15 +142,15 @@ function renderStatus(data) {
   const setup = data.setup;
   $("summary").innerHTML = "";
   $("summary").append(
-    pill(`version ${data.version || "dev"}`, "ok"),
-    pill(setup.skill.installed ? "skill installed" : "skill missing", setup.skill.installed ? "ok" : "warn"),
-    pill(setup.provider.auth_configured ? "auth ready" : "auth missing", setup.provider.auth_configured ? "ok" : "warn"),
-    pill(setup.reader_auto.contains ? "reader auto on" : "reader auto off", setup.reader_auto.contains ? "ok" : "warn"),
+    pill(`${t("version")} ${data.version || "dev"}`, "ok"),
+    pill(setup.skill.installed ? t("skillInstalled") : t("skillMissing"), setup.skill.installed ? "ok" : "warn"),
+    pill(setup.provider.auth_configured ? t("authReady") : t("authMissing"), setup.provider.auth_configured ? "ok" : "warn"),
+    pill(setup.reader_auto.contains ? t("readerAutoOn") : t("readerAutoOff"), setup.reader_auto.contains ? "ok" : "warn"),
   );
 
-  $("provider-pill").textContent = setup.provider.configured ? "configured" : "missing";
+  $("provider-pill").textContent = setup.provider.configured ? t("configured") : t("missing");
   $("provider-pill").className = `pill ${setup.provider.configured ? "ok" : "warn"}`;
-  $("env-pill").textContent = setup.env_file.user_exists ? setup.env_file.user_permission : "missing";
+  $("env-pill").textContent = setup.env_file.user_exists ? setup.env_file.user_permission : t("missing");
   $("env-pill").className = `pill ${setup.env_file.user_permission === "ok" ? "ok" : "warn"}`;
 
   $("checks").innerHTML = setup.checks
@@ -57,25 +169,25 @@ function renderStatus(data) {
 
 function renderGuide(guide) {
   const lines = [
-    `Repository: ${guide.repository_url}`,
+    `${t("repository")}: ${guide.repository_url}`,
     "",
-    "Install CLI:",
+    `${t("installCLI")}:`,
     ...guide.install_cli.map((line) => `  ${line}`),
     "",
-    "Install or update skill:",
+    `${t("installSkill")}:`,
     ...guide.install_skill.map((line) => `  ${line}`),
     "",
-    "Check:",
+    `${t("check")}:`,
     ...guide.check_commands.map((line) => `  ${line}`),
     "",
-    "Usage:",
+    `${t("usage")}:`,
     ...guide.usage_examples.map((line) => `  ${line}`),
   ];
   if (guide.reader_auto_note) {
-    lines.push("", `Reader auto: ${guide.reader_auto_note}`);
+    lines.push("", `${t("readerAuto")}: ${guide.reader_auto_note}`);
   }
   if (guide.repair_commands && guide.repair_commands.length) {
-    lines.push("", "Repair:");
+    lines.push("", `${t("repair")}:`);
     guide.repair_commands.forEach((item) => {
       lines.push(`  # ${item.message}`, `  ${item.command}`);
     });
@@ -137,6 +249,13 @@ function escapeHTML(value) {
 }
 
 $("refresh").addEventListener("click", refresh);
+$("language-select").addEventListener("change", (event) => {
+  state.lang = event.target.value === "zh" ? "zh" : "en";
+  localStorage.setItem("web-tools-language", state.lang);
+  applyLanguage();
+  if (state.status) renderStatus(state.status);
+  if (state.guide) renderGuide(state.guide);
+});
 $("provider-form").addEventListener("submit", (event) => {
   event.preventDefault();
   submitForm(event.currentTarget, "/api/setup/provider");
@@ -155,6 +274,11 @@ $("reader-form").addEventListener("submit", (event) => {
 });
 $("copy-guide").addEventListener("click", async () => {
   await navigator.clipboard.writeText($("agent-guide").textContent);
+  const button = $("copy-guide");
+  button.textContent = t("copied");
+  setTimeout(() => {
+    button.textContent = t("copy");
+  }, 1200);
 });
 $("download-diagnostics").addEventListener("click", async () => {
   const data = await api("/api/diagnostics");
@@ -167,6 +291,7 @@ $("download-diagnostics").addEventListener("click", async () => {
   URL.revokeObjectURL(url);
 });
 
+applyLanguage();
 refresh().catch((err) => {
   $("output").textContent = err.message;
 });