fix: improve mode toggle robustness and add i18n support

- Make mode detection more robust (handle ::1, 0.0.0.0)
- Add getProxyPort() to parse port from ANTHROPIC_BASE_URL dynamically
- Add i18n translation keys for mode toggle in all 5 languages
- Update settings.html to use translation keys and dynamic port

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

public/js/components/claude-config.js

@@ -16,6 +16,20 @@ window.Components.claudeConfig = () => ({
     currentMode: 'proxy', // 'proxy' or 'paid'
     modeLoading: false,
 
+    /**
+     * Extract port from ANTHROPIC_BASE_URL for display
+     * @returns {string} Port number or '8080' as fallback
+     */
+    getProxyPort() {
+        const baseUrl = this.config?.env?.ANTHROPIC_BASE_URL || '';
+        try {
+            const url = new URL(baseUrl);
+            return url.port || '8080';
+        } catch {
+            return '8080';
+        }
+    },
+
     // Presets state
     presets: [],
     selectedPresetName: '',

public/js/translations/en.js

@@ -364,4 +364,14 @@ window.translations.en = {
     mustBeAtMost: "{fieldName} must be at most {max}",
     cannotBeEmpty: "{fieldName} cannot be empty",
     mustBeTrueOrFalse: "Value must be true or false",
+    // Mode Toggle (Proxy/Paid)
+    connectionMode: "Connection Mode",
+    proxyMode: "Proxy Mode",
+    paidMode: "Paid Mode",
+    usingLocalProxy: "Using local proxy server (localhost:{port})",
+    usingOfficialApi: "Using official Anthropic API (requires subscription)",
+    paidModeTitle: "Claude CLI is using the official Anthropic API",
+    paidModeDesc: "All proxy configuration has been removed. Claude CLI uses your Anthropic subscription directly.",
+    paidModeHint: "Switch to Proxy mode to configure model routing and presets.",
+    modeToggleFailed: "Failed to switch mode",
 };

public/js/translations/id.js

@@ -409,4 +409,14 @@ window.translations.id = {
     strategyUpdated: "Strategi diubah ke: {strategy}",
     failedToUpdateStrategy: "Gagal memperbarui strategi",
     invalidStrategy: "Strategi tidak valid dipilih",
+    // Mode Toggle (Proxy/Paid)
+    connectionMode: "Mode Koneksi",
+    proxyMode: "Mode Proxy",
+    paidMode: "Mode Berbayar",
+    usingLocalProxy: "Menggunakan server proxy lokal (localhost:{port})",
+    usingOfficialApi: "Menggunakan API resmi Anthropic (memerlukan langganan)",
+    paidModeTitle: "Claude CLI menggunakan API resmi Anthropic",
+    paidModeDesc: "Semua konfigurasi proxy telah dihapus. Claude CLI menggunakan langganan Anthropic Anda secara langsung.",
+    paidModeHint: "Beralih ke mode Proxy untuk mengonfigurasi routing model dan preset.",
+    modeToggleFailed: "Gagal beralih mode",
 };

public/js/translations/pt.js

@@ -305,4 +305,14 @@ window.translations.pt = {
     strategyUpdated: "Estratégia atualizada para: {strategy}",
     failedToUpdateStrategy: "Falha ao atualizar estratégia",
     invalidStrategy: "Estratégia inválida selecionada",
+    // Mode Toggle (Proxy/Paid)
+    connectionMode: "Modo de Conexão",
+    proxyMode: "Modo Proxy",
+    paidMode: "Modo Pago",
+    usingLocalProxy: "Usando servidor proxy local (localhost:{port})",
+    usingOfficialApi: "Usando API oficial da Anthropic (requer assinatura)",
+    paidModeTitle: "Claude CLI está usando a API oficial da Anthropic",
+    paidModeDesc: "Toda configuração de proxy foi removida. Claude CLI usa sua assinatura Anthropic diretamente.",
+    paidModeHint: "Mude para modo Proxy para configurar roteamento de modelos e presets.",
+    modeToggleFailed: "Falha ao alternar modo",
 };

public/js/translations/tr.js

@@ -355,4 +355,14 @@ window.translations.tr = {
     strategyUpdated: "Strateji şu şekilde güncellendi: {strategy}",
     failedToUpdateStrategy: "Strateji güncellenemedi",
     invalidStrategy: "Geçersiz strateji seçildi",
+    // Mode Toggle (Proxy/Paid)
+    connectionMode: "Bağlantı Modu",
+    proxyMode: "Proxy Modu",
+    paidMode: "Ücretli Mod",
+    usingLocalProxy: "Yerel proxy sunucusu kullanılıyor (localhost:{port})",
+    usingOfficialApi: "Resmi Anthropic API kullanılıyor (abonelik gerektirir)",
+    paidModeTitle: "Claude CLI resmi Anthropic API kullanıyor",
+    paidModeDesc: "Tüm proxy yapılandırması kaldırıldı. Claude CLI doğrudan Anthropic aboneliğinizi kullanır.",
+    paidModeHint: "Model yönlendirme ve ön ayarları yapılandırmak için Proxy moduna geçin.",
+    modeToggleFailed: "Mod değiştirilemedi",
 };

public/js/translations/zh.js

@@ -370,4 +370,14 @@ window.translations.zh = {
     strategyUpdated: "策略已更新为: {strategy}",
     failedToUpdateStrategy: "更新策略失败",
     invalidStrategy: "选择了无效的策略",
+    // Mode Toggle (Proxy/Paid)
+    connectionMode: "连接模式",
+    proxyMode: "代理模式",
+    paidMode: "付费模式",
+    usingLocalProxy: "使用本地代理服务器 (localhost:{port})",
+    usingOfficialApi: "使用官方 Anthropic API (需要订阅)",
+    paidModeTitle: "Claude CLI 正在使用官方 Anthropic API",
+    paidModeDesc: "所有代理配置已移除。Claude CLI 直接使用您的 Anthropic 订阅。",
+    paidModeHint: "切换到代理模式以配置模型路由和预设。",
+    modeToggleFailed: "切换模式失败",
 };