fix(gui): show discovered agent names with contact label precedence (#559)

Author: dirvine

src/gui/x0x-gui.html

@@ -854,6 +854,7 @@
 function u8encode(s){return btoa(unescape(encodeURIComponent(s)))}
 function u8decode(s){return decodeURIComponent(escape(atob(s)))}
 function short(s,n){return s?(s.substring(0,n||10)+'…'):'—'}
+function agentDisplayName(agentId,contact,discovered){return (contact&&contact.label)||(discovered&&discovered.self_name)||short(agentId)}
 function copyId(el){navigator.clipboard.writeText(el.textContent.replace('agent:','').replace('…','')).then(()=>toast('Copied to clipboard','info'))}
 function copyText(text){navigator.clipboard.writeText(text).then(()=>toast('Copied','info'))}
 function fmtTime(ts){return ts?new Date(typeof ts==='number'&&ts<1e12?ts*1000:ts).toLocaleTimeString():'—'}
@@ -1874,7 +1875,7 @@ <h2 style="margin:0">🏠 ${esc(hd.name||'Home')}</h2>
     S.set('discovered',d.agents);
     const tb=document.getElementById('h-agents');
     if(tb)tb.innerHTML=d.agents.map(x=>`<tr>
-      <td><span class="aid-short" style="cursor:pointer" onclick="showAgentDetail('${x.agent_id}')">${short(x.agent_id)}</span></td>
+      <td><span style="cursor:pointer" onclick="showAgentDetail('${x.agent_id}')">${esc(agentDisplayName(x.agent_id,(S.get('contacts')||[]).find(c=>c.agent_id===x.agent_id),x))}</span><div class="aid-short">${short(x.agent_id)}</div></td>
       <td>${x.user_id?'<span style="color:var(--lv)">'+short(x.user_id,8)+'</span>':'—'}</td>
       <td style="font-size:11px">${(x.addresses||[]).join(', ')||'—'}</td>
       <td>${x.nat_type||'—'}</td>
@@ -3152,7 +3153,7 @@ <h3>Pages</h3><div id="web-pages"></div>`;
   return `<div class="agent-row" onclick="showAgentDetail('${c.agent_id}')">
     <span style="font-size:14px">&#129302;</span>
     <div style="flex:1">
-      <div style="font-weight:500">${esc(c.label||short(c.agent_id))}</div>
+      <div style="font-weight:500">${esc(agentDisplayName(c.agent_id,c,c.discovered))}</div>
       <div class="aid-short">${short(c.agent_id,12)}</div>
     </div>
     ${trustHtml(c.trust_level)}
@@ -4604,7 +4605,7 @@ <h3>Thread</h3>
   const c=data.contact;
   const d=data.disc;
   const aid=data.agentId;
-  const name=c?c.label||short(aid):short(aid);
+  const name=agentDisplayName(aid,c,d);
   const trust=c?c.trust_level:'Unknown';
   const idType=c?c.identity_type:'Unknown';
   el.innerHTML=`<div class="detail-header">

tests/helpers/gui_proof.spec.mjs

@@ -1,5 +1,5 @@
-import { test, expect } from '@playwright/test';
-import { existsSync } from 'node:fs';
+import { test, expect } from 'playwright/test';
+import { existsSync, readFileSync } from 'node:fs';
 
 const chromeCandidates = [
   process.env.CHROME_BIN,
@@ -70,3 +70,43 @@ test('gui can import card and send direct message', async ({ page }) => {
     return !!msgs && msgs.textContent.includes(message);
   }, message);
 });
+
+// No daemon: run the real renderers in a browser with inert startup IO.
+test('agent names preserve labels, update peer names and escape HTML', async ({ page }) => {
+  await page.route('**/*', route => route.abort());
+  const html = readFileSync(new URL('../../src/gui/x0x-gui.html', import.meta.url), 'utf8');
+  const script = html.match(/<script>([\s\S]*?)<\/script>/)[1];
+  // Keep every real function; omit only the startup calls and interval timers.
+  await page.setContent('<table><tbody id="h-agents"></tbody></table><div id="rows"></div><div id="detail"></div>');
+  await page.addScriptTag({ content: script.split('// Apply theme on startup')[0] });
+  const agentId = 'a1'.repeat(32);
+  async function render(label, selfName) {
+    await page.evaluate(async ({ agentId, label, selfName }) => {
+      const contact = { agent_id: agentId, label, machines: [], trust_level: 'Known' };
+      const discovered = { agent_id: agentId, self_name: selfName };
+      S.set('contacts', [contact]);
+      api = async path => path === '/agents/discovered' ? {agents:[discovered]} : null;
+      refreshAgentIdentity = async () => {};
+      refreshUpgradeBanner = async () => {};
+      await pollDash();
+      document.getElementById('rows').innerHTML = renderAgentRow({...contact, discovered});
+      renderAgentDetail(document.getElementById('detail'), {agentId, contact, disc:discovered});
+    }, {agentId, label, selfName});
+  }
+  for (const [label, peer, expected] of [
+    ['', 'Remote name', 'Remote name'],
+    ['My label', 'Remote name', 'My label'],
+    ['', 'Updated name', 'Updated name'],
+    ['', '', agentId.slice(0,10)+'…'],
+    ['', '<img src=x onerror="window.nameInjected=true">', '<img src=x onerror="window.nameInjected=true">'],
+    ['<svg onload="window.nameInjected=true">', 'Peer', '<svg onload="window.nameInjected=true">'],
+  ]) {
+    await render(label, peer);
+    for (const selector of ['#h-agents', '#rows', '#detail']) {
+      await expect(page.locator(selector)).toContainText(expected);
+      await expect(page.locator(selector)).toContainText(agentId.slice(0,10));
+      await expect(page.locator(selector+' img, '+selector+' svg')).toHaveCount(0);
+    }
+    expect(await page.evaluate(() => window.nameInjected)).toBeUndefined();
+  }
+});