@bolloon/bolloon-agent 0.2.7 → 0.2.8

package/dist/network/peer-resource-bridge.js

@@ -0,0 +1,216 @@
+/**
+ * peer-resource-bridge.ts — 4 类资源 (groups/function/exportment/science) 的
+ *   本地读 + 远端落盘的统一封装.
+ *
+ * 设计目的 (2026-07-05):
+ *   peer-fs.ts 已经有完整路径 helpers (writeGroup/writeFunction/...) + reader (listPeerResources).
+ *   server.ts 三处要调 (两个 manifest.exchange.reply 落盘 + 一个 manifest.exchange 发送),
+ *   每处手写 4 个 await 又啰嗦又容易漏. 这里抽出来.
+ *
+ *   本地读: ~/.bolloon/local-resources/<category>/<id>.md frontmatter
+ *   远端落: peerFs.writeGroup/Function/Exportment/Science (atomic, 人类可读 md)
+ *
+ *   frontmatter 字段就是类型本身的字段 (id/name/description/...),
+ *   description 从 frontmatter 后面的第一个段落拿.
+ */
+import * as fs from 'fs/promises';
+import * as path from 'path';
+import * as os from 'os';
+import * as peerFs from '../network/peer-fs.js';
+const HOME = process.env.BOLLOON_HOME || path.join(os.homedir(), '.bolloon');
+export const LOCAL_RESOURCES_ROOT = path.join(HOME, 'local-resources');
+const EMPTY = { groups: [], functions: [], exportments: [], sciences: [] };
+/**
+ * 简单 frontmatter 解析: 只支持 key: value / key: [..] (本文件自产自销, 不引第三方).
+ */
+function parseFrontmatter(text) {
+    const m = text.match(/^---\n([\s\S]*?)\n---\n?([\s\S]*)$/);
+    if (!m)
+        return { fields: {}, body: text };
+    const fields = {};
+    for (const line of m[1].split('\n')) {
+        const kv = line.match(/^([A-Za-z_][A-Za-z0-9_]*):\s*(.*)$/);
+        if (!kv)
+            continue;
+        const key = kv[1];
+        let raw = kv[2].trim();
+        if (raw.startsWith('[') && raw.endsWith(']')) {
+            try {
+                fields[key] = JSON.parse(raw);
+                continue;
+            }
+            catch { }
+        }
+        if ((raw.startsWith('"') && raw.endsWith('"')) || (raw.startsWith("'") && raw.endsWith("'"))) {
+            try {
+                fields[key] = JSON.parse(raw);
+                continue;
+            }
+            catch { }
+        }
+        fields[key] = raw;
+    }
+    return { fields, body: m[2].trim() };
+}
+/**
+ * 从 ~/.bolloon/local-resources/<category>/<id>.md 读所有本地资源.
+ * 文件不存在 / 目录不存在 → 返回空数组 (不报错, 跟 peer-fs 风格一致).
+ */
+async function readCategoryDir(category) {
+    try {
+        const dir = path.join(LOCAL_RESOURCES_ROOT, category);
+        const entries = await fs.readdir(dir);
+        return entries.filter((e) => e.endsWith('.md')).map((e) => path.join(dir, e));
+    }
+    catch {
+        return [];
+    }
+}
+async function readGroupFile(p) {
+    try {
+        const raw = await fs.readFile(p, 'utf-8');
+        const { fields, body } = parseFrontmatter(raw);
+        if (!fields.id)
+            return null;
+        return {
+            id: String(fields.id),
+            name: String(fields.name || fields.id),
+            description: body || undefined,
+            visibility: fields.visibility,
+            memberCount: typeof fields.memberCount === 'number' ? fields.memberCount : undefined,
+        };
+    }
+    catch {
+        return null;
+    }
+}
+async function readFunctionFile(p) {
+    try {
+        const raw = await fs.readFile(p, 'utf-8');
+        const { fields, body } = parseFrontmatter(raw);
+        if (!fields.capability)
+            return null;
+        return {
+            capability: String(fields.capability),
+            description: body || undefined,
+            mediaType: fields.mediaType,
+            endpoint: fields.endpoint ? String(fields.endpoint) : undefined,
+        };
+    }
+    catch {
+        return null;
+    }
+}
+async function readExportmentFile(p) {
+    try {
+        const raw = await fs.readFile(p, 'utf-8');
+        const { fields, body } = parseFrontmatter(raw);
+        if (!fields.name)
+            return null;
+        return {
+            name: String(fields.name),
+            description: body || undefined,
+            genre: fields.genre ? String(fields.genre) : undefined,
+            minPlayers: typeof fields.minPlayers === 'number' ? fields.minPlayers : undefined,
+            maxPlayers: typeof fields.maxPlayers === 'number' ? fields.maxPlayers : undefined,
+        };
+    }
+    catch {
+        return null;
+    }
+}
+async function readScienceFile(p) {
+    try {
+        const raw = await fs.readFile(p, 'utf-8');
+        const { fields, body } = parseFrontmatter(raw);
+        if (!fields.id)
+            return null;
+        return {
+            id: String(fields.id),
+            title: String(fields.title || fields.id),
+            description: body || undefined,
+            status: fields.status,
+            tags: Array.isArray(fields.tags) ? fields.tags.map(String) : undefined,
+        };
+    }
+    catch {
+        return null;
+    }
+}
+/**
+ * 读本机所有 4 类资源. 任何失败 → 该类别返回空 (不阻塞其他类别).
+ */
+export async function loadLocalResources() {
+    const out = { ...EMPTY };
+    const [gFiles, fFiles, eFiles, sFiles] = await Promise.all([
+        readCategoryDir('groups'),
+        readCategoryDir('functions'),
+        readCategoryDir('exportments'),
+        readCategoryDir('sciences'),
+    ]);
+    for (const f of gFiles) {
+        const v = await readGroupFile(f);
+        if (v)
+            out.groups.push(v);
+    }
+    for (const f of fFiles) {
+        const v = await readFunctionFile(f);
+        if (v)
+            out.functions.push(v);
+    }
+    for (const f of eFiles) {
+        const v = await readExportmentFile(f);
+        if (v)
+            out.exportments.push(v);
+    }
+    for (const f of sFiles) {
+        const v = await readScienceFile(f);
+        if (v)
+            out.sciences.push(v);
+    }
+    return out;
+}
+/**
+ * 把 manifest 里的 4 类资源落盘到 peerFs 对应目录.
+ * 静默容错: 单条失败不影响其他.
+ */
+export async function writeRemoteResources(publicKey, m) {
+    let groups = 0, functions = 0, exportments = 0, sciences = 0;
+    if (Array.isArray(m.groups)) {
+        for (const g of m.groups) {
+            try {
+                await peerFs.writeGroup(publicKey, g);
+                groups++;
+            }
+            catch { }
+        }
+    }
+    if (Array.isArray(m.functions)) {
+        for (const f of m.functions) {
+            try {
+                await peerFs.writeFunction(publicKey, f);
+                functions++;
+            }
+            catch { }
+        }
+    }
+    if (Array.isArray(m.exportments)) {
+        for (const e of m.exportments) {
+            try {
+                await peerFs.writeExportment(publicKey, e);
+                exportments++;
+            }
+            catch { }
+        }
+    }
+    if (Array.isArray(m.sciences)) {
+        for (const s of m.sciences) {
+            try {
+                await peerFs.writeScience(publicKey, s);
+                sciences++;
+            }
+            catch { }
+        }
+    }
+    return { groups, functions, exportments, sciences };
+}

package/dist/web/client.js

@@ -1,4 +1,3 @@
-"use strict";
 // @ts-nocheck
 // marked 库可能从 CDN 加载失败, 这里做安全降级 (避免 ReferenceError 让 addMessage 整体崩溃)
 if (typeof marked === 'undefined') {
@@ -618,7 +617,7 @@ async function deleteChannel(channelId, e) {
             if (currentChannelId) {
                 const ch = channels.find(c => c.id === currentChannelId);
                 if (channelNameEl)
-                    channelNameEl.textContent = ch?.name || 'Bolloon Agent';
+                    channelNameEl.textContent = safeChannelName(ch?.name, 'Bolloon Agent');
                 await selectChannel(currentChannelId);
             }
             else {
@@ -970,7 +969,7 @@ function renderChannels() {
         <polyline points="9 18 15 12 9 6"></polyline>
       </svg>
       <div class="channel-icon">💬</div>
-      <span class="channel-name" title="${escapeHtml(ch.name)}">${escapeHtml(ch.name)}</span>
+      <span class="channel-name" title="${escapeHtml(safeChannelName(ch.name, ''))}">${escapeHtml(safeChannelName(ch.name))}</span>
       <span class="agent-row-meta">
         ${walletBadge}
         ${toolsBadge}
@@ -1098,6 +1097,9 @@ function formatSessionName(sess) {
 const escapeHtml = MR_escapeHtml || ((s) => String(s ?? '').replace(/[&<>"']/g, (c) => ({
     '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;'
 }[c])));
+// 2026-07-06: 通用 channel name 兜底 — 防止 name=undefined/null/'undefined' 字串
+//   时 UI 出现 "undefined" 字面量. 委托 util/safe-name.ts (有单测覆盖).
+import { safeChannelName } from './util/safe-name.js';
 function ensureMessageContainer(channelId) {
     if (!messagesContainers.has(channelId)) {
         const container = document.createElement('div');
@@ -1134,7 +1136,7 @@ async function selectChannel(channelId, targetSessionId = null) {
     const channel = channels.find(c => c.id === channelId);
     if (channel) {
         if (channelNameEl)
-            channelNameEl.textContent = channel.name;
+            channelNameEl.textContent = safeChannelName(channel.name);
         currentSessionId = targetSessionId || channel.currentSessionId || 'default';
         if (targetSessionId) {
             channel.currentSessionId = targetSessionId;
@@ -1532,7 +1534,7 @@ function connect(channelId) {
                     channel.name = data.newName;
                     renderChannels();
                     if (currentChannelId === data.channelId && channelNameEl) {
-                        channelNameEl.textContent = data.newName;
+                        channelNameEl.textContent = safeChannelName(data.newName);
                     }
                 }
             }
@@ -1698,7 +1700,7 @@ async function refreshMentionChannels() {
         const remote = [];
         for (const p of (remoteData.peers || [])) {
             for (const c of (p.channels || [])) {
-                remote.push({ id: c.id, name: c.name, source: 'remote', ownerPublicKey: p.peerId });
+                remote.push({ id: c.id, name: safeChannelName(c.name, '(远端未命名)'), source: 'remote', ownerPublicKey: p.peerId });
             }
         }
         mentionChannels = [
@@ -1751,9 +1753,9 @@ function renderMentionDropdown(items) {
             // 浅蓝 = 键盘高亮, 白 = 普通
             const bg = i === mentionHighlightIdx ? '#eff6ff' : '#fff';
             const borderLeft = i === mentionHighlightIdx ? '3px solid #93c5fd' : '3px solid transparent';
-            return `<div class="mention-item" data-idx="${i}" data-channel-id="${escapeHtml(c.id)}" data-channel-name="${escapeHtml(c.name)}" style="padding:8px 12px;cursor:pointer;background:${bg};border-bottom:1px solid #f3f4f6;display:flex;align-items:center;gap:8px;border-left:${borderLeft};">
+            return `<div class="mention-item" data-idx="${i}" data-channel-id="${escapeHtml(c.id)}" data-channel-name="${escapeHtml(safeChannelName(c.name, ''))}" style="padding:8px 12px;cursor:pointer;background:${bg};border-bottom:1px solid #f3f4f6;display:flex;align-items:center;gap:8px;border-left:${borderLeft};">
         <span style="font-size:10px;color:${isLocal ? '#059669' : '#2563eb'};background:${isLocal ? '#d1fae5' : '#dbeafe'};padding:1px 6px;border-radius:3px;white-space:nowrap;">${tag}</span>
-        <span style="flex:1;">${escapeHtml(c.name)}</span>${owner}
+        <span style="flex:1;">${escapeHtml(safeChannelName(c.name))}</span>${owner}
       </div>`;
         }).join('');
         mentionDropdownEl.innerHTML = headerHtml + rows;
@@ -1794,7 +1796,7 @@ function applyMention(channel) {
     }
     const before = input.value.slice(0, anchor); // 含 @
     const after = input.value.slice(blockEnd); // query 之后 (可能用户已输入正文)
-    const insert = `@${channel.name} `;
+    const insert = `@${safeChannelName(channel.name)} `;
     input.value = before + insert + after;
     const newPos = before.length + insert.length;
     input.focus();
@@ -1826,7 +1828,7 @@ function updateMentionDropdown() {
     }
     mentionQuery = m.query;
     const q = m.query.toLowerCase();
-    const items = mentionChannels.filter(c => c.name.toLowerCase().includes(q)).slice(0, 8);
+    const items = mentionChannels.filter(c => safeChannelName(c.name).toLowerCase().includes(q)).slice(0, 8);
     mentionHighlightIdx = items.length > 0 ? 0 : -1;
     renderMentionDropdown(items);
 }
@@ -1843,7 +1845,7 @@ input.addEventListener('keydown', (e) => {
             return;
         mentionHighlightIdx = (mentionHighlightIdx + 1) % items.length;
         const q = (mentionQuery || '').toLowerCase();
-        const filtered = mentionChannels.filter(c => c.name.toLowerCase().includes(q)).slice(0, 8);
+        const filtered = mentionChannels.filter(c => safeChannelName(c.name).toLowerCase().includes(q)).slice(0, 8);
         renderMentionDropdown(filtered);
     }
     else if (e.key === 'ArrowUp') {
@@ -1852,7 +1854,7 @@ input.addEventListener('keydown', (e) => {
             return;
         mentionHighlightIdx = (mentionHighlightIdx - 1 + items.length) % items.length;
         const q = (mentionQuery || '').toLowerCase();
-        const filtered = mentionChannels.filter(c => c.name.toLowerCase().includes(q)).slice(0, 8);
+        const filtered = mentionChannels.filter(c => safeChannelName(c.name).toLowerCase().includes(q)).slice(0, 8);
         renderMentionDropdown(filtered);
     }
     else if (e.key === 'Enter' || e.key === 'Tab') {
@@ -1861,7 +1863,7 @@ input.addEventListener('keydown', (e) => {
             e.preventDefault();
             e.stopPropagation();
             const q = (mentionQuery || '').toLowerCase();
-            const filtered = mentionChannels.filter(c => c.name.toLowerCase().includes(q)).slice(0, 8);
+            const filtered = mentionChannels.filter(c => safeChannelName(c.name).toLowerCase().includes(q)).slice(0, 8);
             const cur = filtered[mentionHighlightIdx];
             if (cur)
                 applyMention(cur);
@@ -1914,7 +1916,7 @@ function setupMentionAutocomplete(inputEl) {
         }
         const before = inputEl.value.slice(0, anchor); // 含 @
         const after = inputEl.value.slice(blockEnd);
-        const insert = `@${channel.name} `;
+        const insert = `@${safeChannelName(channel.name)} `;
         inputEl.value = before + insert + after;
         const newPos = before.length + insert.length;
         inputEl.focus();
@@ -1941,10 +1943,10 @@ function setupMentionAutocomplete(inputEl) {
                 const owner = !isLocal && c.ownerPublicKey ? ` <span style="color:#9ca3af;font-size:11px;">(${c.ownerPublicKey.substring(0, 8)}…)</span>` : '';
                 const bg = i === localHighlight ? '#eff6ff' : '#fff';
                 const borderLeft = i === localHighlight ? '3px solid #93c5fd' : '3px solid transparent';
-                return `<div class="mention-item" data-idx="${i}" data-channel-id="${escapeHtml(c.id)}" data-channel-name="${escapeHtml(c.name)}" style="padding:8px 12px;cursor:pointer;background:${bg};border-bottom:1px solid #f3f4f6;display:flex;align-items:center;gap:8px;border-left:${borderLeft};">
-          <span style="font-size:10px;color:${isLocal ? '#059669' : '#2563eb'};background:${isLocal ? '#d1fae5' : '#dbeafe'};padding:1px 6px;border-radius:3px;white-space:nowrap;">${tag}</span>
-          <span style="flex:1;">${escapeHtml(c.name)}</span>${owner}
-        </div>`;
+                return `<div class="mention-item" data-idx="${i}" data-channel-id="${escapeHtml(c.id)}" data-channel-name="${escapeHtml(safeChannelName(c.name, ''))}" style="padding:8px 12px;cursor:pointer;background:${bg};border-bottom:1px solid #f3f4f6;display:flex;align-items:center;gap:8px;border-left:${borderLeft};">
+        <span style="font-size:10px;color:${isLocal ? '#059669' : '#2563eb'};background:${isLocal ? '#d1fae5' : '#dbeafe'};padding:1px 6px;border-radius:3px;white-space:nowrap;">${tag}</span>
+        <span style="flex:1;">${escapeHtml(safeChannelName(c.name))}</span>${owner}
+      </div>`;
             }).join('');
             inputEl.__mentionDD.querySelectorAll('.mention-item').forEach((el) => {
                 const idx = parseInt(el.getAttribute('data-idx'));
@@ -1990,7 +1992,7 @@ function setupMentionAutocomplete(inputEl) {
         }
         localQuery = m.query;
         const q = m.query.toLowerCase();
-        const items = mentionChannels.filter(c => c.name.toLowerCase().includes(q)).slice(0, 8);
+        const items = mentionChannels.filter(c => safeChannelName(c.name).toLowerCase().includes(q)).slice(0, 8);
         localHighlight = items.length > 0 ? 0 : -1;
         renderLocal(items);
     }
@@ -2005,7 +2007,7 @@ function setupMentionAutocomplete(inputEl) {
                 return;
             localHighlight = (localHighlight + 1) % items.length;
             const q = (localQuery || '').toLowerCase();
-            renderLocal(mentionChannels.filter(c => c.name.toLowerCase().includes(q)).slice(0, 8));
+            renderLocal(mentionChannels.filter(c => safeChannelName(c.name).toLowerCase().includes(q)).slice(0, 8));
         }
         else if (e.key === 'ArrowUp') {
             e.preventDefault();
@@ -2013,14 +2015,14 @@ function setupMentionAutocomplete(inputEl) {
                 return;
             localHighlight = (localHighlight - 1 + items.length) % items.length;
             const q = (localQuery || '').toLowerCase();
-            renderLocal(mentionChannels.filter(c => c.name.toLowerCase().includes(q)).slice(0, 8));
+            renderLocal(mentionChannels.filter(c => safeChannelName(c.name).toLowerCase().includes(q)).slice(0, 8));
         }
         else if (e.key === 'Enter' || e.key === 'Tab') {
             if (items.length > 0) {
                 e.preventDefault();
                 e.stopPropagation();
                 const q = (localQuery || '').toLowerCase();
-                const filtered = mentionChannels.filter(c => c.name.toLowerCase().includes(q)).slice(0, 8);
+                const filtered = mentionChannels.filter(c => safeChannelName(c.name).toLowerCase().includes(q)).slice(0, 8);
                 const cur = filtered[localHighlight];
                 if (cur)
                     applyLocal(cur);
@@ -2256,7 +2258,7 @@ function renderJudgments(items) {
         ? channels.find(c => c.id === currentChannelId)
         : null;
     if (chNameEl) {
-        chNameEl.textContent = currentCh ? `(${currentCh.name})` : '(未选)';
+        chNameEl.textContent = currentCh ? `(${safeChannelName(currentCh.name)})` : '(未选)';
     }
     if (all.length === 0) {
         judgmentsList.innerHTML = '<div class="task-empty">还没有判断, 在上面记录第一条吧</div>';
@@ -2286,7 +2288,7 @@ function renderJudgments(items) {
     const bound = all.filter(j => boundIds.has(j.id));
     const unbound = all.filter(j => !boundIds.has(j.id));
     if (titleEl)
-        titleEl.textContent = `${currentCh.name} 的判断力 (已绑 ${bound.length} / 共 ${all.length})`;
+        titleEl.textContent = `${safeChannelName(currentCh.name)} 的判断力 (已绑 ${bound.length} / 共 ${all.length})`;
     let html = '';
     if (bound.length > 0) {
         html += `<div style="font-size:11px;color:#6b7280;text-transform:uppercase;letter-spacing:0.5px;padding:8px 4px 4px;">已绑定 (${bound.length})</div>`;
@@ -3259,7 +3261,7 @@ function renderRemoteChannels() {
               <div class="remote-channel-row" data-peer-id="${escapeHtml(peer.publicKey)}" data-channel-id="${escapeHtml(c.id)}"
                    style="display:flex;align-items:center;gap:6px;padding:4px 6px;cursor:pointer;border-radius:4px;font-size:12px;">
                 <span>🤖</span>
-                <span style="flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="${escapeHtml(c.name || '')}">${escapeHtml(c.name || '(未命名)')}</span>
+                <span style="flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="${escapeHtml(safeChannelName(c.name, ''))}">${escapeHtml(safeChannelName(c.name))}</span>
               </div>
             `).join('')}
         </div>
@@ -3408,7 +3410,7 @@ async function openShareToPeerModal(peerName, peerPublicKey) {
           <label class="share-modal-row">
             <input type="checkbox" data-cid="${escapeHtml(ch.id)}" ${isShared ? 'checked' : ''} class="share-modal-cb">
             <div class="share-modal-row-info">
-              <div class="share-modal-row-name">${escapeHtml(ch.name)}</div>
+              <div class="share-modal-row-name">${escapeHtml(ch.name || '(未命名)')}</div>
               <div class="share-modal-row-meta">
                 ${isShared ? '✓ 已分享' : '未分享'} · ${escapeHtml(ch.id.slice(0, 24))}…
               </div>
@@ -4190,7 +4192,7 @@ function renderWalletList() {
         row.innerHTML = `
       <span class="wallet-chain">${escapeHtml(chain)}</span>
       <div class="wallet-info">
-        <span class="wallet-agent" title="${escapeHtml(ch.name)}">${escapeHtml(ch.name)}</span>
+        <span class="wallet-agent" title="${escapeHtml(ch.name || '')}">${escapeHtml(ch.name || '(未命名)')}</span>
         <span class="wallet-address" title="${escapeHtml(ch.walletAddress)}">${escapeHtml(ch.walletAddress)}</span>
       </div>
       <div class="wallet-actions">

package/dist/web/components/p2p/index.js

@@ -1,7 +1,7 @@
-"use strict";
 /**
  * P2P Modal - 纯 TypeScript 版本
  */
+import { safeName as safeAnyName } from '../../util/safe-name.js';
 class P2PModalUI {
     modal = null;
     overlay = null;
@@ -58,8 +58,14 @@ class P2PModalUI {
             const irohResp = await fetch('/api/iroh/init', { method: 'POST' });
             const irohData = await irohResp.json();
             if (irohData.cid) {
+                // 2026-07-06: 防御 irohData.name 是 'undefined'/'null'/空白 的情况,
+                //   否则 UI 会渲染字面量 "undefined". (multi-confirmed fix: 避免再现 v0.2.7 的 bug)
+                const rawName = (typeof irohData.name === 'string' && irohData.name.trim()
+                    && irohData.name.trim() !== 'undefined'
+                    && irohData.name.trim() !== 'null') ? irohData.name.trim() : '';
+                const tailName = rawName.split('-').slice(-1)[0] || '';
                 identityData = {
-                    name: irohData.name || irohData.name?.split('-').slice(-1)[0] || 'Bolloon',
+                    name: rawName || tailName || 'Bolloon',
                     did: irohData.did || '未知',
                     cid: irohData.cid || '未知',
                     nodeId: irohData.irohNodeId ? irohData.irohNodeId.substring(0, 20) + '...' : '未知'
@@ -77,7 +83,7 @@ class P2PModalUI {
           <h3>身份信息</h3>
           <div class="p2p-info-row">
             <span class="label">名称:</span>
-            <span class="value">${this.escapeHtml(identityData.name || '未知')}</span>
+            <span class="value">${this.escapeHtml(this.safeName(identityData.name, '未知'))}</span>
           </div>
           <div class="p2p-info-row">
             <span class="label">CID:</span>
@@ -237,7 +243,7 @@ class P2PModalUI {
             });
             const data = await resp.json();
             if (data.ok) {
-                result.innerHTML = `<div class="p2p-success">连接成功！节点: ${this.escapeHtml(data.nodeName || cid.substring(0, 16))}...</div>`;
+                result.innerHTML = `<div class="p2p-success">连接成功！节点: ${this.escapeHtml(this.safeName(data.nodeName, cid.substring(0, 16)))}...</div>`;
                 result.className = 'p2p-result success';
                 // 清空输入框
                 input.value = '';
@@ -301,7 +307,7 @@ class P2PModalUI {
             const time = new Date(info.time).toLocaleTimeString();
             html += `
         <div class="p2p-peer-item">
-          <span class="p2p-peer-name">${this.escapeHtml(info.name || shortId)}</span>
+          <span class="p2p-peer-name">${this.escapeHtml(this.safeName(info.name, shortId))}</span>
           <span class="p2p-peer-id">${shortId}</span>
           <span class="p2p-peer-time">${time}</span>
         </div>
@@ -314,6 +320,12 @@ class P2PModalUI {
         div.textContent = str;
         return div.innerHTML;
     }
+    // 2026-07-06: 通用 name 兜底 — 防止 name=undefined/null/'undefined' 字串
+    //   时 UI 渲染字面量 "undefined".
+    safeName(input, fallback) {
+        // 2026-07-06: 委托共享 safe-name.ts (有单测覆盖); 保持方法签名兼容旧调用.
+        return safeAnyName(input, fallback || '未知');
+    }
     showToast(message) {
         const toast = document.createElement('div');
         toast.className = 'p2p-toast';

package/dist/web/components/p2p/p2p-modal.js

@@ -2,6 +2,7 @@
  * P2P Modal Web Component
  */
 import { p2pManager } from './p2p-manager.js';
+import { safeName as safeAnyName } from '../../util/safe-name.js';
 export class P2PModal extends HTMLElement {
     shadow = this.attachShadow({ mode: 'open' });
     activeTab = 'identity';
@@ -107,7 +108,7 @@ export class P2PModal extends HTMLElement {
         <div class="history-item-icon">💬</div>
         <div class="history-item-info">
           <div class="history-item-name">
-            ${this.escapeHtml(item.name || 'Unknown')}
+            ${this.escapeHtml(this.safeName(item.name, 'Unknown'))}
             ${item.isPinned ? '<span class="pin-icon">📌</span>' : ''}
           </div>
           <div class="history-item-meta">
@@ -217,7 +218,7 @@ export class P2PModal extends HTMLElement {
             div.innerHTML = `
         <div class="peer-status"><span class="dot online"></span></div>
         <div class="peer-info">
-          <div class="peer-name">${this.escapeHtml(peer.info?.name || 'Unknown')}</div>
+          <div class="peer-name">${this.escapeHtml(this.safeName(peer.info?.name, 'Unknown'))}</div>
           <div class="peer-meta">${(peer.nodeId || '').substring(0, 16)}...</div>
         </div>
       `;
@@ -275,6 +276,12 @@ export class P2PModal extends HTMLElement {
         div.textContent = text;
         return div.innerHTML;
     }
+    // 2026-07-06: 通用 name 兜底 — 防止 name=undefined/null/'undefined' 字串
+    //   时 UI 渲染字面量 "undefined".
+    safeName(input, fallback) {
+        // 2026-07-06: 委托共享 safe-name.ts (有单测覆盖); 保持方法签名兼容旧调用.
+        return safeAnyName(input, fallback || 'Unknown');
+    }
     showToast(message) {
         const toast = document.createElement('div');
         toast.className = 'toast';