clay-server 2.20.0-beta.2 → 2.20.0-beta.4

package/lib/public/app.js

@@ -5527,26 +5527,31 @@ import { initDebate, handleDebateStarted, handleDebateResumed, handleDebateTurn,
       '<h2 style="margin:0 0 8px;color:var(--text,#fff);font-size:22px">Set your new PIN</h2>' +
       '<p style="margin:0 0 24px;color:var(--text-secondary,#aaa);font-size:14px">Your temporary PIN has expired. Please set a new 6-digit PIN to continue.</p>' +
       '<div style="display:flex;gap:8px;justify-content:center;margin-bottom:16px" id="fcp-boxes">' +
-      '<input class="fcp-digit" type="tel" maxlength="1" inputmode="numeric" autocomplete="off" style="width:44px;height:52px;text-align:center;font-size:22px;font-weight:600;border:2px solid var(--border,#333);border-radius:10px;background:var(--bg-secondary,#1a1a1e);color:var(--text,#fff);outline:none">' +
-      '<input class="fcp-digit" type="tel" maxlength="1" inputmode="numeric" autocomplete="off" style="width:44px;height:52px;text-align:center;font-size:22px;font-weight:600;border:2px solid var(--border,#333);border-radius:10px;background:var(--bg-secondary,#1a1a1e);color:var(--text,#fff);outline:none">' +
-      '<input class="fcp-digit" type="tel" maxlength="1" inputmode="numeric" autocomplete="off" style="width:44px;height:52px;text-align:center;font-size:22px;font-weight:600;border:2px solid var(--border,#333);border-radius:10px;background:var(--bg-secondary,#1a1a1e);color:var(--text,#fff);outline:none">' +
-      '<input class="fcp-digit" type="tel" maxlength="1" inputmode="numeric" autocomplete="off" style="width:44px;height:52px;text-align:center;font-size:22px;font-weight:600;border:2px solid var(--border,#333);border-radius:10px;background:var(--bg-secondary,#1a1a1e);color:var(--text,#fff);outline:none">' +
-      '<input class="fcp-digit" type="tel" maxlength="1" inputmode="numeric" autocomplete="off" style="width:44px;height:52px;text-align:center;font-size:22px;font-weight:600;border:2px solid var(--border,#333);border-radius:10px;background:var(--bg-secondary,#1a1a1e);color:var(--text,#fff);outline:none">' +
-      '<input class="fcp-digit" type="tel" maxlength="1" inputmode="numeric" autocomplete="off" style="width:44px;height:52px;text-align:center;font-size:22px;font-weight:600;border:2px solid var(--border,#333);border-radius:10px;background:var(--bg-secondary,#1a1a1e);color:var(--text,#fff);outline:none">' +
+      '<input class="fcp-digit" type="tel" maxlength="1" inputmode="numeric" autocomplete="off" style="width:44px;height:52px;text-align:center;font-size:22px;font-weight:600;border:2px solid var(--border,#333);border-radius:10px;background:var(--bg-alt,#f5f5f5);color:var(--text,#fff);outline:none">' +
+      '<input class="fcp-digit" type="tel" maxlength="1" inputmode="numeric" autocomplete="off" style="width:44px;height:52px;text-align:center;font-size:22px;font-weight:600;border:2px solid var(--border,#333);border-radius:10px;background:var(--bg-alt,#f5f5f5);color:var(--text,#fff);outline:none">' +
+      '<input class="fcp-digit" type="tel" maxlength="1" inputmode="numeric" autocomplete="off" style="width:44px;height:52px;text-align:center;font-size:22px;font-weight:600;border:2px solid var(--border,#333);border-radius:10px;background:var(--bg-alt,#f5f5f5);color:var(--text,#fff);outline:none">' +
+      '<input class="fcp-digit" type="tel" maxlength="1" inputmode="numeric" autocomplete="off" style="width:44px;height:52px;text-align:center;font-size:22px;font-weight:600;border:2px solid var(--border,#333);border-radius:10px;background:var(--bg-alt,#f5f5f5);color:var(--text,#fff);outline:none">' +
+      '<input class="fcp-digit" type="tel" maxlength="1" inputmode="numeric" autocomplete="off" style="width:44px;height:52px;text-align:center;font-size:22px;font-weight:600;border:2px solid var(--border,#333);border-radius:10px;background:var(--bg-alt,#f5f5f5);color:var(--text,#fff);outline:none">' +
+      '<input class="fcp-digit" type="tel" maxlength="1" inputmode="numeric" autocomplete="off" style="width:44px;height:52px;text-align:center;font-size:22px;font-weight:600;border:2px solid var(--border,#333);border-radius:10px;background:var(--bg-alt,#f5f5f5);color:var(--text,#fff);outline:none">' +
       '</div>' +
       '<button id="fcp-save" disabled style="width:100%;padding:12px;border:none;border-radius:10px;background:var(--accent,#7c3aed);color:#fff;font-size:15px;font-weight:600;cursor:pointer;opacity:0.5">Save PIN</button>' +
       '<div id="fcp-err" style="margin-top:12px;color:#ef4444;font-size:13px"></div>' +
       '</div>';
     document.body.appendChild(ov);
 
-    var digits = ov.querySelectorAll(".fcp-digit");
+    var boxes = ov.querySelectorAll(".fcp-digit");
     var saveBtn = ov.querySelector("#fcp-save");
     var errEl = ov.querySelector("#fcp-err");
+    var pinValues = ["", "", "", "", "", ""];
+
+    function setDigit(idx, v) {
+      pinValues[idx] = v;
+      boxes[idx].value = v ? "\u2022" : "";
+      boxes[idx].classList.toggle("filled", v.length > 0);
+    }
 
     function getPin() {
-      var pin = "";
-      for (var i = 0; i < digits.length; i++) pin += digits[i].value;
-      return pin;
+      return pinValues.join("");
     }
 
     function updateBtn() {
@@ -5555,40 +5560,49 @@ import { initDebate, handleDebateStarted, handleDebateResumed, handleDebateTurn,
       saveBtn.style.opacity = ready ? "1" : "0.5";
     }
 
-    for (var i = 0; i < digits.length; i++) {
+    for (var i = 0; i < boxes.length; i++) {
       (function (idx) {
-        digits[idx].addEventListener("input", function () {
-          var val = this.value.replace(/\D/g, "");
-          this.value = val.substring(0, 1);
-          if (val && idx < digits.length - 1) digits[idx + 1].focus();
+        boxes[idx].addEventListener("input", function () {
+          var raw = this.value.replace(/[^0-9]/g, "");
+          if (!raw) { setDigit(idx, ""); updateBtn(); return; }
+          var v = raw.charAt(raw.length - 1);
+          setDigit(idx, v);
+          if (v && idx < 5) boxes[idx + 1].focus();
           updateBtn();
         });
-        digits[idx].addEventListener("keydown", function (e) {
-          if (e.key === "Backspace" && !this.value && idx > 0) {
-            digits[idx - 1].focus();
-            digits[idx - 1].value = "";
+        boxes[idx].addEventListener("keydown", function (e) {
+          if (e.key === "Backspace") {
+            if (!pinValues[idx] && idx > 0) {
+              setDigit(idx - 1, "");
+              boxes[idx - 1].focus();
+            } else {
+              setDigit(idx, "");
+            }
             updateBtn();
           }
+          if (e.key === "ArrowLeft" && idx > 0) boxes[idx - 1].focus();
+          if (e.key === "ArrowRight" && idx < 5) boxes[idx + 1].focus();
           if (e.key === "Enter" && !saveBtn.disabled) doSave();
           e.stopPropagation();
         });
-        digits[idx].addEventListener("keyup", function (e) { e.stopPropagation(); });
-        digits[idx].addEventListener("keypress", function (e) { e.stopPropagation(); });
-        digits[idx].addEventListener("paste", function (e) {
+        boxes[idx].addEventListener("keyup", function (e) { e.stopPropagation(); });
+        boxes[idx].addEventListener("keypress", function (e) { e.stopPropagation(); });
+        boxes[idx].addEventListener("paste", function (e) {
           e.preventDefault();
-          var text = (e.clipboardData || window.clipboardData).getData("text").replace(/\D/g, "").substring(0, 6);
-          for (var j = 0; j < text.length && (idx + j) < digits.length; j++) {
-            digits[idx + j].value = text[j];
+          var text = (e.clipboardData || window.clipboardData).getData("text").replace(/[^0-9]/g, "").substring(0, 6);
+          for (var j = 0; j < text.length && (idx + j) < 6; j++) {
+            setDigit(idx + j, text.charAt(j));
           }
           if (text.length > 0) {
-            var focusIdx = Math.min(idx + text.length, digits.length - 1);
-            digits[focusIdx].focus();
+            var focusIdx = Math.min(idx + text.length, 5);
+            boxes[focusIdx].focus();
           }
           updateBtn();
         });
+        boxes[idx].addEventListener("focus", function () { this.select(); });
       })(i);
     }
-    digits[0].focus();
+    boxes[0].focus();
 
     function doSave() {
       var pin = getPin();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clay-server",
-  "version": "2.20.0-beta.2",
+  "version": "2.20.0-beta.4",
   "description": "Web UI for Claude Code. Any device. Push notifications.",
   "bin": {
     "clay-server": "./bin/cli.js",