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/MachineSwitcher.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react'
-import { MachineStatus } from './api'
+import { MachineStatus, titleOf } from './api'
 import { useEscape } from './ui'
 import { accentFor } from './accents'
 
@@ -19,12 +19,13 @@ export default function MachineSwitcher({ hub, hubAddr, current, machines, onCha
   }, [])
   useEscape(() => setOpen(false), open)
   const cur = current ? machines.find((m) => m.name === current) : null
+  const title = (name: string | null) => titleOf(name, machines, hub)
   const dotFor = (m?: MachineStatus | null) => (!m ? 'ok' : m.online ? 'ok' : 'bad')
   return (
     <div className="mswitch" ref={box}>
       <button className="mswitch-btn" onClick={() => setOpen(!open)} title="switch machine">
         <span className={'dot ' + (current ? dotFor(cur) : 'ok')} />
-        <span className="mname">{current ?? hub}</span>
+        <span className="mname">{title(current)}</span>
         <span className="muted small">{current ? (cur?.online ? 'remote' : 'offline') : 'this host'}</span>
         <span className="chev">▾</span>
       </button>
@@ -34,8 +35,8 @@ export default function MachineSwitcher({ hub, hubAddr, current, machines, onCha
             <span className="dot ok" /><span className="mname" style={{ color: accentFor(hub) }}>{hub}</span><span className="muted small mono">{hubAddr || 'this host'}</span>
           </button>
           {machines.map((m) => (
-            <button key={m.name} className={'mitem' + (current === m.name ? ' on' : '')} onClick={() => { setOpen(false); onChange(m.name) }} title={m.error || m.url}>
-              <span className={'dot ' + dotFor(m)} /><span className="mname" style={{ color: accentFor(m.name) }}>{m.name}</span><span className="muted small mono">{hostOf(m.url)}{m.online ? '' : ' · offline'}</span>
+            <button key={m.name} className={'mitem' + (current === m.name ? ' on' : '')} onClick={() => { setOpen(false); onChange(m.name) }} title={m.error || (m.host && m.host !== m.name ? `${m.url} · added as ${m.name}` : m.url)}>
+              <span className={'dot ' + dotFor(m)} /><span className="mname" style={{ color: accentFor(m.name) }}>{m.host || m.name}</span><span className="muted small mono">{hostOf(m.url)}{m.online ? '' : ' · offline'}</span>
             </button>
           ))}
           <button className="mitem manage" onClick={() => { setOpen(false); onManage() }}>+ manage machines…</button>