device-center 0.2.0-beta.7 → 0.2.0-beta.8

package/src/pair.js

@@ -1,6 +1,8 @@
 import { capturePairing, clearPairing } from './pairing-handoff.js';
 import { api } from './api.js';
 import { initLanguage, getLocale, t, h } from './i18n.js';
+import { pairingFailureKind } from './pair-recovery.js';
+import { installedCliCommand } from './installed-cli.js';
 
 let handoff = capturePairing();
 document.querySelector('link[href="/src/login.css"]').href = '/src/pair.css';
@@ -18,8 +20,12 @@ function render() {
   else if (phase === 'waiting') root.innerHTML = heading('pair.bound') + `<p>${h('pair.reporting')}</p><p>${h('pair.noReply')}</p>${dashboard()}`;
   else if (phase === 'done') root.innerHTML = `<div class="status-mark" aria-hidden="true">✓</div>` + heading('pair.done') + `<p>${h('pair.doneBody')}</p><p>${h('pair.noReply')}</p>${dashboard()}`;
   else if (phase === 'report-timeout') root.innerHTML = heading('pair.bound') + `<p>${h('pair.reportTimeout')}</p>${dashboard()}`;
-  else if (phase === 'approval-unknown') root.innerHTML = heading('pair.approvalUnknown') + `<p>${h('pair.approvalUnknownBody')}</p>${dashboard()}`;
-  else root.innerHTML = heading(phase === 'cancelled' ? 'pair.cancelled' : 'pair.missing') + `<p>${h(phase === 'cancelled' ? 'pair.cancelledBody' : 'pair.missingBody')}</p><a class="primary" href="/start?lang=${getLocale()}">${h('pair.start')}</a>`;
+  else if (phase === 'approval-unknown') root.innerHTML = heading('pair.approvalUnknown') + `<p>${h('pair.approvalUnknownBody')}</p>${handoff ? `<button id="check-result">${h('pair.checkResult')}</button>` : ''}${dashboard()}`;
+  else if (phase === 'retry') root.innerHTML = heading('pair.retryTitle') + `<p>${h('pair.retryBody')}</p><button id="retry">${h('pair.retry')}</button>`;
+  else {
+    const command = installedCliCommand(`connect --cloud '${location.origin}' --port 5174 --browser --confirm`, navigator.userAgent.includes('Windows') ? 'windows' : 'posix');
+    root.innerHTML = heading(phase === 'cancelled' ? 'pair.cancelled' : 'pair.missing') + `<p>${h(phase === 'cancelled' ? 'pair.cancelledBody' : 'pair.resumeBody')}</p>${phase === 'cancelled' ? '' : `<details><summary>${h('pair.resumeCommand')}</summary><p>${h('pair.targetTerminal')}</p><textarea readonly rows="5" aria-label="${h('pair.resumeCommand')}">${escape(command)}</textarea></details>`}<a class="primary" href="/start?lang=${getLocale()}">${h('pair.start')}</a>`;
+  }
 }
 async function watchReport(driverId, deadline) {
   try {
@@ -31,6 +37,22 @@ async function watchReport(driverId, deadline) {
 }
 root.addEventListener('change', event => { if (event.target.id === 'share') shareSsh = event.target.checked; });
 root.addEventListener('click', async event => {
+  if (event.target.id === 'retry' && phase === 'retry') { await loadPairing(); return; }
+  if (event.target.id === 'check-result' && phase === 'approval-unknown' && handoff) {
+    phase = 'loading'; render();
+    try {
+      const result = await api.browserPairingResult(handoff.ticket);
+      if (result.state === 'approved') { clearPairing(); handoff = null; phase = 'waiting'; render(); void watchReport(result.driverId, Date.now() + 90_000); }
+      else if (result.state === 'pending') await loadPairing();
+      else { phase = 'approval-unknown'; render(); }
+    } catch (cause) {
+      if (pairingFailureKind(cause) === 'login') return;
+      if (pairingFailureKind(cause) === 'expired') { clearPairing(); handoff = null; phase = 'missing'; }
+      else phase = 'approval-unknown';
+      render();
+    }
+    return;
+  }
   if (event.target.id === 'cancel' && phase === 'ready') { clearTimeout(expiresTimer); clearPairing(); handoff = null; phase = 'cancelled'; render(); return; }
   if (event.target.id !== 'approve' || phase !== 'ready' || !handoff) return;
   phase = 'approving'; render();
@@ -42,19 +64,29 @@ root.addEventListener('click', async event => {
     if (cause.message === 'authentication_required') return;
     if (['driver_rate_limited', 'driver_limit'].includes(cause.message)) { phase = 'ready'; error = cause.message === 'driver_limit' ? 'panel.386' : 'panel.385'; }
     else if (['driver_pairing_expired', 'driver_pairing_unavailable', 'invalid_pairing_code', 'driver_pairing_confirmation_required'].includes(cause.message)) { clearPairing(); handoff = null; phase = 'missing'; }
-    else { clearTimeout(expiresTimer); clearPairing(); handoff = null; phase = 'approval-unknown'; }
+    else { clearTimeout(expiresTimer); phase = 'approval-unknown'; }
     render();
   }
 });
 initLanguage({ onChange: render });
 render();
-if (handoff) {
+async function loadPairing() {
+  if (!handoff || handoff.expiresAt <= Date.now()) { clearPairing(); handoff = null; phase = 'missing'; render(); return; }
+  clearTimeout(expiresTimer); phase = 'loading'; render();
   try {
     pairing = await api.lookupBrowserPairing(handoff.ticket);
     phase = 'ready'; render();
     expiresTimer = setTimeout(() => { if (phase !== 'ready') return; clearPairing(); handoff = null; phase = 'missing'; render(); }, Math.max(0, pairing.expiresAt - Date.now()));
   } catch (cause) {
-    if (cause.message !== 'authentication_required') { clearPairing(); handoff = null; phase = 'missing'; render(); }
+    const kind = pairingFailureKind(cause);
+    if (kind === 'login') return;
+    if (kind === 'expired' && cause.message === 'driver_pairing_unavailable') {
+      phase = 'approval-unknown'; render(); return;
+    }
+    if (kind === 'expired') { clearPairing(); handoff = null; phase = 'missing'; }
+    else phase = 'retry';
+    render();
   }
 }
+if (handoff) await loadPairing();
 window.addEventListener('pagehide', () => { clearTimeout(timer); clearTimeout(expiresTimer); });

package/src/pairing-handoff.js

@@ -1,5 +1,6 @@
 import { pendingCli, clearCli } from './cli-handoff.js';
 const KEY = 'device-center-pairing-v1';
+const EXPIRED = 'device-center-pairing-expired';
 const safeStorage = () => { try { return window.sessionStorage; } catch { return null; } };
 const valid = (value, now) => value && /^[a-f0-9]{64}$/.test(value.ticket ?? '') && Number.isSafeInteger(value.expiresAt) && value.expiresAt > now && value.expiresAt <= now + 330_000;
 
@@ -7,11 +8,15 @@ export function pendingPairing({ storage = safeStorage(), now = Date.now() } = {
   try {
     const value = JSON.parse(storage.getItem(KEY));
     if (valid(value, now)) return value;
+    if (/^[a-f0-9]{64}$/.test(value?.ticket ?? '') && Number.isSafeInteger(value?.expiresAt) && value.expiresAt <= now && now - value.expiresAt < 600_000) storage.setItem(EXPIRED, String(now));
     storage.removeItem(KEY);
   } catch { /* No token in error messages. */ }
   return null;
 }
-export function clearPairing({ storage = safeStorage() } = {}) { try { storage.removeItem(KEY); } catch { /* memory is cleared by the caller */ } }
+export function clearPairing({ storage = safeStorage() } = {}) { try { storage.removeItem(KEY); storage.removeItem(EXPIRED); } catch { /* memory is cleared by the caller */ } }
+export function recentlyExpiredPairing({ storage = safeStorage(), now = Date.now() } = {}) {
+  try { const at = Number(storage.getItem(EXPIRED)); return at > 0 && at <= now && now - at < 600_000; } catch { return false; }
+}
 
 export function capturePairing({ location = window.location, history = window.history, storage = safeStorage(), now = Date.now() } = {}) {
   if (!location.hash) return pendingPairing({ storage, now });
@@ -30,5 +35,5 @@ export function capturePairing({ location = window.location, history = window.hi
 export function loginDestination(locale, { search = globalThis.window?.location?.search ?? '' } = {}) {
   // Only this fixed management page can be selected without an active handoff.
   // Never accept an arbitrary return URL from the login query.
-  return `${pendingCli() ? '/cli' : pendingPairing() ? '/pair' : new URLSearchParams(search).get('continue') === 'cli' ? '/cli' : '/'}?lang=${encodeURIComponent(locale)}`;
+  return `${pendingCli() ? '/cli' : pendingPairing() || recentlyExpiredPairing() ? '/pair' : new URLSearchParams(search).get('continue') === 'cli' ? '/cli' : '/'}?lang=${encodeURIComponent(locale)}`;
 }

package/src/start.css

@@ -195,3 +195,6 @@ footer span { width: 100%; color: #8c807a; }
 .package-download .primary { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 16px; border-radius: 4px; font-size: 14px; text-decoration: none; }
 .package-digest { display: block; overflow-wrap: anywhere; font-size: 11px; line-height: 1.6; color: #a79892; }
 @media (max-width: 480px) { .method-switch span { padding: 9px 4px; font-size: 12px; } }
+.action-workbench > #os-options { margin-bottom: 22px; }
+.package-followup { margin: 20px 0; padding-left: 22px; color: #c9bdb4; font-size: 13px; line-height: 1.9; }
+.package-followup li { padding-left: 4px; margin: 8px 0; }

package/src/start.js

@@ -1,4 +1,4 @@
-import { renderPackageChoices } from './install-packages.js';
+import { renderPackageChoices, architectureChoices } from './install-packages.js';
 import { agentInstallPlan, terminalInstallScript, OFFICIAL_CONTROL_ORIGIN } from './onboarding.js';
 import { agentSetupPrompt } from './agent-setup.js';
 import { initLanguage, getLocale, t } from './i18n.js';
@@ -9,11 +9,10 @@ const result = document.querySelector('#copy-result');
 const customOrigin = document.querySelector('#custom-origin');
 // Shared links only preselect UI choices; strict plan validation still gates copying.
 const guideParams = new URLSearchParams(location.search);
-let mode = ['local', 'official', 'self-hosted'].includes(guideParams.get('mode')) ? guideParams.get('mode') : 'local';
-let method = ['manual', 'package'].includes(guideParams.get('method')) ? guideParams.get('method') : 'agent';
+let mode = ['local', 'official', 'self-hosted'].includes(guideParams.get('mode')) ? guideParams.get('mode') : 'official';
+let method = ['agent', 'manual', 'package'].includes(guideParams.get('method')) ? guideParams.get('method') : 'package';
 let os = ['windows', 'macos', 'linux'].includes(guideParams.get('os')) ? guideParams.get('os') : navigator.userAgent.includes('Linux') ? 'linux' : navigator.userAgent.includes('Windows') ? 'windows' : 'macos';
 let packageArch = os === 'macos' ? 'arm64' : 'x64';
-document.querySelector('#package-arch').value = packageArch;
 let packages = [];
 let packagesLoading = true;
 let packagesFailed = false;
@@ -66,11 +65,15 @@ function translatedText(selector, key) {
 }
 function updateGuidance() {
   const manual = method === 'manual';
+  document.querySelector('.mode-options').hidden = method === 'package';
   document.querySelector('#windows-candidate').hidden = os !== 'windows';
   document.querySelector('#package-options').hidden = method !== 'package';
   document.querySelector('#copy-options').hidden = method === 'package';
   document.querySelector('#next-action').hidden = method === 'package';
-  translatedText('#package-run', os === 'windows' ? 'guide.package.windows' : os === 'macos' ? 'guide.package.macos' : 'guide.package.linux');
+  const select = document.querySelector('#package-arch');
+  select.replaceChildren(...architectureChoices(os).map(([value, label]) => new Option(label, value)));
+  select.value = packageArch;
+  translatedText('#package-run', `guide.package.archHelp.${os}`);
   renderPackageChoices(document.querySelector('#package-downloads'), { packages, os, arch: packageArch, loading: packagesLoading, failed: packagesFailed });
   translatedText('#copy-label', manual ? 'guide.manual.copy' : { local: 'guide.localCopy', official: 'guide.hostedCopy', 'self-hosted': 'guide.customCopy' }[mode]);
   translatedText('#copy-hint', manual ? 'guide.manual.copyHint' : 'guide.focus.copyHint');

package/start.html

@@ -31,8 +31,8 @@
         <h1 id="hero-title"><span data-i18n="guide.visual.heroLine1">少切电脑。</span><span data-i18n="guide.visual.heroLine2">少搬日志。</span></h1>
         <p class="lead" data-i18n="guide.visual.lead">让本机 Agent 查看其他设备的状态与授权日志。</p>
         <div class="hero-actions"><a class="button primary hero-cta" href="#install-title"><span data-i18n="guide.visual.begin">开始接入</span><svg class="icon" aria-hidden="true"><use href="#icon-arrow"/></svg></a><span class="cta-hint" data-i18n="guide.focus.firstTry">第一次用？先选本机，无需账号。</span></div>
-        <p class="platform" data-i18n="guide.platform">macOS / Linux / Windows 11 预览 · Node.js 24+</p>
-        <p class="release-note"><span class="release-dot" aria-hidden="true"></span><span data-i18n="guide.badge">开发预览 · 0.2.0-beta.7 · MIT</span></p>
+        <p class="platform" data-i18n="guide.platform">macOS / Linux / Windows 11 · beta</p>
+        <p class="release-note"><span class="release-dot" aria-hidden="true"></span><span data-i18n="guide.badge">开发预览 · 0.2.0-beta.8 · MIT</span></p>
       </div>
       <figure class="scene" data-paused="false">
         <figcaption class="scene-caption"><span><span class="caption-cross" aria-hidden="true">+</span><span data-i18n="guide.focus.example">工作原理示意 · 无需操作</span></span><button class="motion-toggle" type="button" data-i18n-aria-label="guide.visual.pauseMotion" data-i18n-title="guide.visual.pauseMotion" aria-label="暂停动效" title="暂停动效"><svg class="icon pause-icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M8 5v14M16 5v14"/></svg><svg class="icon play-icon" aria-hidden="true" viewBox="0 0 24 24"><path d="m8 5 11 7-11 7Z"/></svg></button></figcaption>
@@ -81,20 +81,29 @@
       <div class="section-heading">
         <p class="eyebrow"><span class="action-marker" aria-hidden="true">↘</span><span data-i18n="guide.focus.start">开始操作</span></p>
         <h2 id="install-title" tabindex="-1" data-i18n="guide.focus.startTitle">接入，从这里开始</h2>
-        <p class="section-intro" data-i18n="guide.focus.startBody">选好使用方式，再选交给 Agent 或手动安装。目标设备没有 Agent 也能接入。</p>
+        <p class="section-intro" data-i18n="guide.focus.startBody">先选择目标系统和安装方式。推荐下载内置运行环境的安装包；使用模式在安装器里确认。</p>
         <p class="section-note" data-i18n="guide.visual.noInstall">复制不会执行安装</p>
       </div>
       <div class="action-workbench">
+          <fieldset class="pairing-options" id="os-options">
+            <legend data-i18n="guide.os.title">目标电脑的系统</legend>
+            <div class="pairing-choices">
+              <label><input type="radio" name="install-os" value="macos" checked><span>macOS</span></label>
+              <label><input type="radio" name="install-os" value="linux"><span>Linux</span></label>
+              <label><input type="radio" name="install-os" value="windows"><span>Windows 11</span></label>
+            </div>
+          </fieldset>
+
         <fieldset class="mode-options">
           <legend><span class="action-number" aria-hidden="true">01</span><span data-i18n="guide.focus.select">选择使用方式</span></legend>
           <div class="choices">
             <label class="mode-choice">
-              <input type="radio" name="install-mode" value="local" checked>
+              <input type="radio" name="install-mode" value="local">
               <span class="choice-icon"><svg class="icon" aria-hidden="true"><use href="#icon-computer"/></svg></span>
               <span class="choice-copy"><strong data-i18n="guide.local">本机使用</strong><span data-i18n="guide.visual.localBody">本机面板 + MCP，无需账号。</span></span>
             </label>
             <label class="mode-choice">
-              <input type="radio" name="install-mode" value="official">
+              <input type="radio" name="install-mode" value="official" checked>
               <span class="choice-icon"><svg class="icon" aria-hidden="true"><use href="#icon-cloud"/></svg></span>
               <span class="choice-copy"><strong data-i18n="guide.hosted">官方托管</strong><span data-i18n="guide.visual.hostedBody">用自己的账号绑定设备，使用加密中转。</span></span>
             </label>
@@ -110,31 +119,29 @@
           </details>
         </fieldset>
         <div class="copy-step">
-          <fieldset class="pairing-options" id="os-options">
-            <legend data-i18n="guide.os.title">目标电脑的系统</legend>
-            <div class="pairing-choices">
-              <label><input type="radio" name="install-os" value="macos" checked><span>macOS</span></label>
-              <label><input type="radio" name="install-os" value="linux"><span>Linux</span></label>
-              <label><input type="radio" name="install-os" value="windows"><span>Windows 11</span></label>
-            </div>
-          </fieldset>
           <p class="hint" id="windows-candidate" data-i18n="guide.windowsCandidate" hidden>Windows 11 预览版 · 安装后核对绑定与后台状态。</p>
           <fieldset class="method-options">
             <legend class="action-heading"><span class="action-number" aria-hidden="true">02</span><span data-i18n="guide.method.title">选择安装方式</span></legend>
             <div class="method-switch">
-              <label><input type="radio" name="install-method" value="agent" checked><span data-i18n="guide.method.agent">交给 Agent</span></label>
-              <label><input type="radio" name="install-method" value="package"><span data-i18n="guide.method.package">下载安装包</span></label>
+              <label><input type="radio" name="install-method" value="agent"><span data-i18n="guide.method.agent">交给 Agent</span></label>
+              <label><input type="radio" name="install-method" value="package" checked><span data-i18n="guide.method.package">下载安装包</span></label>
               <label><input type="radio" name="install-method" value="manual"><span data-i18n="guide.method.script">复制脚本</span></label>
             </div>
           </fieldset>
           <div id="package-options" hidden>
             <p class="hint" data-i18n="guide.package.description">内含程序、运行环境和依赖，无需系统 Node.js 或 npm 下载。</p>
             <label class="package-architecture"><span data-i18n="guide.package.arch">处理器架构</span>
-              <select id="package-arch"><option value="arm64">ARM64 / Apple Silicon</option><option value="x64">x64 / Intel / AMD</option></select>
+              <select id="package-arch" aria-describedby="package-run"></select>
             </label>
             <div id="package-downloads" aria-live="polite"></div>
             <p class="hint" id="package-run"></p>
             <p class="hint" data-i18n="guide.package.confirmations">在安装向导中确认本机、官方或已有自建服务，再确认后台运行与本人配对。</p>
+            <ol class="package-followup">
+              <li data-i18n="guide.package.step1"></li>
+              <li data-i18n="guide.package.step2"></li>
+              <li data-i18n="guide.package.step3"></li>
+              <li data-i18n="guide.package.step4"></li>
+            </ol>
             <a href="/install/offline.md" data-i18n="guide.package.details">查看安装包说明</a>
           </div>
           <div id="copy-options">
@@ -170,7 +177,7 @@
       <details><summary data-i18n="guide.faq">遇到问题先查什么？</summary><div class="detail-content"><p data-i18n="guide.faqBody"></p><p data-i18n="guide.feedback"></p></div></details>
     </section>
   </main>
-  <footer><a href="/install/agent.md" data-i18n="guide.full">Agent 完整安装指南（中文）</a><a href="/install/trial.md" data-i18n="guide.markdown">文字版试用指南（中文）</a><a href="https://www.npmjs.com/package/device-center/v/0.2.0-beta.7" target="_blank" rel="noopener noreferrer" data-i18n="guide.source">MIT npm 源码包 ↗</a><span data-i18n="guide.footer">本机安装 · 私钥留在设备 · 操作单独授权</span></footer>
+  <footer><a href="/install/agent.md" data-i18n="guide.full">Agent 完整安装指南（中文）</a><a href="/install/trial.md" data-i18n="guide.markdown">文字版试用指南（中文）</a><a href="https://www.npmjs.com/package/device-center/v/0.2.0-beta.8" target="_blank" rel="noopener noreferrer" data-i18n="guide.source">MIT npm 源码包 ↗</a><span data-i18n="guide.footer">本机安装 · 私钥留在设备 · 操作单独授权</span></footer>
   <script type="module" src="/src/start.js"></script>
 </body>
 </html>