@halilertekin/claude-code-router-config 2.0.3 → 2.0.4

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 2.0.4
+- UI üzerinden `.env` anahtarları ekleme/güncelleme eklendi.
+- API tarafına `GET/POST /api/env` eklendi.
+
 ## 2.0.3
 - API anahtarları için `~/.env` otomatik yükleme eklendi (CLI + health monitor).
 - Sağlayıcı API key çözümleme tek noktaya alındı.

package/README.md

@@ -1,10 +1,11 @@
 # Claude Code Router Config - Advanced Multi-Provider Setup
 
-🚀 **v2.0.3** - Unified router + config package with z.ai (GLM 4.7) support, advanced CLI tools, analytics, smart routing, and configuration templates!
+🚀 **v2.0.4** - Unified router + config package with z.ai (GLM 4.7) support, advanced CLI tools, analytics, smart routing, and configuration templates!
 
 Use Claude Code as a single interface to access multiple AI providers with intelligent routing for optimal performance, cost, and quality.
 
-## ✨ New in v2.0.3
+## ✨ New in v2.0.4
+- UI üzerinden `.env` anahtarları ekleme/güncelleme (TR/NL).
 - `~/.env` otomatik yükleme ile API anahtarlarının bulunması (CLI + health monitor).
 - **z.ai Support**: Native integration for GLM-4.7 via z.ai (PPInfra).
 - **Lightweight Mode**: New `ccc` function for zero-dependency routing.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@halilertekin/claude-code-router-config",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "Multi-provider configuration for Claude Code Router with intent-based routing, advanced CLI tools, analytics, and smart routing. Setup OpenAI, Anthropic, Gemini, Qwen, GLM, OpenRouter, and GitHub Copilot with intelligent routing.",
   "main": "install.js",
   "bin": {

package/router/config.js

@@ -31,11 +31,15 @@ function parseEnvLine(line) {
   return { key, value };
 }
 
+function getEnvPath() {
+  return process.env.CCR_ENV_PATH || DEFAULT_ENV_PATH;
+}
+
 function loadDotenv() {
   if (envLoaded) return;
   envLoaded = true;
 
-  const envPath = process.env.CCR_ENV_PATH || DEFAULT_ENV_PATH;
+  const envPath = getEnvPath();
   if (!fs.existsSync(envPath)) return;
 
   const content = fs.readFileSync(envPath, 'utf8');
@@ -62,6 +66,73 @@ function resolveEnv(value) {
   });
 }
 
+function readEnvFile() {
+  const envPath = getEnvPath();
+  if (!fs.existsSync(envPath)) {
+    return { path: envPath, entries: {} };
+  }
+
+  const content = fs.readFileSync(envPath, 'utf8');
+  const entries = {};
+  content.split(/\r?\n/).forEach((line) => {
+    const parsed = parseEnvLine(line);
+    if (!parsed) return;
+    entries[parsed.key] = parsed.value;
+  });
+
+  return { path: envPath, entries };
+}
+
+function formatEnvValue(value) {
+  const safe = /^[A-Za-z0-9_./:@-]+$/.test(value);
+  if (safe) return value;
+  const escaped = value
+    .replace(/\\/g, '\\\\')
+    .replace(/"/g, '\\"')
+    .replace(/\n/g, '\\n');
+  return `"${escaped}"`;
+}
+
+function writeEnvValue(key, value) {
+  const envPath = getEnvPath();
+  const normalizedKey = String(key || '').trim();
+  if (!/^[A-Za-z0-9_]+$/.test(normalizedKey)) {
+    throw new Error('Invalid environment key');
+  }
+
+  const normalizedValue = value === undefined || value === null ? '' : String(value);
+  const formattedValue = formatEnvValue(normalizedValue);
+
+  let lines = [];
+  let updated = false;
+
+  if (fs.existsSync(envPath)) {
+    const content = fs.readFileSync(envPath, 'utf8');
+    lines = content.split(/\r?\n/);
+  }
+
+  lines = lines.map((line) => {
+    const parsed = parseEnvLine(line);
+    if (!parsed || parsed.key !== normalizedKey) return line;
+    const prefix = line.trim().startsWith('export ') ? 'export ' : '';
+    updated = true;
+    return `${prefix}${normalizedKey}=${formattedValue}`;
+  });
+
+  if (!updated) {
+    lines.push(`${normalizedKey}=${formattedValue}`);
+  }
+
+  const output = lines.filter((line, index, arr) => {
+    if (index === arr.length - 1) return true;
+    return line !== '' || arr[index + 1] !== '';
+  });
+
+  fs.writeFileSync(envPath, `${output.join('\n')}\n`, 'utf8');
+
+  return { path: envPath, updated: true };
+}
+
 function resolveConfigValue(value, key) {
   if (Array.isArray(value)) {
     return value.map((item) => resolveConfigValue(item, key));
@@ -125,6 +196,9 @@ function resolveProviderKey(provider) {
 
 module.exports = {
   loadConfig,
+  getEnvPath,
+  readEnvFile,
+  writeEnvValue,
   getConfigPath,
   getConfigDir,
   resolveProviderKey

package/router/server.js

@@ -6,7 +6,13 @@ const fs = require('fs');
 const os = require('os');
 const path = require('path');
 
-const { loadConfig, getConfigPath, getConfigDir } = require('./config');
+const {
+  loadConfig,
+  getConfigPath,
+  getConfigDir,
+  readEnvFile,
+  writeEnvValue
+} = require('./config');
 const { resolveRoute, estimateTokens } = require('./route');
 const {
   anthropicToOpenAI,
@@ -299,6 +305,59 @@ function setupApi(app) {
     }
   });
 
+  app.get('/api/env', (req, res) => {
+    try {
+      const config = loadConfig();
+      const envFile = readEnvFile();
+      const keys = new Set();
+
+      (config.Providers || []).forEach((provider) => {
+        if (typeof provider.api_key === 'string' && provider.api_key.startsWith('$')) {
+          keys.add(provider.api_key.slice(1));
+        }
+      });
+
+      if ((config.Providers || []).some((provider) => provider.name?.toLowerCase() === 'openrouter')) {
+        keys.add('OPENROUTER_REFERRER');
+        keys.add('OPENROUTER_APP_NAME');
+      }
+
+      const data = Array.from(keys)
+        .sort()
+        .map((key) => {
+          const value = process.env[key] || envFile.entries[key] || '';
+          return { name: key, present: Boolean(value) };
+        });
+
+      res.json({ success: true, data: { envPath: envFile.path, keys: data } });
+    } catch (error) {
+      res.status(500).json({ success: false, error: error.message });
+    }
+  });
+
+  app.post('/api/env', (req, res) => {
+    try {
+      const key = String(req.body?.key || '').trim();
+      const value = req.body?.value;
+
+      if (!key) {
+        res.status(400).json({ success: false, error: 'Missing env key' });
+        return;
+      }
+
+      if (value === undefined || value === null || String(value).trim() === '') {
+        res.status(400).json({ success: false, error: 'Missing env value' });
+        return;
+      }
+
+      const result = writeEnvValue(key, value);
+      process.env[key] = String(value);
+      res.json({ success: true, data: { key, path: result.path } });
+    } catch (error) {
+      res.status(500).json({ success: false, error: error.message });
+    }
+  });
+
   app.post('/api/config', (req, res) => {
     try {
       const configPath = getConfigPath();

package/web-dashboard/public/css/dashboard.css

@@ -193,11 +193,40 @@ body::before {
   gap: 10px;
 }
 
+.form {
+  display: grid;
+  gap: 12px;
+}
+
+.form-label {
+  font-size: 13px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--muted);
+}
+
+.field-row {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
 .select {
   border: 1px solid var(--border);
   border-radius: 10px;
   padding: 8px 12px;
   background: #fff;
+  min-width: 160px;
+}
+
+.input {
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 10px 12px;
+  background: #fff;
+  flex: 1 1 180px;
+  min-width: 160px;
+  font-family: inherit;
 }
 
 .grid {

package/web-dashboard/public/index.html

@@ -185,6 +185,42 @@
           </div>
         </div>
       </section>
+
+      <section class="panel">
+        <div class="panel-header">
+          <h2 data-i18n="env">Ortam Değişkenleri</h2>
+          <span class="muted" data-i18n="envHint">Anahtarları hızlıca güncelle</span>
+        </div>
+        <div class="grid two">
+          <div class="card">
+            <div class="card-header">
+              <h3 data-i18n="envStatus">Durum</h3>
+            </div>
+            <div class="card-body">
+              <div id="env-list" class="list"></div>
+              <div id="env-path" class="muted"></div>
+            </div>
+          </div>
+          <div class="card">
+            <div class="card-header">
+              <h3 data-i18n="envUpdate">Güncelle</h3>
+            </div>
+            <div class="card-body">
+              <div class="form">
+                <label class="form-label" data-i18n="envKeyLabel">Anahtar</label>
+                <div class="field-row">
+                  <select id="env-key-select" class="select"></select>
+                  <input id="env-key-custom" class="input" data-i18n-placeholder="envKeyPlaceholder" placeholder="CUSTOM_KEY">
+                </div>
+                <label class="form-label" data-i18n="envValueLabel">Değer</label>
+                <input id="env-value" class="input" type="password" placeholder="********">
+                <button class="btn" id="env-save" data-i18n="envSave">Kaydet</button>
+                <span id="env-result" class="muted"></span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
     </main>
 
     <footer class="footer">

package/web-dashboard/public/js/dashboard.js

@@ -3,6 +3,7 @@ class Dashboard {
     this.apiBase = '/api';
     this.lang = this.detectLanguage();
     this.providers = [];
+    this.envKeys = [];
     this.translations = this.buildTranslations();
     this.bindEvents();
     this.setLanguage(this.lang);
@@ -49,6 +50,20 @@ class Dashboard {
         defaultRoute: 'Varsayılan rota',
         logging: 'Loglama',
         configJson: 'Konfigürasyon',
+        env: 'Ortam Değişkenleri',
+        envHint: 'Anahtarları hızlıca güncelle',
+        envStatus: 'Durum',
+        envUpdate: 'Güncelle',
+        envKeyLabel: 'Anahtar',
+        envKeyPlaceholder: 'CUSTOM_KEY',
+        envValueLabel: 'Değer',
+        envSave: 'Kaydet',
+        envSaved: 'Kaydedildi',
+        envSaveError: 'Kaydedilemedi',
+        envSet: 'Tanımlı',
+        envMissing: 'Eksik',
+        envPath: 'Dosya',
+        envSelect: 'Anahtar seç'
         logOn: 'Açık',
         logOff: 'Kapalı',
         statusHealthy: 'Sağlıklı',
@@ -94,6 +109,20 @@ class Dashboard {
         defaultRoute: 'Standaard route',
         logging: 'Logging',
         configJson: 'Configuratie',
+        env: 'Omgevingsvariabelen',
+        envHint: 'Snel sleutels bijwerken',
+        envStatus: 'Status',
+        envUpdate: 'Bijwerken',
+        envKeyLabel: 'Sleutel',
+        envKeyPlaceholder: 'CUSTOM_KEY',
+        envValueLabel: 'Waarde',
+        envSave: 'Opslaan',
+        envSaved: 'Opgeslagen',
+        envSaveError: 'Opslaan mislukt',
+        envSet: 'Ingesteld',
+        envMissing: 'Ontbreekt',
+        envPath: 'Bestand',
+        envSelect: 'Sleutel kiezen'
         logOn: 'Aan',
         logOff: 'Uit',
         statusHealthy: 'Gezond',
@@ -128,6 +157,11 @@ class Dashboard {
       el.textContent = this.t(key);
     });
 
+    document.querySelectorAll('[data-i18n-placeholder]').forEach((el) => {
+      const key = el.getAttribute('data-i18n-placeholder');
+      el.setAttribute('placeholder', this.t(key));
+    });
+
     document.querySelectorAll('.lang-btn').forEach((btn) => {
       btn.classList.toggle('active', btn.dataset.lang === lang);
     });
@@ -145,6 +179,9 @@ class Dashboard {
     const refreshHealth = document.getElementById('refresh-health');
     refreshHealth?.addEventListener('click', () => this.loadHealth());
 
+    const envSave = document.getElementById('env-save');
+    envSave?.addEventListener('click', () => this.saveEnv());
+
     document.querySelectorAll('.lang-btn').forEach((btn) => {
       btn.addEventListener('click', () => this.setLanguage(btn.dataset.lang));
     });
@@ -161,6 +198,18 @@ class Dashboard {
     return response.json();
   }
 
+  async postJson(path, payload) {
+    const response = await fetch(path, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify(payload)
+    });
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status}`);
+    }
+    return response.json();
+  }
+
   async refreshAll() {
     try {
       this.setConnectionStatus(true);
@@ -169,7 +218,8 @@ class Dashboard {
         this.loadAnalytics(),
         this.loadHealth(),
         this.loadConfig(),
-        this.loadStatus()
+        this.loadStatus(),
+        this.loadEnv()
       ]);
       this.updateLastUpdated();
     } catch (error) {
@@ -249,6 +299,19 @@ class Dashboard {
     }
   }
 
+  async loadEnv() {
+    const envResponse = await this.fetchJson(`${this.apiBase}/env`);
+    const payload = envResponse.data || {};
+    this.envKeys = payload.keys || [];
+    this.renderEnvList(this.envKeys);
+    this.populateEnvSelect(this.envKeys);
+
+    const envPath = document.getElementById('env-path');
+    if (envPath && payload.envPath) {
+      envPath.textContent = `${this.t('envPath')}: ${payload.envPath}`;
+    }
+  }
+
   renderProviderList(targetId, providers) {
     const container = document.getElementById(targetId);
     if (!container) return;
@@ -324,6 +387,61 @@ class Dashboard {
     });
   }
 
+  renderEnvList(keys) {
+    const container = document.getElementById('env-list');
+    if (!container) return;
+
+    container.innerHTML = '';
+    if (!keys.length) {
+      container.innerHTML = `<div class="muted">${this.t('dataUnavailable')}</div>`;
+      return;
+    }
+
+    keys.forEach((item) => {
+      const entry = document.createElement('div');
+      entry.className = 'list-item';
+
+      const left = document.createElement('div');
+      left.className = 'list-left';
+
+      const dot = document.createElement('span');
+      dot.className = `dot ${item.present ? 'ok' : 'warn'}`;
+
+      const name = document.createElement('span');
+      name.textContent = item.name;
+
+      left.appendChild(dot);
+      left.appendChild(name);
+
+      const badge = document.createElement('span');
+      badge.textContent = item.present ? this.t('envSet') : this.t('envMissing');
+
+      entry.appendChild(left);
+      entry.appendChild(badge);
+      container.appendChild(entry);
+    });
+  }
+
+  populateEnvSelect(keys) {
+    const select = document.getElementById('env-key-select');
+    if (!select) return;
+    select.innerHTML = '';
+
+    const placeholder = document.createElement('option');
+    placeholder.value = '';
+    placeholder.textContent = this.t('envSelect');
+    placeholder.disabled = true;
+    placeholder.selected = true;
+    select.appendChild(placeholder);
+
+    keys.forEach((item) => {
+      const option = document.createElement('option');
+      option.value = item.name;
+      option.textContent = item.name;
+      select.appendChild(option);
+    });
+  }
+
   resolveStatus(status) {
     if (['healthy', 'ok'].includes(status)) return 'ok';
     if (['degraded', 'warn', 'warning'].includes(status)) return 'warn';
@@ -365,6 +483,34 @@ class Dashboard {
     window.location.href = `${this.apiBase}/analytics/export?format=json&period=${period}`;
   }
 
+  async saveEnv() {
+    const select = document.getElementById('env-key-select');
+    const custom = document.getElementById('env-key-custom');
+    const valueInput = document.getElementById('env-value');
+    const result = document.getElementById('env-result');
+
+    const keyCandidate = (custom?.value || select?.value || '').trim();
+    const value = valueInput?.value?.trim() || '';
+
+    if (!keyCandidate || !value) {
+      if (result) result.textContent = this.t('envSaveError');
+      return;
+    }
+
+    if (result) result.textContent = '';
+
+    try {
+      await this.postJson(`${this.apiBase}/env`, { key: keyCandidate, value });
+      if (result) result.textContent = this.t('envSaved');
+      if (valueInput) valueInput.value = '';
+      if (custom) custom.value = '';
+      await this.loadEnv();
+    } catch (error) {
+      if (result) result.textContent = this.t('envSaveError');
+      console.error('Failed to save env', error);
+    }
+  }
+
   locale() {
     return this.lang === 'nl' ? 'nl-NL' : 'tr-TR';
   }