@dshn/agent 0.1.6 → 0.2.0

package/README.md

@@ -22,6 +22,11 @@ the relay operator sees only ciphertext.
 - **Trust-on-first-use claim.** The first agent to present a free subdomain sets
   its password (scrypt-hashed on the relay). Later connects and every browser
   login must match it — squatting-protected.
+- **Multi-device.** Several machines can bind ONE subdomain with the same
+  credential — each shows up as a named device. With ≥2 online, opening the URL
+  offers a device picker, and a switcher appears in the page's sidebar footer;
+  the choice sticks per browser (a routing cookie), and switching is a clean
+  reload against the other machine. One device online behaves exactly as before.
 - **Optional end-to-end encryption** (off by default). A *separate* e2e password,
   never sent to the relay, encrypts `/api` bodies and the event stream:
   PBKDF2-SHA256 (210k) → AES-256-GCM. Visitors enter it once in the browser; it

package/client.js

@@ -153,7 +153,7 @@ window.__ModuleLoader__.load({
           if (!info || !info.enabled || !info.salt) { window.fetch = realFetch; window.WebSocket = RealWS; window.__dshnE2E.stage = 'off-restored'; resolveReady(); return }
           active = true
           window.__dshnE2E.stage = 'gating'
-          await unlockGate(info.salt)
+          await unlockGate(info.salt, info.device)
           window.__dshnE2E.stage = 'unlocked'
         } catch (e) { window.fetch = realFetch; window.WebSocket = RealWS; window.__dshnE2E.stage = 'error'; window.__dshnE2E.error = String(e && e.message || e) }
         resolveReady()
@@ -161,7 +161,7 @@ window.__ModuleLoader__.load({
 
       // A blocking DOM overlay (not React — must appear before the app mounts)
       // asking for the e2e password; verified by a sealed probe to /api.
-      function unlockGate(salt) {
+      function unlockGate(salt, deviceKey) {
         return new Promise((resolve) => {
           const zh = String(document.documentElement.lang || navigator.language || 'en').toLowerCase().indexOf('zh') === 0
           const L = zh
@@ -169,12 +169,24 @@ window.__ModuleLoader__.load({
                 save: '在此设备记住密码', stale: '已保存的密码无法解锁（可能已被更改），请重新输入。' }
             : { t: 'End-to-end encrypted', s: 'This session is end-to-end encrypted. Enter the e2e password to unlock — it is never sent to the cloud.', p: 'E2E password', u: 'Unlock', bad: 'Wrong password — cannot decrypt.',
                 save: 'Remember on this device', stale: 'The saved password no longer works (it may have been changed). Enter it again.' }
-          // Remembered password lives in localStorage, per public host, on THIS
-          // device only — never transmitted (E2E is intact). Keyed by host (not
-          // salt) so a changed e2e password is detected and re-prompted.
-          const STORE_KEY = 'dshn:e2e:' + location.hostname
-          const readSaved = () => { try { return localStorage.getItem(STORE_KEY) } catch { return null } }
-          const writeSaved = (v) => { try { if (v == null) localStorage.removeItem(STORE_KEY); else localStorage.setItem(STORE_KEY, v) } catch { /* storage may be blocked */ } }
+          // Remembered password lives in localStorage, per public host AND per
+          // device, on THIS browser only — never transmitted (E2E is intact).
+          // The device part matters on a multi-device subdomain: each machine
+          // has its own e2e password, and one saved copy must not clobber (or be
+          // probed against) another device's. Keyed by host+device (not salt) so
+          // a changed e2e password is detected and re-prompted. The old
+          // host-only key is read once as a fallback and migrated on success.
+          const LEGACY_KEY = 'dshn:e2e:' + location.hostname
+          const STORE_KEY = LEGACY_KEY + (deviceKey ? ':' + deviceKey : '')
+          const readSaved = () => {
+            try { return localStorage.getItem(STORE_KEY) || (STORE_KEY !== LEGACY_KEY ? localStorage.getItem(LEGACY_KEY) : null) } catch { return null }
+          }
+          const writeSaved = (v) => {
+            try {
+              if (v == null) localStorage.removeItem(STORE_KEY); else localStorage.setItem(STORE_KEY, v)
+              if (STORE_KEY !== LEGACY_KEY) localStorage.removeItem(LEGACY_KEY)
+            } catch { /* storage may be blocked */ }
+          }
 
           // Derive from a password string and probe /api with a sealed body; on a
           // correct key set the live key and return true. A wrong key → agent 400
@@ -198,7 +210,10 @@ window.__ModuleLoader__.load({
             let stale = false
             const saved = readSaved()
             if (saved) {
-              if (await attempt(saved)) { window.__dshnE2E.autounlock = true; resolve(); return }
+              if (await attempt(saved)) {
+                writeSaved(saved) // re-write so a legacy host-only entry migrates to the per-device key
+                window.__dshnE2E.autounlock = true; resolve(); return
+              }
               writeSaved(null); stale = true // the saved one no longer works → drop it and tell the user
             }
 
@@ -279,7 +294,7 @@ window.__ModuleLoader__.load({
   border: 1px solid var(--dsw-alias-border-l1, rgba(128,134,142,.25)); }
 .dshn-panel[data-mode="modal"] { width: min(400px, 92vw); padding: 20px 22px 18px; box-shadow: 0 24px 64px rgba(0,0,0,.34); }
 .dshn-panel[data-mode="card"] { width: 308px; margin-top: 8px; padding: 14px 15px 13px; box-shadow: 0 8px 24px rgba(0,0,0,.16); }
-.dshn-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
+.dshn-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
 .dshn-htitle { font-size: 14.5px; font-weight: 650; }
 .dshn-hsub { color: var(--dsw-alias-label-tertiary, #8b9099); font-size: 11.5px; margin-top: 2px; }
 .dshn-x { border: 0; background: transparent; cursor: pointer; font-size: 17px; line-height: 1; padding: 2px 4px;
@@ -289,7 +304,7 @@ window.__ModuleLoader__.load({
 .dshn-status { display: flex; align-items: center; gap: 7px; margin-bottom: 11px; font-size: 12px; }
 .dshn-url { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
-.dshn-addr { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; padding: 8px 8px 8px 11px;
+.dshn-addr { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; padding: 6px 8px 6px 11px;
   border: 1px solid var(--dsw-alias-border-l2, rgba(128,134,142,.25)); border-radius: 10px;
   background: var(--dsw-alias-bg-layer-2, #f4f5f7); }
 .dshn-addr-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--dsw-alias-label-tertiary, #8b9099); }
@@ -303,10 +318,10 @@ window.__ModuleLoader__.load({
   color: var(--dsw-alias-label-tertiary, #8b9099); text-decoration: none; }
 .dshn-addr-btn:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(128,134,142,.16)); color: var(--dsw-alias-label-primary, #1c1e21); }
 
-.dshn-field { display: block; margin-bottom: 11px; }
-.dshn-field > span { display: block; color: var(--dsw-alias-label-tertiary, #8b9099); font-size: 11px; margin-bottom: 4px; }
+.dshn-field { display: block; margin-bottom: 7px; }
+.dshn-field > span { display: block; color: var(--dsw-alias-label-tertiary, #8b9099); font-size: 11px; margin-bottom: 3px; }
 .dshn-prefixwrap { display: flex; align-items: stretch; }
-.dshn-input { width: 100%; box-sizing: border-box; padding: 8px 10px; font-size: 13.5px;
+.dshn-input { width: 100%; box-sizing: border-box; padding: 6px 10px; font-size: 13.5px;
   border: 1px solid var(--dsw-alias-border-l1, rgba(128,134,142,.35)); border-radius: 8px; background: transparent; color: inherit; }
 .dshn-input:focus { outline: 2px solid var(--dsw-alias-label-primary-bluish, #4176e6); outline-offset: -1px; }
 .dshn-input[data-bad="1"] { border-color: var(--dsw-alias-state-error-primary, #e5484d); }
@@ -325,27 +340,27 @@ window.__ModuleLoader__.load({
 .dshn-strength { font-size: 10.5px; margin-top: 3px; }
 
 .dshn-actions { display: flex; gap: 8px; align-items: center; margin-top: 3px; }
-.dshn-primary { flex: 1; padding: 9px; border: 0; border-radius: 8px; cursor: pointer; background: #4176e6; color: #fff; font-size: 13.5px; }
+.dshn-primary { flex: 1; padding: 7px; border: 0; border-radius: 8px; cursor: pointer; background: #4176e6; color: #fff; font-size: 13.5px; }
 .dshn-primary:disabled { opacity: .5; cursor: default; }
-.dshn-ghost { border: 0; background: transparent; cursor: pointer; color: var(--dsw-alias-label-tertiary, #8b9099); font-size: 12.5px; padding: 9px 8px; }
+.dshn-ghost { border: 0; background: transparent; cursor: pointer; color: var(--dsw-alias-label-tertiary, #8b9099); font-size: 12.5px; padding: 7px 8px; }
 .dshn-err { color: var(--dsw-alias-state-error-primary, #e5484d); font-size: 11.5px; margin-bottom: 9px; }
 .dshn-hint { color: var(--dsw-alias-label-tertiary, #8b9099); font-size: 10.5px; margin-top: 3px; }
-.dshn-note { color: var(--dsw-alias-state-warn-primary, #d98324); font-size: 10.5px; margin: 2px 0 10px; }
-.dshn-modeseg { display: flex; gap: 4px; padding: 3px; border-radius: 9px; background: var(--dsw-alias-bg-layer-2, #f4f5f7);
+.dshn-note { color: var(--dsw-alias-state-warn-primary, #d98324); font-size: 10.5px; margin: 2px 0 8px; }
+.dshn-modeseg { display: flex; gap: 4px; padding: 2px; border-radius: 9px; background: var(--dsw-alias-bg-layer-2, #f4f5f7);
   border: 1px solid var(--dsw-alias-border-l2, rgba(128,134,142,.22)); }
-.dshn-modebtn { flex: 1; padding: 6px 10px; border: 0; border-radius: 6px; cursor: pointer; font-size: 12.5px; font-family: inherit;
+.dshn-modebtn { flex: 1; padding: 5px 10px; border: 0; border-radius: 6px; cursor: pointer; font-size: 12.5px; font-family: inherit;
   background: transparent; color: var(--dsw-alias-label-secondary, #4a4f57); }
 .dshn-modebtn.dshn-on { background: var(--dsw-alias-bg-layer-1, #fff); color: var(--dsw-alias-label-primary, #1c1e21);
   box-shadow: 0 1px 2px rgba(0,0,0,.08); }
-.dshn-ca { min-height: 54px; resize: vertical; font-family: ui-monospace, Menlo, monospace; font-size: 11px; line-height: 1.4; }
+.dshn-ca { min-height: 46px; resize: vertical; font-family: ui-monospace, Menlo, monospace; font-size: 11px; line-height: 1.4; }
 .dshn-catoggle { border: 0; background: transparent; cursor: pointer; padding: 2px 0; font-size: 11px; font-family: inherit;
   color: var(--dsw-alias-label-tertiary, #8b9099); }
 .dshn-catoggle:hover { color: var(--dsw-alias-label-primary, #1c1e21); }
-.dshn-e2e-box { margin: 4px 0 12px; padding: 11px 12px; border-radius: 10px;
+.dshn-e2e-box { margin: 2px 0 8px; padding: 9px 11px; border-radius: 10px;
   border: 1px solid var(--dsw-alias-border-l2, rgba(128,134,142,.25)); background: var(--dsw-alias-bg-layer-2, #f4f5f7); }
-.dshn-e2e-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px;
+.dshn-e2e-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px;
   color: var(--dsw-alias-label-tertiary, #8b9099); font-size: 11px; }
-.dshn-e2e-actions { display: flex; gap: 8px; align-items: center; margin-top: 9px; }
+.dshn-e2e-actions { display: flex; gap: 8px; align-items: center; margin-top: 7px; }
 .dshn-btn-sm { padding: 6px 12px; border: 0; border-radius: 7px; cursor: pointer; font-size: 12px;
   background: #4176e6; color: #fff; }
 .dshn-btn-sm:disabled { opacity: .5; cursor: default; }
@@ -353,17 +368,33 @@ window.__ModuleLoader__.load({
   border: 1px solid var(--dsw-alias-border-l1, rgba(128,134,142,.3)); }
 .dshn-btn-warn:hover:not(:disabled) { background: color-mix(in srgb, var(--dsw-alias-state-error-primary, #e5484d) 10%, transparent); }
 .dshn-info { border: 1px solid var(--dsw-alias-border-l2, rgba(128,134,142,.22)); border-radius: 9px;
-  padding: 8px 10px; margin-bottom: 12px; }
-.dshn-info-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 11.5px; padding: 3px 0; }
+  padding: 6px 10px; margin-bottom: 8px; }
+.dshn-info-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 11.5px; padding: 1.5px 0; }
 .dshn-info-k { display: inline-flex; align-items: center; gap: 7px; color: var(--dsw-alias-label-tertiary, #8b9099); }
 .dshn-info-k svg { flex: none; opacity: .85; }
 .dshn-info-v { font-family: ui-monospace, Menlo, monospace; text-align: right; font-variant-numeric: tabular-nums; }
 .dshn-dcwarn { border: 1px solid var(--dsw-alias-state-error-primary, #e5484d); background: rgba(229,72,77,.08);
-  border-radius: 9px; padding: 10px 11px; margin-bottom: 11px; }
-.dshn-dcwarn-title { font-weight: 640; font-size: 12.5px; margin-bottom: 5px; }
+  border-radius: 9px; padding: 8px 10px; margin-bottom: 8px; }
+.dshn-dcwarn-title { font-weight: 640; font-size: 12.5px; margin-bottom: 3px; }
 .dshn-dcwarn-body { font-size: 11.5px; color: var(--dsw-alias-label-secondary, #4a4f57); }
-.dshn-danger { flex: 1; padding: 9px; border: 0; border-radius: 8px; cursor: pointer;
+.dshn-danger { flex: 1; padding: 7px; border: 0; border-radius: 8px; cursor: pointer;
   background: var(--dsw-alias-state-error-primary, #e5484d); color: #fff; font-size: 13px; }
+
+/* Multi-device switcher (remote pages only): a footer row like the local one,
+   opening a small fixed popover above it listing this subdomain's devices. */
+.dshn-devpop { position: fixed; left: 12px; bottom: 56px; z-index: 70; width: 244px;
+  box-sizing: border-box; padding: 10px 10px 8px; border-radius: 12px;
+  background: var(--dsw-alias-bg-layer-3, #fff);
+  border: 1px solid var(--dsw-alias-border-l1, rgba(128,134,142,.25));
+  box-shadow: var(--dsw-shadow-lv3, 0 12px 32px rgba(0,0,0,.24)); }
+.dshn-devpop-title { font-size: 11px; color: var(--dsw-alias-label-tertiary, #8b9099); margin: 0 4px 6px; }
+.dshn-devrow { display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box;
+  padding: 8px 9px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; text-align: left;
+  color: var(--dsw-alias-label-primary, #1c1e21); font-size: 13px; font-family: inherit; }
+.dshn-devrow:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover, rgba(128,134,142,.12)); }
+.dshn-devrow:disabled { cursor: default; opacity: .6; }
+.dshn-devrow-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dshn-devrow-tag { font-size: 10.5px; color: var(--dsw-alias-label-tertiary, #8b9099); }
 `
     const cssId = ID + '/widget.css'
     if (typeof document !== 'undefined'
@@ -386,7 +417,7 @@ window.__ModuleLoader__.load({
           savedHint: '手机访问用这个密码登录。忘记时点“复制/显示”取回。',
           weak: '弱', fair: '一般', good: '较强', strong: '强',
           infoRelay: '线路', infoMode: { direct: '直连源站', cloudflare: '经 Cloudflare' },
-          infoUptime: '在线时长', infoServed: '已转发请求', infoPort: '本地端口', infoLatency: '延迟',
+          infoUptime: '在线时长', infoServed: '已转发请求', infoPort: '本地端口', infoLatency: '延迟', infoDevice: '设备名',
           e2eLabel: '端到端密码（可选）', e2eHint: '设置后，会话内容用它加密，云端也看不到；密码不出本机。访问时需在网页再输一次。',
           e2eApply: '设置端到端密码', e2eUpdate: '更新端到端密码', e2eDisable: '关闭加密', e2eApplied: '✓ 端到端加密已开启', e2eOff2: '✓ 端到端加密已关闭', e2eIndep: '独立设置，不影响上面的连接。',
           infoE2E: '端到端加密', e2eOn: '已开启', e2eOff: '未开启',
@@ -398,7 +429,8 @@ window.__ModuleLoader__.load({
           mode: '模式', modeOfficial: '官方 ds.hn', modeSelf: '自托管', yourDomain: '你的域名', relayHost: '中继地址',
           relayHostHint: '填你自己的 @dshn/relay,如 wss://tunnel.example.com。子域会挂在它的域名下。',
           relayCa: '中继证书(自签名,可选)',
-          relayCaHint: '仅当你的中继用自签名证书时:粘贴其 PEM 证书以固定信任(公有证书/套 Cloudflare 时留空)。' }
+          relayCaHint: '仅当你的中继用自签名证书时:粘贴其 PEM 证书以固定信任(公有证书/套 Cloudflare 时留空)。',
+          devLabel: '设备', devSwitch: '切换设备', devOffline: '离线', devCurrent: '当前' }
       : { brand: 'Public forwarding · ds.hn', connecting: 'connecting…', live: 'live', off: 'off', notset: 'not set up',
           setupTitle: 'Set up public forwarding', setupSub: 'Pick a subdomain prefix and an access password — the two are your credential.',
           connTitle: 'Public forwarding', prefix: 'Subdomain prefix', password: 'Access password', confirm: 'Confirm password',
@@ -410,7 +442,7 @@ window.__ModuleLoader__.load({
           savedHint: 'Log in from a phone with this password. Copy/show it here if you forget.',
           weak: 'weak', fair: 'fair', good: 'good', strong: 'strong',
           infoRelay: 'Link', infoMode: { direct: 'direct to origin', cloudflare: 'via Cloudflare' },
-          infoUptime: 'Uptime', infoServed: 'Requests served', infoPort: 'Local port', infoLatency: 'Latency',
+          infoUptime: 'Uptime', infoServed: 'Requests served', infoPort: 'Local port', infoLatency: 'Latency', infoDevice: 'Device name',
           e2eLabel: 'End-to-end password (optional)', e2eHint: 'If set, session content is encrypted with it — even the cloud cannot read it, and it never leaves this machine. Visitors enter it again in the browser.',
           e2eApply: 'Set e2e password', e2eUpdate: 'Update e2e password', e2eDisable: 'Turn off', e2eApplied: '✓ End-to-end encryption on', e2eOff2: '✓ End-to-end encryption off', e2eIndep: 'Applied on its own — does not affect the connection above.',
           infoE2E: 'End-to-end encryption', e2eOn: 'on', e2eOff: 'off',
@@ -422,7 +454,8 @@ window.__ModuleLoader__.load({
           mode: 'Mode', modeOfficial: 'Official ds.hn', modeSelf: 'Self-hosted', yourDomain: 'your-domain', relayHost: 'Relay host',
           relayHostHint: 'Your own @dshn/relay, e.g. wss://tunnel.example.com. Your subdomain lives under its domain.',
           relayCa: 'Relay CA (self-signed, optional)',
-          relayCaHint: 'Only when your relay uses a self-signed cert: paste its PEM to pin trust (leave blank for a public cert / behind Cloudflare).' }
+          relayCaHint: 'Only when your relay uses a self-signed cert: paste its PEM to pin trust (leave blank for a public cert / behind Cloudflare).',
+          devLabel: 'Device', devSwitch: 'Switch device', devOffline: 'offline', devCurrent: 'current' }
 
     function strength(pw) {
       if (pw.length < MIN_PW) return { score: 0, ok: false }
@@ -623,12 +656,22 @@ window.__ModuleLoader__.load({
           s.localPort ? h('div', { className: 'dshn-info-row' },
             h('span', { className: 'dshn-info-k' }, Icon('server'), T.infoPort),
             h('span', { className: 'dshn-info-v' }, String(s.localPort))) : null,
+          // How this machine shows up in the multi-device switcher when several
+          // devices bind one subdomain.
+          s.deviceName ? h('div', { className: 'dshn-info-row' },
+            h('span', { className: 'dshn-info-k' }, Icon('server'), T.infoDevice),
+            h('span', { className: 'dshn-info-v' }, s.deviceName)) : null,
           h('div', { className: 'dshn-info-row' },
             h('span', { className: 'dshn-info-k' }, Icon(s.e2eEnabled ? 'lock' : 'unlock'), T.infoE2E),
             h('span', { className: 'dshn-info-v', style: { color: s.e2eEnabled ? '#3aa675' : undefined } }, s.e2eEnabled ? T.e2eOn : T.e2eOff))) : null,
 
         liveErr ? h('div', { className: 'dshn-err' }, liveErr) : null,
 
+        // While confirming a disconnect, hide the whole editable form (you're
+        // leaving it) so the confirmation stays short and fully visible instead of
+        // growing the panel past its container.
+        confirmDc ? null : h(react.Fragment, null,
+
         // Mode: official ds.hn vs self-hosted. The subdomain + password + e2e
         // below are shared; self-hosted just adds where your own relay lives.
         h('div', { className: 'dshn-field' },
@@ -725,7 +768,7 @@ window.__ModuleLoader__.load({
                 e2eBusy ? T.connecting2 : (s.e2eEnabled ? T.e2eUpdate : T.e2eApply)),
               s.e2eEnabled ? h('button', { className: 'dshn-btn-sm dshn-btn-warn', disabled: e2eBusy, onClick: () => { setE2e(''); applyE2E('') } }, T.e2eDisable) : null),
             h('div', { className: 'dshn-hint', style: { marginTop: '7px' } }, T.e2eHint + ' ' + T.e2eIndep))
-        })() : null,
+        })() : null),
 
         // Disconnecting severs public access and the password is unrecoverable
         // from the cloud — so it takes an explicit, spelled-out confirmation.
@@ -774,6 +817,69 @@ window.__ModuleLoader__.load({
       return store
     }
 
+    // ── multi-device switcher (remote pages only) ─────────────────────────────
+    // On a public host, `/__dshn/devices` is answered by the RELAY (same host,
+    // behind the same login cookie): the list of devices bound to this subdomain.
+    // `multi` goes true when ≥2 are live — only then does the switcher appear.
+    // `/dshn-e2e` (answered by the SERVING device through the tunnel) tells us
+    // which device this page is actually on, for when no selection cookie is set.
+    // An old relay answers neither with JSON — the switcher just stays hidden.
+    const DEV_POLL_MS = 10000
+    const devStore = {
+      info: null, self: null, started: false, subs: new Set(),
+      set(patch) { Object.assign(this, patch); this.subs.forEach((f) => f()) },
+      sub(f) { this.subs.add(f); return () => this.subs.delete(f) },
+      start() {
+        if (this.started || pageLoopback) return
+        this.started = true
+        const tick = () => fetch('/__dshn/devices', { cache: 'no-store', credentials: 'include', headers: { accept: 'application/json' } })
+          .then((r) => (r.ok && String(r.headers.get('content-type') || '').includes('json') ? r.json() : null))
+          .then((j) => { if (j && Array.isArray(j.devices)) this.set({ info: j }) })
+          .catch(() => {})
+        tick(); setInterval(tick, DEV_POLL_MS)
+        fetch(E2E_PUB_PATH, { cache: 'no-store', credentials: 'include' })
+          .then((r) => (r.ok ? r.json() : null))
+          .then((j) => { if (j && j.device) this.set({ self: j.device }) })
+          .catch(() => {})
+      },
+    }
+    function DeviceSwitcher() {
+      const [, force] = react.useReducer((x) => x + 1, 0)
+      react.useEffect(() => devStore.sub(force), [])
+      const [open, setOpen] = react.useState(false)
+      const [busy, setBusy] = react.useState(false)
+      const info = devStore.info
+      if (!info || !info.multi) return null
+      const devices = info.devices || []
+      const currentId = info.current || devStore.self
+      const current = devices.find((d) => d.id === currentId) || null
+      const pick = (d) => {
+        if (busy || !d.online || d.id === currentId) return
+        setBusy(true)
+        // Set the selection cookie, then a full reload boots the app cleanly
+        // against the chosen device (no cross-device state survives).
+        fetch('/__dshn/select', { method: 'POST', credentials: 'include',
+          headers: { 'content-type': 'application/json', accept: 'application/json' },
+          body: JSON.stringify({ device: d.id }) })
+          .then((r) => { if (r.ok) location.reload(); else setBusy(false) })
+          .catch(() => setBusy(false))
+      }
+      return h(react.Fragment, null,
+        h('button', { className: 'dshn-frow', title: T.devSwitch, 'aria-label': T.devSwitch, onClick: () => setOpen(!open) },
+          h('span', { className: 'dshn-frow-ic' }, Icon('server', { width: 16, height: 16 })),
+          h('span', { className: 'dshn-frow-label' }, current ? current.name : T.devLabel),
+          h('span', { className: 'dshn-frow-trail' }, (info.live || 0) + '/' + devices.length)),
+        open ? h('div', { className: 'dshn-devpop' },
+          h('div', { className: 'dshn-devpop-title' }, T.devSwitch),
+          devices.map((d) => h('button', {
+            key: d.id, className: 'dshn-devrow', disabled: busy || !d.online || d.id === currentId,
+            onClick: () => pick(d) },
+            h('span', { className: 'dshn-dot', 'data-on': d.online ? '1' : '0' }),
+            h('span', { className: 'dshn-devrow-name' }, d.name),
+            d.id === currentId ? h('span', { className: 'dshn-devrow-tag' }, T.devCurrent)
+              : (!d.online ? h('span', { className: 'dshn-devrow-tag' }, T.devOffline) : null)))) : null)
+    }
+
     // Open dsh's Settings and land on our section. The settings trigger is a
     // stable `button[aria-haspopup="dialog"]` (class names are hashed); once it
     // is open, click our section's nav entry by its label.
@@ -836,7 +942,10 @@ window.__ModuleLoader__.load({
     // Configuration itself lives in the Settings page, not here.
     function FooterButton() {
       useStore()
-      if (!pageLoopback) return null
+      // Remote pages get the device switcher in this slot instead of the local
+      // status row (configuration is local-only; switching devices is the one
+      // thing a remote visitor can do here).
+      if (!pageLoopback) return h(DeviceSwitcher)
       const s = store.status
       const connected = s && s.connected
       const configured = s && s.configured
@@ -866,7 +975,8 @@ window.__ModuleLoader__.load({
 
     const inject = ['slots']
     function apply(ctx) {
-      store.start()
+      if (pageLoopback) store.start()
+      else devStore.start()
       ctx.slots.inject('sidebar.footer.action', () => ctx.slots.register({ name: 'sidebar.footer.action', id: 'dshn-footer', order: 50 }, FooterButton))
       ctx.slots.inject('settings.section', () => ctx.slots.register({ name: 'settings.section', id: 'dshn', order: 40, label: () => T.navLabel }, DshnSection))
       // Keep our settings-nav globe applied however the panel is opened (dsh's own

package/lib/index.js

@@ -2270,7 +2270,7 @@ var require_websocket = __commonJS({
     var http2 = __require("http");
     var net = __require("net");
     var tls = __require("tls");
-    var { randomBytes: randomBytes2, createHash } = __require("crypto");
+    var { randomBytes: randomBytes2, createHash: createHash2 } = __require("crypto");
     var { Duplex, Readable } = __require("stream");
     var { URL } = __require("url");
     var PerMessageDeflate2 = require_permessage_deflate();
@@ -2938,7 +2938,7 @@ var require_websocket = __commonJS({
           abortHandshake(websocket, socket, "Invalid Upgrade header");
           return;
         }
-        const digest = createHash("sha1").update(key + GUID).digest("base64");
+        const digest = createHash2("sha1").update(key + GUID).digest("base64");
         if (res.headers["sec-websocket-accept"] !== digest) {
           abortHandshake(websocket, socket, "Invalid Sec-WebSocket-Accept header");
           return;
@@ -3307,7 +3307,7 @@ var require_websocket_server = __commonJS({
     var EventEmitter = __require("events");
     var http2 = __require("http");
     var { Duplex } = __require("stream");
-    var { createHash } = __require("crypto");
+    var { createHash: createHash2 } = __require("crypto");
     var extension2 = require_extension();
     var PerMessageDeflate2 = require_permessage_deflate();
     var subprotocol2 = require_subprotocol();
@@ -3614,7 +3614,7 @@ var require_websocket_server = __commonJS({
           );
         }
         if (this._state > RUNNING) return abortHandshake(socket, 503);
-        const digest = createHash("sha1").update(key + GUID).digest("base64");
+        const digest = createHash2("sha1").update(key + GUID).digest("base64");
         const headers = [
           "HTTP/1.1 101 Switching Protocols",
           "Upgrade: websocket",
@@ -3703,8 +3703,9 @@ var require_websocket_server = __commonJS({
 
 // packages/agent/lib/index.js
 import http from "node:http";
+import { createHash } from "node:crypto";
 import { mkdirSync, readFileSync, rmSync, writeFileSync } from "node:fs";
-import { homedir } from "node:os";
+import { homedir, hostname } from "node:os";
 import { dirname, join } from "node:path";
 
 // node_modules/.pnpm/@deepseek-ai+cosmokit@1.8.2/node_modules/@deepseek-ai/cosmokit/lib/index.js
@@ -4746,6 +4747,18 @@ var AgentTunnel = class {
   e2eKey = null;
   /** Public salt for the current e2e key. */
   e2eSalt = "";
+  /**
+   * Stable device identity for multi-device: several machines may bind the same
+   * subdomain, and the relay tells them apart by this id. Derived, not stored:
+   * hashing the hostname with the state path gives an id that survives restarts
+   * and disconnects, distinguishes two profiles on one machine (different
+   * DSH_HOME/DSHN_STATE), and needs no schema or migration. Two agents sharing
+   * one profile dir collide — deliberately, since sharing a profile already
+   * means fighting over the same credentials.
+   */
+  deviceId;
+  /** Human-readable device name shown in the relay's switcher (env override, else hostname). */
+  deviceName;
   status;
   creds = null;
   /** ms epoch the current tunnel became live (READY), or null when down. */
@@ -4760,6 +4773,8 @@ var AgentTunnel = class {
     this.config = config;
     this.localPort = localPort;
     this.store = store;
+    this.deviceId = createHash("sha256").update(`${hostname()}|${config.statePath}`).digest("hex").slice(0, 12);
+    this.deviceName = (process.env.DSHN_DEVICE_NAME ?? hostname()).trim().slice(0, 40) || this.deviceId;
     this.creds = this.store.load();
     this.refreshE2E();
     this.status = {
@@ -4958,7 +4973,9 @@ var AgentTunnel = class {
           subdomain: this.creds.subdomain,
           password: this.creds.password,
           agent: `dshn-agent/${DSHN_PROTOCOL_VERSION}`,
-          protocol: DSHN_PROTOCOL_VERSION
+          protocol: DSHN_PROTOCOL_VERSION,
+          deviceId: this.deviceId,
+          device: this.deviceName
         });
       }
       this.lastPong = Date.now();
@@ -5278,8 +5295,8 @@ function isLoopbackRequest(req) {
   if (req.headers[TUNNEL_MARKER] !== void 0)
     return false;
   const host = String(req.headers.host ?? "");
-  const hostname = host.replace(/:\d+$/, "").replace(/^\[|\]$/g, "").toLowerCase();
-  return hostname === "localhost" || hostname === "::1" || hostname.startsWith("127.");
+  const hostname2 = host.replace(/:\d+$/, "").replace(/^\[|\]$/g, "").toLowerCase();
+  return hostname2 === "localhost" || hostname2 === "::1" || hostname2.startsWith("127.");
 }
 function publicApex(relayHost) {
   const bare = relayHost.replace(/^wss?:\/\//, "").replace(/:\d+$/, "");
@@ -5342,6 +5359,9 @@ function apply(ctx, rawConfig) {
         lastError: tunnel.status.lastError,
         configurable: loopback,
         apex: publicApex(info.relayHost),
+        // This machine's identity in the multi-device switcher.
+        deviceId: tunnel.deviceId,
+        deviceName: tunnel.deviceName,
         // The saved password is the only recoverable copy (cloud stores a hash).
         // Only ever handed to a loopback caller — the local machine's owner.
         password: loopback ? tunnel.revealPassword() : null,
@@ -5367,7 +5387,7 @@ function apply(ctx, rawConfig) {
     path: E2E_PUB_PATH,
     handler: (_req, res) => {
       const e = tunnel.e2eInfo();
-      json(res, 200, { enabled: e.enabled, salt: e.enabled ? e.salt : null });
+      json(res, 200, { enabled: e.enabled, salt: e.enabled ? e.salt : null, device: tunnel.deviceId });
     }
   });
   const disposeConfigure = ctx.webServer.register({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dshn/agent",
-  "version": "0.1.6",
+  "version": "0.2.0",
   "description": "Forward a local dsh web service to the public internet over ds.hn (bundled).",
   "keywords": [
     "dsh",