ui: fix message alignment, show self in peer list

Messages now use a fixed grid (44px ts · 120px alias right-aligned · 1fr text)
instead of flex, so text always starts at the same column regardless of alias length.

Self shown at top of peer list with accent dot and bold name.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

web/src/components/Sidebar.tsx

@@ -87,9 +87,17 @@ export function Sidebar() {
       </div>
 
       <div className="sidebar-section sidebar-peers">
-        <span className="sidebar-label">Peers {connectedPeers.length > 0 && `· ${connectedPeers.length}`}</span>
+        <span className="sidebar-label">Peers · {connectedPeers.length + 1}</span>
+
+        {/* Self */}
+        <div className="peer-row peer-row-self">
+          <span className="peer-dot" style={{ background: 'var(--accent)' }} />
+          <span className="peer-row-alias" style={{ fontWeight: 700 }}>{displayAlias || '…'}</span>
+          <span className="peer-row-id">{displayId.slice(0, 8)}</span>
+        </div>
+
         {connectedPeers.length === 0 && (
-          <span className="sidebar-empty">no peers yet</span>
+          <span className="sidebar-empty">no peers connected</span>
         )}
         {connectedPeers.map(p => {
           const st = peerStatus[p.id]