dsh-mesh-ui 0.0.12 → 0.0.14

package/README.md

@@ -1,9 +1,19 @@
 # dsh-mesh-ui
 
-DSH settings-page panel for `dsh-mesh`: AI network topology, peer health, and delegation panel.
+DSH left-sidebar page for a `dsh-mesh` AI network: topology, peer health, local instances, delegation ledger and alerts. Public addresses (IP/domain) are hidden by default; LAN addresses remain visible.
+
+## Install
 
 ```sh
 dsh plugin --profile web add dsh-mesh-ui
 ```
 
+This installs `dsh-mesh-node` as a dependency. The page is read-only; it reads the local `~/.dsh-mesh` mesh state and never uploads or hardcodes peer addresses.
+
+To make this DSH instance a mesh node, also install the host bridge:
+
+```sh
+dsh plugin --profile web add dsh-mesh-host
+```
+
 See https://github.com/LinYanZhi/dsh-mesh

package/cordis.patch.yml

@@ -1,4 +1,4 @@
-# dsh-mesh-ui: settings-page panel
+# dsh-mesh-ui: left-sidebar AI network page
 - insert:
     - id: dsh-mesh-ui
       name: dsh-mesh-ui

package/lib/client.js

@@ -119,6 +119,37 @@ function nodeLabel(name) { return NODE_LABELS[String(name || '').toLowerCase()]
     function clampNum(v, min, max) { return Math.max(min, Math.min(max, v)) }
     // [layout-helpers-end]
     // [relay-helpers-begin] 2026-11-09 架构层：识别公网中转站(frps)与通信方式（纯函数，可单测）
+    // 2026-11-10 隐私：默认不展示公网 IP/域名；局域网/回环地址保留。
+    function isPrivateNetworkHost(raw) {
+      var h = String(raw || '').trim().toLowerCase().replace(/^\[|\]$/g, '')
+      h = h.replace(/^https?:\/\//, '').split('/')[0].replace(/:\d+$/, '')
+      if (!h) return true
+      if (h === 'localhost' || h === '::1' || h === '0.0.0.0' || h === '127.0.0.1') return true
+      if (/(\.local|\.lan|\.home|\.internal)$/.test(h)) return true
+      var m = /^(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})$/.exec(h)
+      if (m) {
+        var a = Number(m[1]); var b = Number(m[2])
+        return a === 10 || a === 127 || (a === 192 && b === 168) || (a === 172 && b >= 16 && b <= 31)
+      }
+      return false
+    }
+    function maskHost(raw) {
+      var s = String(raw || '').trim()
+      if (!s) return '—'
+      var port = ''
+      var m = /^(.*):(\d+)$/.exec(s)
+      if (m && m[1].indexOf(']') < 0) { s = m[1]; port = ':' + m[2] }
+      return (isPrivateNetworkHost(s) ? s : '公网地址已隐藏') + port
+    }
+    function maskText(value) {
+      if (typeof value !== 'string') return value
+      return value
+        .replace(/https?:\/\/[^\s"'<>]+/gi, function (u) {
+          try { var x = new URL(u); return isPrivateNetworkHost(x.hostname) ? u : (x.protocol + '//公网地址已隐藏' + (x.port ? ':' + x.port : '')) } catch (e) { return u }
+        })
+        .replace(/\b(?!10\.|192\.168\.|127\.|172\.(?:1[6-9]|2\d|3[01])\.)(?:\d{1,3}\.){3}\d{1,3}\b/g, '公网地址已隐藏')
+        .replace(/\b(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+(?:com|net|org|io|dev|cn|top|xyz|me|cc|app|cloud)(?::\d+)?\b/gi, '公网地址已隐藏')
+    }
     // 判定：同一公网 host 被 >=2 个 peer 使用 → 视为共享中转站；LAN/loopback 不算。
     var RELAY_PUBLIC_KINDS = { wan: 1, frp: 1 }
     function relayGroups(peers) {
@@ -149,12 +180,12 @@ function nodeLabel(name) { return NODE_LABELS[String(name || '').toLowerCase()]
       if (!host) return { text: '—', short: '—' }
       var relay = relayHosts && relayHosts[host]
       var port = t.port ? ':' + t.port : ''
-      if (relay) return { text: (relay.kind === 'frp' ? '域名穿透' : '自建 frps 中转') + ' · ' + relay.host + port, short: '中转' + (t.port ? ' ' + t.port : '') }
+      if (relay) return { text: (relay.kind === 'frp' ? '域名穿透' : '自建 frps 中转') + ' · ' + maskHost(relay.host) + port, short: '中转' + (t.port ? ' ' + t.port : '') }
       if (t.kind === 'loopback') return { text: '本机回环', short: '本机' }
-      if (t.kind === 'lan') return { text: '局域网直连 · ' + t.host + port, short: 'LAN' }
-      if (t.kind === 'frp') return { text: '公网穿透 · ' + t.host + port, short: '穿透' }
-      if (t.kind === 'wan') return { text: '公网直连 · ' + t.host + port, short: '公网' }
-      return { text: (t.label || t.kind || '未知') + ' · ' + t.host + port, short: t.label || '未知' }
+      if (t.kind === 'lan') return { text: '局域网直连 · ' + maskHost(t.host) + port, short: 'LAN' }
+      if (t.kind === 'frp') return { text: '公网穿透 · ' + maskHost(t.host) + port, short: '穿透' }
+      if (t.kind === 'wan') return { text: '公网直连 · ' + maskHost(t.host) + port, short: '公网' }
+      return { text: (t.label || t.kind || '未知') + ' · ' + maskHost(t.host) + port, short: t.label || '未知' }
     }
     // [relay-helpers-end]
     var W = 560
@@ -643,7 +674,7 @@ body.light .dm-edge-label { stroke: rgba(255,255,255,.92); }
       return h('div', { className: 'dm-topo-wrap' },
         h('div', { className: 'dm-topbar' },
           h('div', { className: 'dm-filters' },
-            [['lan', '局域网'], ['public', '阿里云'], ['sakura', '樱花穿透']].map(function (it) {
+            [['lan', '局域网'], ['public', '公网 frps'], ['sakura', '第三方穿透']].map(function (it) {
               var tr = TRANSPORTS[it[0]]
               return h('label', { key: it[0], className: 'dm-flt' + (showFilters[it[0]] ? ' on' : ''), style: { '--c': tr.color } },
                 h('input', { type: 'checkbox', checked: showFilters[it[0]], onChange: function () { toggleFilter(it[0]) } }),
@@ -767,7 +798,7 @@ body.light .dm-edge-label { stroke: rgba(255,255,255,.92); }
             h('div', { className: 'dm-relay-link' }, h('span', { className: 'dm-relay-line' }), h('span', { className: 'dm-relay-dirlabel' }, '出站')),
             h('div', { className: 'dm-relay-hub' },
               h('div', { className: 'dm-relay-name' }, '公网中转站 · frps'),
-              h('div', { className: 'dm-relay-sub dm-mono' }, g.host),
+              h('div', { className: 'dm-relay-sub dm-mono' }, maskHost(g.host)),
               h('div', { className: 'dm-relay-chips' },
                 ports.map(function (p) { return h('span', { className: 'dm-chip', key: p, title: '隧道入口 :' + p }, ':' + p + ' ×' + g.ports[p]) }),
                 h('span', { className: 'dm-chip ' + (g.up === g.peers.length ? 'run' : 'bad') }, '在线 ' + g.up + '/' + g.peers.length)
@@ -788,8 +819,8 @@ body.light .dm-edge-label { stroke: rgba(255,255,255,.92); }
           h('span', { className: 'dm-k' }, '樱花隧道：'),
           h('span', { className: 'dm-chip ' + (sakuraAccount.online === sakuraAccount.total ? 'run' : 'bad') }, sakuraAccount.online + '/' + sakuraAccount.total + ' 在线'),
           (sakuraAccount.tunnels || []).map(function (t) {
-            return h('span', { className: 'dm-chip ' + (t.online ? 'run' : 'bad'), key: 'st' + t.id, title: (t.nodeName || '') + ' ' + t.addr + (t.online ? '' : '（离线）') },
-              (t.deviceKey || t.name) + ' ' + t.addr)
+            return h('span', { className: 'dm-chip ' + (t.online ? 'run' : 'bad'), key: 'st' + t.id, title: (t.nodeName || '') + ' ' + maskText(t.addr) + (t.online ? '' : '（离线）') },
+              (t.deviceKey || t.name) + ' ' + maskText(t.addr))
           })
         ) : null,
         direct.length ? h('div', { className: 'dm-relay-direct' },
@@ -858,22 +889,22 @@ function deviceLinkState(data, peer, lanMap) {
       var selfHost = lt.selfHosted || {}
       var entry = lt.publicEntry || selfHost || {}
       var localPort = entry.port || selfHost.port || null
-      var localHost = entry.host || selfHost.host || "relay.example.com"
+      var localHost = entry.host || selfHost.host || ''
       var localKey = peerDeviceKey(data.nodeName)
       var devs = [{ devKey: localKey, name: nodeDisplay(data.nodeName) + "（本机）", up: true, port: localPort, host: localHost }].concat(peers.filter(function (p) { return !isLanPeer(p) }).map(function (p) {
         var tu = p.tunnel || {}
-        return { devKey: peerDeviceKey(p.name), name: nodeDisplay(peerDeviceKey(p.name)), up: (tu.probe ? Boolean(tu.probe.up) : Boolean(p.up)), port: tu.port || null, host: tu.host || 'relay.example.com' }
+        return { devKey: peerDeviceKey(p.name), name: nodeDisplay(peerDeviceKey(p.name)), up: (tu.probe ? Boolean(tu.probe.up) : Boolean(p.up)), port: tu.port || null, host: tu.host || '' }
       }))
       var aliyunRows = devs.filter(function (d) { return d.port }).map(function (d) {
         return h('div', { key: d.devKey, className: 'dm-device-row' },
           h('span', { className: 'dm-device-k' }, d.name),
-          h('span', { className: 'dm-device-v' }, (d.up ? '✅ ' : '❌ ') + (d.host || 'relay.example.com') + ':' + d.port)
+          h('span', { className: 'dm-device-v' }, (d.up ? '✅ ' : '❌ ') + maskHost(d.host) + ':' + d.port)
         )
       })
       var tunnelRows = acc ? (acc.tunnels || []).map(function (x, i) {
         return h('div', { key: 'st' + i, className: 'dm-device-row' },
           h('span', { className: 'dm-device-k' }, (x.deviceKey ? nodeDisplay(peerDeviceKey(x.deviceKey)) : (x.name || '未归类'))),
-          h('span', { className: 'dm-device-v' }, (x.online ? '✅ ' : '❌ ') + (x.addr || ''))
+          h('span', { className: 'dm-device-v' }, (x.online ? '✅ ' : '❌ ') + maskText(x.addr || ''))
         )
       }) : null
       if (!aliyunRows.length && !tunnelRows) return null
@@ -881,19 +912,19 @@ function deviceLinkState(data, peer, lanMap) {
         h('div', { className: 'dm-infra-card' },
           h('div', { className: 'dm-infra-head' },
             h('span', { className: 'dm-dot ok', style: { background: TRANSPORTS.public.color } }),
-            h('span', null, '阿里云服务器 · ECS'),
+            h('span', null, '公网 frps 中转'),
             h('span', { className: 'dm-sub', style: { marginLeft: 'auto' } }, '自建 frps')
           ),
-          h('div', { className: 'dm-sub dm-mono', style: { marginBottom: 4 } }, 'relay.example.com · 隧道 ' + (devs.filter(function (d) { return d.port }).map(function (d) { return d.port }).sort().join(' / ') || '—')),
+          h('div', { className: 'dm-sub dm-mono', style: { marginBottom: 4 } }, '隧道 ' + (devs.filter(function (d) { return d.port }).map(function (d) { return d.port }).sort().join(' / ') || '—')),
           aliyunRows
         ),
         acc ? h('div', { className: 'dm-infra-card' },
           h('div', { className: 'dm-infra-head' },
             h('span', { className: 'dm-dot', style: { background: TRANSPORTS.sakura.color } }),
-            h('span', null, '樱花穿透服务器'),
+            h('span', null, '第三方 frps 穿透'),
             h('span', { className: 'dm-sub', style: { marginLeft: 'auto' } }, acc.online + '/' + acc.total + ' 在线')
           ),
-          h('div', { className: 'dm-sub dm-mono', style: { marginBottom: 4 } }, 'relay.example.com / relay.example.com / relay.example.com'),
+          h('div', { className: 'dm-sub dm-mono', style: { marginBottom: 4 } }, '公网地址已隐藏'),
           tunnelRows
         ) : null
       )
@@ -985,7 +1016,7 @@ function deviceLinkState(data, peer, lanMap) {
         var src = localTunnel.mainSource || (entry && entry.source === 'self-hosted-frps' ? 'self-hosted' : '')
         if (entry && entry.host) {
           var tag = src === 'self-hosted' ? '（自建 frps）' : (src === 'sakura' ? '（Sakura 备用）' : '')
-          return entry.host + ':' + entry.port + tag
+          return maskHost(entry.host) + ':' + entry.port + tag
         }
         if (localTunnel.frpRunning) return 'SakuraFrp 已开 · ' + (localTunnel.bind || '?') + ':' + localTunnel.port
         if (localTunnel.port) return '未开穿透 · ' + (localTunnel.bind || '?') + ':' + localTunnel.port
@@ -994,7 +1025,7 @@ function deviceLinkState(data, peer, lanMap) {
       function peerDomain(peer) {
         var t = peer.tunnel || {}
         if (!t.host) return '—'
-        return t.host + (t.port ? ':' + t.port : '') + (t.kind === 'lan' ? '（内网）' : '')
+        return maskHost(t.host) + (t.port ? ':' + t.port : '') + (t.kind === 'lan' ? '（内网）' : '')
       }
 
       // LAN peer 单独收集（dedupe 后可能被更快的 frp 记录覆盖，但 LAN 线仍要画）
@@ -1039,8 +1070,8 @@ function deviceLinkState(data, peer, lanMap) {
   var sakuraAcc = sakuraAccountOf(data)
   var aliyunPorts = peers.map(function (p) { return isLanPeer(p) ? null : (p.tunnel || {}).port }).filter(Boolean)
   var infra = [
-    { key: 'server-aliyun', transport: 'public', name: '阿里云服务器 · ECS', host: 'relay.example.com', color: TRANSPORTS.public.color, detail: '隧道 ' + (aliyunPorts.length ? aliyunPorts.sort().join('/') : '—'), up: true },
-    { key: 'server-sakura', transport: 'sakura', name: '樱花穿透服务器', host: 'relay.example.com / relay.example.com / relay.example.com', color: TRANSPORTS.sakura.color, detail: sakuraAcc ? (sakuraAcc.online + '/' + sakuraAcc.total + ' 在线') : '未采集', up: Boolean(sakuraAcc) },
+    { key: 'server-aliyun', transport: 'public', name: '公网 frps 中转', host: '公网地址已隐藏', color: TRANSPORTS.public.color, detail: '隧道 ' + (aliyunPorts.length ? aliyunPorts.sort().join('/') : '—'), up: true },
+    { key: 'server-sakura', transport: 'sakura', name: '第三方 frps 穿透', host: '公网地址已隐藏', color: TRANSPORTS.sakura.color, detail: sakuraAcc ? (sakuraAcc.online + '/' + sakuraAcc.total + ' 在线') : '未采集', up: Boolean(sakuraAcc) },
   ]
   // 2026-11-09-v8：服务器默认位置贴住扇形最高一排设备（用户要求缩小服务器↔设备的垂直间隔）
   function infraDefaultPos(idx) {
@@ -1146,13 +1177,13 @@ function deviceLinkState(data, peer, lanMap) {
     var pa = layout.positions[i]
     if (n.local) {
       // 主机自己的两条上级链路：自建 frps（阿里云） + 本机樱花隧道
-      if (show.public && localPub) svgEls = svgEls.concat(curve('pub-local', pa, aliyunPos, true, TRANSPORTS.public, localPub.host + ':' + localPub.port, sizeOf('local'), aliyunSize, edgeRelated('local', 'server-aliyun')))
-      if (show.sakura && localSak) svgEls = svgEls.concat(curve('sak-local', pa, sakuraPos, localSak.online === true, TRANSPORTS.sakura, localSak.addr || '', sizeOf('local'), sakuraSize, edgeRelated('local', 'server-sakura')))
+      if (show.public && localPub) svgEls = svgEls.concat(curve('pub-local', pa, aliyunPos, true, TRANSPORTS.public, maskHost(localPub.host) + ':' + localPub.port, sizeOf('local'), aliyunSize, edgeRelated('local', 'server-aliyun')))
+      if (show.sakura && localSak) svgEls = svgEls.concat(curve('sak-local', pa, sakuraPos, localSak.online === true, TRANSPORTS.sakura, maskText(localSak.addr || ''), sizeOf('local'), sakuraSize, edgeRelated('local', 'server-sakura')))
       return
     }
     var sizeN = sizeOf(n.key)
-    if (show.public) svgEls = svgEls.concat(curve('pub' + i, pa, aliyunPos, n.publicUp, TRANSPORTS.public, 'relay.example.com' + ((n.tunnel && n.tunnel.port) ? ':' + n.tunnel.port : ''), sizeN, aliyunSize, edgeRelated(n.key, 'server-aliyun')))
-    if (show.sakura && n.sakuraTunnel) svgEls = svgEls.concat(curve('sak' + i, pa, sakuraPos, n.sakuraUp === true, TRANSPORTS.sakura, n.sakuraTunnel.addr || '', sizeN, sakuraSize, edgeRelated(n.key, 'server-sakura')))
+    if (show.public) svgEls = svgEls.concat(curve('pub' + i, pa, aliyunPos, n.publicUp, TRANSPORTS.public, '公网 frps' + ((n.tunnel && n.tunnel.port) ? ':' + n.tunnel.port : ''), sizeN, aliyunSize, edgeRelated(n.key, 'server-aliyun')))
+    if (show.sakura && n.sakuraTunnel) svgEls = svgEls.concat(curve('sak' + i, pa, sakuraPos, n.sakuraUp === true, TRANSPORTS.sakura, maskText(n.sakuraTunnel.addr || ''), sizeN, sakuraSize, edgeRelated(n.key, 'server-sakura')))
     if (show.lan && n.lanUp) { var lt = n.lanTunnel || {}; var lanAddr = (lt.ip || lt.host || 'LAN') + (lt.port ? ':' + lt.port : ''); svgEls = svgEls.concat(curve('lan' + i, layout.positions[localNodeIdx], pa, n.lanUp, TRANSPORTS.lan, lanAddr, sizeOf('local'), sizeN, edgeRelated('local', n.key))) }
   })
   return h('div', null,
@@ -1239,16 +1270,16 @@ function deviceLinkState(data, peer, lanMap) {
       var localTunnelText = null
       var tunnels = localTunnel.tunnels || []
       var entry = localTunnel.publicEntry || null
-      var tunnelNames = tunnels.map(function (x) { return x.name + '→' + x.host + ':' + x.port }).join(' / ')
+      var tunnelNames = tunnels.map(function (x) { return x.name + '→' + maskHost(x.host) + ':' + x.port }).join(' / ')
       var mainSrc = localTunnel.mainSource || (entry && entry.source === 'self-hosted-frps' ? 'self-hosted' : (entry ? 'sakura' : 'none'))
       var entryText = entry && entry.host
-        ? entry.host + ':' + entry.port + (mainSrc === 'self-hosted' ? '（自建 frps · 主用）' : (mainSrc === 'sakura' ? '（Sakura · 备用）' : ''))
+        ? maskHost(entry.host) + ':' + entry.port + (mainSrc === 'self-hosted' ? '（自建 frps · 主用）' : (mainSrc === 'sakura' ? '（Sakura · 备用）' : ''))
         : '未配置'
       var localTunnelRows = [
         ['入口', entryText],
         ['监听 / frpc', (localTunnel.bind || '?') + ':' + (localTunnel.port || '?') + (localTunnel.tls ? ' (TLS)' : '') + ' · ' + (localTunnel.frpRunning ? 'frpc ×' + (localTunnel.frpcCount || 1) : 'frpc 未运行')]
       ]
-      if (tunnels.length) localTunnelRows.push(['Sakura 备用', tunnels.map(function (x) { return x.host + ':' + x.port }).join(' / ')])
+      if (tunnels.length) localTunnelRows.push(['Sakura 备用', tunnels.map(function (x) { return maskHost(x.host) + ':' + x.port }).join(' / ')])
       if (mainSrc === 'self-hosted' && localTunnel.selfHosted && localTunnel.selfHosted.configPath) localTunnelRows.push(['frpc 配置', localTunnel.selfHosted.configPath])
       var localTunnelAll = tunnelNames
       var memText = hw.memTotalGB ? ((hw.memFreeGB != null ? hw.memFreeGB : '?') + ' / ' + hw.memTotalGB + ' GB') : '—'
@@ -1457,6 +1488,36 @@ 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]
+      // 双栏宽度：拖动分隔条调整并记忆，窄屏由 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 }
+      })
+      var splitW = dragState[0]; var setSplitW = dragState[1]
+
+      function startSplit(event) {
+        event.preventDefault()
+        var body = event.currentTarget.parentElement
+        if (!body) return
+        var rect = body.getBoundingClientRect()
+        var startW = splitW > 0 ? splitW : Math.round(rect.width * 0.62)
+        var currentW = startW
+        function onMove(moveEvent) {
+          var width = Math.max(300, Math.min(moveEvent.clientX - rect.left, Math.max(300, rect.width - 360)))
+          currentW = width
+          setSplitW(width)
+        }
+        function onUp() {
+          window.removeEventListener('pointermove', onMove)
+          window.removeEventListener('pointerup', onUp)
+          document.body.style.cursor = ''
+          document.body.style.userSelect = ''
+          try { window.localStorage.setItem('dsh-mesh-split-w', String(currentW)) } catch (error) { /* ignore */ }
+        }
+        document.body.style.cursor = 'col-resize'
+        document.body.style.userSelect = 'none'
+        window.addEventListener('pointermove', onMove)
+        window.addEventListener('pointerup', onUp)
+      }
 
       function load(force) {
         if (!force) {
@@ -1575,23 +1636,30 @@ function deviceLinkState(data, peer, lanMap) {
         ),
         error ? h('div', { className: 'dm-err' }, error) : null,
 
-        h(Viewport, { data: data, layout: computeLayout(1 + filterSelfPeers(dedupePeers(data.peers || []), data.nodeName).length), selectedKey: selectedKey, onSelect: setSelectedKey }),
-        h(InfraPanels, { data: data }),
-        h(DeviceDetails, { data: data, selectedKey: selectedKey }),
-        h(Details, { title: '本机实例', badge: ((data.local && data.local.instances) || []).length, open: true }, h(InstanceList, { data: data })),
-        h(Details, { title: '版本一致性', badge: versions.length ? versions.length + ' 处升级' : '一致' },
-          versions.length
-            ? versions.map(function (item, i) { return h('div', { key: i, className: 'dm-sub', style: { marginTop: 4 } }, '· ' + (typeof item === 'string' ? item : JSON.stringify(item))) })
-            : h('div', { className: 'dm-empty' }, '所有节点/实例版本一致')
-        ),
-        h(Details, { title: '委托台账', badge: (data.delegations && data.delegations.total) || 0 }, h(DelegationTable, { data: data })),
-        h(Details, { title: '告警历史', badge: ((data.alerts && data.alerts.history) || []).length }, h(AlertList, { data: data })),
-        (issues.length || hints.length) ? h(Details, { title: '诊断建议', badge: issues.length + hints.length },
-          h('div', null,
-            issues.slice(0, 6).map(function (issue, i) { return h('div', { key: 'i' + i, className: 'dm-err', style: { marginTop: 3 } }, '· ' + issue) }),
-            hints.slice(0, 6).map(function (hint, i) { return h('div', { key: 'h' + i, className: 'dm-sub', style: { marginTop: 3 } }, '· ' + hint) })
+        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 }),
+            h(InfraPanels, { data: data }),
+            h(DeviceDetails, { data: data, selectedKey: selectedKey })
+          ),
+          h('div', { className: 'dm-divider', onPointerDown: startSplit, title: '↔ 拖拽调整左右宽度（双击恢复默认）', onDoubleClick: function () { setSplitW(0); try { window.localStorage.removeItem('dsh-mesh-split-w') } catch (error) { /* ignore */ } } }),
+          h('div', { className: 'dm-pane' },
+            h(Details, { title: '本机实例', badge: ((data.local && data.local.instances) || []).length, open: true }, h(InstanceList, { data: data })),
+            h(Details, { title: '版本一致性', badge: versions.length ? versions.length + ' 处升级' : '一致' },
+              versions.length
+                ? versions.map(function (item, i) { return h('div', { key: i, className: 'dm-sub', style: { marginTop: 4 } }, '· ' + (typeof item === 'string' ? item : JSON.stringify(item))) })
+                : h('div', { className: 'dm-empty' }, '所有节点/实例版本一致')
+            ),
+            h(Details, { title: '委托台账', badge: (data.delegations && data.delegations.total) || 0 }, h(DelegationTable, { data: data })),
+            h(Details, { title: '告警历史', badge: ((data.alerts && data.alerts.history) || []).length }, h(AlertList, { data: data })),
+            (issues.length || hints.length) ? h(Details, { title: '诊断建议', badge: issues.length + hints.length },
+              h('div', null,
+                issues.slice(0, 6).map(function (issue, i) { return h('div', { key: 'i' + i, className: 'dm-err', style: { marginTop: 3 } }, '· ' + maskText(issue)) }),
+                hints.slice(0, 6).map(function (hint, i) { return h('div', { key: 'h' + i, className: 'dm-sub', style: { marginTop: 3 } }, '· ' + maskText(hint)) })
+              )
+            ) : null
           )
-        ) : null,
+        ),
         h('div', { className: 'dm-foot' }, '数据源：mesh-health / host status / peer host_self / 委托台账 / 告警历史 · ' + (data.repo || '') + ' · node ' + (data.nodeVersion || '') + ' · ' + REFRESH_MS / 1000 + 's 自动刷新（只读）')
       )
     }
@@ -1810,6 +1878,23 @@ body[data-ds-dark-theme] .dm-dg-fs-item.active { background:rgba(88,166,255,.28)
       )
     }
 
+    /** 左侧栏「AI 网络」专用图标：中心节点 + 四向设备，和「委托」区分开。 */
+    function networkPanelIcon(props) {
+      var size = (props && props.size) || 16
+      return h('svg', {
+        'data-dsh-panel-entry': 'mesh-network', viewBox: '0 0 16 16', width: size, height: size,
+        fill: 'none', stroke: 'currentColor', strokeWidth: '1.3', strokeLinecap: 'round', 'aria-hidden': 'true',
+        style: { color: 'var(--dsh-brand-color, currentColor)' }
+      },
+        h('path', { d: 'M8 8 L8 2.6 M8 8 L13.4 8 M8 8 L8 13.4 M8 8 L2.6 8', opacity: '.55' }),
+        h('circle', { cx: 8, cy: 8, r: 2.1, fill: 'none', strokeWidth: '1.4' }),
+        h('circle', { cx: 8, cy: 2.6, r: 1.25, fill: 'currentColor', stroke: 'none' }),
+        h('circle', { cx: 13.4, cy: 8, r: 1.25, fill: 'currentColor', stroke: 'none' }),
+        h('circle', { cx: 8, cy: 13.4, r: 1.25, fill: 'currentColor', stroke: 'none' }),
+        h('circle', { cx: 2.6, cy: 8, r: 1.25, fill: 'currentColor', stroke: 'none' })
+      )
+    }
+
     function MeshDelegationPanel() {
       var s0 = useState(null); var list = s0[0]; var setList = s0[1]
       var s1 = useState(true); var loading = s1[0]; var setLoading = s1[1]
@@ -2249,6 +2334,111 @@ body[data-ds-dark-theme] .dm-dg-fs-item.active { background:rgba(88,166,255,.28)
       )
     }
 
+    // 2026-11-10：AI 网络现在是左侧栏主页面，不再受设置面板的窄容器约束。
+    // 主区域自身没有内边距，这里给页面统一留白并限制最大阅读宽度。
+    var PAGE_CSS = `
+.dm-page { box-sizing:border-box; width:100%; height:100%; overflow:hidden; padding:clamp(16px, 2.2vw, 30px) clamp(18px, 2.6vw, 42px) 0; }
+.dm-content-shell { width:100%; height:100%; position:relative; --dm-content-w:920px; }
+.dm-content-scroll { height:100%; overflow:auto; padding-bottom:36px; scrollbar-gutter:stable; }
+.dm-content { width:min(100%, var(--dm-content-w)); max-width:100%; margin:0 auto; box-sizing:border-box; container-type:inline-size; container-name:dm-content; }
+.dm-content > .dm-root { width:100%; max-width:100%; margin:0 auto; }
+/* 与 DSH 对话区一致的宽度手柄：位于内容两侧外 24px，平时隐藏，hover/拖拽显示 2px 渐变线 */
+.dm-width-handle { z-index:0; position:absolute; top:0; bottom:0; cursor:col-resize; width:clamp(0px, calc((100% - var(--dm-content-w)) / 2 - 48px), 10px); }
+.dm-width-handle[data-side="left"] { right:calc(50% + var(--dm-content-w) / 2 + 24px); }
+.dm-width-handle[data-side="right"] { left:calc(50% + var(--dm-content-w) / 2 + 24px); }
+.dm-width-handle::after { content:''; pointer-events:none; opacity:0; position:absolute; top:0; bottom:0; width:2px; border-radius:2px; background:linear-gradient(to bottom, transparent calc(var(--dm-width-handle-pointer-y, 50%) - 36px), var(--dsw-alias-scrollbar-bg-l1, rgba(128,128,128,.55)) calc(var(--dm-width-handle-pointer-y, 50%) - 8px), var(--dsw-alias-scrollbar-bg-l1, rgba(128,128,128,.55)) calc(var(--dm-width-handle-pointer-y, 50%) + 8px), transparent calc(var(--dm-width-handle-pointer-y, 50%) + 36px)); }
+.dm-width-handle[data-side="left"]::after { right:4px; }
+.dm-width-handle[data-side="right"]::after { left:4px; }
+.dm-width-handle[data-dragging]::after { opacity:1; }
+@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-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); }
+.dm-divider:hover::before, .dm-divider:active::before { background:rgba(88,166,255,.7); width:2px; left:2.5px; }
+@container dm-content (max-width: 860px) { .dm-body { grid-template-columns:1fr; } .dm-divider { display:none; } }
+`
+    function MeshNetworkPage() {
+      // 宽度偏好：与 DSH 对话区相同语义——空 = 默认宽度，数字 = 用户拖拽固定值。
+      var prefState = useState(function () {
+        try { var saved = Number(window.localStorage.getItem('dsh-mesh.contentWidth')); return Number.isFinite(saved) && saved > 0 ? saved : 0 } catch (error) { return 0 }
+      })
+      var pref = prefState[0]; var setPref = prefState[1]
+      var shellState = useState(0); var containerW = shellState[0]; var setContainerW = shellState[1]
+      var shellRef = useRef(null)
+
+      useEffect(function () {
+        var el = shellRef.current
+        if (!el) return
+        function measure() { setContainerW(el.clientWidth || 0) }
+        measure()
+        if (typeof ResizeObserver !== 'undefined') {
+          var observer = new ResizeObserver(measure)
+          observer.observe(el)
+          return function () { observer.disconnect() }
+        }
+        window.addEventListener('resize', measure)
+        return function () { window.removeEventListener('resize', measure) }
+      }, [])
+
+      // DSH 对话区公式：默认 clamp(680, 64% 容器, 920)；用户值 [640, 容器-176]。
+      var widthNow = containerW || 920
+      var maxW = Math.max(640, widthNow - 176)
+      var contentW = pref > 0 ? Math.min(Math.max(pref, 640), maxW) : Math.max(680, Math.min(widthNow * 0.64, 920))
+
+      function beginWidthDrag(side, event) {
+        event.preventDefault()
+        var handle = event.currentTarget
+        var shell = handle.closest ? handle.closest('.dm-content-shell') : (handle.parentElement && handle.parentElement.parentElement)
+        if (!shell) return
+        var max = Math.max(640, (shell.clientWidth || 920) - 176)
+        var base = contentW
+        var originX = event.clientX
+        var latest = contentW
+        var firstBox = handle.getBoundingClientRect()
+        handle.style.setProperty('--dm-width-handle-pointer-y', (event.clientY - firstBox.top) + 'px')
+        handle.toggleAttribute('data-dragging', true)
+        document.body.style.cursor = 'col-resize'
+        document.body.style.userSelect = 'none'
+        function onMove(moveEvent) {
+          var dx = moveEvent.clientX - originX
+          var outward = side === 'right' ? dx : -dx
+          // 只有拖拽时才更新高亮位置（与 DSH 一致）；hover 时保持手柄高度的 50%。
+          var box = handle.getBoundingClientRect()
+          handle.style.setProperty('--dm-width-handle-pointer-y', (moveEvent.clientY - box.top) + 'px')
+          // 两侧同时外扩/内收，所以内容宽度变化是手柄位移的 2 倍（与 DSH 一致）。
+          latest = Math.min(Math.max(base + outward * 2, 640), max)
+          setPref(latest)
+        }
+        function onUp() {
+          handle.toggleAttribute('data-dragging', false)
+          window.removeEventListener('pointermove', onMove)
+          window.removeEventListener('pointerup', onUp)
+          document.body.style.cursor = ''
+          document.body.style.userSelect = ''
+          try { window.localStorage.setItem('dsh-mesh.contentWidth', String(latest)) } catch (error) { /* ignore */ }
+        }
+        window.addEventListener('pointermove', onMove)
+        window.addEventListener('pointerup', onUp)
+      }
+      function resetContentWidth() {
+        setPref(0)
+        try { window.localStorage.removeItem('dsh-mesh.contentWidth') } catch (error) { /* ignore */ }
+      }
+
+      return h('div', { className: 'dm-page' },
+        h('style', null, PAGE_CSS),
+        h('div', { className: 'dm-content-shell', ref: shellRef, style: { '--dm-content-w': contentW + 'px' } },
+          h('div', { className: 'dm-width-handle', 'data-side': 'left', title: '拖拽调整内容宽度（双击恢复默认）', onPointerDown: function (event) { beginWidthDrag('left', event) }, onDoubleClick: resetContentWidth }),
+          h('div', { className: 'dm-width-handle', 'data-side': 'right', title: '拖拽调整内容宽度（双击恢复默认）', onPointerDown: function (event) { beginWidthDrag('right', event) }, onDoubleClick: resetContentWidth }),
+          h('div', { className: 'dm-content-scroll' },
+            h('div', { className: 'dm-content', style: { width: 'min(100%, ' + contentW + 'px)' } }, h(MeshStatusSection))
+          )
+        )
+      )
+    }
+
     var SECTION = { name: 'settings.section', id: 'dsh-mesh', order: 90, label: 'AI 网络' }
     var inject = ['slots']
 
@@ -2317,10 +2507,10 @@ body[data-ds-dark-theme] .dm-dg-fs-item.active { background:rgba(88,166,255,.28)
       // 2026-11-10：AI 网络从「设置」迁到左侧栏独立页面，使用更大的主区域。
       try {
         disposers.push(ctx.slots.inject('sidebar.panellist', function () {
-          return ctx.slots.register({ name: 'sidebar.panellist', id: 'mesh-network', order: 54, label: function () { return 'AI 网络' } }, meshPanelIcon)
+          return ctx.slots.register({ name: 'sidebar.panellist', id: 'mesh-network', order: 54, label: function () { return 'AI 网络' } }, networkPanelIcon)
         }))
         disposers.push(ctx.slots.inject('main', function () {
-          return ctx.slots.register({ name: 'main', key: 'mesh-network', inject: function () { return {} } }, MeshStatusSection)
+          return ctx.slots.register({ name: 'main', key: 'mesh-network', inject: function () { return {} } }, MeshNetworkPage)
         }))
       } catch (error) {
         console.warn('[dsh-mesh-ui] sidebar network page registration failed:', error)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-mesh-ui",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "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",