Add per-peer auto-accept, disconnect, copy snip, and add-by-ID

- Auto-accept toggle per trusted peer (keyring.autoAccept); only
  activates when peer is cryptographically verified — unverified
  connections always prompt regardless of setting
- Disconnect button on connected screen returns to idle with full
  state reset
- Copy snip: copies own peer ID as a flit-peer:<base64> string for
  sharing out-of-band (no QR needed for initial pairing)
- Add peer by ID: paste a raw hex peer ID or flit-peer: snip in
  Invite new tab to add directly to keyring and connect without QR
- Own peer ID always visible at bottom of idle screen
- Restructured known-device row for mobile: secondary actions
  (Auto/Rename/Forget) on top line, Connect full-width below

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

pwa/src/App.css

@@ -106,6 +106,45 @@
   background: rgba(255,107,107,0.08);
 }
 
+.btn-accent {
+  color: var(--accent);
+  border-color: var(--accent-border);
+  background: var(--accent-dim);
+}
+
+.btn-accent:hover {
+  background: rgba(0,232,122,0.2);
+  border-color: var(--accent);
+}
+
+.my-id-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 14px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  margin-top: 8px;
+}
+
+.my-id-label {
+  font-family: var(--mono);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--muted);
+  flex-shrink: 0;
+}
+
+.my-id-row .peer-id {
+  flex: 1;
+}
+
+.my-id-row .btn {
+  flex-shrink: 0;
+}
+
 .btn-link {
   background: none;
   border: none;
@@ -200,9 +239,8 @@
 
 .known-row {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
+  flex-direction: column;
+  gap: 10px;
   padding: 14px 16px;
   border: 1px solid var(--border);
   border-radius: 8px;
@@ -212,6 +250,14 @@
 
 .known-row:hover { border-color: var(--accent-border); }
 
+.known-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
 .known-info {
   display: flex;
   flex-direction: column;
@@ -238,12 +284,16 @@
   color: var(--muted);
 }
 
-.known-actions {
+.known-secondary {
   display: flex;
   gap: 6px;
   flex-shrink: 0;
 }
 
+.known-connect {
+  width: 100%;
+}
+
 /* ── QR / hosting card ───────────────────────────────────────────────────────── */
 
 .qr-card {