@xulongzhe/clawbench-desktop-linux-x64-payload 0.104.0 → 0.106.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xulongzhe/clawbench-desktop-linux-x64-payload",
-  "version": "0.104.0",
+  "version": "0.106.0",
   "description": "ClawBench desktop client — Linux x64 incremental-upgrade payload (app files only, no Electron runtime)",
   "files": [
     "payload.json",

package/resources/login.html

@@ -13,9 +13,10 @@
       password_label: 'Password',
       password_placeholder: 'Password',
       connect: 'Connect',
-      protocol: 'Protocol',
       server_address: 'Server Address',
-      add_connect: 'Add & Connect',
+      add: 'Add',
+      save: 'Save',
+      edit_server: 'Edit Server',
       cancel: 'Cancel',
       add_server: 'Add Server',
       confirm: 'Confirm',
@@ -24,8 +25,13 @@
       delete_server_msg: 'Delete this server?',
       saved_servers: 'Saved Servers',
       authenticating: 'Authenticating...',
+      saving: 'Saving...',
+      name_label: 'Name (optional)',
+      name_placeholder: 'e.g. Home NAS',
+      duplicate_name: 'That name is already used',
       enter_password: 'Please enter password',
-      enter_address: 'Please enter server address',
+      enter_full_address: 'Enter a full address with http:// or https:// and a port, e.g. https://192.168.1.100:20000',
+      duplicate_server: 'That address is already saved',
       connection_failed: 'Connection failed: ',
       connect_error: 'Unable to connect. Check address and network.',
       wrong_password: 'Wrong password',
@@ -36,7 +42,17 @@
       splash_loading: 'Loading page…',
       splash_rendering: 'Rendering…',
       splash_initializing: 'Initializing app…',
-      splash_cancel: 'Cancel connection'
+      splash_cancel: 'Cancel connection',
+      window_close: 'Close',
+      // Version-mismatch gate. The desktop and server versions differ in either
+      // direction, so the wording must not assume the app is the older side —
+      // the two `_older`/`_newer` variants cover that.
+      version_mismatch_title: 'Version mismatch',
+      version_mismatch_body: 'Desktop version: %1\nServer version: %2\n\nThe two versions may be incompatible: some features may behave unexpectedly or stop working.',
+      version_mismatch_older: 'The desktop app is older than the server. Updating is recommended.',
+      version_mismatch_newer: 'The desktop app is newer than the server. Downloading will align it to the server version (a downgrade).',
+      version_mismatch_download: 'Download',
+      version_mismatch_continue: 'Continue anyway'
     },
     zh: {
       slogan: '从终端到桌面',
@@ -44,9 +60,10 @@
       password_label: '登录密码',
       password_placeholder: '密码',
       connect: '连 接',
-      protocol: '协议',
       server_address: '服务器地址',
-      add_connect: '添 加 并 连 接',
+      add: '添 加',
+      save: '保 存',
+      edit_server: '编辑服务器',
       cancel: '取 消',
       add_server: '添加服务器',
       confirm: '确认',
@@ -55,8 +72,13 @@
       delete_server_msg: '删除此服务器？',
       saved_servers: '已保存服务器',
       authenticating: '认证中...',
+      saving: '保存中...',
+      name_label: '名称（选填）',
+      name_placeholder: '例如 家里的 NAS',
+      duplicate_name: '该名称已被使用',
       enter_password: '请输入密码',
-      enter_address: '请输入服务器地址',
+      enter_full_address: '请输入完整地址，包含 http:// 或 https:// 与端口，例如 https://192.168.1.100:20000',
+      duplicate_server: '该地址已存在',
       connection_failed: '连接失败: ',
       connect_error: '无法连接到服务器，请检查地址和网络。',
       wrong_password: '密码错误',
@@ -67,7 +89,16 @@
       splash_loading: '正在加载页面…',
       splash_rendering: '正在渲染…',
       splash_initializing: '正在初始化应用…',
-      splash_cancel: '取消连接'
+      splash_cancel: '取消连接',
+      window_close: '关闭',
+      // Version-mismatch gate. See the en block for why the wording is split by
+      // direction rather than assuming the app is older.
+      version_mismatch_title: '版本不一致',
+      version_mismatch_body: '桌面端版本: %1\n服务器版本: %2\n\n两者可能不兼容：部分功能可能异常或无法使用。',
+      version_mismatch_older: '桌面端版本低于服务器，建议更新。',
+      version_mismatch_newer: '桌面端版本高于服务器，下载将对齐到服务器版本（降级）。',
+      version_mismatch_download: '下载',
+      version_mismatch_continue: '仍然继续'
     }
   };
   var LANG = 'en';
@@ -715,6 +746,76 @@
     position: relative;
     overflow: hidden;
     -webkit-tap-highlight-color: transparent;
+    /* This page IS the window on first run and whenever the server is
+       unreachable, and the window is frameless on Windows/Linux — so without a
+       drag region the login window could not be moved at all. The whole page is
+       the handle (there is no title bar), which is why every interactive
+       element below has to opt back out. Ignored on macOS/Android/browser. */
+    -webkit-app-region: drag;
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  /* Opt out of the page-wide drag handle. Without this the inputs and buttons
+     would be undraggable-but-unclickable — a click would start a window move.
+     `.dlg-box` is included because the confirmation dialog's message text
+     should be selectable, and `.server-item` because its rows are clickable. */
+  input,
+  button,
+  select,
+  a,
+  .form-card,
+  .server-list,
+  .field-group,
+  .server-item,
+  .dlg-box,
+  .dlg-actions {
+    -webkit-app-region: no-drag;
+  }
+
+  /* Text the user may want to select (server URLs, error messages) opts out of
+     both the drag region and the inherited user-select:none. */
+  input,
+  .server-url,
+  .error-message,
+  .splash-stage {
+    -webkit-user-select: text;
+    user-select: text;
+  }
+
+  /* Window close, for the frameless Windows/Linux shell. Pinned to the window's
+     top-right — the same corner the native controls occupy on those platforms. */
+  .window-close {
+    position: fixed;
+    top: 0;
+    right: 0;
+    width: 46px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: none;
+    border-radius: 0 0 0 6px;
+    background: transparent;
+    color: var(--text-hint);
+    cursor: pointer;
+    z-index: 200;
+    transition: background 150ms ease, color 150ms ease;
+  }
+
+  .window-close svg {
+    width: 15px;
+    height: 15px;
+  }
+
+  .window-close:hover {
+    background: var(--color-red, #ef4444);
+    color: #fff;
+  }
+
+  .window-close[hidden] {
+    display: none;
   }
 
   /* Decorative background — matches LoginView.vue */
@@ -922,6 +1023,16 @@
     font-weight: 500;
   }
 
+  /* Row actions: edit + delete, kept in one group so the info block can
+     stretch without pushing the icons apart. */
+  .server-item-actions {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    gap: 2px;
+  }
+
+  .server-edit-btn,
   .server-delete-btn {
     flex-shrink: 0;
     border: none;
@@ -936,15 +1047,26 @@
     transition: background 0.1s, color 0.1s;
   }
 
+  .server-edit-btn:hover {
+    background: rgba(var(--accent-rgb), 0.12);
+    color: var(--accent-color);
+  }
+
   .server-delete-btn:hover {
     background: rgba(220, 38, 38, 0.1);
     color: var(--color-red);
   }
 
+  .server-item.active .server-edit-btn,
   .server-item.active .server-delete-btn {
     color: var(--text-muted);
   }
 
+  .server-item.active .server-edit-btn:hover {
+    color: var(--accent-color);
+    background: rgba(var(--accent-rgb), 0.15);
+  }
+
   .server-item.active .server-delete-btn:hover {
     color: var(--color-red);
     background: rgba(220, 38, 38, 0.12);
@@ -965,69 +1087,12 @@
     margin-bottom: 6px;
   }
 
-  /* Protocol radio */
-  .protocol-group {
-    display: flex;
-    gap: 20px;
-    margin-bottom: 16px;
-  }
-
-  .protocol-group label {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    font-size: 14px;
+  /* Title shown above the add form when it is reused for editing */
+  .form-title {
+    font-size: 15px;
+    font-weight: 600;
     color: var(--text-primary);
-    cursor: pointer;
-  }
-
-  .protocol-group input[type="radio"] {
-    appearance: none;
-    -webkit-appearance: none;
-    width: 18px;
-    height: 18px;
-    border: 2px solid var(--border-color);
-    border-radius: 50%;
-    position: relative;
-    cursor: pointer;
-    transition: border-color 0.2s;
-  }
-
-  .protocol-group input[type="radio"]:checked {
-    border-color: var(--accent-color);
-  }
-
-  .protocol-group input[type="radio"]:checked::after {
-    content: '';
-    position: absolute;
-    top: 3px;
-    left: 3px;
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    background: var(--accent-color);
-  }
-
-  /* Host + Port row */
-  .host-row {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-  }
-
-  .host-row input:first-child {
-    flex: 1;
-  }
-
-  .host-row .colon {
-    color: var(--text-muted);
-    font-size: 18px;
-    line-height: 44px;
-  }
-
-  .host-row input:last-child {
-    width: 90px;
-    flex-shrink: 0;
+    margin-bottom: 14px;
   }
 
   /* Input fields — matches LoginView.vue input style */
@@ -1386,6 +1451,94 @@
     background: var(--bg-tertiary);
     color: var(--text-primary);
   }
+
+  /* ── Version-mismatch gate ──────────────────────────────────────────────
+     Replaces the loading splash when the desktop/server versions differ. Like
+     the splash it is hidden unless a body class is set (added by
+     __versionMismatchShow), so the same document can serve the login form, the
+     splash and the gate. Styled as a card, mirroring the app's DialogOverlay so
+     the prompt reads as the same UI as the in-app dialogs. */
+  .gate { display: none; }
+
+  body.gate-mode .gate {
+    position: fixed;
+    inset: 0;
+    /* Above the splash: the gate replaces it, but both may be display:flex at
+       once (the page is reused and the main process does not always clear
+       splash-mode), so the gate must win the paint order. */
+    z-index: 200;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 20px;
+    background: var(--bg-primary);
+  }
+
+  body.gate-mode .content { display: none; }
+
+  .gate-card {
+    width: 100%;
+    max-width: 360px;
+    padding: 18px 20px 14px;
+    background: var(--bg-secondary);
+    border-radius: 14px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 14px 44px rgba(0, 0, 0, 0.3);
+  }
+
+  .gate-title {
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: 8px;
+  }
+
+  .gate-body {
+    font-size: 13px;
+    line-height: 1.6;
+    color: var(--text-secondary);
+    white-space: pre-line;
+    word-break: break-word;
+  }
+
+  .gate-direction {
+    margin-top: 10px;
+    font-size: 12px;
+    line-height: 1.5;
+    color: var(--text-muted);
+  }
+
+  .gate-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+    margin-top: 16px;
+  }
+
+  .gate-btn {
+    padding: 7px 14px;
+    font-size: 13px;
+    font-family: inherit;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: opacity 150ms ease, background 150ms ease, color 150ms ease;
+  }
+
+  .gate-continue {
+    color: var(--text-secondary);
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border-color);
+  }
+  .gate-continue:hover {
+    color: var(--text-primary);
+  }
+
+  .gate-download {
+    color: #fff;
+    background: var(--accent-color);
+    border: none;
+    font-weight: 600;
+  }
+  .gate-download:hover { opacity: 0.9; }
 </style>
 </head>
 <body>
@@ -1402,9 +1555,38 @@
     <button type="button" class="splash-cancel" id="splashCancel" data-i18n="splash_cancel">取消连接</button>
   </div>
 
+  <!-- Version-mismatch gate. Shown by the main process (see splash.ts /
+       versionGate.ts) INSTEAD of the loading splash when the desktop and server
+       versions differ in either direction. Blocking: it has no cancel button, so
+       the only ways out are "download" and "continue". -->
+  <div class="gate" id="versionGate">
+    <div class="gate-card">
+      <div class="gate-title" id="gateTitle" data-i18n="version_mismatch_title">版本不一致</div>
+      <div class="gate-body" id="gateBody"></div>
+      <div class="gate-direction" id="gateDirection"></div>
+      <div class="gate-actions">
+        <button type="button" class="gate-btn gate-continue" id="gateContinue" data-i18n="version_mismatch_continue">仍然继续</button>
+        <button type="button" class="gate-btn gate-download" id="gateDownload" data-i18n="version_mismatch_download">下载</button>
+      </div>
+    </div>
+  </div>
+
   <div class="bg-gradient"></div>
   <div class="bg-grid"></div>
 
+  <!-- Window close, for the frameless Windows/Linux shell.
+       This document has no AppHeader, so it is the ONLY way to close the window
+       on first run or when the server is unreachable — without it the window
+       would have no close affordance at all. Hidden unless the host reports
+       app-drawn controls (macOS keeps its traffic lights, and Android is not a
+       window), so it never duplicates a native button. -->
+  <button type="button" class="window-close" id="windowClose" data-i18n-aria-label="window_close" data-i18n-title="window_close" aria-label="Close" title="Close" hidden>
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+      <line x1="6" y1="6" x2="18" y2="18"/>
+      <line x1="18" y1="6" x2="6" y2="18"/>
+    </svg>
+  </button>
+
   <div class="content">
     <!-- Brand -->
     <div class="brand">
@@ -1453,31 +1635,20 @@
         </div>
       </form>
 
-      <!-- Add server form (hidden by default) -->
+      <!-- Add / edit server form (hidden by default) -->
       <form id="addServerForm" onsubmit="return false;" style="display:none;">
-        <!-- Protocol -->
+        <div class="form-title" id="addFormTitle" style="display:none;"></div>
+
+        <!-- Optional display name -->
         <div class="field-group">
-          <span class="field-label" data-i18n="protocol">协议</span>
-          <div class="protocol-group">
-            <label>
-              <input type="radio" name="addProtocol" value="https" checked>
-              HTTPS
-            </label>
-            <label>
-              <input type="radio" name="addProtocol" value="http">
-              HTTP
-            </label>
-          </div>
+          <span class="field-label" data-i18n="name_label">名称（选填）</span>
+          <input type="text" id="addName" data-i18n-placeholder="name_placeholder" placeholder="例如 家里的 NAS" maxlength="40" autocorrect="off" autocapitalize="sentences" spellcheck="false">
         </div>
 
-        <!-- Host + Port -->
+        <!-- Server address (protocol + host + port in one field) -->
         <div class="field-group">
           <span class="field-label" data-i18n="server_address">服务器地址</span>
-          <div class="host-row">
-            <input type="text" id="addHost" placeholder="192.168.1.100" autocorrect="off" autocapitalize="none" spellcheck="false">
-            <span class="colon">:</span>
-            <input type="number" id="addPort" value="20000" inputmode="numeric">
-          </div>
+          <input type="text" id="addAddress" placeholder="https://192.168.1.100:20000" autocorrect="off" autocapitalize="none" spellcheck="false" inputmode="url">
         </div>
 
         <!-- Password -->
@@ -1493,7 +1664,7 @@
         </div>
 
         <button type="submit" class="connect-btn" id="addConnectBtn">
-          <span id="addBtnText" data-i18n="add_connect">添 加 并 连 接</span>
+          <span id="addBtnText" data-i18n="add">添 加</span>
         </button>
         <button type="button" class="cancel-btn" id="cancelAddBtn" data-i18n="cancel">取 消</button>
 
@@ -1537,6 +1708,7 @@
   // SVG icons
   var SVG_SERVER = '<svg class="server-item-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="2" width="20" height="8" rx="2"/><rect x="2" y="14" width="20" height="8" rx="2"/><circle cx="6" cy="6" r="1"/><circle cx="6" cy="18" r="1"/></svg>';
   var SVG_X = '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>';
+  var SVG_PENCIL = '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20h9"/><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg>';
 
   function applyI18n() {
     document.querySelectorAll('[data-i18n]').forEach(function(el) {
@@ -1545,6 +1717,15 @@
     document.querySelectorAll('[data-i18n-placeholder]').forEach(function(el) {
       el.placeholder = t(el.getAttribute('data-i18n-placeholder'));
     });
+    // Attribute-valued strings (tooltips, accessible names). The icon-only
+    // close button has no text to translate, so without these it would keep its
+    // hard-coded English label in every language.
+    document.querySelectorAll('[data-i18n-title]').forEach(function(el) {
+      el.title = t(el.getAttribute('data-i18n-title'));
+    });
+    document.querySelectorAll('[data-i18n-aria-label]').forEach(function(el) {
+      el.setAttribute('aria-label', t(el.getAttribute('data-i18n-aria-label')));
+    });
   }
 
   // ── Splash overlay (?splash=1) ──────────────────────────────────────────
@@ -1585,10 +1766,60 @@
     if (el) el.classList.remove('is-fading');
   };
 
+  // ── Version-mismatch gate ───────────────────────────────────────────────
+  // Shown INSTEAD of the loading splash when the desktop and server versions
+  // differ in either direction (see desktop/src/main/versionGate.ts). The main
+  // process calls __versionMismatchShow with the two versions and which side is
+  // newer; the buttons report the user's choice back through the native bridge.
+  //
+  // The direction decides the wording: "newer" means the desktop app is AHEAD,
+  // where downloading aligns DOWN to the server — so "update" would be wrong.
+  /** Fill the gate with the version details. Called from the main process. */
+  window.__versionMismatchShow = function(info) {
+    if (!info) return;
+    var body = document.getElementById('gateBody');
+    if (body) {
+      body.textContent = t('version_mismatch_body')
+        .replace('%1', info.clientVersion || '')
+        .replace('%2', info.serverVersion || '');
+    }
+    var dir = document.getElementById('gateDirection');
+    if (dir) {
+      dir.textContent = t(info.direction === 'newer'
+        ? 'version_mismatch_newer'
+        : 'version_mismatch_older');
+    }
+    document.body.classList.add('gate-mode');
+  };
+
+  /** Clear the gate state. The page is REUSED, so this runs before every show. */
+  window.__versionMismatchReset = function() {
+    document.body.classList.remove('gate-mode');
+  };
+
   if (SPLASH_MODE) {
     document.body.classList.add('splash-mode');
   }
 
+  /**
+   * Reveal and wire the window close button when the host draws its own
+   * controls (frameless Windows/Linux). `hasCustomWindowControls` is absent on
+   * older hosts, macOS and Android — the button stays hidden there, so it never
+   * duplicates a native close button. Runs before DOMContentLoaded so the
+   * button is usable even while the splash overlay is up.
+   */
+  (function initWindowClose() {
+    var btn = document.getElementById('windowClose');
+    if (!btn) return;
+    var supported = false;
+    try { supported = ClawBenchNative.hasCustomWindowControls && ClawBenchNative.hasCustomWindowControls() === true; } catch(e) {}
+    if (!supported) return;
+    btn.hidden = false;
+    btn.addEventListener('click', function() {
+      try { ClawBenchNative.windowClose(); } catch(e) {}
+    });
+  })();
+
   window.addEventListener('DOMContentLoaded', function() {
     // Apply i18n to all elements with data-i18n / data-i18n-placeholder
     applyI18n();
@@ -1602,6 +1833,20 @@
           try { ClawBenchNative.cancelSplash(); } catch(e) {}
         });
       }
+      // Version-gate buttons. Wired here (not in the show hook) so they work
+      // even if the gate is shown after the page has already loaded.
+      var continueBtn = document.getElementById('gateContinue');
+      if (continueBtn) {
+        continueBtn.addEventListener('click', function() {
+          try { ClawBenchNative.versionContinue(); } catch(e) {}
+        });
+      }
+      var downloadBtn = document.getElementById('gateDownload');
+      if (downloadBtn) {
+        downloadBtn.addEventListener('click', function() {
+          try { ClawBenchNative.versionDownload(); } catch(e) {}
+        });
+      }
       return;
     }
 
@@ -1655,64 +1900,81 @@
       }
     });
 
-    // Event: add and connect to new server
+    // Event: save the add/edit form. Both "Add Server" and the row pencil land
+    // here; the form's editUrl data attribute is what distinguishes them.
+    // Saving never connects — the user picks the server and presses Connect.
     document.getElementById('addServerForm').addEventListener('submit', function(e) {
       e.preventDefault();
       if (connecting) return;
       hideError('addErrorMsg');
 
-      var host = document.getElementById('addHost').value.trim();
-      var port = document.getElementById('addPort').value.trim();
+      var url = buildServerUrl(document.getElementById('addAddress').value);
+      if (!url) {
+        showError('addErrorMsg', t('enter_full_address'));
+        document.getElementById('addAddress').focus();
+        return;
+      }
       var password = document.getElementById('addPassword').value;
-      var protocol = document.querySelector('input[name="addProtocol"]:checked').value;
-
-      if (!host) {
-        showError('addErrorMsg', t('enter_address'));
-        document.getElementById('addHost').focus();
+      var name = normalizeServerName(document.getElementById('addName').value);
+      // The URL this form is editing ('' when adding). Captured before save so
+      // the rename branch can retire the old entry afterwards.
+      var editingUrl = document.getElementById('addServerForm').getAttribute('data-edit-url') || '';
+
+      // Renaming onto another saved server would silently overwrite that
+      // server's password (saveServer keys on URL). Refuse instead.
+      var clash = savedServers.some(function(s) {
+        return s.url === url && s.url !== editingUrl;
+      });
+      if (clash) {
+        showError('addErrorMsg', t('duplicate_server'));
         return;
       }
-      if (!port) {
-        port = (protocol === 'https') ? '443' : '80';
+      // Names are unique labels. The edited entry is exempt from matching
+      // itself; unnamed servers never collide with each other.
+      if (findServerNameConflict(savedServers, name, editingUrl)) {
+        showError('addErrorMsg', t('duplicate_name'));
+        return;
       }
 
-      var url = protocol + '://' + host + ':' + port;
-      if (url.endsWith('/')) url = url.substring(0, url.length - 1);
-
-      setConnecting(true, true);
+      setSaving(true);
+      // Both calls go through ipcRenderer.invoke, so failures surface as
+      // rejections. Chain them: the rename must delete the old entry only after
+      // the new one is written, and the list must reload after both settle.
       try {
-        // Save to native list first. See the note in the connect handler above:
-        // these are async, so the rejection must be handled explicitly.
-        ClawBenchNative.saveServer(url, password);
-        Promise.resolve(ClawBenchNative.connectToServer(url, password)).catch(function(err) {
-          showError('addErrorMsg', t('connection_failed') + (err && err.message ? err.message : ''));
-          setConnecting(false, true);
-        });
+        Promise.resolve(ClawBenchNative.saveServerNamed(url, password, name))
+          .then(function() {
+            // Only when the address actually changed: deleting the same URL
+            // would drop the entry we just saved.
+            if (editingUrl && editingUrl !== url) {
+              return Promise.resolve(ClawBenchNative.removeServer(editingUrl));
+            }
+          })
+          .then(function() {
+            setSaving(false);
+            hideAddForm();
+          })
+          .catch(function(err) {
+            showError('addErrorMsg', t('connection_failed') + (err && err.message ? err.message : ''));
+            setSaving(false);
+          });
       } catch(e) {
         showError('addErrorMsg', t('connection_failed') + e.message);
-        setConnecting(false, true);
+        setSaving(false);
       }
     });
 
-    // Event: blur on the host field -> normalize a full URL into protocol + port.
-    // Blur, not paste/input: the field is only rewritten after the user leaves it,
-    // so typing is never disturbed mid-keystroke. Reading .value (rather than
-    // clipboard data) also sidesteps WebView clipboard restrictions.
-    document.getElementById('addHost').addEventListener('blur', function() {
-      var parsed = parseServerInput(document.getElementById('addHost').value);
-      // Not a URL we understand -> leave the field exactly as the user typed it.
-      if (!parsed) return;
+    // Event: blur on the address field -> normalize a full address in place.
+    // Blur, not paste/input: the field is only rewritten after the user leaves
+    // it, so typing is never disturbed mid-keystroke. Reading .value (rather
+    // than clipboard data) also sidesteps WebView clipboard restrictions.
+    document.getElementById('addAddress').addEventListener('blur', function() {
+      var url = buildServerUrl(document.getElementById('addAddress').value);
+      // Incomplete address -> leave the field exactly as the user typed it; the
+      // submit handler reports what is missing.
+      if (!url) return;
 
       hideError('addErrorMsg');
-      document.getElementById('addHost').value = parsed.host;
-      // Only override the port when the URL carried one explicitly; the field
-      // keeps its default (20000) otherwise.
-      if (parsed.port !== null) {
-        document.getElementById('addPort').value = parsed.port;
-      }
-      // No scheme in the input -> leave the radio untouched.
-      if (parsed.protocol !== null) {
-        document.querySelector('input[name="addProtocol"][value="' + parsed.protocol + '"]').checked = true;
-      }
+      document.getElementById('addAddress').value = url;
     });
 
     // Event: show add form
@@ -1768,11 +2030,19 @@
       html += '  <div class="server-item-info">';
       html += '    <span class="server-indicator"></span>';
       html += '    ' + SVG_SERVER;
-      html += '    <span class="server-item-url">' + escHtml(formatHost(srv.url)) + '</span>';
+      // A named server shows its name; an unnamed one falls back to the
+      // address. The full address always stays in the title tooltip, so a
+      // named row is still identifiable (and copying it is possible).
+      html += '    <span class="server-item-url" title="' + escHtml(srv.url) + '">' + escHtml(normalizeServerName(srv.name) || formatHost(srv.url)) + '</span>';
+      html += '  </div>';
+      html += '  <div class="server-item-actions">';
+      html += '    <button class="server-edit-btn" onclick="event.stopPropagation(); editServer(\'' + escJs(srv.url) + '\')" title="' + t('edit_server') + '">';
+      html += '      ' + SVG_PENCIL;
+      html += '    </button>';
+      html += '    <button class="server-delete-btn" onclick="event.stopPropagation(); deleteServer(\'' + escJs(srv.url) + '\')" title="' + t('delete') + '">';
+      html += '      ' + SVG_X;
+      html += '    </button>';
       html += '  </div>';
-      html += '  <button class="server-delete-btn" onclick="event.stopPropagation(); deleteServer(\'' + escJs(srv.url) + '\')" title="' + t('delete') + '">';
-      html += '    ' + SVG_X;
-      html += '  </button>';
       html += '</div>';
     });
 
@@ -1886,17 +2156,59 @@
     });
   }
 
+  /**
+   * Show the form for adding a NEW server: empty fields, "Add" button.
+   */
   function showAddForm() {
+    var form = document.getElementById('addServerForm');
+    // Empty data-edit-url is what marks this as an add, not an edit.
+    form.setAttribute('data-edit-url', '');
+    document.getElementById('addFormTitle').style.display = 'none';
+    document.getElementById('addName').value = '';
+    document.getElementById('addAddress').value = '';
+    document.getElementById('addPassword').value = '';
+    document.getElementById('addBtnText').textContent = t('add');
+
+    document.getElementById('serverListSection').style.display = 'none';
+    document.getElementById('connectForm').style.display = 'none';
+    document.getElementById('addServerBtn').style.display = 'none';
+    form.style.display = 'block';
+  }
+
+  /**
+   * Reuse the add form to edit an existing server. data-edit-url holds the
+   * entry being edited so submit can tell the two modes apart and retire the
+   * old URL when the address changes.
+   */
+  function editServer(url) {
+    var srv = savedServers.find(function(s) { return s.url === url; });
+    if (!srv) return;
+
+    var form = document.getElementById('addServerForm');
+    form.setAttribute('data-edit-url', url);
+    var title = document.getElementById('addFormTitle');
+    title.textContent = t('edit_server');
+    title.style.display = 'block';
+    document.getElementById('addName').value = normalizeServerName(srv.name);
+    document.getElementById('addAddress').value = srv.url;
+    // Prefill the saved password so saving without retyping keeps it.
+    document.getElementById('addPassword').value = srv.password || '';
+    document.getElementById('addBtnText').textContent = t('save');
+
     document.getElementById('serverListSection').style.display = 'none';
     document.getElementById('connectForm').style.display = 'none';
     document.getElementById('addServerBtn').style.display = 'none';
-    document.getElementById('addServerForm').style.display = 'block';
+    form.style.display = 'block';
+    hideError('addErrorMsg');
+    document.getElementById('addAddress').focus();
   }
 
   function hideAddForm() {
     document.getElementById('addServerForm').style.display = 'none';
     document.getElementById('addErrorMsg').classList.remove('visible');
-    renderServerList();
+    // Reload from native rather than re-rendering the stale in-memory array:
+    // saving changed the list (new entry, promoted head, renamed URL).
+    loadServerList();
   }
 
   function formatHost(url) {
@@ -1937,13 +2249,31 @@
     } else {
       btn.disabled = false;
       if (isAddForm) {
-        btn.innerHTML = '<span id="addBtnText">' + t('add_connect') + '</span>';
+        // The form doubles as add and edit, so restore whichever label its
+        // current mode calls for rather than always "Add".
+        var editing = document.getElementById('addServerForm').getAttribute('data-edit-url');
+        btn.innerHTML = '<span id="addBtnText">' + t(editing ? 'save' : 'add') + '</span>';
       } else {
         btn.innerHTML = '<span id="btnText">' + t('connect') + '</span>';
       }
     }
   }
 
+  /**
+   * Busy state for the add/edit form's own Save/Add button. Separate from
+   * setConnecting because saving does not authenticate: showing "Authenticating"
+   * would misdescribe what is happening.
+   */
+  function setSaving(saving) {
+    var btn = document.getElementById('addConnectBtn');
+    if (saving) {
+      btn.disabled = true;
+      btn.innerHTML = '<div class="spinner"></div><span>' + t('saving') + '</span>';
+    } else {
+      setConnecting(false, true);
+    }
+  }
+
   // Called by native code on connection failure.
   // msg is the Chromium load-error description (e.g. "ERR_CONNECTION_REFUSED")
   // delivered from the main process's did-fail-load handler; empty when the

package/resources/url-utils.js

@@ -46,3 +46,61 @@ function parseServerInput(text) {
 
   return { protocol: protocol, host: host, port: port };
 }
+
+/**
+ * Build the canonical server URL from a single free-text address.
+ *
+ * Strict on purpose: the login form no longer has a protocol radio or a port
+ * field, so the address must carry BOTH explicitly. A bare host or a
+ * scheme-less `host:port` returns null and the caller shows "enter a full
+ * address" rather than guessing a scheme/port the user never chose.
+ *
+ * Normalisation the parser already gives us: scheme lowercased, path/query/
+ * fragment dropped, surrounding whitespace trimmed.
+ *
+ * Returns 'scheme://host:port', or null when the input is not a complete
+ * server address. Callers must treat null as "reject, do not save".
+ */
+function buildServerUrl(text) {
+  var parsed = parseServerInput(text);
+  if (!parsed || !parsed.protocol || !parsed.port) return null;
+  return parsed.protocol + '://' + parsed.host + ':' + parsed.port;
+}
+
+/**
+ * Normalise a server's display name: trimmed. Empty means "no name", which the
+ * list renders as the address instead.
+ *
+ * Returns '' for anything that is not a string, so callers can pass the raw
+ * field value without guarding.
+ */
+function normalizeServerName(text) {
+  if (typeof text !== 'string') return '';
+  return text.trim();
+}
+
+/**
+ * Find the server whose NAME equals `name`, ignoring `exceptUrl`.
+ *
+ * Names are unique labels, so the form refuses to save a duplicate. The
+ * comparison is case-insensitive (users do not think of "Home" and "home" as
+ * different servers) and an empty `name` never matches — it means "no name",
+ * and unnamed servers must not collide with each other.
+ *
+ * `exceptUrl` is the entry currently being edited: a server must not collide
+ * with itself when its name is left unchanged.
+ *
+ * Returns the conflicting entry (an object with at least `.url`), or null.
+ */
+function findServerNameConflict(servers, name, exceptUrl) {
+  var wanted = normalizeServerName(name).toLowerCase();
+  if (!wanted) return null;
+  if (!Array.isArray(servers)) return null;
+  for (var i = 0; i < servers.length; i++) {
+    var srv = servers[i];
+    if (!srv) continue;
+    if (exceptUrl && srv.url === exceptUrl) continue;
+    if (normalizeServerName(srv.name).toLowerCase() === wanted) return srv;
+  }
+  return null;
+}