feat(ext): sync now button + device register from popup; vault tab parity

Closes three audit gaps in one pass:

1. Sync now button in the popup settings view (📤). Triggers the existing
   { type: 'sync' } SW message and surfaces success / failure inline. The
   SW message was already wired but had no UI entry point.

2. Device registration from the popup. The "Register this device" button
   on the devices view used to error out with a "not yet implemented"
   message; it now opens an inline name input (default = browser+OS), and
   on confirm sends a new register_this_device SW message that generates
   an ed25519 keypair via WASM, persists private_key + name to
   chrome.storage.local, and writes the public key to the remote
   devices.json. No setup-wizard detour.

3. Vault tab is now an authorized sender for popup-only SW messages. The
   router accepts vault.html alongside popup.html, so the fullscreen tab
   can drive the same flows. Test covers acceptance from the vault tab.

New SW message: register_this_device { name }. Added to PopupMessage and
POPUP_ONLY_TYPES, handled in router/popup-only.ts.

Tests: 5 new vitest cases (3 in settings.test.ts, 2 in devices.test.ts)
+ 1 router test for vault-tab acceptance. All 194 extension tests pass.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

extension/src/popup/components/devices.ts

@@ -13,6 +13,20 @@ function relativeTime(unixSec: number): string {
   return `${Math.floor(diff / 2592000)}mo ago`;
 }
 
+function detectDefaultDeviceName(): string {
+  const ua = navigator.userAgent ?? '';
+  const platform = (navigator.platform ?? '').toLowerCase();
+  const isFirefox = /firefox/i.test(ua);
+  const isEdge = /edg/i.test(ua);
+  const isChrome = /chrome/i.test(ua) && !isEdge;
+  const browser = isFirefox ? 'Firefox' : isEdge ? 'Edge' : isChrome ? 'Chrome' : 'Browser';
+  const os = platform.includes('mac') ? 'macOS'
+    : platform.includes('win') ? 'Windows'
+    : platform.includes('linux') ? 'Linux'
+    : 'Unknown';
+  return `${browser} on ${os}`;
+}
+
 export function teardown(): void {
   // No cleanup needed
 }
@@ -64,11 +78,44 @@ export async function renderDevices(app: HTMLElement): Promise<void> {
   // Wire handlers
   document.getElementById('back-btn')?.addEventListener('click', () => navigate('list'));
 
-  document.getElementById('register-btn')?.addEventListener('click', async () => {
-    // Generate keypair and register
-    // This would need WASM access - for now, redirect to a registration flow
-    // The full implementation happens in Task 12 (setup wizard integration)
-    setState({ error: 'Device registration from here is not yet implemented. Use setup wizard.' });
+  document.getElementById('register-btn')?.addEventListener('click', () => {
+    const banner = document.querySelector('.device-banner');
+    if (!banner) return;
+    const defaultName = detectDefaultDeviceName();
+    banner.innerHTML = `
+      <label class="label" for="register-name-input" style="display:block;margin-bottom:4px;">
+        Name this device
+      </label>
+      <input
+        id="register-name-input"
+        type="text"
+        value="${escapeHtml(defaultName)}"
+        style="width:100%;margin-bottom:8px;"
+      >
+      <div style="display:flex;gap:8px;">
+        <button class="btn btn-primary" id="register-confirm-btn">Register</button>
+        <button class="btn" id="register-cancel-btn">Cancel</button>
+      </div>
+    `;
+
+    document.getElementById('register-cancel-btn')?.addEventListener('click', () => {
+      renderDevices(app);
+    });
+
+    document.getElementById('register-confirm-btn')?.addEventListener('click', async () => {
+      const input = document.getElementById('register-name-input') as HTMLInputElement | null;
+      const name = input?.value.trim();
+      if (!name) {
+        setState({ error: 'Device name is required' });
+        return;
+      }
+      const result = await sendMessage({ type: 'register_this_device', name });
+      if (result.ok) {
+        renderDevices(app);
+      } else {
+        setState({ error: result.error });
+      }
+    });
   });
 
   document.querySelectorAll<HTMLButtonElement>('[data-revoke]').forEach((btn) => {