clay-server 2.10.0 → 2.11.0-beta.10

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

@@ -3,6 +3,8 @@ import { refreshIcons } from './icons.js';
 import { showToast, copyToClipboard } from './utils.js';
 import { parseEnvString, looksLikeEnv } from './project-settings.js';
 import { checkAdminAccess, loadAdminSection } from './admin.js';
+import { closeFileViewer } from './filebrowser.js';
+import { renderModelList, renderModeList, renderEffortBar, renderThinkingBar, renderBetaCard, isSonnetModel } from './settings-defaults.js';
 
 var ctx = null;
 var settingsEl = null;
@@ -12,26 +14,6 @@ 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");
@@ -257,6 +239,7 @@ function switchSection(sectionName) {
 }
 
 function openSettings() {
+  closeFileViewer();
   settingsEl.classList.remove("hidden");
   settingsBtn.classList.add("active");
   refreshIcons(settingsEl);
@@ -281,7 +264,7 @@ function openSettings() {
 function resetRestartButton() {
   var btn = document.getElementById("settings-restart-btn");
   var errorEl = document.getElementById("settings-restart-error");
-  if (btn) { btn.disabled = false; btn.innerHTML = '<i data-lucide="refresh-cw" style="width:14px;height:14px;vertical-align:-2px;margin-right:4px;"></i>Restart Server'; }
+  if (btn) { btn.disabled = false; btn.innerHTML = '<i data-lucide="refresh-cw" style="width:14px;height:14px;vertical-align:-2px;margin-right:4px;"></i>Restart'; }
   if (errorEl) errorEl.classList.add("hidden");
 }
 
@@ -315,19 +298,14 @@ function requestStats() {
 }
 
 function populateSettings() {
-  // Server name
   var nameEl = document.getElementById("settings-server-name");
-  var projNameEl = document.getElementById("settings-project-name");
-  var cwdEl = document.getElementById("settings-project-cwd");
   var versionEl = document.getElementById("settings-server-version");
   var slugEl = document.getElementById("settings-project-slug");
   var wsPathEl = document.getElementById("settings-ws-path");
   var skipPermsEl = document.getElementById("settings-skip-perms");
 
-  var projectName = ctx.projectName || "-";
-  if (nameEl) nameEl.textContent = projectName;
-  if (projNameEl) projNameEl.textContent = projectName;
-  if (cwdEl) cwdEl.textContent = ctx.projectName || "-";
+  // Nav header defaults to hostname (updated by updateDaemonConfig)
+  if (nameEl && !nameEl.textContent) nameEl.textContent = "Server";
 
   var footerVersion = document.getElementById("footer-version");
   if (versionEl && footerVersion) {
@@ -352,6 +330,7 @@ function populateSettings() {
   updateModelList();
   updateModeList();
   updateEffortBar();
+  updateThinkingBar();
   updateSsBetaCard();
 }
 
@@ -368,174 +347,49 @@ function syncNotifToggles() {
   }
 }
 
-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];
+function ssSendMsg(type, data) {
+  var ws = ctx.ws;
+  if (ws && ws.readyState === 1) {
+    var msg = Object.assign({ type: type }, data);
+    ws.send(JSON.stringify(msg));
   }
-  return "";
 }
 
-function ssIsSonnetModel(model) {
-  if (!model) return false;
-  return model.toLowerCase().indexOf("sonnet") !== -1;
+function ssDefaultsOpts() {
+  return {
+    models: ctx.currentModels || [],
+    currentModel: ctx.currentModel || ctx._currentModelValue || "",
+    currentMode: ctx.currentMode || "default",
+    currentEffort: ctx.currentEffort || "medium",
+    currentThinking: ctx.currentThinking || "adaptive",
+    currentThinkingBudget: ctx.currentThinkingBudget || 10000,
+    currentBetas: ctx.currentBetas || [],
+    sendMsg: ssSendMsg,
+    modelMsgType: "set_model",
+    modeMsgType: "set_server_default_mode",
+    effortMsgType: "set_server_default_effort",
+    onModelSelect: function (model) { updateSsBetaCard(model); },
+  };
 }
 
 function updateModelList() {
-  var listEl = document.getElementById("settings-model-list");
-  if (!listEl) return;
-
-  var models = ctx.currentModels || [];
-  var currentModel = ctx.currentModel || ctx._currentModelValue || "";
-
-  listEl.innerHTML = "";
-  if (models.length === 0) {
-    listEl.innerHTML = '<div style="font-size:13px;color:var(--text-dimmer);">No models available</div>';
-    return;
-  }
-
-  for (var i = 0; i < models.length; i++) {
-    (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]);
-  }
+  renderModelList("ss", ssDefaultsOpts());
 }
 
 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]);
-  }
+  renderModeList("ss", ssDefaultsOpts());
 }
 
 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]);
-  }
+  renderEffortBar("ss", ssDefaultsOpts());
 }
 
-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 updateThinkingBar() {
+  renderThinkingBar("ss", ssDefaultsOpts());
 }
 
-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 }));
-  }
+function updateSsBetaCard(overrideModel) {
+  renderBetaCard("ss", Object.assign(ssDefaultsOpts(), { overrideModel: overrideModel }));
 }
 
 export function updateSettingsStats(data) {
@@ -561,6 +415,7 @@ export function updateSettingsModels(current, models) {
     updateModelList();
     updateModeList();
     updateEffortBar();
+    updateThinkingBar();
     updateSsBetaCard();
   }
 }
@@ -574,6 +429,20 @@ function requestDaemonConfig() {
 }
 
 export function updateDaemonConfig(config) {
+  // Nav header: show hostname (strip .local suffix, lowercase)
+  var nameEl = document.getElementById("settings-server-name");
+  if (nameEl && config.hostname) {
+    var displayHost = config.hostname.replace(/\.local$/i, "").toLowerCase();
+    nameEl.textContent = displayHost;
+    nameEl.title = config.hostname;
+  }
+
+  // Host
+  var hostnameEl = document.getElementById("settings-hostname");
+  var lanIpEl = document.getElementById("settings-lan-ip");
+  if (hostnameEl) hostnameEl.textContent = config.hostname || "-";
+  if (lanIpEl) lanIpEl.textContent = config.lanIp || "";
+
   // Port
   var portEl = document.getElementById("settings-port");
   if (portEl) portEl.textContent = String(config.port || "-");
@@ -599,14 +468,34 @@ export function updateDaemonConfig(config) {
   var keepAwakeToggle = document.getElementById("settings-keep-awake");
   if (keepAwakeToggle) keepAwakeToggle.checked = !!config.keepAwake;
 
-  // Show keep awake card only on macOS
-  var keepAwakeCard = document.getElementById("settings-keep-awake-card");
-  if (keepAwakeCard) {
-    if (config.platform === "darwin") {
-      keepAwakeCard.classList.remove("hidden");
-    } else {
-      keepAwakeCard.classList.add("hidden");
-    }
+  // Early Access toggle
+  var channelToggle = document.getElementById("settings-update-channel");
+  if (channelToggle) {
+    channelToggle.checked = (config.updateChannel === "beta");
+    channelToggle.onchange = function () {
+      var channel = channelToggle.checked ? "beta" : "stable";
+      if (ctx.ws && ctx.ws.readyState === 1) {
+        ctx.ws.send(JSON.stringify({ type: "set_update_channel", channel: channel }));
+        // Auto-trigger update check after channel change
+        setTimeout(function () {
+          ctx.ws.send(JSON.stringify({ type: "check_update" }));
+        }, 200);
+      }
+    };
+  }
+
+  // Show keep awake section/nav only on macOS
+  var keepAwakeSection = document.getElementById("settings-keep-awake-section");
+  var keepAwakeNav = document.getElementById("settings-keep-awake-nav");
+  var keepAwakeOpt = document.getElementById("settings-keep-awake-opt");
+  if (config.platform === "darwin") {
+    if (keepAwakeSection) keepAwakeSection.classList.remove("hidden");
+    if (keepAwakeNav) keepAwakeNav.classList.remove("hidden");
+    if (keepAwakeOpt) keepAwakeOpt.classList.remove("hidden");
+  } else {
+    if (keepAwakeSection) keepAwakeSection.classList.add("hidden");
+    if (keepAwakeNav) keepAwakeNav.classList.add("hidden");
+    if (keepAwakeOpt) keepAwakeOpt.classList.add("hidden");
   }
 }
 
@@ -632,7 +521,7 @@ export function handleRestartResult(msg) {
     showToast("Server is restarting...");
   } else {
     if (restartBtn) {
-      restartBtn.textContent = "Restart Server";
+      restartBtn.textContent = "Restart";
       restartBtn.disabled = false;
     }
     if (errorEl) {

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

@@ -0,0 +1,243 @@
+// settings-defaults.js — Shared rendering for model/mode/effort/thinking controls
+// Used by both server-settings.js and project-settings.js
+
+export var 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." },
+];
+
+export var 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." },
+];
+
+export var THINKING_OPTIONS = [
+  { value: "disabled", label: "Off", desc: "Disable extended thinking." },
+  { value: "adaptive", label: "Adaptive", desc: "Claude decides when to use extended thinking." },
+  { value: "budget", label: "Budget", desc: "Set a token budget for extended thinking." },
+];
+
+export var 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 getModelDesc(model) {
+  if (!model) return "";
+  var lower = (model.value || model).toLowerCase();
+  for (var key in MODEL_DESCRIPTIONS) {
+    if (lower.indexOf(key) !== -1) return MODEL_DESCRIPTIONS[key];
+  }
+  return "";
+}
+
+export function isSonnetModel(model) {
+  if (!model) return false;
+  return model.toLowerCase().indexOf("sonnet") !== -1;
+}
+
+// --- Render functions ---
+// Each takes an element ID prefix (e.g. "ss" or "ps"), a send function, and state getters.
+
+/**
+ * Render model list into `${prefix}-model-list`
+ * @param {string} prefix - Element ID prefix
+ * @param {object} opts - { models, currentModel, sendMsg, onModelSelect }
+ */
+export function renderModelList(prefix, opts) {
+  var listEl = document.getElementById(prefix + "-model-list");
+  if (!listEl) return;
+
+  var models = opts.models || [];
+  var currentModel = opts.currentModel || "";
+
+  listEl.innerHTML = "";
+  if (models.length === 0) {
+    listEl.innerHTML = '<div style="font-size:13px;color:var(--text-dimmer);">No models available</div>';
+    return;
+  }
+
+  for (var i = 0; i < models.length; i++) {
+    (function (m) {
+      var value = m.value || "";
+      var label = m.displayName || value;
+      var item = document.createElement("div");
+      item.className = "settings-model-item" + (value === currentModel ? " active" : "");
+      item.dataset.model = value;
+
+      var nameSpan = document.createElement("span");
+      nameSpan.className = "settings-model-name";
+      nameSpan.textContent = label;
+      item.appendChild(nameSpan);
+
+      var desc = getModelDesc(value);
+      if (desc) {
+        var descSpan = document.createElement("span");
+        descSpan.className = "settings-model-desc";
+        descSpan.textContent = desc;
+        item.appendChild(descSpan);
+      }
+
+      item.addEventListener("click", function () {
+        opts.sendMsg(opts.modelMsgType, { 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");
+        if (opts.onModelSelect) opts.onModelSelect(value);
+      });
+
+      listEl.appendChild(item);
+    })(models[i]);
+  }
+}
+
+/**
+ * Render mode list into `${prefix}-mode-list`
+ */
+export function renderModeList(prefix, opts) {
+  var listEl = document.getElementById(prefix + "-mode-list");
+  if (!listEl) return;
+
+  var currentMode = opts.currentMode || "default";
+  listEl.innerHTML = "";
+
+  for (var i = 0; i < 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 () {
+        opts.sendMsg(opts.modeMsgType, { 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);
+    })(MODE_OPTIONS[i]);
+  }
+}
+
+/**
+ * Render effort bar into `${prefix}-effort-bar`
+ */
+export function renderEffortBar(prefix, opts) {
+  var bar = document.getElementById(prefix + "-effort-bar");
+  if (!bar) return;
+
+  var currentEffort = opts.currentEffort || "medium";
+  bar.innerHTML = "";
+
+  for (var i = 0; i < 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 () {
+        opts.sendMsg(opts.effortMsgType, { 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);
+    })(EFFORT_LEVELS[i]);
+  }
+}
+
+/**
+ * Render thinking bar into `${prefix}-thinking-bar`
+ */
+export function renderThinkingBar(prefix, opts) {
+  var bar = document.getElementById(prefix + "-thinking-bar");
+  if (!bar) return;
+
+  var currentThinking = opts.currentThinking || "adaptive";
+  var currentBudget = opts.currentThinkingBudget || 10000;
+  var budgetRow = document.getElementById(prefix + "-thinking-budget-row");
+  var budgetInput = document.getElementById(prefix + "-thinking-budget");
+  bar.innerHTML = "";
+
+  for (var i = 0; i < THINKING_OPTIONS.length; i++) {
+    (function (opt) {
+      var btn = document.createElement("button");
+      btn.className = "settings-btn-option" + (opt.value === currentThinking ? " active" : "");
+      btn.textContent = opt.label;
+      btn.title = opt.desc;
+      btn.addEventListener("click", function () {
+        var msg = { thinking: opt.value };
+        if (opt.value === "budget") {
+          msg.budgetTokens = budgetInput ? parseInt(budgetInput.value, 10) || 10000 : 10000;
+        }
+        opts.sendMsg("set_thinking", msg);
+        var btns = bar.querySelectorAll(".settings-btn-option");
+        for (var j = 0; j < btns.length; j++) btns[j].classList.remove("active");
+        btn.classList.add("active");
+        if (budgetRow) budgetRow.style.display = opt.value === "budget" ? "" : "none";
+      });
+      bar.appendChild(btn);
+    })(THINKING_OPTIONS[i]);
+  }
+
+  if (budgetRow) budgetRow.style.display = currentThinking === "budget" ? "" : "none";
+  if (budgetInput) {
+    budgetInput.value = currentBudget;
+    budgetInput.addEventListener("change", function () {
+      var val = Math.max(1024, Math.min(128000, parseInt(this.value, 10) || 10000));
+      this.value = val;
+      opts.sendMsg("set_thinking", { thinking: "budget", budgetTokens: val });
+    });
+  }
+}
+
+/**
+ * Update beta card visibility and bind toggle
+ */
+export function renderBetaCard(prefix, opts) {
+  var model = opts.overrideModel || opts.currentModel || "";
+  var card = document.getElementById(prefix + "-beta-card");
+  if (card) {
+    card.style.display = isSonnetModel(model) ? "" : "none";
+  }
+
+  var toggle = document.getElementById(prefix + "-beta-1m");
+  if (toggle) {
+    var betas = opts.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 () {
+      var currentBetas = opts.currentBetas || [];
+      var newBetas;
+      if (this.checked) {
+        newBetas = currentBetas.slice();
+        newBetas.push("context-1m-2025-08-07");
+      } else {
+        newBetas = [];
+        for (var j = 0; j < currentBetas.length; j++) {
+          if (currentBetas[j].indexOf("context-1m") === -1) {
+            newBetas.push(currentBetas[j]);
+          }
+        }
+      }
+      opts.sendMsg("set_betas", { betas: newBetas });
+    };
+  }
+}