@oooooooooo/ch0de 1.9.56 → 1.9.58

package/chode.js

@@ -7278,8 +7278,10 @@ function cmdServe(argv) {
   if (!portVal) portVal = '4097';               // default unlikely to conflict with OpenCode (4096)
   var PORT = parseInt(portVal, 10);
   var SESSIONS_DIR = path.join(ROOT, '.chode', 'sessions');
+  var CONFIG_PATH = path.join(ROOT, '.chode', 'config.json');
 
   if (!fs.existsSync(SESSIONS_DIR)) fs.mkdirSync(SESSIONS_DIR, {recursive:true});
+  if (!fs.existsSync(path.dirname(CONFIG_PATH))) fs.mkdirSync(path.dirname(CONFIG_PATH), {recursive:true});
 
   var sessions = {};
   try {
@@ -7296,6 +7298,50 @@ function cmdServe(argv) {
     return 'ses_' + crypto.randomBytes(8).toString('hex');
   }
 
+  function verifyProviderKey(baseUrl, key) {
+    return new Promise(function(resolve){
+      try {
+        var u = new URL(baseUrl + '/models');
+        var req = http.request(u, {
+          method: 'GET',
+          headers: {'Authorization': 'Bearer ' + key, 'Accept': 'application/json'},
+          timeout: 8000
+        }, function(resp){
+          var working = resp.statusCode >= 200 && resp.statusCode < 400;
+          resp.resume();
+          resolve(working);
+        });
+        req.on('error', function(){ resolve(false); });
+        req.on('timeout', function(){ req.destroy(); resolve(false); });
+        req.end();
+      } catch(e) { resolve(false); }
+    });
+  }
+
+  function providerInfo(pid) {
+    var info = null;
+    try {
+      for (var id in PROVIDERS) { if (id === pid) { info = PROVIDERS[id]; break; } }
+    } catch(e) {}
+    if (info) return info;
+    try {
+      var dir = require('./provider-directory');
+      var listed = dir.list();
+      for (var i = 0; i < listed.length; i++) { if (listed[i].id === pid) { info = listed[i]; break; } }
+    } catch(e) {}
+    return info;
+  }
+
+  function loadServeConfig() {
+    try { return JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf8')); } catch(e) { return { freeOnly: true, defaultProvider: 'auto', providers: {}, connections: {} }; }
+  }
+
+  function saveServeConfig(cfg) {
+    try { fs.writeFileSync(CONFIG_PATH, JSON.stringify(cfg, null, 2), 'utf8'); } catch(e) {}
+  }
+
+  var serveState = { provider: 'auto', mode: 'execute', theme: 'dark', details: false, timeoutSeconds: null, acceptanceTest: null, yolo: false };
+
   function json(res, code, obj) {
     res.writeHead(code, {'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*'});
     res.end(JSON.stringify(obj));
@@ -7393,6 +7439,101 @@ function cmdServe(argv) {
       }
     }
 
+    if (pathname === '/api/settings' && req.method === 'GET') {
+      var cfg = loadServeConfig();
+      json(res, 200, {ok: true, config: cfg, state: serveState});
+      return;
+    }
+
+    if (pathname === '/api/settings' && req.method === 'POST') {
+      readBody(req).then(function(body){
+        var parsed;
+        try { parsed = JSON.parse(body || '{}'); } catch(e) { json(res, 400, {ok:false, error:'invalid json'}); return; }
+        var cfg = loadServeConfig();
+        if (parsed.freeOnly !== undefined) cfg.freeOnly = !!parsed.freeOnly;
+        if (parsed.defaultProvider !== undefined) cfg.defaultProvider = parsed.defaultProvider;
+        if (parsed.mode !== undefined) serveState.mode = parsed.mode;
+        if (parsed.theme !== undefined) serveState.theme = parsed.theme;
+        if (parsed.details !== undefined) serveState.details = !!parsed.details;
+        if (parsed.timeoutSeconds !== undefined) serveState.timeoutSeconds = parsed.timeoutSeconds ? Number(parsed.timeoutSeconds) : null;
+        if (parsed.acceptanceTest !== undefined) serveState.acceptanceTest = parsed.acceptanceTest || null;
+        if (parsed.yolo !== undefined) serveState.yolo = !!parsed.yolo;
+        if (parsed.provider !== undefined) serveState.provider = parsed.provider;
+        saveServeConfig(cfg);
+        json(res, 200, {ok: true, config: cfg, state: serveState});
+      }).catch(function(e){ json(res, 500, {ok:false, error: e.message}); });
+      return;
+    }
+
+    if (pathname === '/api/providers' && req.method === 'GET') {
+      var out = [];
+      try {
+        var cfg = loadServeConfig();
+        var keys = cfg.providerKeys || {};
+        for (var id in PROVIDERS) {
+          var p = PROVIDERS[id];
+          out.push({id: id, name: p.name || id, requiresKey: !!p.requiresKey, free: require('./provider-capacity').free ? require('./provider-capacity').free(p) : true, category: p.category || '', builtIn: true, hasKey: !!keys[id]});
+        }
+        var dir = require('./provider-directory');
+        var listed = dir.list();
+        var ids = {};
+        out.forEach(function(x){ids[x.id]=true;});
+        listed.forEach(function(p){
+          if (!ids[p.id]) {
+            out.push({id: p.id, name: p.name, requiresKey: !!p.env, free: !p.env, category: 'directory', builtIn: false, baseUrl: p.baseUrl, models: p.models.length, doc: p.doc, verification: p.verification, hasKey: !!keys[p.id]});
+          }
+        });
+      } catch(e) {}
+      json(res, 200, {ok: true, providers: out});
+    }
+
+    var keyM = pathname.match(/^\/api\/provider\/([^\/]+)\/key(\/test)?$/);
+    if (keyM) {
+      var pid = keyM[1];
+      var isTest = !!keyM[2];
+      if (req.method === 'GET' && !isTest) {
+        var cfg2 = loadServeConfig();
+        var keys2 = cfg2.providerKeys || {};
+        json(res, 200, {ok: true, hasKey: !!keys2[pid]});
+        return;
+      }
+      if (req.method === 'POST' && !isTest) {
+        readBody(req).then(function(body){
+          var parsed;
+          try { parsed = JSON.parse(body || '{}'); } catch(e) { json(res, 400, {ok:false, error:'invalid json'}); return; }
+          var key = String(parsed.key || '');
+          var cfg3 = loadServeConfig();
+          if (!cfg3.providerKeys) cfg3.providerKeys = {};
+          cfg3.providerKeys[pid] = key;
+          saveServeConfig(cfg3);
+          var pinfo = providerInfo(pid);
+          if (pinfo && pinfo.baseUrl) {
+            verifyProviderKey(pinfo.baseUrl, key).then(function(working){
+              json(res, 200, {ok: true, working: working});
+            }).catch(function(){ json(res, 200, {ok: true, working: false}); });
+          } else {
+            json(res, 200, {ok: true, working: false});
+          }
+        }).catch(function(e){ json(res, 500, {ok:false, error: e.message}); });
+        return;
+      }
+      if (req.method === 'GET' && isTest) {
+        var cfg4 = loadServeConfig();
+        var keys4 = cfg4.providerKeys || {};
+        var key = String(keys4[pid] || '');
+        if (!key) { json(res, 200, {ok: true, working: false, hasKey: false}); return; }
+        var pinfo2 = providerInfo(pid);
+        if (pinfo2 && pinfo2.baseUrl) {
+          verifyProviderKey(pinfo2.baseUrl, key).then(function(working){
+            json(res, 200, {ok: true, working: working, hasKey: true});
+          }).catch(function(){ json(res, 200, {ok: true, working: false, hasKey: true}); });
+        } else {
+          json(res, 200, {ok: true, working: false, hasKey: true});
+        }
+        return;
+      }
+    }
+
     res.writeHead(404, {'Content-Type': 'text/plain'});
     res.end('Not found');
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oooooooooo/ch0de",
-  "version": "1.9.56",
+  "version": "1.9.58",
   "description": "The self-healing AI coding harness. Free tiers. HEMO auto-provisioning. Zero lock-in. Canonical brand: ch0de.",
   "main": "chode.js",
   "bin": {
@@ -151,7 +151,7 @@
   },
   "dependencies": {
     "@modelcontextprotocol/sdk": "1.32.2",
-    "@oooooooooo/ch0de": "^1.9.55",
+    "@oooooooooo/ch0de": "^1.9.56",
     "lean": "^0.1.1"
   },
   "devDependencies": {

package/serve-frontend.html

@@ -11,6 +11,7 @@ body { background: #000; color: #e0e0e0; font-family: "IBM Plex Mono", monospace
 .sidebar { width: 280px; background: #0a0a0a; border-right: 1px solid #1a1a1a; display: flex; flex-direction: column; }
 .main { flex: 1; display: flex; flex-direction: column; background: #000; }
 .header { height: 60px; background: #0a0a0a; border-bottom: 1px solid #1a1a1a; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; }
+.header-right { display: flex; align-items: center; gap: 12px; }
 .logo { color: #22dd55; font-weight: bold; font-size: 1.25rem; letter-spacing: -0.5px; }
 .sessions { flex: 1; overflow-y: auto; padding: 12px; }
 .session-item { padding: 10px 12px; border-radius: 8px; cursor: pointer; margin-bottom: 6px; border: 1px solid transparent; transition: all 0.2s; }
@@ -18,6 +19,8 @@ body { background: #000; color: #e0e0e0; font-family: "IBM Plex Mono", monospace
 .session-item.active { background: #141414; border-color: #22dd55; }
 .new-session { padding: 10px 12px; background: #22dd55; color: #000; border: none; border-radius: 8px; font-family: inherit; font-weight: bold; cursor: pointer; width: 100%; margin-bottom: 12px; }
 .new-session:hover { background: #3dffa0; }
+.settings-btn { padding: 8px 16px; background: #141414; color: #e0e0e0; border: 1px solid #22dd5533; border-radius: 8px; font-family: inherit; font-size: 12px; cursor: pointer; }
+.settings-btn:hover { border-color: #22dd55; background: #1a1a1a; }
 .chat { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
 .messages { flex: 1; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
 .message { max-width: 70%; padding: 12px 16px; border-radius: 12px; line-height: 1.5; }
@@ -33,6 +36,59 @@ body { background: #000; color: #e0e0e0; font-family: "IBM Plex Mono", monospace
 #sendBtn:disabled { background: #1a1a1a; color: #666; cursor: not-allowed; }
 .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; color: #666; }
 .status-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; background: #1a1a1a; border: 1px solid #22dd5533; color: #22dd55; font-size: 11px; margin-left: 8px; }
+/* Settings panel */
+.settings-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 50; display: none; }
+.settings-panel { position: fixed; top: 10%; left: 10%; right: 10%; bottom: 10%; background: #0a0a0a; border: 1px solid #22dd5533; border-radius: 12px; z-index: 60; display: none; flex-direction: column; overflow: hidden; }
+.settings-panel.open, .settings-overlay.open { display: block; }
+.settings-header { height: 50px; background: #0a0a0a; border-bottom: 1px solid #1a1a1a; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; }
+.settings-title { color: #22dd55; font-weight: bold; font-size: 1.1rem; }
+.settings-close { background: transparent; border: 1px solid #22dd5533; color: #e0e0e0; border-radius: 6px; padding: 4px 12px; font-family: inherit; font-size: 12px; cursor: pointer; }
+.settings-close:hover { border-color: #22dd55; }
+.settings-tabs { display: flex; border-bottom: 1px solid #1a1a1a; }
+.settings-tab { padding: 10px 16px; background: transparent; border: none; border-bottom: 2px solid transparent; color: #888; font-family: inherit; font-size: 12px; cursor: pointer; }
+.settings-tab:hover { color: #e0e0e0; background: #141414; }
+.settings-tab.active { color: #22dd55; border-bottom-color: #22dd55; }
+.settings-content { flex: 1; overflow-y: auto; padding: 24px; }
+.settings-section { margin-bottom: 30px; }
+.settings-section-title { color: #888; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 14px; }
+.setting-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #141414; }
+.setting-row:last-child { border-bottom: none; }
+.setting-label { color: #e0e0e0; font-size: 13px; }
+.setting-value { color: #888; font-size: 12px; }
+.setting-select, .setting-input { background: #000; border: 1px solid #22dd5533; color: #e0e0e0; padding: 6px 10px; border-radius: 6px; font-family: inherit; font-size: 12px; outline: none; }
+.setting-select:focus, .setting-input:focus { border-color: #22dd55; }
+.setting-checkbox { width: 18px; height: 18px; accent-color: #22dd55; background: #000; border: 1px solid #22dd5533; cursor: pointer; }
+.provider-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #141414; font-size: 12px; cursor: pointer; }
+.provider-row:last-child { border-bottom: none; }
+.provider-row:hover { background: #141414; }
+#providersList { max-height: 340px; overflow-y: auto; border: 1px solid #141414; border-radius: 6px; padding: 10px; background: #000; margin-top: 8px; }
+.provider-info { display: flex; align-items: center; gap: 10px; flex: 1; }
+.provider-name { font-weight: bold; color: #e0e0e0; }
+.provider-id { color: #666; font-size: 11px; }
+.provider-status { font-size: 11px; padding: 2px 8px; border-radius: 4px; }
+.provider-status.free { background: #1a1a1a; color: #22dd55; border: 1px solid #22dd5533; }
+.provider-status.keyed { background: #1a1a1a; color: #ff9900; border: 1px solid #ff990033; }
+.provider-status.haskey { background: #1a1a1a; color: #22dd55; border: 1px solid #22dd5533; }
+.provider-status.working { background: #1a1a1a; color: #22dd55; border: 1px solid #22dd55; }
+.provider-status.badkey { background: #1a1a1a; color: #ff4444; border: 1px solid #ff444433; }
+.btn-save { background: #22dd55; color: #000; border: none; border-radius: 6px; padding: 8px 16px; font-family: inherit; font-weight: bold; cursor: pointer; margin-top: 20px; }
+.btn-save:hover { background: #3dffa0; }
+.btn-save:disabled { background: #1a1a1a; color: #666; cursor: not-allowed; }
+
+/* Key input modal */
+.key-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 100; display: none; }
+.key-modal { position: fixed; top: 20%; left: 25%; right: 25%; background: #0a0a0a; border: 1px solid #22dd5533; border-radius: 12px; z-index: 110; padding: 24px; display: none; box-shadow: 0 4px 20px rgba(0,0,0,0.4); }
+.key-modal.open, .key-modal-overlay.open { display: block; }
+.key-modal-title { color: #22dd55; font-weight: bold; font-size: 1.1rem; margin-bottom: 16px; }
+.key-modal-field { margin-bottom: 16px; }
+.key-modal-label { display: block; color: #888; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
+.key-modal-input { width: 100%; background: #000; border: 1px solid #22dd5533; color: #e0e0e0; padding: 10px 14px; border-radius: 6px; font-family: inherit; font-size: 13px; outline: none; }
+.key-modal-input:focus { border-color: #22dd55; }
+.key-modal-actions { display: flex; gap: 10px; margin-top: 20px; }
+.key-status { margin-top: 12px; padding: 8px 12px; border-radius: 6px; font-size: 12px; display: none; }
+.key-status.ok { background: #141414; color: #22dd55; border: 1px solid #22dd5533; display: block; }
+.key-status.err { background: #141414; color: #ff4444; border: 1px solid #ff444433; display: block; }
+.key-status.saving { background: #141414; color: #ff9900; border: 1px solid #ff990033; display: block; }
 </style>
 </head>
 <body>
@@ -40,6 +96,7 @@ body { background: #000; color: #e0e0e0; font-family: "IBM Plex Mono", monospace
   <div class="sidebar">
     <div class="header">
       <div class="logo">chode <span class="status-badge">serve</span></div>
+      <button class="settings-btn" id="settingsBtn">Settings</button>
     </div>
     <button class="new-session" id="newSessionBtn">New Session</button>
     <div class="sessions" id="sessionsList">
@@ -66,9 +123,94 @@ body { background: #000; color: #e0e0e0; font-family: "IBM Plex Mono", monospace
     </div>
   </div>
 </div>
+<div class="settings-overlay" id="settingsOverlay"></div>
+<div class="settings-panel" id="settingsPanel">
+  <div class="settings-header">
+    <div class="settings-title">chode settings</div>
+    <button class="settings-close" id="settingsClose">Close</button>
+  </div>
+  <div class="settings-tabs">
+    <button class="settings-tab active" data-tab="general">General</button>
+    <button class="settings-tab" data-tab="providers">Providers</button>
+    <button class="settings-tab" data-tab="session">Session</button>
+  </div>
+  <div class="settings-content">
+    <div class="settings-section" id="tab-general">
+      <div class="setting-row">
+        <span class="setting-label">Free mode</span>
+        <label style="display:flex;align-items:center;gap:8px;cursor:pointer;"><input type="checkbox" id="settingFreeOnly" class="setting-checkbox"><span style="color:#e0e0e0;font-size:12px;">Enable free (keyless) providers only</span></label>
+      </div>
+      <div class="setting-row">
+        <span class="setting-label">Default provider</span>
+        <select id="settingDefaultProvider" class="setting-select"></select>
+      </div>
+      <div class="setting-row">
+        <span class="setting-label">Mode</span>
+        <select id="settingMode" class="setting-select">
+          <option value="execute">Execute</option>
+          <option value="plan">Plan</option>
+        </select>
+      </div>
+      <div class="setting-row">
+        <span class="setting-label">Theme</span>
+        <select id="settingTheme" class="setting-select">
+          <option value="dark">Dark</option>
+          <option value="light">Light</option>
+          <option value="system">System</option>
+        </select>
+      </div>
+      <div class="setting-row">
+        <span class="setting-label">Details</span>
+        <label style="display:flex;align-items:center;gap:8px;cursor:pointer;"><input type="checkbox" id="settingDetails" class="setting-checkbox"><span style="color:#e0e0e0;font-size:12px;">Show tool and provider diagnostics</span></label>
+      </div>
+      <div class="setting-row">
+        <span class="setting-label">Timeout (seconds)</span>
+        <input type="number" id="settingTimeoutSeconds" class="setting-input" placeholder="e.g. 600">
+      </div>
+      <div class="setting-row">
+        <span class="setting-label">Acceptance test</span>
+        <input type="text" id="settingAcceptanceTest" class="setting-input" placeholder="path/to/test.cjs">
+      </div>
+      <div class="setting-row">
+        <span class="setting-label">Yolo mode</span>
+        <label style="display:flex;align-items:center;gap:8px;cursor:pointer;"><input type="checkbox" id="settingYolo" class="setting-checkbox"><span style="color:#e0e0e0;font-size:12px;">Skip confirmation prompts</span></label>
+      </div>
+      <button class="btn-save" id="settingsSave">Save settings</button>
+    </div>
+    <div class="settings-section" id="tab-providers" style="display:none;">
+      <div class="setting-section-title">Available providers</div>
+      <div id="providersList"></div>
+    </div>
+    <div class="settings-section" id="tab-session" style="display:none;">
+      <div class="setting-section-title">Current session</div>
+      <div class="setting-row">
+        <span class="setting-label">Session ID</span>
+        <span class="setting-value" id="settingSessionId">-</span>
+      </div>
+      <div class="setting-row">
+        <span class="setting-label">Messages</span>
+        <span class="setting-value" id="settingSessionMessages">0</span>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="key-modal-overlay" id="keyModalOverlay"></div>
+<div class="key-modal" id="keyModal">
+  <div class="key-modal-title" id="keyModalTitle">API Key</div>
+  <div class="key-modal-field">
+    <span class="key-modal-label" id="keyModalLabel">API Key</span>
+    <input type="password" id="keyModalInput" class="key-modal-input" placeholder="Enter API key">
+  </div>
+  <div class="key-modal-actions">
+    <button class="btn-save" id="keyCancelBtn" style="background:#141414;color:#e0e0e0;border:1px solid #22dd5533;">Cancel</button>
+    <button class="btn-save" id="keySubmitBtn">Save & Test</button>
+  </div>
+  <div class="key-status" id="keyStatus"></div>
+</div>
 <script>
 const API = "http://127.0.0.1:" + (window.location.port || "4096");
 let currentSessionId = null;
+let settingsOpen = false;
 
 async function loadSessions() {
   const res = await fetch(API + "/api/sessions");
@@ -82,6 +224,7 @@ async function loadSessions() {
     div.onclick = function() { selectSession(s.id); };
     list.appendChild(div);
   });
+  updateSessionTab();
 }
 
 async function createSession() {
@@ -140,6 +283,95 @@ async function sendMessage() {
   }
 }
 
+async function loadSettings() {
+  try {
+    const res = await fetch(API + "/api/settings");
+    const data = await res.json();
+    if (!data.ok) return;
+    var cfg = data.config || {};
+    var st = data.state || {};
+    document.getElementById("settingFreeOnly").checked = !!cfg.freeOnly;
+    document.getElementById("settingDefaultProvider").value = cfg.defaultProvider || "auto";
+    document.getElementById("settingMode").value = st.mode || "execute";
+    document.getElementById("settingTheme").value = st.theme || "dark";
+    document.getElementById("settingDetails").checked = !!st.details;
+    document.getElementById("settingTimeoutSeconds").value = st.timeoutSeconds || "";
+    document.getElementById("settingAcceptanceTest").value = st.acceptanceTest || "";
+    document.getElementById("settingYolo").checked = !!st.yolo;
+  } catch(e) {}
+}
+
+async function saveSettings() {
+  var body = {
+    freeOnly: document.getElementById("settingFreeOnly").checked,
+    defaultProvider: document.getElementById("settingDefaultProvider").value,
+    mode: document.getElementById("settingMode").value,
+    theme: document.getElementById("settingTheme").value,
+    details: document.getElementById("settingDetails").checked,
+    timeoutSeconds: document.getElementById("settingTimeoutSeconds").value || null,
+    acceptanceTest: document.getElementById("settingAcceptanceTest").value || null,
+    yolo: document.getElementById("settingYolo").checked,
+  };
+  try {
+    const res = await fetch(API + "/api/settings", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(body)
+    });
+    const data = await res.json();
+    if (data.ok) {
+      // Refresh provider list for default provider select
+      await loadProviders();
+    }
+  } catch(e) {}
+}
+
+async function loadProviders() {
+  try {
+    const res = await fetch(API + "/api/providers");
+    const data = await res.json();
+    var select = document.getElementById("settingDefaultProvider");
+    var list = document.getElementById("providersList");
+    select.innerHTML = '<option value="auto">auto</option>';
+    list.innerHTML = '';
+    (data.providers || []).forEach(function(p) {
+      var opt = document.createElement("option");
+      opt.value = p.id;
+      opt.textContent = p.name || p.id;
+      select.appendChild(opt);
+      var row = document.createElement("div");
+      row.className = "provider-row";
+      var statusCls, statusText;
+      if (!p.requiresKey) { statusCls = "free"; statusText = "free"; }
+      else if (p.hasKey) { statusCls = "working"; statusText = "key saved"; }
+      else { statusCls = "keyed"; statusText = "needs API key"; }
+      var extra = p.builtIn ? "" : ' <span style="font-size:10px;color:#888;margin-left:6px;">(' + (p.models||0) + ' models)</span>';
+      row.innerHTML =
+        '<div class="provider-info">' +
+        '<div class="provider-name">' + escapeHtml(p.name || p.id) + extra + '</div>' +
+        '<div class="provider-id">' + escapeHtml(p.id) + (p.baseUrl ? ' · ' + escapeHtml(String(p.baseUrl).slice(0,40)) : '') + '</div>' +
+        '</div>' +
+        '<div class="provider-status ' + statusCls + '">' + statusText + '</div>';
+      row.onclick = function() { openKeyModal(p); };
+      list.appendChild(row);
+    });
+  } catch(e) {}
+}
+
+function updateSessionTab() {
+  var sidEl = document.getElementById("settingSessionId");
+  var msgEl = document.getElementById("settingSessionMessages");
+  if (currentSessionId) {
+    sidEl.textContent = currentSessionId;
+    // count messages from the session list item
+    var item = Array.from(document.querySelectorAll(".session-item")).find(function(el){ return el.textContent && el.textContent.includes(currentSessionId); });
+    msgEl.textContent = "loaded";
+  } else {
+    sidEl.textContent = "-";
+    msgEl.textContent = "0";
+  }
+}
+
 function addMessage(role, content, scroll) {
   var messagesEl = document.getElementById("messages");
   var div = document.createElement("div");
@@ -155,11 +387,118 @@ function escapeHtml(text) {
   return div.innerHTML;
 }
 
+function openSettings() {
+  document.getElementById("settingsOverlay").classList.add("open");
+  document.getElementById("settingsPanel").classList.add("open");
+  settingsOpen = true;
+  loadSettings();
+  loadProviders();
+}
+
+function closeSettings() {
+  document.getElementById("settingsOverlay").classList.remove("open");
+  document.getElementById("settingsPanel").classList.remove("open");
+  settingsOpen = false;
+}
+
+var keyModalProvider = null;
+function openKeyModal(p) {
+  keyModalProvider = p;
+  document.getElementById("keyModalTitle").textContent = "API Key · " + (p.name || p.id);
+  document.getElementById("keyModalLabel").textContent = p.env ? ("API Key (" + p.env + ")") : "API Key";
+  document.getElementById("keyModalInput").value = "";
+  document.getElementById("keyStatus").style.display = "none";
+  document.getElementById("keyModalOverlay").classList.add("open");
+  document.getElementById("keyModal").classList.add("open");
+  document.getElementById("keyModalInput").focus();
+}
+function closeKeyModal() {
+  document.getElementById("keyModalOverlay").classList.remove("open");
+  document.getElementById("keyModal").classList.remove("open");
+  keyModalProvider = null;
+}
+async function submitKey() {
+  if (!keyModalProvider) return;
+  var input = document.getElementById("keyModalInput");
+  var key = input.value.trim();
+  if (!key) return;
+  var status = document.getElementById("keyStatus");
+  var btn = document.getElementById("keySubmitBtn");
+  status.textContent = "Saving and testing key…";
+  status.className = "key-status saving";
+  status.style.display = "block";
+  btn.disabled = true;
+  try {
+    const res = await fetch(API + "/api/provider/" + encodeURIComponent(keyModalProvider.id) + "/key", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ key: key })
+    });
+    const data = await res.json();
+    if (data.ok && data.working) {
+      status.textContent = "Key is working ✓";
+      status.className = "key-status ok";
+      // Refresh provider list to show updated status
+      await loadProviders();
+      setTimeout(closeKeyModal, 800);
+    } else {
+      status.textContent = "Key saved but could not be verified";
+      status.className = "key-status err";
+    }
+  } catch(e) {
+    status.textContent = "Error: " + e.message;
+    status.className = "key-status err";
+  } finally {
+    btn.disabled = false;
+  }
+}
+async function testKey() {
+  if (!keyModalProvider) return;
+  var status = document.getElementById("keyStatus");
+  status.textContent = "Testing key…";
+  status.className = "key-status saving";
+  status.style.display = "block";
+  try {
+    const res = await fetch(API + "/api/provider/" + encodeURIComponent(keyModalProvider.id) + "/key/test");
+    const data = await res.json();
+    if (data.ok && data.working) {
+      status.textContent = "Key is working ✓";
+      status.className = "key-status ok";
+      await loadProviders();
+    } else {
+      status.textContent = "Key verification failed";
+      status.className = "key-status err";
+    }
+  } catch(e) {
+    status.textContent = "Error: " + e.message;
+    status.className = "key-status err";
+  }
+}
+
 document.getElementById("newSessionBtn").onclick = createSession;
 document.getElementById("sendBtn").onclick = sendMessage;
 document.getElementById("messageInput").addEventListener("keypress", function(e) {
   if (e.key === "Enter") sendMessage();
 });
+document.getElementById("settingsBtn").onclick = openSettings;
+document.getElementById("settingsClose").onclick = closeSettings;
+document.getElementById("settingsOverlay").onclick = function(e) { if (e.target === this) closeSettings(); };
+document.getElementById("settingsSave").onclick = function() { saveSettings(); closeSettings(); };
+document.getElementById("keyCancelBtn").onclick = closeKeyModal;
+document.getElementById("keySubmitBtn").onclick = submitKey;
+document.getElementById("keyModalOverlay").onclick = function(e) { if (e.target === this) closeKeyModal(); };
+document.getElementById("keyModalInput").addEventListener("keypress", function(e) {
+  if (e.key === "Enter") submitKey();
+});
+
+document.querySelectorAll(".settings-tab").forEach(function(tab) {
+  tab.onclick = function() {
+    document.querySelectorAll(".settings-tab").forEach(function(t){ t.classList.remove("active"); });
+    tab.classList.add("active");
+    document.querySelectorAll(".settings-section").forEach(function(s){ s.style.display = "none"; });
+    document.getElementById("tab-" + tab.getAttribute("data-tab")).style.display = "block";
+  };
+});
 
 loadSessions();
 setTimeout(async function() {
@@ -169,4 +508,4 @@ setTimeout(async function() {
 }, 500);
 </script>
 </body>
-</html>
+</html>