A machine is titled by its own hostname, and follows a rename

The name a machine was added under stays its identity — the URL, its accent, what the hub's
API calls it — and is what the Machines page shows as 'Added as'. The hostname is read live
rather than at start-up, so renaming a machine reaches the console without a restart.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

web/src/Machines.tsx

@@ -81,7 +81,7 @@ export default function Machines({ hub, onChanged, onOpen }: { hub: Me; onChange
           <section className="card" key={m.name}>
             <div className="sub-head">
               <span className={'dot ' + (m.online ? 'ok' : 'bad')} />
-              <span className="dname" style={{ color: accentFor(m.name) }}>{m.name}</span>
+              <span className="dname" style={{ color: accentFor(m.name) }}>{m.host || m.name}</span>
               <span className="muted small mono">{m.url}</span>
               <span className="spacer" />
               {m.reboot_needed && <span className="badge" title="reboot required">⟳</span>}
@@ -89,7 +89,9 @@ export default function Machines({ hub, onChanged, onOpen }: { hub: Me; onChange
             </div>
             <div className="props">
               <div><span className="k">Status</span><span className={m.online ? 'good' : 'warn-text'}>{m.online ? 'online' : m.error || 'offline'}</span></div>
-              {m.host && <div><span className="k">Host</span><span>{m.host} · v{(m.version ?? '').replace(/^v/, '')}</span></div>}
+              {/* the name it was added under is its identity here: it is what Remove, Update and the URL use */}
+              <div><span className="k">Added as</span><span className="mono">{m.name}{m.host && m.host !== m.name ? ' · renamed itself since' : ''}</span></div>
+              {m.version && <div><span className="k">Version</span><span>v{m.version.replace(/^v/, '')}</span></div>}
               {m.online && <div><span className="k">Load</span><span>{m.load} · up {fmtUptime(m.uptime ?? 0)}</span></div>}
               <div><span className="k">Seen</span><span>{ago(m.last_seen)}</span></div>
               {m.fingerprint && <div><span className="k">Cert</span><span className="mono" title={m.fingerprint}>{shortFp(m.fingerprint)}</span></div>}