dsh-mesh-ui 0.0.14 → 0.0.16

package/lib/client.js

@@ -120,6 +120,8 @@ function nodeLabel(name) { return NODE_LABELS[String(name || '').toLowerCase()]
     // [layout-helpers-end]
     // [relay-helpers-begin] 2026-11-09 架构层：识别公网中转站(frps)与通信方式（纯函数，可单测）
     // 2026-11-10 隐私：默认不展示公网 IP/域名；局域网/回环地址保留。
+    // 用户在页头打开「显示公网地址」后，maskHost/maskText 直接返回原值。
+    var showPublicAddresses = false
     function isPrivateNetworkHost(raw) {
       var h = String(raw || '').trim().toLowerCase().replace(/^\[|\]$/g, '')
       h = h.replace(/^https?:\/\//, '').split('/')[0].replace(/:\d+$/, '')
@@ -135,6 +137,7 @@ function nodeLabel(name) { return NODE_LABELS[String(name || '').toLowerCase()]
     }
     function maskHost(raw) {
       var s = String(raw || '').trim()
+      if (showPublicAddresses) return s || '—'
       if (!s) return '—'
       var port = ''
       var m = /^(.*):(\d+)$/.exec(s)
@@ -142,6 +145,7 @@ function nodeLabel(name) { return NODE_LABELS[String(name || '').toLowerCase()]
       return (isPrivateNetworkHost(s) ? s : '公网地址已隐藏') + port
     }
     function maskText(value) {
+      if (showPublicAddresses) return value
       if (typeof value !== 'string') return value
       return value
         .replace(/https?:\/\/[^\s"'<>]+/gi, function (u) {
@@ -1475,6 +1479,61 @@ function deviceLinkState(data, peer, lanMap) {
       )
     }
 
+    // 2026-11-10：局域网首次接入（扫描 / 生成配对码 / 配对）。
+    function LanOnboarding() {
+      var sNodes = useState(null); var nodes = sNodes[0]; var setNodes = sNodes[1]
+      var sBusy = useState(false); var busy = sBusy[0]; var setBusy = sBusy[1]
+      var sMsg = useState(''); var msg = sMsg[0]; var setMsg = sMsg[1]
+      var sCode = useState(''); var code = sCode[0]; var setCode = sCode[1]
+      var sMine = useState(null); var mine = sMine[0]; var setMine = sMine[1]
+
+      function scan() {
+        setBusy(true); setMsg('')
+        fetch('/api/dsh-mesh/lan/scan').then(function (r) { return r.json() }).then(function (j) {
+          if (!j.ok) { setMsg(j.error || '扫描失败'); return }
+          setNodes(j.nodes || [])
+          setMsg((j.nodes || []).length ? '发现 ' + j.nodes.length + ' 个节点' : '没有发现局域网节点（对方需 bind 0.0.0.0 并放行 8124）')
+        }).catch(function (e) { setMsg(String(e.message || e)) }).finally(function () { setBusy(false) })
+      }
+      function myCode() {
+        setBusy(true); setMine(null); setMsg('')
+        fetch('/api/dsh-mesh/lan/code').then(function (r) { return r.json() }).then(function (j) {
+          if (!j.ok) { setMsg(j.error || '生成配对码失败'); return }
+          setMine(j)
+        }).catch(function (e) { setMsg(String(e.message || e)) }).finally(function () { setBusy(false) })
+      }
+      function pairWith(node) {
+        var c = String(code || '').trim()
+        if (!c) { setMsg('先填入对方显示的配对码'); return }
+        setBusy(true); setMsg('')
+        fetch('/api/dsh-mesh/lan/pair', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ url: String(node.url || '').replace(/\/mcp$/, ''), code: c, name: (node.node || 'lan') + '-lan', fingerprint: node.certFingerprint || '' }) })
+          .then(function (r) { return r.json() }).then(function (j) {
+            setMsg(j.ok ? '配对成功：' + (node.node || '') + '，稍后刷新网络' : ('配对失败：' + (j.stderr || j.error || j.stdout || '').slice(0, 300)))
+          }).catch(function (e) { setMsg(String(e.message || e)) }).finally(function () { setBusy(false) })
+      }
+      return h('div', null,
+        h('div', { className: 'dm-lan-row' },
+          h('button', { className: 'dm-btn', disabled: busy, onClick: scan }, busy ? '处理中…' : '扫描局域网'),
+          h('button', { className: 'dm-btn', disabled: busy, onClick: myCode }, '生成我的配对码'),
+          h('span', { className: 'dm-sub' }, '对方的 mesh 需 bind 0.0.0.0；第一次可能需放行 8124')
+        ),
+        msg ? h('div', { className: 'dm-sub', style: { marginTop: 6 } }, msg) : null,
+        mine ? h('div', { className: 'dm-lan-code', style: { marginTop: 8 } }, '配对码 ' + mine.pairingCode + ' · ' + (mine.endpoint || '') + (mine.certFingerprint ? ' · 指纹 ' + mine.certFingerprint : '')) : null,
+        nodes && nodes.length ? h('div', { style: { marginTop: 8 } },
+          nodes.map(function (node, i) {
+            return h('div', { className: 'dm-lan-node', key: i },
+              h('span', { className: 'dm-dot ok' }),
+              h('span', null, (node.node || '?') + ' · ' + (node.url || '').replace('/mcp', '')),
+              h('button', { className: 'dm-btn primary', disabled: busy, onClick: function () { pairWith(node) } }, '用此节点配对')
+            )
+          })
+        ) : null,
+        nodes && nodes.length ? h('div', { className: 'dm-lan-row' },
+          h('input', { placeholder: '对方显示的配对码，如 H5K4-9RXV', value: code, onChange: function (e) { setCode(e.target.value) } })
+        ) : null
+      )
+    }
+
     function MeshStatusSection() {
       var s0 = useState(null); var data = s0[0]; var setData = s0[1]
       var s1 = useState(true); var loading = s1[0]; var setLoading = s1[1]
@@ -1488,6 +1547,17 @@ function deviceLinkState(data, peer, lanMap) {
       var verdictState = useState(''); var verdictShown = verdictState[0]; var setVerdictShown = verdictState[1]
       var verdictRef = useRef({ raw: '', streak: 0 })
       var s5 = useState('local'); var selectedKey = s5[0]; var setSelectedKey = s5[1]
+      var sPublic = useState(function () {
+        try { return window.localStorage.getItem('dsh-mesh.show-public-addresses') === '1' } catch (error) { return false }
+      })
+      var showPublic = sPublic[0]; var setShowPublic = sPublic[1]
+      showPublicAddresses = showPublic
+      function toggleShowPublic(event) {
+        var next = Boolean(event && event.target && event.target.checked)
+        setShowPublic(next)
+        showPublicAddresses = next
+        try { window.localStorage.setItem('dsh-mesh.show-public-addresses', next ? '1' : '0') } catch (error) { /* ignore */ }
+      }
       // 双栏宽度：拖动分隔条调整并记忆，窄屏由 CSS 媒体查询自动堆叠。
       var dragState = useState(function () {
         try { var saved = Number(window.localStorage.getItem('dsh-mesh-split-w')); return Number.isFinite(saved) && saved > 0 ? saved : 0 } catch (error) { return 0 }
@@ -1629,6 +1699,10 @@ function deviceLinkState(data, peer, lanMap) {
           }, data.warming ? '预热中' : (verdictShown || data.verdict || '?')),
           h('span', { className: 'dm-sub' }, (data.meshVersion ? 'mesh ' + data.meshVersion + ' · ' : '') + (data.at ? ago(data.at) : '')),
           h('span', { style: { flex: 1 } }),
+          h('label', { className: 'dm-toggle', title: '默认隐藏公网 IP/域名；勾选后显示真实地址并记住选择' },
+            h('input', { type: 'checkbox', checked: Boolean(showPublic), onChange: toggleShowPublic }),
+            h('span', null, '显示公网地址')
+          ),
           h('a', { className: 'dm-btn', href: API, target: '_blank', rel: 'noreferrer', style: { textDecoration: 'none' } }, '原始 JSON'),
           h('button', { className: 'dm-btn', onClick: copyJson }, copied || '复制诊断'),
           h('button', { className: 'dm-btn primary', onClick: function () { load(true) }, title: '立即采集一次并等待新快照（8s 冷却）' }, loading ? '采集中…' : '刷新'),
@@ -1636,6 +1710,11 @@ function deviceLinkState(data, peer, lanMap) {
         ),
         error ? h('div', { className: 'dm-err' }, error) : null,
 
+        h('details', { className: 'dm-details dm-lan' },
+          h('summary', null, '局域网发现 / 配对（首次使用）'),
+          h(LanOnboarding)
+        ),
+
         h('div', { className: 'dm-body', style: splitW > 0 ? { '--dm-main-w': splitW + 'px' } : undefined },
           h('div', { className: 'dm-pane' },
             h(Viewport, { data: data, layout: computeLayout(1 + filterSelfPeers(dedupePeers(data.peers || []), data.nodeName).length), selectedKey: selectedKey, onSelect: setSelectedKey }),
@@ -2353,6 +2432,15 @@ body[data-ds-dark-theme] .dm-dg-fs-item.active { background:rgba(88,166,255,.28)
 @media (hover:hover) { .dm-width-handle:hover::after { opacity:1; } }
 @media (max-width: 1000px) { .dm-width-handle { display:none; } }
 .dm-body { display:grid; grid-template-columns:minmax(300px, var(--dm-main-w, 62%)) 8px minmax(0,1fr); gap:10px; align-items:start; }
+.dm-lan { border:1px solid rgba(128,128,128,.25); border-radius:12px; padding:10px 12px; background:rgba(128,128,128,.035); }
+.dm-lan-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:8px; }
+.dm-lan input { font:inherit; font-size:12px; padding:5px 8px; border:1px solid rgba(128,128,128,.35); border-radius:7px; background:transparent; color:inherit; min-width:180px; }
+.dm-lan-node { display:flex; gap:8px; align-items:center; border-top:1px solid rgba(128,128,128,.16); padding:7px 0; font-size:12px; }
+.dm-lan-node:first-child { border-top:none; }
+.dm-lan-code { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px; padding:6px 8px; border-radius:8px; background:rgba(88,166,255,.1); border:1px solid rgba(88,166,255,.35); word-break:break-all; }
+.dm-toggle { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; opacity:.8; cursor:pointer; user-select:none; white-space:nowrap; }
+.dm-toggle input { margin:0; }
+
 .dm-pane { min-width:0; display:flex; flex-direction:column; gap:12px; }
 .dm-divider { cursor:col-resize; align-self:stretch; min-height:120px; border-radius:4px; position:relative; }
 .dm-divider::before { content:''; position:absolute; top:0; bottom:0; left:3px; width:1px; background:rgba(128,128,128,.28); }

package/lib/index.js

@@ -11,8 +11,10 @@
 //
 // 归宿：reusable（dsh-mesh/plugin/dsh-mesh-ui/lib/）
 
-import { collect, resolveRepo, meshHome } from './collect.js'
+import { collect, resolveRepo, meshHome, run, nodeExec } from './collect.js'
 import { listDelegations, sessionHistory, taskStatus } from './delegations.js'
+import { networkInterfaces } from 'node:os'
+import { join } from 'node:path'
 
 /** Cordis inject 列表：只需要 webServer。 */
 export const inject = ['webServer']
@@ -37,6 +39,32 @@ function writeJson(res, status, body) {
   res.end(JSON.stringify(body, null, 2))
 }
 
+function readBody(req, limit = 16 * 1024) {
+  return new Promise((resolve) => {
+    let size = 0
+    const chunks = []
+    req.on('data', (chunk) => {
+      size += chunk.length
+      if (size > limit) { resolve(null); req.destroy(); return }
+      chunks.push(chunk)
+    })
+    req.on('end', () => {
+      try { resolve(JSON.parse(Buffer.concat(chunks).toString('utf8') || '{}')) } catch { resolve(null) }
+    })
+    req.on('error', () => resolve(null))
+  })
+}
+
+function lanIPv4() {
+  const ifaces = networkInterfaces()
+  for (const list of Object.values(ifaces)) {
+    for (const item of list || []) {
+      if (item.family === 'IPv4' && !item.internal && !/^169\.254\./.test(item.address)) return item.address
+    }
+  }
+  return '127.0.0.1'
+}
+
 /**
  * Cordis apply：注册只读状态路由 + 后台刷新循环。
  * @param {import('@deepseek-ai/cordis').Context} ctx host 插件上下文（已注入 webServer）
@@ -158,6 +186,54 @@ export function apply(ctx) {
     }
   }
 
+  async function runCli(args, timeout = 30_000) {
+    if (!state.repo) return { error: 'dsh-mesh-node is not installed', stdout: '', stderr: '' }
+    return run(nodeExec(), [join(state.repo, 'src', 'cli.js'), ...args], { cwd: state.repo, timeout })
+  }
+
+  const lanScanRoute = readonlyRoute('/api/dsh-mesh/lan/scan', async () => {
+    const r = await runCli(['discover', '--json', '--timeout-ms', '1500'], 20_000)
+    if (r.error) return { ok: false, error: r.error, stderr: r.stderr }
+    try {
+      const data = JSON.parse(r.stdout)
+      return { ok: true, localAddress: lanIPv4(), nodes: data.nodes || [] }
+    } catch {
+      return { ok: false, error: 'invalid discover output', stdout: r.stdout, stderr: r.stderr }
+    }
+  })
+
+  const lanCodeRoute = readonlyRoute('/api/dsh-mesh/lan/code', async () => {
+    const host = `${lanIPv4()}:8124`
+    const r = await runCli(['pair', '--code', '--ttl', '600', '--role', 'node', '--host', host])
+    if (r.error) return { ok: false, error: r.error, stderr: r.stderr }
+    try {
+      return { ok: true, ...JSON.parse(r.stdout) }
+    } catch {
+      return { ok: false, error: 'invalid pair output', stdout: r.stdout, stderr: r.stderr }
+    }
+  })
+
+  const lanPairRoute = {
+    kind: 'exact',
+    path: '/api/dsh-mesh/lan/pair',
+    handler: async (req, res) => {
+      if (!isLoopback(req)) return writeJson(res, 403, { ok: false, error: 'forbidden: loopback-only' })
+      if ((req.method || 'GET').toUpperCase() !== 'POST') return writeJson(res, 405, { ok: false, error: 'method not allowed' })
+      const body = await readBody(req)
+      if (!body || typeof body.url !== 'string' || typeof body.code !== 'string') {
+        return writeJson(res, 400, { ok: false, error: 'url and code required' })
+      }
+      const args = ['peer', 'add', '--url', String(body.url), '--code', String(body.code), '--name', String(body.name || 'lan-peer')]
+      if (body.fingerprint) args.push('--fingerprint', String(body.fingerprint))
+      try {
+        const r = await runCli(args)
+        writeJson(res, 200, { ok: !r.error, error: r.error, stdout: r.stdout, stderr: r.stderr })
+      } catch (error) {
+        writeJson(res, 500, { ok: false, error: String(error?.message || error) })
+      }
+    }
+  }
+
   const delegateRoutes = [
     readonlyRoute('/api/dsh-mesh/delegations', async (url) => {
       // 缓存整份列表（与请求的 limit 无关），避免不同 limit 的请求互相污染缓存
@@ -187,6 +263,7 @@ export function apply(ctx) {
 
   ctx.effect(() => {
     const disposeRoute = ctx.webServer.register(route)
+    const disposeLanRoutes = [lanScanRoute, lanCodeRoute, lanPairRoute].map((item) => ctx.webServer.register(item))
     const disposeRoutes = delegateRoutes.map((item) => ctx.webServer.register(item))
     return () => {
       try {
@@ -194,7 +271,7 @@ export function apply(ctx) {
       } catch {
         /* ignore */
       }
-      for (const dispose of disposeRoutes) { try { dispose() } catch { /* ignore */ } }
+      for (const dispose of disposeLanRoutes.concat(disposeRoutes)) { try { dispose() } catch { /* ignore */ } }
       if (typeof disposeRoute === 'function') disposeRoute()
     }
   }, 'dsh-mesh-ui: GET /api/dsh-mesh/status + background refresh')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-mesh-ui",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "description": "DSH sidebar page for dsh-mesh: AI network topology, peer health, and delegation panel. Read-only; data is collected from the installed dsh-mesh-node package.",
   "icon": "icon.svg",
   "type": "module",
@@ -28,7 +28,7 @@
     }
   },
   "dependencies": {
-    "dsh-mesh-node": "0.0.12"
+    "dsh-mesh-node": "0.0.13"
   },
   "peerDependencies": {
     "@deepseek-ai/dsh": ">=0.2.0-rc.2 <0.3.0",