Sync from GitHub via hub-sync

index.html

@@ -477,6 +477,7 @@
 					<p class="rv-picker-sub">Your online robots appear below</p>
 				</div>
 				<div id="rv-robot-list" class="rv-robot-list"></div>
+				<button id="rv-connect-btn" class="cta-button" style="margin-top:1.25rem;display:none">Connect →</button>
 			</div>
 
 			<!-- State 3: Monitoring UI -->

port_hf.js

@@ -506,11 +506,27 @@ async function setupRobot() {
             list.innerHTML = '<p class="rv-no-robots">No robots online. Make sure your robot daemon is running and connected.</p>';
             return;
         }
+        let selectedRobotId = null;
+        const connectBtn = document.getElementById('rv-connect-btn');
+        connectBtn.style.display = 'none';
+        connectBtn.onclick = null;
+
         robots.forEach(r => {
+            const name = r.meta?.name || r.id;
+            const n = name.toLowerCase();
+            const mode = n.includes('sim') || n.includes('mockup') ? '🖥 Simulation'
+                       : n.includes('wireless') || n.includes('wifi') ? '📡 Wireless'
+                       : '🔌 Lite';
             const btn = document.createElement('button');
             btn.className = 'rv-robot-btn';
-            btn.innerHTML = `🤖 <strong>${r.name || r.id}</strong><span class="rv-robot-id">${r.id}</span>`;
-            btn.addEventListener('click', () => startSession(r.id));
+            btn.innerHTML = `🤖 <strong>${name}</strong><span class="rv-robot-mode">${mode}</span>`;
+            btn.addEventListener('click', () => {
+                list.querySelectorAll('.rv-robot-btn').forEach(b => b.classList.remove('selected'));
+                btn.classList.add('selected');
+                selectedRobotId = r.id;
+                connectBtn.style.display = '';
+                connectBtn.onclick = () => startSession(selectedRobotId);
+            });
             list.appendChild(btn);
         });
     });

style.css

@@ -1991,17 +1991,24 @@ h4, h5, h6, strong {
 	font-family: 'Inter', sans-serif;
 }
 
+.rv-robot-btn.selected {
+	border-color: var(--coral);
+	background: rgba(255, 107, 74, 0.08);
+}
+
 .rv-robot-btn:hover {
 	border-color: var(--coral);
 	box-shadow: 0 4px 16px rgba(255,107,74,0.15);
 	transform: translateY(-1px);
 }
 
-.rv-robot-id {
+.rv-robot-mode {
 	margin-left: auto;
 	font-size: 0.75rem;
 	color: var(--text-muted);
-	font-family: monospace;
+	background: rgba(255,255,255,0.06);
+	padding: 0.2rem 0.5rem;
+	border-radius: 100px;
 }
 
 .rv-no-robots {