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

package/src/onboarding.js

@@ -1,9 +1,10 @@
 import { localizedInstallPrompt } from './install-prompt.js';
 import { normalizeLocale } from './i18n.js';
+import { installedCliCommand } from './installed-cli.js';
 
 export const OFFICIAL_CONTROL_ORIGIN = 'https://devices.owenshen.top';
 // Publish this exact CLI before deploying the matching guide.
-export const PUBLISHED_DRIVER_VERSION = '0.2.0-beta.6';
+export const PUBLISHED_DRIVER_VERSION = '0.2.0-beta.8';
 const inputError = (key, message) => Object.assign(new Error(message), { translationKey: key });
 export function connectCommand(value, shareSsh = false) {
   let url;
@@ -16,7 +17,7 @@ export function connectCommand(value, shareSsh = false) {
 
 // A reproducible handoff, not an installer. Reading/copying it has no machine effects.
 export function agentInstallPlan({ mode = 'local', origin, port = 5174, background = true, os = 'posix' } = {}) {
-  if (!['local', 'official', 'self-hosted'].includes(mode) || !['posix', 'windows'].includes(os) || !Number.isInteger(port) || port < 1024 || port > 65535 || typeof background !== 'boolean') throw inputError('error.install', '安装模式、系统或本机端口无效。');
+  if (!['local', 'official', 'self-hosted'].includes(mode) || !['posix', 'macos', 'linux', 'windows'].includes(os) || !Number.isInteger(port) || port < 1024 || port > 65535 || typeof background !== 'boolean') throw inputError('error.install', '安装模式、系统或本机端口无效。');
   const controlOrigin = mode === 'local' ? null : mode === 'official' ? OFFICIAL_CONTROL_ORIGIN : origin;
   if (controlOrigin) connectCommand(controlOrigin); // Same strict HTTPS and shell-safe origin validation.
   if (mode === 'self-hosted' && !controlOrigin) throw inputError('error.custom', '请输入自建控制面的 HTTPS 地址。');
@@ -69,7 +70,7 @@ export function terminalInstallScript({ browser = true, ...options } = {}) {
   const connect = c.connect && (browser ? c.connect : c.connect.replace(' --browser', ''));
   return `(
 set -eu
-case "$(uname -s)" in Darwin|Linux) ;; *) printf '%s\\n' 'Choose the Windows PowerShell installer for Windows; this block is macOS / Linux only.'; exit 1 ;; esac
+case "$(uname -s)" in ${plan.os === 'macos' ? 'Darwin' : plan.os === 'linux' ? 'Linux' : 'Darwin|Linux'}) ;; *) printf '%s\\n' 'Choose the Windows PowerShell installer for Windows; this block is macOS / Linux only.'; exit 1 ;; esac
 command -v node >/dev/null 2>&1 && command -v npm >/dev/null 2>&1 || { printf '%s\\n' 'Install Node.js 24+ and npm from nodejs.org, then retry.'; exit 1; }
 node -e 'if (Number(process.versions.node.split(".")[0]) < 24) { console.error("Node.js 24+ required"); process.exit(1); }'
 if command -v device-center >/dev/null 2>&1 || [ -e "$HOME/.local/bin/device-center" ] || [ -L "$HOME/.local/bin/device-center" ] || [ -e "$HOME/.local/lib/node_modules/device-center" ]; then
@@ -105,6 +106,5 @@ export function logAccessCommands({ manager, target, path, label = 'app', os = '
   if (![os, managerOs].every(value => ['posix', 'windows'].includes(value)) || typeof path !== 'string' || !(os === 'windows' ? /^[A-Za-z]:\\/.test(path) && !/[<>:"|?*]/.test(path.slice(2)) : path.startsWith('/')) || path.length > 4096 || /[\x00-\x1f\x7f]/.test(path)) throw inputError('error.path', '填写目标设备上日志的绝对路径。');
   if (!/^[a-zA-Z0-9_-]{1,40}$/.test(label)) throw inputError('error.label', '标签仅允许字母、数字、下划线或连字符。');
   const quotedPath = "'" + path.replaceAll("'", os === 'windows' ? "''" : "'\"'\"'") + "'";
-  const cli = system => system === 'windows' ? '& "$HOME\\AppData\\Local\\Programs\\Device Center\\cli\\device-center.cmd"' : 'device-center';
-  return { trust: `${cli(managerOs)} access trust --peer ${target} --confirm`, grant: `${cli(os)} access grant --peer ${manager} --log ${quotedPath} --label ${label} --minutes 60 --confirm` };
+  return { trust: installedCliCommand(`access trust --peer ${target} --confirm`, managerOs), grant: installedCliCommand(`access grant --peer ${manager} --log ${quotedPath} --label ${label} --minutes 60 --confirm`, os) };
 }

package/src/pair-recovery.js

@@ -0,0 +1,4 @@
+export function pairingFailureKind(error) {
+  if (error.message === 'authentication_required') return 'login';
+  return ['driver_pairing_expired','driver_pairing_unavailable','invalid_pairing_code','driver_pairing_confirmation_required'].includes(error.message) || [400, 404, 410].includes(error.statusCode) ? 'expired' : 'retry';
+}

package/src/pair.css

@@ -20,4 +20,28 @@ button:focus-visible, a:focus-visible { outline: 2px solid #517543; outline-offs
 .error { color: #a13d32; }
 .status-mark { font-size: 32px; margin: 4px 0 20px; color: #517543; }
 footer { text-align: center; padding: 20px 16px; color: #777e72; font-size: 12px; }
+main.cli-management { width: min(940px, calc(100% - 32px)); margin: 22px auto; }
+.cli-setup h2 { font-size: 18px; margin: 28px 0 8px; }
+.cli-setup-destination { padding: 12px 16px; border: 1px solid #e1e5dc; background: #f6f7f2; font-size: 12px; overflow-wrap: anywhere; }
+.cli-setup-destination span { display: block; margin-bottom: 4px; color: #7c8577; }
+.cli-setup-choices { display: flex; gap: 8px; margin: 20px 0 16px; }
+.cli-setup-choices button { width: auto; flex: 1; margin: 0; background: #f3f4ee; color: #687563; border: 1px solid #dce2d6; }
+.cli-setup-choices button[aria-pressed="true"] { background: #263d2e; color: white; border-color: #263d2e; }
+.cli-setup-os { display: flex; align-items: center; gap: 14px; font-size: 12px; color: #65745f; }
+.cli-setup-os select { padding: 8px 12px; border: 1px solid #dce2d6; background: white; color: #35472f; border-radius: 3px; }
+.cli-setup-flow { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; list-style: none; padding: 0; margin: 24px 0; }
+.cli-setup-flow li { padding: 18px 14px; border: 1px solid #e2e7dc; background: #fafbf8; }
+.cli-setup-flow svg { display: block; width: 32px; height: 24px; fill: none; stroke: #6b8b60; stroke-width: 1.4; margin-bottom: 14px; }
+.cli-setup-flow strong { display: block; font-size: 13px; margin-bottom: 7px; color: #374d30; }
+.cli-setup-flow span { font-size: 12px; line-height: 1.8; color: #7e8877; }
+.cli-setup-scope { border-left: 3px solid #c6d7bb; padding-left: 14px; font-size: 12px; }
+.cli-setup textarea { width: 100%; padding: 14px; border: 1px solid #dce2d6; border-radius: 3px; background: #fbfcf8; font: 12px/1.8 ui-monospace, Consolas, monospace; color: #43533b; resize: vertical; }
+.cli-setup summary, .cli-grants summary { cursor: pointer; color: #526a48; font-size: 13px; }
+.cli-setup-preview { margin-top: 20px; }
+.cli-setup-preview textarea, .cli-setup-existing textarea { margin-top: 12px; }
+.cli-setup-copy-status { min-height: 22px; margin: 8px 0; color: #547c40; font-size: 12px; }
+.cli-setup-existing { margin: 20px 0; }
+.cli-setup-links { display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: 12px; color: #687f5c; }
+.cli-grants { margin-top: 32px; padding-top: 22px; border-top: 1px solid #e3e6dc; }
+@media (max-width: 640px) { .cli-setup-flow { grid-template-columns: 1fr; gap: 8px; } .cli-setup-flow li { display: grid; grid-template-columns: 32px 1fr; gap: 0 14px; } .cli-setup-flow svg { grid-row: span 2; margin: 2px 0; } .cli-setup-os { flex-wrap: wrap; } }
 @media (prefers-reduced-motion: no-preference) { main { animation: appear .2s ease-out; } @keyframes appear { from { opacity: 0; transform: translateY(5px); } } }

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

@@ -1,3 +1,4 @@
+@import url('./install-walkthrough.css');
 :root { color-scheme: dark; font-family: "Helvetica Neue", "Arial", "PingFang SC", "Hiragino Sans GB", sans-serif; color: #eeece8; background: #0c0c0e; font-synthesis: none; --accent: #ff8254; --line: #2b2b2e; --muted: #9a999f; --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace; }
 * { box-sizing: border-box; }
 html { scroll-behavior: smooth; scroll-padding-top: 108px; }
@@ -110,7 +111,7 @@ h3 { margin: 0; color: #e8e1db; font-size: 16px; font-weight: 500; line-height:
 .copy-step { margin-top: 23px; padding-top: 21px; border-top: 1px solid #363034; }
 .copy-step .action-heading { margin-bottom: 13px; }
 .method-options, .pairing-options { min-width: 0; padding: 0; margin: 0; border: 0; }
-.method-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; margin-bottom: 16px; border: 1px solid #373337; border-radius: 5px; background: #111113; }
+.method-switch { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; margin-bottom: 16px; border: 1px solid #373337; border-radius: 5px; background: #111113; }
 .method-switch label { position: relative; min-width: 0; cursor: pointer; }
 .method-switch input { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; opacity: 0; }
 .method-switch span { display: block; padding: 9px 12px; border: 1px solid transparent; border-radius: 3px; color: #a79892; font-size: 13px; text-align: center; line-height: 1.6; }
@@ -140,85 +141,7 @@ h3 { margin: 0; color: #e8e1db; font-size: 16px; font-weight: 500; line-height:
 .next-action[data-copied="true"] { border-color: #bc7a56; background: #241b16; }
 .next-action[data-copied="true"] .action-heading, .next-action[data-copied="true"] .action-number { color: #ffc29b; }
 .binding-link { display: inline-block; margin: 13px 0 0; color: #f4b991; font-size: 12px; line-height: 1.7; }
-.walkthrough-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin: 0 0 16px; padding: 0; list-style: none; }
-.walkthrough-tabs li { min-width: 0; }
-.walkthrough-tabs button { width: 100%; min-height: 38px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 7px; border: 1px solid #493a33; border-radius: 3px; background: transparent; color: #a9968a; font: inherit; font-size: 12px; line-height: 1.5; cursor: pointer; }
-.walkthrough-tabs button span { color: #86756a; font: 10px var(--mono); }
-.walkthrough-tabs button:hover { border-color: #bc7a56; color: #f4c8ab; }
-.walkthrough-tabs button[aria-current="step"] { background: #3d2a20; border-color: #c48d68; color: #ffcfb1; }
-.walkthrough-tabs button[aria-current="step"] span { color: #ffc29b; }
-.walkthrough-caption { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 10px; color: #f4dfd0; font-size: 14px; line-height: 1.7; }
-.walkthrough-caption small { flex-shrink: 0; color: #a48c7c; font: 11px var(--mono); }
-.walkthrough-picture { overflow: hidden; padding: 16px 18px 14px; border: 1px solid #3b302a; border-radius: 5px; background: #121011; }
-.walkthrough-picture svg { width: 22px; height: 22px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
-.picture-transfer { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 16px; color: #dfb394; font-size: 12px; line-height: 1.7; }
-.picture-transfer > span { display: flex; align-items: center; gap: 8px; min-width: 0; }
-.picture-transfer > svg { width: 28px; color: #b58160; }
-.picture-window { min-width: 0; border: 1px solid #5a4940; border-radius: 7px; background: #1b1818; box-shadow: 0 8px 20px #0003; }
-.picture-titlebar { display: flex; align-items: center; gap: 5px; min-height: 28px; padding: 6px 12px; border-bottom: 1px solid #3e3430; background: #252020; border-radius: 6px 6px 0 0; }
-.picture-titlebar > i { flex-shrink: 0; width: 6px; height: 6px; border: 1px solid #887369; border-radius: 50%; }
-.picture-titlebar > i:first-child { background: #956e5e; }
-.picture-titlebar > span { min-width: 0; margin-left: 9px; color: #baa599; font-size: 10px; line-height: 1.6; }
-.picture-address { display: block; overflow-wrap: anywhere; font: 10px var(--mono); }
-.picture-terminal { padding: 22px 18px 16px; }
-.picture-paste-line { display: flex; align-items: center; gap: 12px; position: relative; color: #ffb98a; font: 12px var(--mono); }
-.picture-paste-line > div { flex: 1; padding: 14px 12px; border: 1px dashed #db9365; border-radius: 3px; background: #35261e; color: #ffcfaf; line-height: 1.8; }
-.picture-caret { display: inline-block; height: 15px; margin-left: 9px; border-left: 2px solid #ffa875; vertical-align: middle; }
-.walkthrough-picture .picture-pointer { position: absolute; right: 6px; bottom: -16px; width: 25px; height: 30px; fill: #f5e9df; stroke: #151112; stroke-width: 1.8; transform: rotate(-9deg); }
-.picture-keyline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 26px; color: #c0a596; font-size: 10px; line-height: 1.8; }
-.picture-keyline strong { color: #ffd5b9; font-weight: 400; }
-.walkthrough-picture kbd { display: inline-block; margin-left: 3px; padding: 2px 6px; border: 1px solid #655045; border-bottom-width: 2px; border-radius: 3px; background: #28201d; font: 10px var(--mono); }
-.picture-launch { display: flex; flex-wrap: wrap; gap: 5px 18px; margin-top: 15px; color: #a38c7e; font-size: 10px; line-height: 1.8; }
-.picture-chat { padding: 22px 18px 16px; }
-.picture-chat-message { width: 88%; margin-left: auto; padding: 21px 15px; border: 1px dashed #d08b64; border-radius: 9px 9px 2px 9px; background: #37271e; color: #ffd3b5; font-size: 13px; line-height: 1.8; }
-.picture-send { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 19px; padding-right: 9px; color: #d8bca9; font-size: 11px; }
-.picture-send b { display: grid; place-items: center; width: 29px; height: 29px; background: #e8b08b; border-radius: 50%; color: #241912; font-size: 19px; font-weight: 400; }
-.picture-send .picture-pointer { bottom: -9px; right: 0; width: 20px; }
-.picture-auto-open { margin-bottom: 14px; color: #c8a88f; text-align: center; font-size: 11px; line-height: 1.7; }
-.picture-pair { padding: 12px 16px; }
-.picture-signin { display: flex; align-items: baseline; gap: 9px; color: #d4b7a4; font-size: 11px; line-height: 1.7; }
-.picture-signin > span { color: #c29170; font: 9px var(--mono); }
-.picture-signin + .picture-signin { margin-top: 8px; }
-.picture-fingerprints { display: grid; grid-template-columns: auto minmax(0, 1fr) 20px; gap: 6px 12px; padding: 10px; margin: 10px 0 13px; border: 1px solid #65503f; border-radius: 3px; background: #29211c; font-size: 10px; }
-.picture-fingerprints > span { color: #bca08b; }
-.picture-fingerprints code { overflow-wrap: anywhere; color: #ffd1a9; font: 10px/1.7 var(--mono); }
-.picture-fingerprints > b { grid-column: 3; grid-row: 1 / span 2; align-self: center; justify-self: center; color: #e9b07d; font-size: 20px; font-weight: 400; line-height: .7; }
-.picture-approval { position: relative; width: fit-content; max-width: 100%; margin: 0 0 5px auto; padding: 8px 12px; border: 1px solid #c58c63; border-radius: 3px; background: #4a3222; color: #ffcfaa; font-size: 11px; line-height: 1.7; }
-.picture-approval .picture-pointer { right: -7px; bottom: -15px; width: 21px; }
-.headless-transfer { gap: 13px; font-size: 11px; }
-.headless-transfer > span:first-child { flex-direction: column; align-items: flex-start; gap: 6px; }
-.headless-transfer code { padding: 4px 7px; border: 1px dashed #a57958; color: #ffd0a9; font: 10px/1.7 var(--mono); }
-.picture-code-entry { margin: 10px 0 12px; color: #b49a89; font-size: 10px; }
-.picture-code-entry > div { position: relative; margin-top: 6px; padding: 9px 12px; border: 1px dashed #b7825f; border-radius: 3px; color: #ffd1b0; background: #30231c; }
-.picture-install { padding: 21px 20px; }
-.picture-install-command { margin-bottom: 19px; color: #e4c5af; font: 13px var(--mono); }
-.picture-install-command > span { color: #ac856a; }
-.picture-install-row { display: flex; align-items: baseline; gap: 12px; margin: 10px 0; color: #cfb5a3; font-size: 12px; }
-.picture-install-row > span { color: #a7866f; font: 10px var(--mono); }
-.picture-install-track { display: flex; gap: 5px; margin-top: 21px; }
-.picture-install-track i { flex: 1; height: 3px; background: #8b644b; }
-.picture-install-track i:nth-child(2) { background: #5e473a; }
-.picture-install-track i:nth-child(3) { background: #392d26; }
-.picture-dashboard { padding: 20px 18px; }
-.picture-device { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 4px 12px; color: #d4aa8a; }
-.picture-device svg { grid-row: span 2; }
-.picture-device strong { color: #f1d1b9; font-size: 13px; font-weight: 500; }
-.picture-device > span { color: #a38b7a; font-size: 10px; }
-.picture-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 24px 0 20px; }
-.picture-metrics > div { display: grid; gap: 8px; }
-.picture-metrics span { color: #b29c8c; font-size: 11px; }
-.picture-metrics b { color: #ceb39e; font: 14px var(--mono); }
-.picture-metrics i { height: 3px; background: #4b3b30; }
-.picture-report-time { position: relative; padding: 10px 12px; border: 1px dashed #9f7555; color: #ebc3a2; font-size: 11px; line-height: 1.8; }
-.picture-report-time .picture-pointer { right: 3px; bottom: -14px; width: 21px; }
-.walkthrough-description { margin: 12px 0 0; color: #c5ad9d; font-size: 12px; line-height: 1.9; }
-.walkthrough-copy-first { margin: 8px 0 0; color: #aa9382; font-size: 11px; line-height: 1.8; }
-.walkthrough-navigation { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; padding-top: 10px; border-top: 1px solid #49362b; }
-.walkthrough-navigation button { min-height: 30px; padding: 4px 0; border: 0; background: transparent; color: #f3bd94; font: inherit; font-size: 12px; line-height: 1.7; cursor: pointer; }
-.walkthrough-navigation button:hover { color: #ffe0c6; text-decoration: underline; text-underline-offset: 4px; }
-.walkthrough-navigation button:disabled { color: #766155; cursor: default; text-decoration: none; }
-.walkthrough-tabs button:focus-visible, .walkthrough-navigation button:focus-visible, #walkthrough-title:focus-visible { outline: 2px solid #ffc29b; outline-offset: 4px; }
-@media (max-width: 700px) { .walkthrough-tabs { gap: 4px; margin-bottom: 16px; } .walkthrough-tabs button { flex-direction: column; gap: 4px; padding: 9px 5px; font-size: 11px; } .walkthrough-caption { font-size: 13px; gap: 8px; } .walkthrough-picture { padding: 17px 12px 15px; } .picture-terminal { padding: 23px 12px 15px; } .picture-paste-line { gap: 8px; font-size: 11px; } .picture-paste-line > div { padding: 12px 10px; } .picture-transfer { gap: 13px; font-size: 11px; } .picture-titlebar { padding: 8px; } .picture-titlebar > span { margin-left: 5px; } .picture-keyline { gap: 9px; } .picture-pair { padding: 15px 12px; } .picture-fingerprints { gap: 6px 8px; padding: 10px; } .picture-fingerprints code { font-size: 9px; } .picture-dashboard { padding: 18px 12px; } .picture-metrics { gap: 18px; } .walkthrough-description { font-size: 11px; } .headless-transfer { gap: 8px; font-size: 10px; } .headless-transfer code { font-size: 9px; } }
+
 summary { color: #a2938b; cursor: pointer; font-size: 11px; line-height: 1.8; list-style: none; }
 summary::-webkit-details-marker { display: none; }
 summary::before { content: "+"; display: inline-block; margin-right: 9px; color: #7e716a; font: 14px var(--mono); }
@@ -265,3 +188,13 @@ footer span { width: 100%; color: #8c807a; }
 @media (max-width: 1000px) { section.install-section { gap: 30px; } .choices { grid-template-columns: 1fr; } .mode-choice { padding: 14px; } .section-intro { font-size: 13px; } }
 @media (max-width: 700px) { .returning-user { display: none; } .cta-hint { max-width: 150px; font-size: 11px; } section.install-section { grid-template-columns: 1fr; gap: 25px; padding: 34px 0 30px; } .section-heading .eyebrow { margin-bottom: 10px; } .section-heading h2 { font-size: 26px; } .section-intro { max-width: 380px; margin-top: 11px; font-size: 13px; } .section-note { margin-top: 8px; } .choices { gap: 10px; } .mode-choice { padding: 15px; } .choice-copy strong { font-size: 15px; } .choice-copy > span { margin-top: 2px; font-size: 12px; } .copy-step { margin-top: 20px; padding-top: 20px; } .next-action { padding: 17px 15px; margin-top: 20px; } .action-heading, .mode-options legend { font-size: 14px; gap: 10px; } .copy-hint { font-size: 11px; } }
 @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } .motion-toggle { display: none; } .scene-stage { transform: none !important; } }
+
+.package-architecture { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 16px 0; color: #e8e1db; }
+.package-architecture select { padding: 8px; color: #e8e1db; background: #191719; border: 1px solid #74503d; border-radius: 4px; }
+.package-download { margin: 16px 0; padding-bottom: 12px; border-bottom: 1px solid #373337; }
+.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,6 @@
-import { agentInstallPrompt, agentInstallPlan, terminalInstallScript, OFFICIAL_CONTROL_ORIGIN } from './onboarding.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';
 import { installWalkthroughMarkup } from './install-walkthrough.js';
 
@@ -7,9 +9,13 @@ 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 = guideParams.get('method') === 'manual' ? 'manual' : 'agent';
-let os = guideParams.get('os') === 'windows' ? 'windows' : 'posix';
+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';
+let packages = [];
+let packagesLoading = true;
+let packagesFailed = false;
 let pairingMethod = 'browser';
 customOrigin.value = mode === 'self-hosted' ? guideParams.get('origin') ?? '' : '';
 for (const input of document.querySelectorAll('input[name="install-mode"]')) input.checked = input.value === mode;
@@ -59,6 +65,16 @@ 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';
+  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');
   translatedText('#instruction-preview', manual ? 'guide.manual.preview' : 'guide.preview');
@@ -80,7 +96,7 @@ function refreshInstructions() {
   let plan;
   try {
     plan = agentInstallPlan(options);
-    text.value = method === 'manual' ? terminalInstallScript({ ...options, browser: pairingMethod === 'browser' }) : agentInstallPrompt(options);
+    text.value = method === 'manual' ? terminalInstallScript({ ...options, browser: pairingMethod === 'browser' }) : agentSetupPrompt({ ...options, role: mode === 'local' ? 'manager' : 'device' });
     instructionsValid = true;
     customOrigin.removeAttribute('aria-invalid');
     const url = new URL('/login', plan.controlOrigin ?? OFFICIAL_CONTROL_ORIGIN);
@@ -95,7 +111,7 @@ function refreshInstructions() {
     result.textContent = t(errorKey(error));
     result.className = 'error';
   }
-  document.querySelector('#install-walkthrough').innerHTML = installWalkthroughMarkup({ method, mode, os, pairingMethod, step: walkthroughStep, copied, controlOrigin: plan?.controlOrigin, localUrl: plan?.url, locale: getLocale() });
+  document.querySelector('#install-walkthrough').innerHTML = installWalkthroughMarkup({ method: method === 'package' ? 'manual' : method, mode, os: os === 'windows' ? 'windows' : 'posix', pairingMethod, step: walkthroughStep, copied, controlOrigin: plan?.controlOrigin, localUrl: plan?.url, locale: getLocale() });
   copyButton.disabled = !instructionsValid;
 }
 function resetCopyState(resetStep = true) {
@@ -135,6 +151,8 @@ document.querySelector('#pairing-options').addEventListener('change', event => {
 document.querySelector('#os-options').addEventListener('change', event => {
   if (!event.target.matches('input[name="install-os"]')) return;
   os = event.target.value;
+  packageArch = os === 'macos' ? 'arm64' : 'x64';
+  document.querySelector('#package-arch').value = packageArch;
   resetCopyState();
 });
 customOrigin.addEventListener('input', () => {
@@ -166,3 +184,11 @@ copyButton.addEventListener('click', async () => {
     document.querySelector('#walkthrough-title').focus({ preventScroll: true });
   }
 });
+
+document.querySelector('#package-arch').addEventListener('change', event => { packageArch = event.target.value; updateGuidance(); });
+fetch('/install/packages', { credentials: 'omit' }).then(async response => {
+  if (!response.ok) throw new Error('installer_catalog_unavailable');
+  const body = await response.json();
+  if (!Array.isArray(body.packages)) throw new Error('invalid_installer_catalog');
+  packages = body.packages;
+}).catch(() => { packagesFailed = true; }).finally(() => { packagesLoading = false; updateGuidance(); });

package/src/styles.css

@@ -271,3 +271,27 @@ details p { font-size: 12px; color: #8da37c; line-height: 1.8; }
   .device-actions { flex-wrap: wrap; } .device-footer { flex: 1 1 80px; white-space: nowrap; } .ssh-check-button { flex: 0 0 auto; }
   .empty-state { padding: 22px 12px; } .add-modal { padding: 19px; } .method-tabs button { font-size: 11px; } .connection-check { flex-wrap: wrap; }
 }
+
+/* The panel uses the same instruction component as /start; illustrations are inert. */
+.panel-install-modal { width: min(1040px, 100%); }
+.panel-install-layout { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr); gap: 26px; align-items: start; }
+.panel-install-options { min-width: 0; }
+.panel-install-options .field-label { display: block; margin: 16px 0 8px; }
+.panel-install-options select { width: 100%; min-height: 38px; padding: 8px 10px; border: 1px solid #dce4d8; border-radius: 7px; color: #344137; background: #fff; font: inherit; font-size: 12px; }
+.panel-install-options .panel-install-methods { margin: 12px 0; }
+.panel-install-options .panel-install-methods button { flex: 1; }
+.install-destination { padding: 11px 13px; border: 1px solid var(--line); border-radius: 8px; background: #f5f8f3; }
+.install-destination span { display: block; color: #78857b; font-size: 10px; margin-bottom: 5px; }
+.install-destination strong { display: block; color: #366548; font-size: 12px; overflow-wrap: anywhere; }
+.install-target-hint { color: #356447; background: #edf5ed; border-left: 3px solid #7aa384; padding: 10px 12px; margin: 12px 0; font-size: 12px; line-height: 1.8; }
+.install-options-details { margin: 14px 0; color: #657660; font-size: 11px; }
+.install-options-details summary { cursor: pointer; }
+.panel-install-links { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 18px; font-size: 11px; }
+.panel-install-links a { color: var(--green); text-underline-offset: 3px; }
+.panel-install-links button { font-size: 11px; padding: 0; text-align: left; }
+.panel-walkthrough { --mono: "SFMono-Regular", Consolas, monospace; min-width: 0; border-radius: 10px; padding: 18px; background: #151213; color: #eeece8; }
+.panel-walkthrough h3 { margin: 0 0 7px; font-size: 14px; font-weight: 600; }
+.panel-walkthrough > .walkthrough-disclaimer { margin: 0 0 17px; font-size: 10px; color: #aa9382; line-height: 1.7; }
+.panel-walkthrough button:disabled { cursor: default; }
+.guide-navigation { margin-top: 14px; }
+@media (max-width: 760px) { .panel-install-layout { grid-template-columns: 1fr; gap: 22px; } .panel-install-modal { padding: 20px; } .panel-walkthrough { padding: 14px; } }

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.6 · 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,21 +119,32 @@
           </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="posix" checked><span>macOS / Linux</span></label>
-              <label><input type="radio" name="install-os" value="windows"><span>Windows 11</span></label>
-            </div>
-          </fieldset>
-          <p class="hint" data-i18n="guide.windowsCandidate">Windows 11 预览版 · 使用 PowerShell 安装，按图示核对绑定与后台状态。</p>
+          <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="manual"><span data-i18n="guide.method.manual">手动安装</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" 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">
           <div id="manual-options" hidden>
             <p class="hint manual-prerequisites" id="manual-prerequisites" data-i18n="guide.manual.prerequisites">Node.js 24+ · 全新安装；已有安装会停止并保留配置。</p>
             <fieldset class="pairing-options" id="pairing-options" hidden>
@@ -139,6 +159,7 @@
           <p class="copy-hint" id="copy-hint" data-i18n="guide.focus.copyHint">这是给 Agent 的说明，请粘贴到 Agent 对话中，而不是终端。</p>
           <p id="copy-result" role="status" aria-live="polite" aria-atomic="true"></p>
           <details id="instruction-details"><summary id="instruction-preview" data-i18n="guide.preview">查看或手动复制完整说明</summary><textarea id="install-instructions" aria-label="Agent 安装说明" data-i18n-aria-label="guide.instructions" rows="9" readonly spellcheck="false"></textarea></details>
+          </div>
         </div>
         <div class="next-action" id="next-action" data-copied="false">
           <h3 class="action-heading" id="walkthrough-title" tabindex="-1"><span class="action-number" aria-hidden="true">03</span><span data-i18n="walk.title">复制后，照图操作</span></h3>
@@ -156,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.6" 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>