Move peer list into dedicated Peers sidebar tab

Keep quick Add peer (and Peers shortcut) in the sidebar footer; full
saved-peer list, counts, and actions live on a new Peers view that is
reachable offline for managing keys.

index.html

@@ -174,6 +174,12 @@
               </a>
             </li>
             <li class="nav-group-label">Host & access</li>
+            <li class="nav-item">
+              <a href="#" class="nav-link" data-view="peers" title="Peers">
+                <i class="fas fa-network-wired"></i>
+                <span class="nav-label">Peers</span>
+              </a>
+            </li>
             <li class="nav-item">
               <a href="#" class="nav-link" data-view="host" title="Host">
                 <i class="fas fa-microchip"></i>
@@ -182,7 +188,7 @@
             </li>
             <li class="nav-item">
               <a href="#" class="nav-link" data-view="tunnels" title="Tunnels">
-                <i class="fas fa-network-wired"></i>
+                <i class="fas fa-satellite-dish"></i>
                 <span class="nav-label">Tunnels</span>
               </a>
             </li>
@@ -202,18 +208,18 @@
         </nav>
       </div>
 
-      <!-- Fixed footer: peers stay pinned to bottom; only nav scrolls above -->
+      <!-- Fixed footer: quick-add peer only (full list lives on Peers view) -->
       <div class="sidebar-footer">
         <hr class="sidebar-divider">
-        <div class="connections-panel">
-          <div class="connections-panel-header">
-            <div class="sidebar-section-label mb-0">Peers</div>
-            <button type="button" id="open-add-connection-btn" class="btn btn-sm btn-primary open-add-connection-btn" title="Add peer" aria-label="Add peer">
-              <i class="fas fa-plus"></i>
-              <span class="open-add-connection-label">Add</span>
-            </button>
-          </div>
-          <ul id="connection-list" class="list-group"></ul>
+        <div class="connections-panel connections-panel--compact">
+          <button type="button" id="open-add-connection-btn" class="btn btn-sm btn-primary open-add-connection-btn w-100" title="Add peer" aria-label="Add peer">
+            <i class="fas fa-plus"></i>
+            <span class="open-add-connection-label">Add peer</span>
+          </button>
+          <button type="button" id="sidebar-open-peers-btn" class="btn btn-sm btn-outline-secondary w-100 mt-2 open-peers-view-btn" title="Open peers list" data-view="peers">
+            <i class="fas fa-list"></i>
+            <span class="open-add-connection-label">Peers</span>
+          </button>
         </div>
       </div>
     </div>
@@ -263,12 +269,50 @@
         <ol class="first-connect-steps">
           <li><button type="button" class="first-connect-link" data-view="dashboard">Open the dashboard</button> for live host health</li>
           <li><button type="button" class="first-connect-link" data-view="containers">Browse containers</button> or <button type="button" class="first-connect-link" data-view="deploy">deploy a template</button></li>
-          <li><button type="button" class="first-connect-link" data-view="settings">Settings</button> for density, auto-refresh, and template lists</li>
+          <li><button type="button" class="first-connect-link" data-view="peers">Peers</button> to manage saved hosts · <button type="button" class="first-connect-link" data-view="settings">Settings</button> for prefs</li>
           <li>Press <kbd>Ctrl</kbd>+<kbd>K</kbd> anytime for the command palette</li>
         </ol>
         <button type="button" class="btn btn-primary btn-sm" id="first-connect-got-it">Got it</button>
       </div>
     </div>
+    <!-- Peers view — full peer list (moved out of sidebar) -->
+    <div id="peers-view" class="view hidden">
+      <div class="container-fluid">
+        <div class="page-header d-flex flex-wrap justify-content-between align-items-start gap-2">
+          <div>
+            <h2><i class="fas fa-network-wired"></i>Peers</h2>
+            <p class="page-subtitle">Saved HyperDHT peers for this client — click a peer to make it active</p>
+          </div>
+          <div class="d-flex flex-wrap gap-2">
+            <button type="button" class="btn btn-primary" id="peers-view-add-btn">
+              <i class="fas fa-plus me-1"></i>Add peer
+            </button>
+            <button type="button" class="btn btn-outline-secondary" id="peers-view-refresh-btn" title="Refresh status">
+              <i class="fas fa-sync"></i>
+            </button>
+          </div>
+        </div>
+        <div class="settings-section">
+          <div class="d-flex justify-content-between align-items-center mb-2 flex-wrap gap-2">
+            <h3 class="mb-0 h6 text-white">Saved peers</h3>
+            <span id="peers-view-count" class="small text-muted">0 peers</span>
+          </div>
+          <ul id="connection-list" class="list-group peers-connection-list"></ul>
+          <div id="peers-view-empty" class="text-muted small py-3 d-none">
+            No peers saved yet. Use <strong>Add peer</strong> to paste a 64-character public key from <code>npm run server</code>.
+          </div>
+        </div>
+        <div class="settings-section">
+          <h3 class="h6">Tips</h3>
+          <ul class="small text-muted mb-0">
+            <li>The active peer is highlighted and drives dashboard, containers, and tunnels.</li>
+            <li>Use <strong>Fleet</strong> for multi-host health side-by-side; tag environments there.</li>
+            <li>Server-side allowlist / invites live under <strong>Access</strong> when connected as admin.</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+
     <!-- Dashboard View — modern fit-to-viewport shell -->
     <div id="dashboard-view" class="view hidden">
       <div class="dashboard-layout dash">