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

package/src/onboarding.js

@@ -3,7 +3,7 @@ import { normalizeLocale } from './i18n.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.7';
 const inputError = (key, message) => Object.assign(new Error(message), { translationKey: key });
 export function connectCommand(value, shareSsh = false) {
   let url;
@@ -16,7 +16,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 +69,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

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/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,10 @@ 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; } }

package/src/start.js

@@ -1,4 +1,6 @@
-import { agentInstallPrompt, agentInstallPlan, terminalInstallScript, OFFICIAL_CONTROL_ORIGIN } from './onboarding.js';
+import { renderPackageChoices } 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';
 
@@ -8,8 +10,13 @@ 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 method = ['manual', 'package'].includes(guideParams.get('method')) ? guideParams.get('method') : 'agent';
+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;
 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 +66,12 @@ function translatedText(selector, key) {
 }
 function updateGuidance() {
   const manual = method === 'manual';
+  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');
+  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 +93,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 +108,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 +148,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 +181,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

@@ -32,7 +32,7 @@
         <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="release-note"><span class="release-dot" aria-hidden="true"></span><span data-i18n="guide.badge">开发预览 · 0.2.0-beta.7 · 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>
@@ -113,18 +113,31 @@
           <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="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" 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="package"><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>
+            </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>
+            <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 +152,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 +170,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.7" 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>