clay-server 2.5.0 → 2.6.0

package/lib/public/modules/server-settings.js

@@ -1,7 +1,7 @@
 // server-settings.js — Full-screen server settings overlay
 import { refreshIcons } from './icons.js';
-import { getCurrentTheme, openSettingsThemePicker } from './theme.js';
-import { showToast } from './utils.js';
+import { showToast, copyToClipboard } from './utils.js';
+import { parseEnvString, looksLikeEnv } from './project-settings.js';
 
 var ctx = null;
 var settingsEl = null;
@@ -11,6 +11,26 @@ var navItems = null;
 var sections = null;
 var statsTimer = null;
 
+var SS_MODE_OPTIONS = [
+  { value: "default", label: "Default", desc: "Claude asks for permission before running tools and editing files." },
+  { value: "plan", label: "Plan", desc: "Claude creates a plan first and asks for approval before making changes." },
+  { value: "acceptEdits", label: "Auto-accept edits", desc: "File edits are applied automatically. Claude still asks before running commands." },
+];
+
+var SS_EFFORT_LEVELS = [
+  { value: "low", desc: "Quick, concise responses. Best for simple questions." },
+  { value: "medium", desc: "Balanced responses with moderate reasoning. Good for most tasks." },
+  { value: "high", desc: "Thorough responses with deeper analysis. Good for complex tasks." },
+  { value: "max", desc: "Maximum reasoning depth. Best for the most difficult problems." },
+];
+
+var SS_MODEL_DESCRIPTIONS = {
+  "default": "Automatically selects the best model for the task.",
+  "sonnet": "Fast and capable. Great balance of speed and intelligence.",
+  "haiku": "Fastest model. Best for quick tasks and simple questions.",
+  "opus": "Most powerful model. Best for complex reasoning and analysis.",
+};
+
 export function initServerSettings(appCtx) {
   ctx = appCtx;
   settingsEl = document.getElementById("server-settings");
@@ -47,18 +67,22 @@ export function initServerSettings(appCtx) {
     });
   }
 
-  // Context view buttons
-  var contextViewEl = document.getElementById("settings-context-view");
-  if (contextViewEl) {
-    var btns = contextViewEl.querySelectorAll(".settings-btn-option");
-    for (var b = 0; b < btns.length; b++) {
-      btns[b].addEventListener("click", function () {
-        var view = this.dataset.view;
-        if (ctx.setContextView) ctx.setContextView(view);
-        if (ctx.applyContextView) ctx.applyContextView(view);
-        updateContextViewButtons();
+  // Copyable command blocks
+  var copyables = settingsEl.querySelectorAll(".settings-copyable");
+  for (var c = 0; c < copyables.length; c++) {
+    copyables[c].addEventListener("click", function () {
+      var text = this.dataset.copy;
+      if (!text) return;
+      var btn = this.querySelector(".settings-copy-btn");
+      copyToClipboard(text).then(function () {
+        if (btn) {
+          var orig = btn.textContent;
+          btn.textContent = "✓";
+          setTimeout(function () { btn.textContent = orig; }, 1500);
+        }
+        showToast("Copied to clipboard");
       });
-    }
+    });
   }
 
   // Notification toggles
@@ -104,7 +128,7 @@ export function initServerSettings(appCtx) {
     if (!model) return;
     var ws = ctx.ws;
     if (ws && ws.readyState === 1) {
-      ws.send(JSON.stringify({ type: "set_model", model: model }));
+      ws.send(JSON.stringify({ type: "set_server_default_model", model: model }));
     }
   });
 
@@ -140,6 +164,21 @@ export function initServerSettings(appCtx) {
     });
   }
 
+  // Global CLAUDE.md: save button
+  var ssClaudeMdSave = document.getElementById("ss-claudemd-save");
+  if (ssClaudeMdSave) {
+    ssClaudeMdSave.addEventListener("click", function () { saveGlobalClaudeMd(); });
+  }
+
+  // Shared environment: add button
+  var ssEnvAddBtn = document.getElementById("ss-env-add-btn");
+  if (ssEnvAddBtn) {
+    ssEnvAddBtn.addEventListener("click", function () {
+      addSharedEnvRow("", "", true);
+      autoSaveSharedEnv();
+    });
+  }
+
   // Shutdown server
   var shutdownInput = document.getElementById("settings-shutdown-input");
   var shutdownBtn = document.getElementById("settings-shutdown-btn");
@@ -184,6 +223,10 @@ function switchSection(sectionName) {
     var isActive2 = sections[j].dataset.section === sectionName;
     sections[j].classList.toggle("active", isActive2);
   }
+
+  // Lazy-load section data
+  if (sectionName === "claudemd") loadGlobalClaudeMd();
+  if (sectionName === "environment") loadSharedEnv();
 }
 
 function openSettings() {
@@ -262,14 +305,11 @@ function populateSettings() {
   // Sync notification toggles
   syncNotifToggles();
 
-  // Theme
-  updateThemeDisplay();
-
-  // Context view
-  updateContextViewButtons();
-
-  // Models
+  // Session defaults
   updateModelList();
+  updateModeList();
+  updateEffortBar();
+  updateSsBetaCard();
 }
 
 function syncNotifToggles() {
@@ -285,39 +325,26 @@ function syncNotifToggles() {
   }
 }
 
-function updateThemeDisplay() {
-  var container = document.getElementById("settings-theme-picker-container");
-  if (container) {
-    openSettingsThemePicker(container);
+function ssGetModelDesc(model) {
+  if (!model) return "";
+  var lower = model.toLowerCase();
+  for (var key in SS_MODEL_DESCRIPTIONS) {
+    if (lower.indexOf(key) !== -1) return SS_MODEL_DESCRIPTIONS[key];
   }
+  return "";
 }
 
-function updateContextViewButtons() {
-  var view = "off";
-  try { view = localStorage.getItem("clay-context-view") || "off"; } catch (e) {}
-  var btns = document.querySelectorAll("#settings-context-view .settings-btn-option");
-  for (var i = 0; i < btns.length; i++) {
-    btns[i].classList.toggle("active", btns[i].dataset.view === view);
-  }
+function ssIsSonnetModel(model) {
+  if (!model) return false;
+  return model.toLowerCase().indexOf("sonnet") !== -1;
 }
 
 function updateModelList() {
   var listEl = document.getElementById("settings-model-list");
-  var currentEl = document.getElementById("settings-current-model");
   if (!listEl) return;
 
   var models = ctx.currentModels || [];
-  var currentModel = ctx._currentModelValue || "";
-
-  // Look up display name for settings panel
-  var displayName = currentModel;
-  for (var j = 0; j < models.length; j++) {
-    if (models[j].value === currentModel && models[j].displayName) {
-      displayName = models[j].displayName;
-      break;
-    }
-  }
-  if (currentEl) currentEl.textContent = displayName || "-";
+  var currentModel = ctx.currentModel || ctx._currentModelValue || "";
 
   listEl.innerHTML = "";
   if (models.length === 0) {
@@ -326,15 +353,145 @@ function updateModelList() {
   }
 
   for (var i = 0; i < models.length; i++) {
-    var m = models[i];
-    var value = m.value || "";
-    var label = m.displayName || value;
-    var item = document.createElement("div");
-    item.className = "settings-model-item";
-    if (label === currentModel || value === currentModel) item.classList.add("active");
-    item.dataset.model = value;
-    item.textContent = label;
-    listEl.appendChild(item);
+    (function (m) {
+      var value = m.value || "";
+      var label = m.displayName || value;
+      var item = document.createElement("div");
+      item.className = "settings-model-item";
+      if (value === currentModel) item.classList.add("active");
+      item.dataset.model = value;
+
+      var nameSpan = document.createElement("span");
+      nameSpan.className = "settings-model-name";
+      nameSpan.textContent = label;
+      item.appendChild(nameSpan);
+
+      var desc = ssGetModelDesc(value);
+      if (desc) {
+        var descSpan = document.createElement("span");
+        descSpan.className = "settings-model-desc";
+        descSpan.textContent = desc;
+        item.appendChild(descSpan);
+      }
+
+      item.addEventListener("click", function () {
+        var ws = ctx.ws;
+        if (ws && ws.readyState === 1) {
+          ws.send(JSON.stringify({ type: "set_model", model: value }));
+        }
+        var items = listEl.querySelectorAll(".settings-model-item");
+        for (var j = 0; j < items.length; j++) items[j].classList.remove("active");
+        item.classList.add("active");
+        updateSsBetaCard(value);
+      });
+
+      listEl.appendChild(item);
+    })(models[i]);
+  }
+}
+
+function updateModeList() {
+  var listEl = document.getElementById("ss-mode-list");
+  if (!listEl) return;
+
+  var currentMode = ctx.currentMode || "default";
+  listEl.innerHTML = "";
+
+  for (var i = 0; i < SS_MODE_OPTIONS.length; i++) {
+    (function (opt) {
+      var item = document.createElement("div");
+      item.className = "settings-model-item" + (opt.value === currentMode ? " active" : "");
+
+      var nameSpan = document.createElement("span");
+      nameSpan.className = "settings-model-name";
+      nameSpan.textContent = opt.label;
+      item.appendChild(nameSpan);
+
+      var descSpan = document.createElement("span");
+      descSpan.className = "settings-model-desc";
+      descSpan.textContent = opt.desc;
+      item.appendChild(descSpan);
+
+      item.addEventListener("click", function () {
+        var ws = ctx.ws;
+        if (ws && ws.readyState === 1) {
+          ws.send(JSON.stringify({ type: "set_server_default_mode", mode: opt.value }));
+        }
+        var items = listEl.querySelectorAll(".settings-model-item");
+        for (var j = 0; j < items.length; j++) items[j].classList.remove("active");
+        item.classList.add("active");
+      });
+
+      listEl.appendChild(item);
+    })(SS_MODE_OPTIONS[i]);
+  }
+}
+
+function updateEffortBar() {
+  var bar = document.getElementById("ss-effort-bar");
+  if (!bar) return;
+
+  var currentEffort = ctx.currentEffort || "medium";
+  bar.innerHTML = "";
+
+  for (var i = 0; i < SS_EFFORT_LEVELS.length; i++) {
+    (function (lvl) {
+      var btn = document.createElement("button");
+      btn.className = "settings-btn-option" + (lvl.value === currentEffort ? " active" : "");
+      btn.textContent = lvl.value.charAt(0).toUpperCase() + lvl.value.slice(1);
+      btn.title = lvl.desc;
+      btn.addEventListener("click", function () {
+        var ws = ctx.ws;
+        if (ws && ws.readyState === 1) {
+          ws.send(JSON.stringify({ type: "set_server_default_effort", effort: lvl.value }));
+        }
+        var btns = bar.querySelectorAll(".settings-btn-option");
+        for (var j = 0; j < btns.length; j++) btns[j].classList.remove("active");
+        btn.classList.add("active");
+      });
+      bar.appendChild(btn);
+    })(SS_EFFORT_LEVELS[i]);
+  }
+}
+
+function updateSsBetaCard(overrideModel) {
+  var model = overrideModel || ctx.currentModel || ctx._currentModelValue || "";
+  var card = document.getElementById("ss-beta-card");
+  if (card) {
+    card.style.display = ssIsSonnetModel(model) ? "" : "none";
+  }
+
+  var toggle = document.getElementById("ss-beta-1m");
+  if (toggle) {
+    var betas = ctx.currentBetas || [];
+    var hasBeta = false;
+    for (var i = 0; i < betas.length; i++) {
+      if (betas[i].indexOf("context-1m") !== -1) { hasBeta = true; break; }
+    }
+    toggle.checked = hasBeta;
+    toggle.onchange = function () {
+      ssToggleBeta1m(this.checked);
+    };
+  }
+}
+
+function ssToggleBeta1m(enable) {
+  var betas = ctx.currentBetas || [];
+  var newBetas;
+  if (enable) {
+    newBetas = betas.slice();
+    newBetas.push("context-1m-2025-08-07");
+  } else {
+    newBetas = [];
+    for (var i = 0; i < betas.length; i++) {
+      if (betas[i].indexOf("context-1m") === -1) {
+        newBetas.push(betas[i]);
+      }
+    }
+  }
+  var ws = ctx.ws;
+  if (ws && ws.readyState === 1) {
+    ws.send(JSON.stringify({ type: "set_betas", betas: newBetas }));
   }
 }
 
@@ -359,6 +516,9 @@ export function updateSettingsModels(current, models) {
   ctx._currentModelValue = current;
   if (isSettingsOpen()) {
     updateModelList();
+    updateModeList();
+    updateEffortBar();
+    updateSsBetaCard();
   }
 }
 
@@ -492,6 +652,202 @@ function updatePinStatus(enabled) {
   if (actionLabel) actionLabel.textContent = enabled ? "Change PIN" : "Set PIN";
 }
 
+// ===== Global CLAUDE.md =====
+function loadGlobalClaudeMd() {
+  var editor = document.getElementById("ss-claudemd-editor");
+  var status = document.getElementById("ss-claudemd-status");
+  var saveStatus = document.getElementById("ss-claudemd-save-status");
+  if (saveStatus) saveStatus.textContent = "";
+  if (status) status.textContent = "Loading...";
+
+  var ws = ctx.ws;
+  if (ws && ws.readyState === 1) {
+    ws.send(JSON.stringify({ type: "read_global_claude_md" }));
+  }
+}
+
+export function handleGlobalClaudeMdRead(msg) {
+  var editor = document.getElementById("ss-claudemd-editor");
+  var status = document.getElementById("ss-claudemd-status");
+  if (!editor) return;
+
+  if (msg.error) {
+    editor.value = "";
+    if (status) status.textContent = "No global CLAUDE.md found. Save to create one.";
+  } else {
+    editor.value = msg.content || "";
+    if (status) status.textContent = "";
+  }
+}
+
+function saveGlobalClaudeMd() {
+  var editor = document.getElementById("ss-claudemd-editor");
+  var saveStatus = document.getElementById("ss-claudemd-save-status");
+  if (!editor) return;
+
+  var ws = ctx.ws;
+  if (ws && ws.readyState === 1) {
+    ws.send(JSON.stringify({ type: "write_global_claude_md", content: editor.value }));
+    if (saveStatus) saveStatus.textContent = "Saving...";
+  }
+}
+
+export function handleGlobalClaudeMdWrite(msg) {
+  var saveStatus = document.getElementById("ss-claudemd-save-status");
+  if (!saveStatus) return;
+  if (msg.ok) {
+    saveStatus.textContent = "Saved";
+    setTimeout(function () { saveStatus.textContent = ""; }, 2000);
+  } else {
+    saveStatus.textContent = "Error: " + (msg.error || "Failed to save");
+  }
+}
+
+// ===== Shared Environment Variables =====
+var sharedEnvSaveTimer = null;
+
+function loadSharedEnv() {
+  var saveStatus = document.getElementById("ss-env-save-status");
+  if (saveStatus) saveStatus.textContent = "";
+
+  var ws = ctx.ws;
+  if (ws && ws.readyState === 1) {
+    ws.send(JSON.stringify({ type: "get_shared_env" }));
+  }
+}
+
+export function handleSharedEnv(msg) {
+  var list = document.getElementById("ss-env-list");
+  if (!list) return;
+  list.innerHTML = "";
+
+  var pairs = parseEnvString(msg.envrc || "");
+  for (var i = 0; i < pairs.length; i++) {
+    addSharedEnvRow(pairs[i].key, pairs[i].value, false);
+  }
+  refreshIcons();
+}
+
+export function handleSharedEnvSaved(msg) {
+  var saveStatus = document.getElementById("ss-env-save-status");
+  if (!saveStatus) return;
+  if (msg.ok) {
+    saveStatus.textContent = "Saved";
+    setTimeout(function () { saveStatus.textContent = ""; }, 2000);
+  } else {
+    saveStatus.textContent = "Error: " + (msg.error || "Failed to save");
+  }
+}
+
+function buildSharedEnvString() {
+  var list = document.getElementById("ss-env-list");
+  if (!list) return "";
+  var rows = list.querySelectorAll(".ps-env-row");
+  var lines = [];
+  for (var i = 0; i < rows.length; i++) {
+    var keyInput = rows[i].querySelector(".ps-env-key");
+    var valInput = rows[i].querySelector(".ps-env-val");
+    var key = keyInput ? keyInput.value.trim() : "";
+    var val = valInput ? valInput.value : "";
+    if (key) lines.push("export " + key + "=" + val);
+  }
+  return lines.join("\n");
+}
+
+function addSharedEnvRow(key, value, focus) {
+  var list = document.getElementById("ss-env-list");
+  if (!list) return;
+
+  var row = document.createElement("div");
+  row.className = "ps-env-row";
+
+  var keyInput = document.createElement("input");
+  keyInput.type = "text";
+  keyInput.className = "ps-env-key";
+  keyInput.placeholder = "KEY";
+  keyInput.value = key;
+  keyInput.spellcheck = false;
+  keyInput.autocomplete = "off";
+
+  var valInput = document.createElement("input");
+  valInput.type = "text";
+  valInput.className = "ps-env-val";
+  valInput.placeholder = "value";
+  valInput.value = value;
+  valInput.spellcheck = false;
+  valInput.autocomplete = "off";
+
+  var delBtn = document.createElement("button");
+  delBtn.className = "ps-env-del";
+  delBtn.title = "Remove";
+  delBtn.innerHTML = '<i data-lucide="x"></i>';
+
+  delBtn.addEventListener("click", function () {
+    row.remove();
+    autoSaveSharedEnv();
+  });
+
+  keyInput.addEventListener("input", function () { autoSaveSharedEnv(); });
+  valInput.addEventListener("input", function () { autoSaveSharedEnv(); });
+
+  // Paste detection
+  keyInput.addEventListener("paste", function (e) {
+    var text = (e.clipboardData || window.clipboardData).getData("text");
+    if (text && looksLikeEnv(text)) {
+      e.preventDefault();
+      var pairs = parseEnvString(text);
+      if (pairs.length > 0) {
+        keyInput.value = pairs[0].key;
+        valInput.value = pairs[0].value;
+        for (var p = 1; p < pairs.length; p++) {
+          addSharedEnvRow(pairs[p].key, pairs[p].value, false);
+        }
+        autoSaveSharedEnv();
+      }
+    }
+  });
+
+  valInput.addEventListener("paste", function (e) {
+    var text = (e.clipboardData || window.clipboardData).getData("text");
+    if (text && text.indexOf("\n") !== -1 && text.indexOf("=") !== -1) {
+      e.preventDefault();
+      var pairs = parseEnvString(text);
+      if (pairs.length > 0) {
+        keyInput.value = pairs[0].key;
+        valInput.value = pairs[0].value;
+        for (var p = 1; p < pairs.length; p++) {
+          addSharedEnvRow(pairs[p].key, pairs[p].value, false);
+        }
+        autoSaveSharedEnv();
+      }
+    }
+  });
+
+  row.appendChild(keyInput);
+  row.appendChild(valInput);
+  row.appendChild(delBtn);
+  list.appendChild(row);
+  refreshIcons();
+
+  if (focus) keyInput.focus();
+}
+
+function autoSaveSharedEnv() {
+  if (sharedEnvSaveTimer) clearTimeout(sharedEnvSaveTimer);
+  sharedEnvSaveTimer = setTimeout(function () {
+    var envrc = buildSharedEnvString();
+    var ws = ctx.ws;
+    if (ws && ws.readyState === 1) {
+      ws.send(JSON.stringify({ type: "set_shared_env", envrc: envrc }));
+      var saveStatus = document.getElementById("ss-env-save-status");
+      if (saveStatus) {
+        saveStatus.textContent = "Saved";
+        setTimeout(function () { saveStatus.textContent = ""; }, 2000);
+      }
+    }
+  }, 800);
+}
+
 function formatBytes(n) {
   if (n >= 1073741824) return (n / 1073741824).toFixed(1) + " GB";
   if (n >= 1048576) return (n / 1048576).toFixed(1) + " MB";