device-center 0.2.0-beta.2 → 0.2.0-beta.4

package/server/drivers/cloudRegistry.mjs

@@ -20,6 +20,8 @@ export function createCloudRegistry({ db, origin, now = Date.now, multiUser = fa
   }
   db.exec('CREATE INDEX IF NOT EXISTS cloud_drivers_tenant_created ON cloud_drivers(tenant_id, created_at)');
   for (const table of ['driver_pairings', 'cloud_drivers']) if (!db.prepare(`PRAGMA table_info(${table})`).all().some(c => c.name === 'certificate')) db.exec(`ALTER TABLE ${table} ADD COLUMN certificate TEXT`);
+  if (!db.prepare('PRAGMA table_info(driver_pairings)').all().some(c => c.name === 'browser_hash')) db.exec('ALTER TABLE driver_pairings ADD COLUMN browser_hash TEXT');
+  db.exec('CREATE UNIQUE INDEX IF NOT EXISTS driver_pairings_browser ON driver_pairings(browser_hash)');
   if (!db.prepare('PRAGMA table_info(cloud_drivers)').all().some(c => c.name === 'control_seen_at')) db.exec('ALTER TABLE cloud_drivers ADD COLUMN control_seen_at INTEGER');
   db.exec(`CREATE TABLE IF NOT EXISTS driver_collection_requests (driver_id TEXT PRIMARY KEY, request_id TEXT NOT NULL,
     requested_at INTEGER NOT NULL, expires_at INTEGER NOT NULL, completed_at INTEGER)`);
@@ -43,6 +45,13 @@ export function createCloudRegistry({ db, origin, now = Date.now, multiUser = fa
     if (!row || row.expires_at <= now()) fail('driver_pairing_expired', 410);
     return row;
   }
+  function credential(input) {
+    if (input.browserTicket !== undefined) {
+      if (input.code !== undefined || typeof input.browserTicket !== 'string' || !/^[a-f0-9]{64}$/.test(input.browserTicket)) fail('invalid_pairing_code');
+      return { column: 'browser_hash', hash: publicCodeHash(input.browserTicket) };
+    }
+    return { column: 'code_hash', hash: hashCode(input.code) };
+  }
   function proof(row, path, input) {
     verifyRequest(row.public_key, origin, path, input, now());
     db.prepare('DELETE FROM driver_nonces WHERE expires_at<=?').run(now());
@@ -76,7 +85,8 @@ export function createCloudRegistry({ db, origin, now = Date.now, multiUser = fa
   const registry = {
     start(input) {
       starts = limited(starts, 8);
-      object(input, ['publicKey', 'name', 'platform', 'shareSsh', 'certificate']);
+      object(input, ['publicKey', 'name', 'platform', 'shareSsh', 'certificate', 'browser']);
+      if (input.browser !== undefined && typeof input.browser !== 'boolean') fail('invalid_driver_scope');
       const identity = publicIdentity(input.publicKey);
       const certificate = input.certificate == null ? null : validateCertificate(input.certificate, identity.fingerprint, now());
       const name = text(input.name), platform = text(input.platform, 64);
@@ -87,6 +97,11 @@ export function createCloudRegistry({ db, origin, now = Date.now, multiUser = fa
       if (db.prepare('SELECT count(*) AS n FROM driver_pairings').get().n >= 32) fail('driver_pairing_busy', 429);
       const id = randomUUID(), raw = randomBytes(4).toString('hex').toUpperCase(), code = `${raw.slice(0,4)}-${raw.slice(4)}`;
       db.prepare('INSERT INTO driver_pairings (id,code_hash,public_key,fingerprint,name,platform,requested_ssh,created_at,expires_at,certificate) VALUES (?,?,?,?,?,?,?,?,?,?)').run(id, hashCode(code), identity.publicKey, identity.fingerprint, name, platform, Number(input.shareSsh), now(), now() + PAIR_AGE, certificate);
+      if (input.browser) {
+        const browserTicket = randomBytes(32).toString('hex');
+        db.prepare('UPDATE driver_pairings SET browser_hash=? WHERE id=?').run(publicCodeHash(browserTicket), id);
+        return { id, browserTicket, fingerprint: identity.fingerprint, expiresAt: now() + PAIR_AGE, pollIntervalMs: 5000 };
+      }
       return { id, code, fingerprint: identity.fingerprint, expiresAt: now() + PAIR_AGE, verificationUrl: origin, pollIntervalMs: 5000 };
     },
     poll(input) {
@@ -102,24 +117,26 @@ export function createCloudRegistry({ db, origin, now = Date.now, multiUser = fa
     },
     lookup(input, tenantId) {
       globalLookups = limited(globalLookups, 64);
-      limitAccount(lookups, tenantId); object(input, ['code']);
-      const row = db.prepare('SELECT * FROM driver_pairings WHERE code_hash=?').get(hashCode(input.code));
+      limitAccount(lookups, tenantId); object(input, ['code', 'browserTicket']);
+      const proof = credential(input);
+      const row = db.prepare(`SELECT * FROM driver_pairings WHERE ${proof.column}=?`).get(proof.hash);
       if (!row || row.expires_at <= now() || row.driver_id) fail('driver_pairing_unavailable', 404);
       return { id: row.id, name: row.name, platform: row.platform, fingerprint: row.fingerprint, requestedSsh: Boolean(row.requested_ssh), expiresAt: row.expires_at };
     },
     approve(input, tenantId) {
       globalApprovals = limited(globalApprovals, 64); limitAccount(approvals, tenantId);
-      object(input, ['id', 'code', 'fingerprint', 'shareSsh']);
+      object(input, ['id', 'code', 'browserTicket', 'fingerprint', 'shareSsh']);
       if (typeof input.id !== 'string' || typeof input.shareSsh !== 'boolean') fail('invalid_driver_approval');
-      if (multiUser && (typeof input.code !== 'string' || typeof input.fingerprint !== 'string')) fail('driver_pairing_confirmation_required');
+      if ((multiUser || input.browserTicket !== undefined) && ((typeof input.code !== 'string' && typeof input.browserTicket !== 'string') || typeof input.fingerprint !== 'string')) fail('driver_pairing_confirmation_required');
       db.exec('BEGIN IMMEDIATE');
       try {
         const row = pairing(input.id);
+        if (row.browser_hash != null && ((input.code === undefined && input.browserTicket === undefined) || typeof input.fingerprint !== 'string')) fail('driver_pairing_confirmation_required');
         if (row.driver_id) {
           if (!db.prepare('SELECT id FROM cloud_drivers WHERE id=? AND tenant_id=?').get(row.driver_id, tenantId)) fail('driver_pairing_unavailable', 404);
           fail('driver_pairing_consumed', 409);
         }
-        if (input.code !== undefined && hashCode(input.code) !== row.code_hash) fail('driver_pairing_unavailable', 404);
+        if (input.code !== undefined || input.browserTicket !== undefined) { const proof = credential(input); if (proof.hash !== row[proof.column]) fail('driver_pairing_unavailable', 404); }
         if (input.fingerprint !== undefined && input.fingerprint !== row.fingerprint) fail('driver_pairing_confirmation_required');
         if (input.shareSsh && !row.requested_ssh) fail('driver_scope_violation');
         if (db.prepare('SELECT count(*) AS n FROM cloud_drivers WHERE tenant_id=? AND revoked_at IS NULL').get(tenantId).n >= 16) fail('driver_limit', 409);

package/server/index.mjs

@@ -42,7 +42,9 @@ async function readJson(request) {
 async function serveStatic(pathname, response) {
   let filePath;
   if (pathname === '/' || pathname === '/index.html') filePath = resolve(PROJECT_ROOT, 'index.html');
+  else if (pathname === '/favicon.svg') filePath = resolve(PROJECT_ROOT, 'favicon.svg');
   else if (pathname === '/login') filePath = resolve(PROJECT_ROOT, 'login.html');
+  else if (pathname === '/pair') filePath = resolve(PROJECT_ROOT, 'login.html');
   else if (pathname === '/start' || pathname === '/start.html') filePath = resolve(PROJECT_ROOT, 'start.html');
   else if (pathname.startsWith('/src/')) {
     filePath = resolve(PROJECT_ROOT, `.${pathname}`);
@@ -81,8 +83,9 @@ export function createDeviceCenterServer({ dbPath = './data/device-center.sqlite
       const origin = cloudAccess ? cloudAccess.validate(request) : validateLocalRequest(request);
       const url = new URL(request.url ?? '/', origin);
       const path = url.pathname;
+      if (['/pair', '/src/pair.js', '/src/pair.css', '/src/pairing-handoff.js', '/src/api.js'].includes(path) && request.method === 'GET') return await serveStatic(path, response);
       // Public static installation reference only. No identity, configuration or owner API.
-      if (['/start', '/start.html', '/src/start.js', '/src/start.css', '/src/onboarding.js'].includes(path) && request.method === 'GET') return await serveStatic(path, response);
+      if (['/start', '/start.html', '/favicon.svg', '/src/start.js', '/src/start.css', '/src/onboarding.js', '/src/i18n.js', '/src/i18n.css', '/src/messages.js', '/src/install-prompt.js', '/src/install-walkthrough.js'].includes(path) && request.method === 'GET') return await serveStatic(path, response);
       if (Object.hasOwn(PUBLIC_GUIDES, path) && request.method === 'GET') {
         const body = await readFile(resolve(PROJECT_ROOT, PUBLIC_GUIDES[path]));
         response.writeHead(200, { 'content-type': 'text/markdown; charset=utf-8', 'cache-control': 'no-store', 'x-content-type-options': 'nosniff', 'content-security-policy': "default-src 'none'; frame-ancestors 'none'", 'referrer-policy': 'no-referrer' });
@@ -115,7 +118,7 @@ export function createDeviceCenterServer({ dbPath = './data/device-center.sqlite
         }
         const principal = await cloudAccess.resolvePrincipal(request);
         if (!principal) {
-          if (path === '/' && request.method === 'GET') { response.writeHead(303, { location: '/login', 'cache-control': 'no-store' }); return response.end(); }
+          if (path === '/' && request.method === 'GET') { response.writeHead(303, { location: `/login${/^(zh-CN|zh-TW|en|ja|ko|es|fr|de|pt-BR)$/.test(url.searchParams.get('lang') ?? '') ? '?lang=' + url.searchParams.get('lang') : ''}`, 'cache-control': 'no-store' }); return response.end(); }
           return sendJson(response, 401, { error: 'authentication_required' });
         }
         accountRegistry = registry.forTenant(principal.tenantId);

package/src/api.js

@@ -1,11 +1,14 @@
+import { getLocale } from './i18n.js';
 async function request(path, { timeoutMs = 12000, ...options } = {}) {
   const response = await fetch(path, { ...options, cache: 'no-store', signal: AbortSignal.timeout(timeoutMs) });
   const payload = await response.json().catch(() => ({}));
-  if (response.status === 401) { location.replace('/login'); throw new Error('authentication_required'); }
+  if (response.status === 401) { location.replace('/login?lang=' + getLocale()); throw new Error('authentication_required'); }
   if (!response.ok) throw new Error(payload.error ?? `http_${response.status}`);
   return payload;
 }
 export const api = {
+  lookupBrowserPairing: browserTicket => request('/api/drivers/pairing/lookup', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ browserTicket }) }),
+  approveBrowserPairing: input => request('/api/drivers/pairing/approve', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(input) }),
   saveDeviceProfile: (profile) => request('/api/devices/profile', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(profile) }),
   collectDevice: (deviceId) => request('/api/devices/collect', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ deviceId }), timeoutMs: 30000 }),
   remotePeers: () => request('/api/remote/peers'),

package/src/device-state.js

@@ -1,3 +1,4 @@
+import { t } from './i18n.js';
 // Expire displayed SSH snapshots without a network request or a background SSH check.
 export function expireSshSnapshots(overview, now = Date.now()) {
   const expired = device => device.state === 'online' && (device.transport === 'ssh' && now - device.lastHeartbeat > 300_000 || device.source === 'driver-report' && (now - device.managementDriver.lastSeen > 90_000 || now - device.lastHeartbeat > (device.kind === 'management' ? 90_000 : 300_000)));
@@ -8,21 +9,21 @@ export function expireSshSnapshots(overview, now = Date.now()) {
   return { ...overview, devices, stats };
 }
 
-export const DEVICE_TYPE_LABELS = { unspecified: '未分类', personal: '个人电脑', server: '服务器', workstation: '工作站', other: '其他' };
+export const DEVICE_TYPE_LABELS = { get unspecified() { return t("panel.498"); }, get personal() { return t("panel.499"); }, get server() { return t("panel.500"); }, get workstation() { return t("panel.501"); }, get other() { return t("panel.502"); } };
 export function deviceStatus(device, now = Date.now()) {
-  if (device.state === 'unknown') return { label: '未知', title: '尚未取得资源数据；未把设备视为已连接。' };
-  if (device.source === 'driver-report' && (device.managementDriver.lastSeen == null || now - device.managementDriver.lastSeen > 90_000)) return { label: '未回报', title: '超过 90 秒未收到 Driver 回报。请确认设备已唤醒、Driver 正在运行且能连接云端。旧数据保留，不表示密钥过期。' };
-  if (device.state === 'expired') return { label: '待采集', title: '上次资源快照较早，点击采集一次取得新数据；不表示设备断线或密钥过期。' };
-  return { label: '在线', title: device.transport === 'ssh' ? '最近一次 SSH 检查成功，不表示持续连接。' : '最近收到真实资源数据。' };
+  if (device.state === 'unknown') return { label: t("panel.457"), title: t("panel.503") };
+  if (device.source === 'driver-report' && (device.managementDriver.lastSeen == null || now - device.managementDriver.lastSeen > 90_000)) return { label: t("panel.504"), title: t("panel.505") };
+  if (device.state === 'expired') return { label: t("panel.506"), title: t("panel.507") };
+  return { label: t("panel.456"), title: device.transport === 'ssh' ? t("panel.508") : t("panel.509") };
 }
 export function collectionAvailability(device, now = Date.now()) {
   if (device.source === 'driver-report') {
-    if (device.collection?.status === 'pending' && device.collection.expiresAt > now) return { available: false, pending: true, hint: '等待设备采集…' };
-    if (device.kind !== 'management') return { available: false, hint: '请在管理电脑检查 SSH' };
-    if (device.managementDriver.lastSeen == null || now - device.managementDriver.lastSeen > 90_000) return { available: false, hint: '请启动设备上的 Driver' };
-    if (!device.collection?.supported) return { available: false, hint: device.collection?.reason === 'driver_control_unavailable' ? '采集通道暂不可用' : '需更新设备 Driver' };
-    return { available: true, hint: '通知 Driver 重新采集内存与磁盘；不执行远程命令。' };
+    if (device.collection?.status === 'pending' && device.collection.expiresAt > now) return { available: false, pending: true, hint: t("panel.41") };
+    if (device.kind !== 'management') return { available: false, hint: t("panel.510") };
+    if (device.managementDriver.lastSeen == null || now - device.managementDriver.lastSeen > 90_000) return { available: false, hint: t("panel.511") };
+    if (!device.collection?.supported) return { available: false, hint: device.collection?.reason === 'driver_control_unavailable' ? t("panel.512") : t("panel.513") };
+    return { available: true, hint: t("panel.514") };
   }
-  if (device.transport === 'ssh') return { available: Boolean(device.ssh?.checkAvailable && !device.ssh.checking && !device.ssh.queued), hint: '使用当前 SSH 配置进行一次只读检查并采集。' };
-  return { available: device.source === 'local-runtime' && device.scope === 'host', hint: '从当前本机进程重新读取内存与磁盘。' };
+  if (device.transport === 'ssh') return { available: Boolean(device.ssh?.checkAvailable && !device.ssh.checking && !device.ssh.queued), hint: t("panel.515") };
+  return { available: device.source === 'local-runtime' && device.scope === 'host', hint: t("panel.516") };
 }

package/src/i18n.css

@@ -0,0 +1,61 @@
+.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 20px; flex-wrap: wrap; }
+.language-picker { display: inline-flex; flex: 0 0 auto; min-width: 0; color: #344d3e; font-size: 12px; }
+.language-picker button { font-family: inherit; cursor: pointer; filter: none; }
+.language-picker .language-trigger { display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: auto; height: 34px; min-height: 34px; margin: 0; padding: 0 9px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: inherit; font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap; transition: background .15s, border-color .15s; }
+.language-trigger > svg { width: 16px; height: 16px; flex-shrink: 0; color: #758375; }
+.language-trigger > .language-chevron { width: 12px; height: 12px; transition: transform .15s; }
+.language-trigger[aria-expanded="true"] > .language-chevron { transform: rotate(180deg); }
+.language-picker .language-trigger:hover, .language-trigger[aria-expanded="true"] { background: #eaf0e6; border-color: #dde6d8; }
+.language-picker button:focus-visible { outline: 2px solid #5c965d; outline-offset: 2px; }
+.language-menu { position: fixed; z-index: 40; width: 304px; max-width: calc(100vw - 24px); max-height: calc(100dvh - 32px); overflow: auto; padding: 8px; border: 1px solid #e0e7dc; border-radius: 13px; background: #fff; color: #344d3e; box-shadow: 0 12px 36px #2035241a, 0 2px 6px #20352409; }
+.language-menu[hidden] { display: none; }
+.language-menu-title { padding: 7px 9px 10px; color: #84907f; font-size: 11px; font-weight: 500; line-height: 1.3; }
+.language-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; }
+.language-picker .language-option { display: flex; align-items: center; justify-content: space-between; gap: 5px; width: 100%; height: auto; min-height: 40px; padding: 8px 9px; margin: 0; border: 0; border-radius: 7px; background: transparent; color: #475449; text-align: left; font-size: 12px; font-weight: 400; line-height: 1.4; }
+.language-option > span { min-width: 0; }
+.language-option > svg { width: 14px; height: 14px; flex-shrink: 0; opacity: 0; color: #356c4c; }
+.language-picker .language-option:hover, .language-picker .language-option:focus-visible { background: #f2f5ef; }
+.language-picker .language-option[aria-checked="true"] { background: #eaf2e5; color: #2f6545; font-weight: 600; }
+.language-option[aria-checked="true"] > svg { opacity: 1; }
+.topbar { position: relative; z-index: 4; }
+.login-page main { position: relative; }
+.login-page main > .language-picker { position: absolute; top: 36px; right: 24px; }
+@media (max-width: 560px) { .header-actions { gap: 8px; } }
+@media (prefers-reduced-motion: reduce) { .language-trigger, .language-chevron { transition: none !important; } }
+/* Longer translations must wrap without moving the sidebar or top bar. */
+.modal-heading { gap: 12px; flex-wrap: wrap; }
+.modal-heading h2 { flex: 1 1 140px; min-width: 0; }
+.modal-heading .language-picker { margin-left: auto; }
+.nav-item svg { flex-shrink: 0; }
+.nav-item > span { min-width: 0; overflow-wrap: anywhere; }
+.resource-top { flex-wrap: wrap; }
+.resource-top > span { overflow-wrap: anywhere; white-space: normal; }
+@media (max-width: 760px) {
+  .topbar .environment-badge { display: none; }
+  .topbar .header-actions { flex-wrap: nowrap; gap: 0; }
+  .topbar > span { min-width: 0; }
+  .page-heading { flex-wrap: wrap; align-items: flex-start; gap: 8px; }
+  .page-heading > div:first-child { width: 100%; min-width: 0; }
+  .page-heading h1 { overflow-wrap: anywhere; line-height: 1.25; }
+  .heading-actions { max-width: none; width: 100%; justify-content: flex-start; }
+  .heading-actions > button { white-space: normal; max-width: 100%; }
+  .driver-summary { flex-wrap: wrap; }
+  .driver-summary p { flex-basis: 100%; margin-left: 12px; }
+  .initialize-entry { margin-left: auto; }
+  .filter-tabs { flex-wrap: wrap; }
+  .page-footer { gap: 8px; flex-wrap: wrap; }
+  .method-tabs { flex-wrap: wrap; }
+  .method-tabs button { white-space: normal; min-width: 0; }
+  .start-page header { flex-wrap: wrap; }
+}
+
+@media (max-width: 440px) {
+  .nav-item svg { display: none; }
+  .nav-item > span { overflow-wrap: normal; hyphens: auto; }
+}
+@media (max-width: 560px) {
+  .modal-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
+  .modal-heading h2 { grid-column: 1; grid-row: 1; }
+  .modal-heading .icon-button { grid-column: 2; grid-row: 1; }
+  .modal-heading .language-picker { grid-column: 1 / -1; grid-row: 2; margin-left: 0; }
+}

package/src/i18n.js

@@ -0,0 +1,174 @@
+import { messages } from './messages.js';
+
+export const LANGUAGES = Object.freeze([
+  { code: 'zh-CN', name: '简体中文' }, { code: 'zh-TW', name: '繁體中文' },
+  { code: 'en', name: 'English' }, { code: 'ja', name: '日本語' },
+  { code: 'ko', name: '한국어' }, { code: 'es', name: 'Español' },
+  { code: 'fr', name: 'Français' }, { code: 'de', name: 'Deutsch' },
+  { code: 'pt-BR', name: 'Português (Brasil)' },
+]);
+const STORAGE_KEY = 'device-center.locale';
+export function normalizeLocale(value) {
+  if (typeof value !== 'string') return null;
+  const tag = value.replaceAll('_', '-').toLowerCase();
+  if (/^zh(?:-|$)/.test(tag)) return /(?:hant|tw|hk|mo)(?:-|$)/.test(tag) ? 'zh-TW' : 'zh-CN';
+  if (/^pt(?:-|$)/.test(tag)) return 'pt-BR';
+  return LANGUAGES.find(item => item.code === tag.split('-')[0])?.code ?? null;
+}
+export function resolveLocale({ query, saved, languages = [] } = {}) {
+  return normalizeLocale(query) ?? normalizeLocale(saved) ?? languages.map(normalizeLocale).find(Boolean) ?? 'en';
+}
+export function translate(locale, key, values = {}) {
+  const code = normalizeLocale(locale) ?? 'en';
+  const entry = lang => Object.hasOwn(messages[lang], key) ? messages[lang][key] : undefined;
+  const text = entry(code) ?? entry('en') ?? entry('zh-CN') ?? key;
+  return text.replace(/\{([a-zA-Z0-9_]+)\}/g, (match, name) => Object.hasOwn(values, name) ? String(values[name]) : match);
+}
+let locale = 'zh-CN';
+export const getLocale = () => locale;
+export const t = (key, values) => translate(locale, key, values);
+export const h = (key, values) => t(key, values).replace(/[&<>"']/g, char => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[char]);
+let pickerSequence = 0;
+const globe = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a17 17 0 0 1 0 18 17 17 0 0 1 0-18Z"/></svg>';
+const chevron = '<svg class="language-chevron" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="m4 6 4 4 4-4"/></svg>';
+function pickerContents() {
+  const id = `language-menu-${++pickerSequence}`;
+  const current = LANGUAGES.find(item => item.code === locale);
+  return `<button type="button" class="language-trigger" data-language-trigger aria-label="${h('language')}: ${current.name}" aria-haspopup="menu" aria-expanded="false" aria-controls="${id}">${globe}<span>${current.code === 'pt-BR' ? 'Português' : current.name}</span>${chevron}</button>
+    <div class="language-menu" id="${id}" data-language-menu role="menu" aria-label="${h('language')}" hidden><div class="language-menu-title" aria-hidden="true">${h('language')}</div><div class="language-options" role="none">${LANGUAGES.map(item => `<button type="button" class="language-option" data-language-option="${item.code}" role="menuitemradio" aria-checked="${locale === item.code}" tabindex="-1" lang="${item.code}"><span>${item.name}</span><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.7" aria-hidden="true"><path d="m3 8 3 3 7-7"/></svg></button>`).join('')}</div></div>`;
+}
+export function languagePickerMarkup() {
+  return `<div class="language-picker" data-language-picker>${pickerContents()}</div>`;
+}
+export function applyTranslations(root = document) {
+  for (const element of root.querySelectorAll('[data-i18n]')) element.textContent = t(element.dataset.i18n);
+  for (const attribute of ['placeholder', 'title', 'aria-label', 'content']) {
+    for (const element of root.querySelectorAll(`[data-i18n-${attribute}]`)) element.setAttribute(attribute, t(element.getAttribute(`data-i18n-${attribute}`)));
+  }
+}
+// Only explicit UI markers are translated. User names, tags, code and paths are untouched.
+export function initLanguage({ onChange = () => {} } = {}) {
+  let saved;
+  try { saved = localStorage.getItem(STORAGE_KEY); } catch { /* Private mode can deny storage. */ }
+  const params = new URLSearchParams(location.search);
+  locale = resolveLocale({ query: params.get('lang'), saved, languages: navigator.languages ?? [navigator.language] });
+  if (normalizeLocale(params.get('lang'))) {
+    try { localStorage.setItem(STORAGE_KEY, locale); } catch { /* Share links also work without storage. */ }
+  }
+  const apply = () => {
+    document.documentElement.lang = locale;
+    document.documentElement.dir = 'ltr';
+    applyTranslations();
+    for (const picker of document.querySelectorAll('[data-language-picker]')) picker.innerHTML = pickerContents();
+    // Language links stay on this origin and never include account/pairing information.
+    for (const link of document.querySelectorAll('a[data-language-link]')) {
+      const url = new URL(link.getAttribute('href'), location.origin);
+      if (url.origin === location.origin) { url.searchParams.set('lang', locale); link.setAttribute('href', `${url.pathname}${url.search}${url.hash}`); }
+    }
+    onChange(locale);
+  };
+  const closeMenus = (restoreFocus = false) => {
+    for (const picker of document.querySelectorAll('[data-language-picker]')) {
+      const trigger = picker.querySelector('[data-language-trigger]');
+      const menu = picker.querySelector('[data-language-menu]');
+      if (!menu || menu.hidden) continue;
+      menu.hidden = true; trigger.setAttribute('aria-expanded', 'false');
+      if (restoreFocus) trigger.focus({ preventScroll: true });
+    }
+  };
+  const openMenu = (picker, last = false) => {
+    closeMenus();
+    const trigger = picker.querySelector('[data-language-trigger]');
+    const menu = picker.querySelector('[data-language-menu]');
+    menu.hidden = false; trigger.setAttribute('aria-expanded', 'true');
+    const anchor = trigger.getBoundingClientRect();
+    const size = menu.getBoundingClientRect();
+    menu.style.left = `${Math.max(12, Math.min(anchor.right - size.width, innerWidth - size.width - 12))}px`;
+    const top = anchor.bottom + 8;
+    menu.style.top = `${Math.max(12, top + size.height <= innerHeight - 12 ? top : anchor.top - size.height - 8)}px`;
+    const options = [...menu.querySelectorAll('[data-language-option]')];
+    (last ? options.at(-1) : menu.querySelector('[aria-checked="true"]') ?? options[0])?.focus({ preventScroll: true });
+  };
+  const choose = (value, picker) => {
+    const next = normalizeLocale(value); if (!next) return;
+    const inDialog = Boolean(picker.closest('[role="dialog"]'));
+    closeMenus(true);
+    locale = next;
+    try { localStorage.setItem(STORAGE_KEY, locale); } catch { /* Selection still works in memory. */ }
+    const url = new URL(location.href); url.searchParams.set('lang', locale);
+    try { history.replaceState(null, '', url); } catch { /* Do not prevent language selection. */ }
+    apply();
+    const container = picker.isConnected ? picker : document.querySelector(inDialog ? '[role="dialog"]' : '.topbar') ?? document;
+    container.querySelector('[data-language-trigger]')?.focus({ preventScroll: true });
+  };
+  // Capture events before the page's dialog handlers; Escape closes this menu first.
+  document.addEventListener('click', event => {
+    const trigger = event.target.closest('[data-language-trigger]');
+    const option = event.target.closest('[data-language-option]');
+    if (trigger) {
+      event.stopPropagation();
+      if (trigger.getAttribute('aria-expanded') === 'true') closeMenus(true);
+      else openMenu(trigger.closest('[data-language-picker]'));
+    } else if (option) {
+      event.stopPropagation(); choose(option.dataset.languageOption, option.closest('[data-language-picker]'));
+    } else if (!event.target.closest('[data-language-menu]')) closeMenus();
+  }, true);
+  document.addEventListener('keydown', event => {
+    const picker = event.target.closest('[data-language-picker]');
+    if (!picker) return;
+    const menu = picker.querySelector('[data-language-menu]');
+    if (menu.hidden) {
+      if (event.target.matches('[data-language-trigger]') && ['ArrowDown', 'ArrowUp'].includes(event.key)) {
+        event.preventDefault(); event.stopPropagation(); openMenu(picker, event.key === 'ArrowUp');
+      }
+      return;
+    }
+    if (event.key === 'Escape') { event.preventDefault(); event.stopPropagation(); closeMenus(true); return; }
+    const options = [...menu.querySelectorAll('[data-language-option]')];
+    const index = options.indexOf(document.activeElement);
+    let next;
+    if (event.key === 'Home') next = 0;
+    else if (event.key === 'End') next = options.length - 1;
+    else if (event.key === 'ArrowDown') next = (index + 2) % options.length;
+    else if (event.key === 'ArrowUp') next = (index - 2 + options.length) % options.length;
+    else if (event.key === 'ArrowRight') next = (index + 1) % options.length;
+    else if (event.key === 'ArrowLeft') next = (index - 1 + options.length) % options.length;
+    if (next !== undefined) { event.preventDefault(); event.stopPropagation(); options[next].focus(); }
+    if (event.key === 'Tab') closeMenus(true);
+  }, true);
+  document.addEventListener('focusout', event => {
+    const picker = event.target.closest('[data-language-picker]');
+    if (picker?.isConnected && !picker.contains(event.relatedTarget)) closeMenus();
+  });
+  document.addEventListener('scroll', event => { if (!event.target.closest?.('[data-language-menu]')) closeMenus(); }, true);
+  window.addEventListener('resize', () => closeMenus());
+  apply();
+  return locale;
+}
+
+// Compatibility for server-owned diagnostics only; never pass device names or user input.
+const REPORT_MESSAGE_KEYS = {
+  "容器不能代表宿主内存": "metric.containerMemory",
+  "容器不能代表宿主磁盘": "metric.containerDisk",
+  "无法读取系统内存": "metric.memoryFailure",
+  "无法读取用户目录所在卷": "metric.diskFailure",
+  "尚无有效 SSH 采集": "metric.sshPending",
+  "SSH 内存采集失败": "metric.sshMemory",
+  "SSH 磁盘采集失败": "metric.sshDisk",
+  "容器不读取宿主 SSH 配置。请在宿主运行 Driver。": "notice.container",
+  "本机尚无可读取的 SSH 配置。": "notice.missing",
+  "Include 路径过深，已跳过。": "notice.deep",
+  "Include 目录读取达到上限，候选可能不完整。": "notice.directoryLimit",
+  "已跳过目录外的 Include。": "notice.outside",
+  "部分 Include 无法读取。": "notice.unreadable",
+  "配置读取达到上限，部分候选未列出。": "notice.limit",
+  "已跳过受限目录外或非 config / .conf 的 Include。": "notice.restricted",
+  "已跳过循环 Include。": "notice.loop",
+  "配置文件过大或不是普通文件，已跳过。": "notice.fileSize",
+  "配置文件过大，已跳过。": "notice.large",
+  "文件不是 SSH 配置，已忽略。": "notice.notConfig",
+  "候选数达到上限。": "notice.candidateLimit",
+  "含 Match 条件：仅登记别名，未解析条件或执行命令。": "notice.match",
+  "已跳过 Host / Match 内的条件 Include，候选可能不完整。": "notice.conditional"
+};
+export const reportMessage = value => Object.hasOwn(REPORT_MESSAGE_KEYS, value) ? t(REPORT_MESSAGE_KEYS[value]) : value;

package/src/install-prompt.js

@@ -0,0 +1,19 @@
+import { translate } from './i18n.js';
+
+export function localizedInstallPrompt(plan, locale) {
+  const c = plan.commands;
+  const tr = (key, values) => translate(locale, key, values);
+  return [
+    tr('prompt.intro'),
+    tr('prompt.choice', { mode: tr(plan.mode === 'local' ? 'guide.local' : plan.mode === 'official' ? 'guide.hosted' : 'guide.custom'), version: plan.version, run: tr(plan.background ? 'prompt.background' : 'prompt.foreground') }),
+    plan.controlOrigin ? tr('prompt.private', { origin: plan.controlOrigin }) : '',
+    `1. ${tr('prompt.environment')}`,
+    `2. ${tr('prompt.existing', { url: plan.url, status: c.bindingStatus, service: c.serviceStatus })}`,
+    `3. ${tr('prompt.userInstall')}\n   ${c.install}\n   ${c.version}\n   ${tr('prompt.config')}`,
+    `4. ${plan.background ? `${tr('prompt.bg')}\n   ${c.servicePlan}\n   ${c.serviceInstall}\n   ${c.serviceStatus}` : `${tr('prompt.fg')}${plan.controlOrigin ? '' : `\n   ${c.foreground}`}`}`,
+    `5. ${plan.controlOrigin ? `${tr('prompt.pairBefore')}\n   ${c.pairingPlan}\n   ${c.connect}\n   ${tr('prompt.pairAfter', { origin: plan.controlOrigin })}` : tr('prompt.local')}`,
+    `6. ${tr('prompt.mcp', { url: plan.url, mcp: plan.mcpUrl })}`,
+    `7. ${tr('prompt.verify')}\n   ${tr('prompt.uninstall')}\n   ${c.uninstallService}`,
+    tr('prompt.boundaries'), tr('prompt.end'),
+  ].filter(Boolean).join('\n\n');
+}

package/src/install-walkthrough.js

@@ -0,0 +1,49 @@
+import { translate } from './i18n.js';
+
+// Instruction illustrations only. Navigation never installs software or confirms a binding.
+export function installationSteps({ method = 'agent', mode = 'local', pairingMethod = 'browser' } = {}) {
+  if (!['agent', 'manual'].includes(method) || !['local', 'official', 'self-hosted'].includes(mode) || !['browser', 'headless'].includes(pairingMethod)) throw new Error('invalid_installation_walkthrough');
+  const manual = method === 'manual', cloud = mode !== 'local', headless = manual && pairingMethod === 'headless';
+  return [
+    { tab: 'walk.pasteTab', title: manual ? 'walk.terminalTitle' : 'walk.agentTitle', body: manual ? 'walk.terminalBody' : 'walk.agentBody', picture: manual ? 'terminal' : 'chat' },
+    { tab: cloud ? 'walk.bindTab' : 'walk.installTab', title: cloud ? headless ? 'walk.headlessTitle' : 'walk.browserTitle' : 'walk.installTitle', body: cloud ? headless ? 'walk.headlessBody' : 'walk.browserBody' : manual ? 'walk.installBody' : 'walk.agentInstallBody', picture: cloud ? headless ? 'headless' : 'pair' : 'install' },
+    { tab: 'walk.checkTab', title: 'walk.checkTitle', body: cloud ? 'walk.cloudCheckBody' : 'walk.localCheckBody', picture: 'dashboard' },
+  ];
+}
+
+const escape = value => String(value).replace(/[&<>"']/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c]);
+const arrows = '<svg viewBox="0 0 32 20" aria-hidden="true"><path d="M2 10h26M20 3l8 7-8 7"/></svg>';
+const clipboard = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5H5v16h14V5h-3M8 3h8v5H8zM8 12h8m-8 4h5"/></svg>';
+const pointer = '<svg class="picture-pointer" viewBox="0 0 30 36" aria-hidden="true"><path d="m4 3 21 18-10 1-5 10z"/></svg>';
+
+export function installWalkthroughMarkup({ method = 'agent', mode = 'local', pairingMethod = 'browser', step = 0, copied = false, controlOrigin = '', localUrl = 'http://127.0.0.1:5174', locale = 'zh-CN' } = {}) {
+  const steps = installationSteps({ method, mode, pairingMethod });
+  if (!Number.isInteger(step) || step < 0 || step >= steps.length) throw new Error('invalid_installation_step');
+  const tr = (key, values) => escape(translate(locale, key, values));
+  const active = steps[step], cloud = mode !== 'local';
+  const window = (title, contents, type = '') => `<div class="picture-window ${type}"><div class="picture-titlebar"><i></i><i></i><i></i><span>${title}</span></div>${contents}</div>`;
+  const paste = type => `<div class="picture-transfer"><span>${clipboard}${tr('walk.copiedContent')}</span>${arrows}<span>${tr(type === 'terminal' ? 'walk.terminal' : 'walk.chat')}</span></div>`;
+  const fingerprint = `<div class="picture-fingerprints"><span>${tr('walk.terminal')}</span><code>${tr('walk.fullFingerprint')}</code><b>=</b><span>${tr('walk.browser')}</span><code>${tr('walk.fullFingerprint')}</code></div>`;
+  const approval = `<div class="picture-approval">${tr('walk.approve')}${pointer}</div>`;
+  const browserTitle = `<span class="picture-address">${escape(controlOrigin || 'https://devices.example.com')}</span>`;
+  let picture;
+  if (active.picture === 'terminal') {
+    picture = `${paste('terminal')}${window(tr('walk.targetTerminal'), `<div class="picture-terminal"><div class="picture-paste-line"><span>$</span><div>${tr('walk.pasteScript')}<i class="picture-caret"></i></div>${pointer}</div><div class="picture-keyline"><span>macOS <kbd>⌘ V</kbd> · Linux <kbd>Ctrl Shift V</kbd></span><strong>${tr('walk.pressEnter')} <kbd>Enter ↵</kbd></strong></div></div>`, 'terminal-picture')}<div class="picture-launch"><span>${tr('walk.openMac')}</span><span>${tr('walk.openLinux')}</span></div>`;
+  } else if (active.picture === 'chat') {
+    picture = `${paste('chat')}${window(tr('walk.targetChat'), `<div class="picture-chat"><div class="picture-chat-message">${tr('walk.pastePrompt')}<i class="picture-caret"></i></div><div class="picture-send"><span>${tr('walk.send')}</span><b>↑</b>${pointer}</div></div>`, 'chat-picture')}`;
+  } else if (active.picture === 'pair' || active.picture === 'headless') {
+    const headless = active.picture === 'headless';
+    const transfer = headless ? `<div class="picture-transfer headless-transfer"><span>${tr('walk.targetTerminal')}<code>${tr('walk.pairCode')}</code></span>${arrows}<span>${tr('walk.otherBrowser')}</span></div>` : `<div class="picture-auto-open">${tr('walk.autoBrowser')}</div>`;
+    picture = `${transfer}${window(browserTitle, `<div class="picture-pair"><div class="picture-signin"><span>01</span>${tr('walk.signIn')}</div>${headless ? `<div class="picture-code-entry"><span>${tr('walk.openPairing', { action: translate(locale, 'panel.434') })}</span><div>${tr('walk.pasteCode')}${pointer}</div></div>` : ''}<div class="picture-signin"><span>02</span>${tr('walk.compare')}</div>${fingerprint}${approval}</div>`, 'browser-picture')}`;
+  } else if (active.picture === 'install') {
+    picture = window(tr('walk.targetTerminal'), `<div class="picture-install"><div class="picture-install-command"><span>$</span> device-center</div><div class="picture-install-row"><span>01</span>${tr('walk.driver')}</div><div class="picture-install-row"><span>02</span>${tr('walk.service')}</div>${method === 'agent' ? `<div class="picture-install-row"><span>03</span>${tr('walk.mcp')}</div>` : ''}<div class="picture-install-track"><i></i><i></i><i></i></div></div>`, 'terminal-picture');
+  } else {
+    picture = `${!cloud ? `<div class="picture-auto-open">${tr('walk.sameComputer')}</div>` : ''}${window(`<span class="picture-address">${escape(cloud ? controlOrigin || 'https://devices.example.com' : localUrl)}</span>`, `<div class="picture-dashboard"><div class="picture-device"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="3" width="18" height="13" rx="2"/><path d="M1 21h22M8 16l-1 5m9-5 1 5"/></svg><strong>${tr('walk.yourDevice')}</strong><span>${tr('walk.awaitReport')}</span></div><div class="picture-metrics"><div><span>${tr('panel.8')}</span><b>— / —</b><i></i></div><div><span>${tr('panel.9')}</span><b>— / —</b><i></i></div></div><div class="picture-report-time">${tr('walk.reportTime')}${pointer}</div></div>`, 'browser-picture')}`;
+  }
+  return `<ol class="walkthrough-tabs" aria-label="${tr('walk.steps')}">${steps.map((item, index) => `<li><button type="button" data-walk-step="${index}" ${index === step ? 'aria-current="step"' : ''}><span>0${index + 1}</span>${tr(item.tab)}</button></li>`).join('')}</ol>
+    <div class="walkthrough-caption" aria-live="polite"><span>${tr(active.title)}</span><small>${tr('walk.counter', { current: step + 1, total: steps.length })}</small></div>
+    <div class="walkthrough-picture" role="img" aria-label="${tr(active.title)}. ${tr(active.body)}">${picture}</div>
+    <p class="walkthrough-description">${tr(active.body)}</p>
+    ${step === 0 && !copied ? `<p class="walkthrough-copy-first">${tr('walk.copyFirst')}</p>` : ''}
+    <div class="walkthrough-navigation"><button type="button" data-walk-step="${step - 1}" ${step === 0 ? 'disabled' : ''}>${tr('walk.previous')}</button><button type="button" data-walk-step="${step === 2 ? 0 : step + 1}">${tr(step === 2 ? 'walk.restart' : 'walk.next')}</button></div>`;
+}

package/src/login.js

@@ -1,3 +1,10 @@
+import { initLanguage, getLocale, t } from './i18n.js';
+import { loginDestination } from './pairing-handoff.js';
+if (location.pathname === '/pair') {
+  await import('./pair.js');
+} else {
+initLanguage();
+function setMessage(element, key) { if (key) element.dataset.i18n = key; else delete element.dataset.i18n; element.textContent = key ? t(key) : ''; }
 const form = document.querySelector('#login');
 const loading = document.querySelector('#loading');
 let checking = false, watchingUntil = 0, timer, options;
@@ -8,19 +15,19 @@ async function continueUnified(manual = false) {
   button.disabled = true;
   try {
     const response = await fetch('/api/auth/continue', { method: 'POST', headers: { 'content-type': 'application/json' }, body: '{}', signal: AbortSignal.timeout(10_000) });
-    if (response.ok) { clearInterval(timer); location.replace('/'); return; }
-    if (response.status === 401) message.textContent = manual ? '请先在统一账号页面完成邮箱或 Google 登录，再回到这里。' : '';
+    if (response.ok) { clearInterval(timer); location.replace(loginDestination(getLocale())); return; }
+    if (response.status === 401) setMessage(message, manual ? 'login.first' : null);
     else {
       clearInterval(timer);
-      message.textContent = response.status === 403 ? '当前账号没有此个人面板的访问权限，请使用面板所有者的账号。' : response.status === 429 ? '尝试过于频繁，请一分钟后重试。' : '统一账号服务暂不可用，请稍后重试。';
+      setMessage(message, response.status === 403 ? 'login.owner' : response.status === 429 ? 'login.rate' : 'login.unavailable');
     }
-  } catch { message.textContent = '连接账号服务超时，请重试。'; clearInterval(timer); }
+  } catch { setMessage(message, 'login.timeout'); clearInterval(timer); }
   finally { checking = false; button.disabled = false; }
 }
 document.querySelector('#continue-login').addEventListener('click', () => continueUnified(true));
 document.querySelector('#unified-login').addEventListener('click', () => {
   watchingUntil = Date.now() + 5 * 60_000;
-  document.querySelector('#unified-message').textContent = '完成统一账号登录后，回到此页即可。';
+  setMessage(document.querySelector('#unified-message'), 'login.return');
   clearInterval(timer);
   timer = setInterval(() => { if (Date.now() > watchingUntil) clearInterval(timer); else void continueUnified(); }, 4000);
 });
@@ -30,7 +37,7 @@ try {
   const response = await fetch('/api/auth/options', { signal: AbortSignal.timeout(5000) });
   if (!response.ok) throw new Error();
   options = await response.json();
-  document.querySelector('#access-notes').textContent = options.accountMode === 'multi-user' ? '账号设备隔离 · HTTPS 保护' : '个人访问 · HTTPS 保护';
+  setMessage(document.querySelector('#access-notes'), options.accountMode === 'multi-user' ? 'login.multi' : 'login.personal');
   loading.hidden = true;
   if (options.provider === 'app-services') {
     const target = new URL(options.accountLoginUrl);
@@ -40,17 +47,19 @@ try {
     if (options.automaticContinue) void continueUnified();
   } else if (options.provider === 'password') { form.hidden = false; form.elements.username.focus(); }
   else throw new Error();
-} catch { loading.hidden = false; loading.textContent = '无法读取登录方式，请刷新重试。'; }
+} catch { loading.hidden = false; setMessage(loading, 'login.optionsError'); }
 form.addEventListener('submit', async (event) => {
   event.preventDefault();
   const button = form.querySelector('button');
   const message = document.querySelector('#message');
-  button.disabled = true; message.textContent = '';
+  button.disabled = true; setMessage(message, null);
   try {
     const data = Object.fromEntries(new FormData(form));
     const response = await fetch('/api/auth/login', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(data), signal: AbortSignal.timeout(10_000) });
-    if (!response.ok) throw new Error(response.status === 429 ? '尝试过于频繁，请一分钟后重试。' : '用户名或密码不正确。');
-    form.reset(); location.replace('/');
-  } catch (cause) { message.textContent = cause.name === 'TimeoutError' ? '连接超时，请重试。' : cause.message; }
+    if (!response.ok) throw new Error(response.status === 429 ? 'login.rate' : 'login.credentials');
+    form.reset(); location.replace(loginDestination(getLocale()));
+  } catch (cause) { setMessage(message, cause.name === 'TimeoutError' ? 'login.timeout' : cause.message.startsWith('login.') ? cause.message : 'login.unavailable'); }
   finally { button.disabled = false; }
 });
+
+}