@xulongzhe/clawbench-desktop-linux-x64-payload 0.103.0 → 0.105.0

package/package.json

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

package/payload.json

@@ -1,4 +1,4 @@
 {
   "electron": "44.4.3",
-  "shell": "sha256-7a0d4e5e71bac0e161f65aa81fd51ec1800cb11901d85e9052e991ab903bbbb3"
+  "shell": "sha256-c6c6aeac1bb7aabd98de1d55a3127dff1c331139ae30f4dc7bfadc2e88caf73b"
 }

package/resources/login.html

@@ -29,7 +29,15 @@
       connection_failed: 'Connection failed: ',
       connect_error: 'Unable to connect. Check address and network.',
       wrong_password: 'Wrong password',
-      too_many_attempts: 'Too many attempts'
+      too_many_attempts: 'Too many attempts',
+      // Splash overlay (?splash=1). Wording mirrors Android's splash_status_*
+      // strings so the two platforms read identically.
+      splash_connecting: 'Connecting…',
+      splash_loading: 'Loading page…',
+      splash_rendering: 'Rendering…',
+      splash_initializing: 'Initializing app…',
+      splash_cancel: 'Cancel connection',
+      window_close: 'Close'
     },
     zh: {
       slogan: '从终端到桌面',
@@ -53,7 +61,15 @@
       connection_failed: '连接失败: ',
       connect_error: '无法连接到服务器，请检查地址和网络。',
       wrong_password: '密码错误',
-      too_many_attempts: '尝试次数过多'
+      too_many_attempts: '尝试次数过多',
+      // Splash overlay (?splash=1). Wording mirrors Android's splash_status_*
+      // strings so the two platforms read identically.
+      splash_connecting: '正在连接…',
+      splash_loading: '正在加载页面…',
+      splash_rendering: '正在渲染…',
+      splash_initializing: '正在初始化应用…',
+      splash_cancel: '取消连接',
+      window_close: '关闭'
     }
   };
   var LANG = 'en';
@@ -701,6 +717,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 */
@@ -1272,12 +1358,138 @@
       padding-bottom: env(safe-area-inset-bottom);
     }
   }
+  /* ── Splash overlay (?splash=1) ──────────────────────────────────────────
+     Shown by the main process while connecting to a server and booting the
+     app. Mirrors Android's native splash: a circular logo with a rotating
+     sweep ring, a stage line, and a cancel button. The ring reproduces
+     android/app/src/main/res/drawable/splash_sweep.xml (a dim full ring plus a
+     ~90° bright arc spun linearly over 1.6s). */
+  body.splash-mode .content { display: none; }
+
+  .splash {
+    position: fixed;
+    inset: 0;
+    display: none;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background: var(--bg-primary);
+    z-index: 100;
+  }
+  body.splash-mode .splash { display: flex; }
+
+  /* Fade-out hook, called by the main process just before it hides the view. */
+  .splash.is-fading { opacity: 0; transition: opacity 200ms ease; }
+
+  .splash-logo-wrapper {
+    position: relative;
+    width: 132px;
+    height: 132px;
+  }
+
+  /* Sweep ring: a dim circle with one bright arc, spun by rotating the box. */
+  .splash-sweep {
+    position: absolute;
+    inset: 0;
+    border-radius: 50%;
+    border: 2px solid var(--border-color);
+    opacity: 0.4;
+    animation: splash-spin 1.6s linear infinite;
+  }
+  .splash-sweep::after {
+    content: '';
+    position: absolute;
+    inset: -2px;
+    border-radius: 50%;
+    border: 3px solid transparent;
+    border-top-color: var(--accent-color);
+    border-right-color: var(--accent-color);
+    /* Two adjacent edges approximate the native 90° sweep segment without an
+       SVG, so no extra asset ships for this. */
+    transform: rotate(45deg);
+  }
+
+  @keyframes splash-spin {
+    from { transform: rotate(0deg); }
+    to   { transform: rotate(360deg); }
+  }
+
+  .splash-logo {
+    position: absolute;
+    top: 12px;
+    left: 12px;
+    width: 108px;
+    height: 108px;
+    border-radius: 50%;
+    object-fit: cover;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  }
+
+  .splash-title {
+    margin-top: 24px;
+    font-size: 20px;
+    font-weight: 500;
+    color: var(--text-primary);
+    letter-spacing: 0.06em;
+    opacity: 0.85;
+  }
+
+  .splash-stage {
+    margin-top: 12px;
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--text-muted);
+    opacity: 0.7;
+  }
+
+  .splash-cancel {
+    margin-top: 28px;
+    padding: 8px 16px;
+    font-size: 13px;
+    font-family: inherit;
+    color: var(--text-hint);
+    background: transparent;
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    cursor: pointer;
+    transition: background 150ms ease, color 150ms ease;
+  }
+  .splash-cancel:hover {
+    background: var(--bg-tertiary);
+    color: var(--text-primary);
+  }
 </style>
 </head>
 <body>
+  <!-- Splash overlay (?splash=1). Rendered by the main process as a native
+       WebContentsView floating above the app while it connects and boots; see
+       desktop/src/main/splash.ts. Hidden unless the query flag is present. -->
+  <div class="splash" id="splash">
+    <div class="splash-logo-wrapper">
+      <div class="splash-sweep"></div>
+      <img class="splash-logo" src="logo.png" alt="ClawBench">
+    </div>
+    <div class="splash-title">ClawBench</div>
+    <div class="splash-stage" id="splashStage" data-i18n="splash_connecting">正在连接…</div>
+    <button type="button" class="splash-cancel" id="splashCancel" data-i18n="splash_cancel">取消连接</button>
+  </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">
@@ -1402,6 +1614,7 @@
     </div>
   </div>
 
+<script src="url-utils.js"></script>
 <script>
   var connecting = false;
   var savedServers = [];
@@ -1417,12 +1630,94 @@
     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) ──────────────────────────────────────────
+  // The main process loads this same page with ?splash=1 as a native view
+  // floating over the app while it connects and boots. In that mode the login
+  // form is irrelevant: only the splash markup is shown, and the process drives
+  // the stage text through __splashSetStage.
+  var SPLASH_MODE = /(?:^|[?&])splash=1(?:&|$)/.test(window.location.search);
+  var SPLASH_STAGE_KEYS = {
+    connecting: 'splash_connecting',
+    loading: 'splash_loading',
+    rendering: 'splash_rendering',
+    initializing: 'splash_initializing'
+  };
+
+  /** Advance the splash stage text. Called from the main process. */
+  window.__splashSetStage = function(stage) {
+    var key = SPLASH_STAGE_KEYS[stage];
+    if (!key) return;
+    var el = document.getElementById('splashStage');
+    if (el) el.textContent = t(key);
+  };
+
+  /** Begin the splash fade-out. The main process hides the view shortly after. */
+  window.__splashFadeOut = function() {
+    var el = document.getElementById('splash');
+    if (el) el.classList.add('is-fading');
+  };
+
+  /**
+   * Reset the overlay for a fresh show. The page is REUSED across connects
+   * (the main process only loads it once), so the fade class left by the
+   * previous dismissal must be cleared — otherwise the second connect renders
+   * the overlay fully transparent.
+   */
+  window.__splashReset = function() {
+    var el = document.getElementById('splash');
+    if (el) el.classList.remove('is-fading');
+  };
+
+  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();
 
+    if (SPLASH_MODE) {
+      // Splash mode is display-only apart from the cancel button; skip the
+      // login form's data loading entirely.
+      var cancelBtn = document.getElementById('splashCancel');
+      if (cancelBtn) {
+        cancelBtn.addEventListener('click', function() {
+          try { ClawBenchNative.cancelSplash(); } catch(e) {}
+        });
+      }
+      return;
+    }
+
     // Load server list (single source of truth)
     loadServerList();
 
@@ -1511,6 +1806,28 @@
       }
     });
 
+    // 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;
+
+      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;
+      }
+    });
+
     // Event: show add form
     document.getElementById('addServerBtn').addEventListener('click', function() {
       showAddForm();

package/resources/url-utils.js

@@ -0,0 +1,48 @@
+/**
+ * Parse a server address into protocol / host / port.
+ *
+ * Pure and dependency-free on purpose: it must be evaluable in a bare sandbox
+ * (no DOM, no ClawBenchNative). Deliberately NOT built on `new URL()`:
+ *   new URL('192.168.1.100:8080')  -> throws Invalid URL
+ *   new URL('example.com:8080')    -> protocol "example.com:", hostname ""
+ * so the scheme-less form users actually type cannot go through it. A single
+ * regex treats both "with scheme" and "without scheme" uniformly.
+ *
+ * Returns { protocol: 'http'|'https'|null, host: string, port: string|null },
+ * or null when the input is not a server address we understand. Callers must
+ * treat null as "leave the field alone".
+ */
+function parseServerInput(text) {
+  if (typeof text !== 'string') return null;
+  var s = text.trim();
+  if (!s) return null;
+
+  var protocol = null;
+  var rest = s;
+
+  // Optional scheme. Anything other than http/https is not ours to interpret.
+  var schemeMatch = rest.match(/^([A-Za-z][A-Za-z0-9+.-]*):\/\//);
+  if (schemeMatch) {
+    var scheme = schemeMatch[1].toLowerCase();
+    if (scheme !== 'http' && scheme !== 'https') return null;
+    protocol = scheme;
+    rest = rest.slice(schemeMatch[0].length);
+  }
+
+  // Drop path, query and fragment — only scheme/host/port are meaningful here.
+  rest = rest.split(/[/?#]/)[0];
+
+  var host = rest;
+  var port = null;
+  var portMatch = rest.match(/^(.*):(\d+)$/);
+  if (portMatch) {
+    host = portMatch[1];
+    port = portMatch[2];
+  }
+
+  // Host must look like a hostname or IPv4 literal. This is also what rejects
+  // 'not a url', 'http://' (empty host) and 'user:pass@host' (contains '@').
+  if (!/^[A-Za-z0-9._-]+$/.test(host)) return null;
+
+  return { protocol: protocol, host: host, port: port };
+}