clay-server 2.19.0 → 2.20.0-beta.1

package/lib/public/modules/sidebar.js

@@ -20,6 +20,8 @@ var searchDebounce = null;
 var cachedSessions = [];
 var expandedLoopGroups = new Set();
 var expandedLoopRuns = new Set();
+var expandedMobileLoopGroups = new Set();
+var expandedMobileLoopRuns = new Set();
 
 // --- Cached project data for mobile sheet ---
 var cachedProjectList = [];
@@ -1104,7 +1106,242 @@ function createMobileSessionItem(s) {
   return el;
 }
 
-// Helper: render sorted sessions into a container with date groups
+// Helper: create a mobile loop child element (individual session inside a group)
+function createMobileLoopChild(s) {
+  var el = document.createElement("button");
+  el.className = "mobile-loop-child" + (s.active ? " active" : "");
+
+  if (s.isProcessing) {
+    var dot = document.createElement("span");
+    dot.className = "mobile-session-processing";
+    el.appendChild(dot);
+  }
+
+  var textSpan = document.createElement("span");
+  textSpan.className = "mobile-session-title";
+  if (s.loop) {
+    var isRalphChild = s.loop.source === "ralph";
+    var roleName = s.loop.role === "crafting" ? "Crafting" : s.loop.role === "judge" ? "Judge" : (isRalphChild ? "Coder" : "Run");
+    var iterSuffix = s.loop.role === "crafting" ? "" : " #" + s.loop.iteration;
+    var roleCls = s.loop.role === "crafting" ? " crafting" : (!isRalphChild ? " scheduled" : "");
+    var badge = document.createElement("span");
+    badge.className = "mobile-loop-role-badge" + roleCls;
+    badge.textContent = roleName + iterSuffix;
+    textSpan.appendChild(badge);
+  }
+  el.appendChild(textSpan);
+
+  (function (id) {
+    el.addEventListener("click", function () {
+      if (ctx.ws && ctx.connected) {
+        ctx.ws.send(JSON.stringify({ type: "switch_session", id: id }));
+      }
+      dismissOverlayPanels();
+      closeMobileSheet();
+    });
+  })(s.id);
+
+  return el;
+}
+
+// Helper: create a mobile loop run sub-group (collapsible time group)
+function createMobileLoopRun(parentGk, startedAtKey, sessions, isRalph) {
+  var runGk = parentGk + ":" + startedAtKey;
+  var expanded = expandedMobileLoopRuns.has(runGk);
+  var startedAt = Number(startedAtKey);
+  var timeLabel = startedAt ? new Date(startedAt).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) : "Unknown";
+
+  var hasActive = false;
+  var anyProcessing = false;
+  var latestSession = sessions[0];
+  for (var i = 0; i < sessions.length; i++) {
+    if (sessions[i].active) hasActive = true;
+    if (sessions[i].isProcessing) anyProcessing = true;
+    if ((sessions[i].lastActivity || 0) > (latestSession.lastActivity || 0)) {
+      latestSession = sessions[i];
+    }
+  }
+
+  var wrapper = document.createElement("div");
+  wrapper.className = "mobile-loop-run-wrapper";
+
+  var header = document.createElement("button");
+  header.className = "mobile-loop-run" + (hasActive ? " active" : "") + (expanded ? " expanded" : "") + (isRalph ? "" : " scheduled");
+
+  var chevron = document.createElement("span");
+  chevron.className = "mobile-loop-chevron";
+  chevron.innerHTML = iconHtml("chevron-right");
+  header.appendChild(chevron);
+
+  var label = document.createElement("span");
+  label.className = "mobile-loop-run-time";
+  var labelHtml = "";
+  if (anyProcessing) {
+    labelHtml += '<span class="mobile-session-processing"></span> ';
+  }
+  labelHtml += escapeHtml(timeLabel);
+  label.innerHTML = labelHtml;
+  header.appendChild(label);
+
+  var countBadge = document.createElement("span");
+  countBadge.className = "mobile-loop-count" + (isRalph ? "" : " scheduled");
+  countBadge.textContent = String(sessions.length);
+  header.appendChild(countBadge);
+
+  header.addEventListener("click", (function (rk) {
+    return function (e) {
+      e.stopPropagation();
+      if (expandedMobileLoopRuns.has(rk)) {
+        expandedMobileLoopRuns.delete(rk);
+      } else {
+        expandedMobileLoopRuns.add(rk);
+      }
+      refreshMobileChatSheet();
+    };
+  })(runGk));
+
+  wrapper.appendChild(header);
+
+  if (expanded) {
+    var childContainer = document.createElement("div");
+    childContainer.className = "mobile-loop-children";
+    for (var k = 0; k < sessions.length; k++) {
+      childContainer.appendChild(createMobileLoopChild(sessions[k]));
+    }
+    wrapper.appendChild(childContainer);
+  }
+
+  return wrapper;
+}
+
+// Helper: create a mobile loop group element (collapsible group header)
+function createMobileLoopGroup(loopId, children, groupKey) {
+  var gk = groupKey || loopId;
+
+  // Sub-group children by startedAt (each run)
+  var runMap = {};
+  for (var i = 0; i < children.length; i++) {
+    var runKey = String(children[i].loop && children[i].loop.startedAt || 0);
+    if (!runMap[runKey]) runMap[runKey] = [];
+    runMap[runKey].push(children[i]);
+  }
+  var runKeys = Object.keys(runMap);
+
+  // Sort each run's children by iteration then role
+  for (var ri = 0; ri < runKeys.length; ri++) {
+    runMap[runKeys[ri]].sort(function (a, b) {
+      var ai = (a.loop && a.loop.iteration) || 0;
+      var bi = (b.loop && b.loop.iteration) || 0;
+      if (ai !== bi) return ai - bi;
+      var ar = (a.loop && a.loop.role === "judge") ? 1 : 0;
+      var br = (b.loop && b.loop.role === "judge") ? 1 : 0;
+      return ar - br;
+    });
+  }
+
+  // Sort runs by startedAt descending (newest first)
+  runKeys.sort(function (a, b) { return Number(b) - Number(a); });
+
+  var expanded = expandedMobileLoopGroups.has(gk);
+  var hasActive = false;
+  var anyProcessing = false;
+  var latestSession = children[0];
+  for (var ci = 0; ci < children.length; ci++) {
+    if (children[ci].active) hasActive = true;
+    if (children[ci].isProcessing) anyProcessing = true;
+    if ((children[ci].lastActivity || 0) > (latestSession.lastActivity || 0)) {
+      latestSession = children[ci];
+    }
+  }
+
+  var loopName = (children[0].loop && children[0].loop.name) || "Ralph Loop";
+  var isRalph = children[0].loop && children[0].loop.source === "ralph";
+  var isCrafting = false;
+  for (var j = 0; j < children.length; j++) {
+    if (children[j].loop && children[j].loop.role === "crafting") isCrafting = true;
+  }
+  var runCount = runKeys.length;
+
+  var wrapper = document.createElement("div");
+  wrapper.className = "mobile-loop-wrapper";
+
+  // Group header row
+  var header = document.createElement("button");
+  header.className = "mobile-loop-group" + (hasActive ? " active" : "") + (expanded ? " expanded" : "") + (isRalph ? "" : " scheduled");
+
+  var chevron = document.createElement("span");
+  chevron.className = "mobile-loop-chevron";
+  chevron.innerHTML = iconHtml("chevron-right");
+  header.appendChild(chevron);
+
+  var iconSpan = document.createElement("span");
+  var groupIcon = isRalph ? "repeat" : "calendar-clock";
+  iconSpan.className = "mobile-loop-icon" + (isRalph ? "" : " scheduled");
+  iconSpan.innerHTML = iconHtml(groupIcon);
+  header.appendChild(iconSpan);
+
+  if (anyProcessing) {
+    var dot = document.createElement("span");
+    dot.className = "mobile-session-processing";
+    header.appendChild(dot);
+  }
+
+  var nameSpan = document.createElement("span");
+  nameSpan.className = "mobile-loop-name";
+  nameSpan.textContent = loopName;
+  header.appendChild(nameSpan);
+
+  if (isCrafting && children.length === 1) {
+    var craftBadge = document.createElement("span");
+    craftBadge.className = "mobile-loop-badge crafting";
+    craftBadge.textContent = "Crafting";
+    header.appendChild(craftBadge);
+  } else {
+    var countBadge = document.createElement("span");
+    countBadge.className = "mobile-loop-count" + (isRalph ? "" : " scheduled");
+    var countLabel = runCount === 1 ? String(children.length) : runCount + (runCount === 1 ? " run" : " runs");
+    countBadge.textContent = countLabel;
+    header.appendChild(countBadge);
+  }
+
+  // Chevron toggles expansion
+  header.addEventListener("click", (function (lid) {
+    return function (e) {
+      e.stopPropagation();
+      if (expandedMobileLoopGroups.has(lid)) {
+        expandedMobileLoopGroups.delete(lid);
+      } else {
+        expandedMobileLoopGroups.add(lid);
+      }
+      refreshMobileChatSheet();
+    };
+  })(gk));
+
+  wrapper.appendChild(header);
+
+  // Expanded: show runs
+  if (expanded) {
+    var childContainer = document.createElement("div");
+    childContainer.className = "mobile-loop-children";
+
+    if (runCount === 1) {
+      var singleRun = runMap[runKeys[0]];
+      for (var sk = 0; sk < singleRun.length; sk++) {
+        childContainer.appendChild(createMobileLoopChild(singleRun[sk]));
+      }
+    } else {
+      for (var rk = 0; rk < runKeys.length; rk++) {
+        childContainer.appendChild(createMobileLoopRun(gk, runKeys[rk], runMap[runKeys[rk]], isRalph));
+      }
+    }
+
+    wrapper.appendChild(childContainer);
+  }
+
+  return wrapper;
+}
+
+// Helper: render sorted sessions into a container with date groups (with loop session grouping)
 function renderMobileSessionsInto(container) {
   var newBtn = document.createElement("button");
   newBtn.className = "mobile-session-new";
@@ -1117,14 +1354,51 @@ function renderMobileSessionsInto(container) {
   });
   container.appendChild(newBtn);
 
-  var sorted = cachedSessions.slice().sort(function (a, b) {
+  // Partition: loop sessions vs normal sessions (same logic as desktop renderSessionList)
+  var loopGroups = {};
+  var normalSessions = [];
+  for (var i = 0; i < cachedSessions.length; i++) {
+    var s = cachedSessions[i];
+    if (s.loop && s.loop.loopId && s.loop.role === "crafting" && s.loop.source !== "ralph") {
+      continue;
+    } else if (s.loop && s.loop.loopId) {
+      var startedAt = s.loop.startedAt || 0;
+      var dateStr = startedAt ? new Date(startedAt).toISOString().slice(0, 10) : "unknown";
+      var groupKey = s.loop.loopId + ":" + dateStr;
+      if (!loopGroups[groupKey]) loopGroups[groupKey] = [];
+      loopGroups[groupKey].push(s);
+    } else {
+      normalSessions.push(s);
+    }
+  }
+
+  // Build virtual items
+  var items = [];
+  for (var j = 0; j < normalSessions.length; j++) {
+    items.push({ type: "session", data: normalSessions[j], lastActivity: normalSessions[j].lastActivity || 0 });
+  }
+  var groupKeys = Object.keys(loopGroups);
+  for (var k = 0; k < groupKeys.length; k++) {
+    var gk = groupKeys[k];
+    var children = loopGroups[gk];
+    var realLoopId = children[0].loop.loopId;
+    var maxActivity = 0;
+    for (var m = 0; m < children.length; m++) {
+      var act = children[m].lastActivity || 0;
+      if (act > maxActivity) maxActivity = act;
+    }
+    items.push({ type: "loop", loopId: realLoopId, groupKey: gk, children: children, lastActivity: maxActivity });
+  }
+
+  // Sort by lastActivity descending
+  items.sort(function (a, b) {
     return (b.lastActivity || 0) - (a.lastActivity || 0);
   });
 
   var currentGroup = "";
-  for (var si = 0; si < sorted.length; si++) {
-    var s = sorted[si];
-    var group = getDateGroup(s.lastActivity || 0);
+  for (var n = 0; n < items.length; n++) {
+    var item = items[n];
+    var group = getDateGroup(item.lastActivity || 0);
     if (group !== currentGroup) {
       currentGroup = group;
       var header = document.createElement("div");
@@ -1132,7 +1406,11 @@ function renderMobileSessionsInto(container) {
       header.textContent = group;
       container.appendChild(header);
     }
-    container.appendChild(createMobileSessionItem(s));
+    if (item.type === "loop") {
+      container.appendChild(createMobileLoopGroup(item.loopId, item.children, item.groupKey));
+    } else {
+      container.appendChild(createMobileSessionItem(item.data));
+    }
   }
 }
 

package/lib/public/modules/theme.js

@@ -495,13 +495,16 @@ export function toggleDarkMode() {
   updateToggleIcon();
 }
 
-// Update the toggle switch checkbox state
+// Update all theme toggle checkboxes
 function updateToggleIcon() {
-  var checkbox = document.getElementById("theme-toggle-check");
-  if (!checkbox) return;
   var mode = getEffectiveMode();
-  // checked = light mode (thumb slides right, covering moon)
-  checkbox.checked = (mode === "light");
+  var isLight = mode === "light";
+  // Legacy top-bar toggle (may not exist)
+  var checkbox = document.getElementById("theme-toggle-check");
+  if (checkbox) checkbox.checked = isLight;
+  // User settings toggle
+  var usToggle = document.getElementById("us-theme-toggle");
+  if (usToggle) usToggle.checked = isLight;
 }
 
 // --- Theme picker UI ---
@@ -671,13 +674,8 @@ export function initTheme() {
   // Load all themes from server, then apply properly
   loadThemes();
 
-  // Wire up title bar toggle switch
-  var toggleCheck = document.getElementById("theme-toggle-check");
-  if (toggleCheck) {
-    toggleCheck.addEventListener("change", function () {
-      toggleDarkMode();
-    });
-  }
+  // Theme toggle is now in User Settings (us-theme-toggle)
+  // Wired up in user-settings.js initUserSettings()
 
   // Listen for system preference changes (only applies if user has no manual override)
   if (window.matchMedia) {

package/lib/public/modules/tools.js

@@ -389,6 +389,9 @@ function submitAskUserAnswer(container, toolId, questions, answers, multiSelecti
   enableMainInput();
   if (ctx.stopUrgentBlink) ctx.stopUrgentBlink();
 
+  // Show user's answers inline
+  showAnswerSummary(container, questions, result);
+
   if (ctx.ws && ctx.connected) {
     ctx.ws.send(JSON.stringify({
       type: "ask_user_response",
@@ -398,11 +401,72 @@ function submitAskUserAnswer(container, toolId, questions, answers, multiSelecti
   }
 }
 
-export function markAskUserAnswered(toolId) {
+function showAnswerSummary(container, questions, answers) {
+  if (!answers || Object.keys(answers).length === 0) return;
+  var existing = container.querySelector(".ask-user-answer-summary");
+  if (existing) return;
+  var summary = document.createElement("div");
+  summary.className = "ask-user-answer-summary";
+  for (var key in answers) {
+    if (!answers.hasOwnProperty(key)) continue;
+    var row = document.createElement("div");
+    row.className = "ask-user-answer-row";
+    var qi = parseInt(key, 10);
+    var label = (questions && questions[qi] && questions[qi].question) ? questions[qi].question : "Answer";
+    row.innerHTML = '<span class="ask-user-answer-label">' + escapeHtml(label) + '</span>' +
+      '<span class="ask-user-answer-value">' + escapeHtml(String(answers[key])) + '</span>';
+    summary.appendChild(row);
+  }
+  // Insert before submit button
+  var submitBtn = container.querySelector(".ask-user-submit");
+  if (submitBtn) {
+    submitBtn.parentNode.insertBefore(summary, submitBtn);
+  } else {
+    container.appendChild(summary);
+  }
+}
+
+export function markAskUserAnswered(toolId, answers) {
   var container = document.querySelector('.ask-user-container[data-tool-id="' + toolId + '"]');
   if (container && !container.classList.contains("answered")) {
     container.classList.add("answered");
     enableMainInput();
+    // Restore answers from history replay
+    if (answers && Object.keys(answers).length > 0) {
+      // Find matching questions from the tool_executing input
+      var questions = null;
+      var askQuestions = container.querySelectorAll(".ask-user-question");
+      if (askQuestions.length > 0) {
+        questions = [];
+        for (var qi = 0; qi < askQuestions.length; qi++) {
+          var qTextEl = askQuestions[qi].querySelector(".ask-user-question-text");
+          questions.push({ question: qTextEl ? qTextEl.textContent : "" });
+        }
+      }
+      showAnswerSummary(container, questions, answers);
+      // Also mark selected options to match the answers
+      for (var key in answers) {
+        if (!answers.hasOwnProperty(key)) continue;
+        var idx = parseInt(key, 10);
+        if (askQuestions[idx]) {
+          var answerVal = String(answers[key]);
+          var options = askQuestions[idx].querySelectorAll(".ask-user-option");
+          var matched = false;
+          for (var oi = 0; oi < options.length; oi++) {
+            var labelEl = options[oi].querySelector(".option-label");
+            if (labelEl && labelEl.textContent === answerVal) {
+              options[oi].classList.add("selected");
+              matched = true;
+            }
+          }
+          // If not matched to an option, fill the "Other" input
+          if (!matched) {
+            var otherInput = askQuestions[idx].querySelector(".ask-user-other input");
+            if (otherInput) otherInput.value = answerVal;
+          }
+        }
+      }
+    }
   }
 }
 
@@ -1345,17 +1409,22 @@ export function startThinking() {
     var el = thinkingGroup.el;
     el.classList.remove("done");
     el.querySelector(".thinking-content").textContent = "";
-    // Mate mode: restore dots row, hide thinking header
+    // Mate mode: restore sparkle activity row, hide thinking header
     if (el.classList.contains("mate-thinking")) {
-      var dotsRow = el.querySelector(".mate-thinking-row");
-      if (dotsRow) dotsRow.style.display = "flex";
+      var actRow = el.querySelector(".mate-thinking-activity");
+      if (actRow) {
+        actRow.style.display = "";
+        actRow.querySelector(".activity-text").textContent = randomThinkingVerb() + "...";
+      }
       var header = el.querySelector(".thinking-header");
       if (header) header.style.display = "none";
     }
     currentThinking = { el: el, fullText: "", startTime: Date.now() };
     refreshIcons();
     ctx.scrollToBottom();
-    ctx.setActivity(randomThinkingVerb() + "...");
+    if (!el.classList.contains("mate-thinking")) {
+      ctx.setActivity(randomThinkingVerb() + "...");
+    }
     return;
   }
 
@@ -1369,9 +1438,10 @@ export function startThinking() {
     el.innerHTML =
       '<img class="dm-bubble-avatar dm-bubble-avatar-mate" src="' + escapeHtml(mateAvatar) + '" alt="">' +
       '<div class="dm-bubble-content">' +
-      '<div class="mate-thinking-row">' +
-      '<span class="dm-bubble-name">' + escapeHtml(mateName) + '</span>' +
-      '<span class="mate-thinking-dots"><span></span><span></span><span></span></span>' +
+      '<div class="dm-bubble-header"><span class="dm-bubble-name">' + escapeHtml(mateName) + '</span></div>' +
+      '<div class="activity-inline mate-thinking-activity">' +
+      '<span class="activity-icon">' + iconHtml("sparkles") + '</span>' +
+      '<span class="activity-text">' + randomThinkingVerb() + '...</span>' +
       '</div>' +
       '<div class="thinking-header" style="display:none">' +
       '<span class="thinking-chevron">' + iconHtml("chevron-right") + '</span>' +
@@ -1401,7 +1471,9 @@ export function startThinking() {
   ctx.scrollToBottom();
   thinkingGroup = { el: el, count: 0, totalDuration: 0 };
   currentThinking = { el: el, fullText: "", startTime: Date.now() };
-  ctx.setActivity(randomThinkingVerb() + "...");
+  if (!ctx.isMateDm()) {
+    ctx.setActivity(randomThinkingVerb() + "...");
+  }
 }
 
 export function appendThinking(text) {
@@ -1422,10 +1494,10 @@ export function stopThinking(duration) {
   } else {
     currentThinking.el.querySelector(".thinking-duration").textContent = " " + secs.toFixed(1) + "s";
   }
-  // In mate mode: hide dots, show compact expandable thinking header
+  // In mate mode: hide sparkle activity, show compact expandable thinking header
   if (currentThinking.el.classList.contains("mate-thinking")) {
-    var dotsRow = currentThinking.el.querySelector(".mate-thinking-row");
-    if (dotsRow) dotsRow.style.display = "none";
+    var actRow = currentThinking.el.querySelector(".mate-thinking-activity");
+    if (actRow) actRow.style.display = "none";
     var header = currentThinking.el.querySelector(".thinking-header");
     if (header) {
       header.style.display = "";

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

@@ -3,6 +3,7 @@
 
 import { refreshIcons } from './icons.js';
 import { showToast } from './utils.js';
+import { toggleDarkMode, getCurrentTheme } from './theme.js';
 
 var ctx = null;
 var settingsEl = null;
@@ -66,17 +67,40 @@ export function initUserSettings(appCtx) {
   var pinInput = document.getElementById('us-pin-input');
   var pinSave = document.getElementById('us-pin-save');
   if (pinInput && pinSave) {
-    pinInput.addEventListener('input', function () {
+    function validatePin() {
       pinSave.disabled = !/^\d{6}$/.test(pinInput.value);
-    });
+    }
+    pinInput.addEventListener('input', validatePin);
+    pinInput.addEventListener('keyup', function (e) { e.stopPropagation(); validatePin(); });
     pinInput.addEventListener('keydown', stopProp);
-    pinInput.addEventListener('keyup', stopProp);
     pinInput.addEventListener('keypress', stopProp);
     pinSave.addEventListener('click', function () {
       savePin(pinInput.value);
     });
   }
 
+  // Auto-continue toggle
+  var autoContinueToggle = document.getElementById('us-auto-continue');
+  if (autoContinueToggle) {
+    autoContinueToggle.addEventListener('change', function () {
+      fetch('/api/user/auto-continue', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ enabled: this.checked }),
+      }).then(function (r) { return r.json(); }).then(function (data) {
+        if (data.ok) showToast(data.autoContinueOnRateLimit ? 'Auto-continue on' : 'Auto-continue off');
+      }).catch(function () {});
+    });
+  }
+
+  // Theme toggle (light/dark)
+  var themeToggle = document.getElementById('us-theme-toggle');
+  if (themeToggle) {
+    themeToggle.addEventListener('change', function () {
+      toggleDarkMode();
+    });
+  }
+
   // Logout button
   var logoutBtn = document.getElementById('us-logout-btn');
   if (logoutBtn) {
@@ -139,6 +163,15 @@ function populateAccount() {
     if (accountNav && !data.username) {
       accountNav.style.display = 'none';
     }
+    // Auto-continue toggle
+    var acToggle = document.getElementById('us-auto-continue');
+    if (acToggle) acToggle.checked = !!data.autoContinueOnRateLimit;
+    // Theme toggle
+    var thToggle = document.getElementById('us-theme-toggle');
+    if (thToggle) {
+      var theme = getCurrentTheme();
+      thToggle.checked = theme && theme.variant === 'light';
+    }
   }).catch(function () {});
 }
 
@@ -148,36 +181,36 @@ function savePin(pin) {
   var pinMsg = document.getElementById('us-pin-msg');
 
   pinSave.disabled = true;
-  pinSave.textContent = 'Saving...';
+  pinSave.textContent = 'Saving\u2026';
 
   fetch('/api/user/pin', {
     method: 'PUT',
     headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ pin: pin }),
+    body: JSON.stringify({ newPin: pin }),
   }).then(function (r) { return r.json(); }).then(function (data) {
     if (data.ok) {
       pinInput.value = '';
-      pinSave.textContent = 'Update PIN';
+      pinSave.textContent = 'Change PIN';
       if (pinMsg) {
-        pinMsg.textContent = 'PIN updated successfully.';
+        pinMsg.textContent = 'Your PIN has been changed.';
         pinMsg.className = 'us-pin-msg us-pin-msg-ok';
         pinMsg.classList.remove('hidden');
       }
-      showToast('PIN updated');
+      showToast('PIN changed');
     } else {
       pinSave.disabled = false;
-      pinSave.textContent = 'Update PIN';
+      pinSave.textContent = 'Change PIN';
       if (pinMsg) {
-        pinMsg.textContent = data.error || 'Failed to update PIN.';
+        pinMsg.textContent = data.error || 'Could not change your PIN. Please try again.';
         pinMsg.className = 'us-pin-msg us-pin-msg-err';
         pinMsg.classList.remove('hidden');
       }
     }
   }).catch(function () {
     pinSave.disabled = false;
-    pinSave.textContent = 'Update PIN';
+    pinSave.textContent = 'Change PIN';
     if (pinMsg) {
-      pinMsg.textContent = 'Network error.';
+      pinMsg.textContent = 'Connection lost. Check your network and try again.';
       pinMsg.className = 'us-pin-msg us-pin-msg-err';
       pinMsg.classList.remove('hidden');
     }