feat: add Bunker URL card to Apps tab in sidepanel

Adds a "Create Bunker URL" card above Permissions in the Apps tab.
Users can generate a NIP-46 bunker URL, copy it, and paste it into
any Nostr app. Includes security warning: never share publicly.

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

Author: vveerrgg

src/sidepanel.html

@@ -90,6 +90,10 @@
                 color: #a6e22e;
                 margin-bottom: 12px;
             }
+            @keyframes pulse-dot {
+                0%, 100% { opacity: 1; }
+                50% { opacity: 0.4; }
+            }
             .input {
                 width: 100%;
                 min-height: 44px;
@@ -467,6 +471,31 @@ <h2 class="section-title">Relays</h2>
 
                     <!-- PERMISSIONS VIEW -->
                     <div id="view-permissions" class="view-section">
+                        <!-- Bunker URL card -->
+                        <div class="section-card">
+                            <h2 class="section-title">Bunker URL</h2>
+                            <p style="color:#b0b0a8;font-size:14px;margin-bottom:12px;">Log in to any Nostr app without sharing your keys. Create a bunker URL and paste it wherever NIP-46 is accepted.</p>
+                            <!-- State: ready -->
+                            <div id="bunker-srv-ready">
+                                <button id="btn-bunker-srv-start" class="button w-full">Create Bunker URL</button>
+                            </div>
+                            <!-- State: active -->
+                            <div id="bunker-srv-active" style="display:none;">
+                                <div style="display:flex;align-items:center;gap:8px;margin-bottom:12px;">
+                                    <span style="width:8px;height:8px;border-radius:50%;background:#a6e22e;display:inline-block;animation:pulse-dot 2s ease-in-out infinite;"></span>
+                                    <span style="color:#a6e22e;font-size:13px;font-weight:600;">Active</span>
+                                </div>
+                                <div style="background:#272822;border:1px solid #49483e;border-radius:8px;padding:10px 12px;margin-bottom:12px;display:flex;align-items:center;gap:8px;">
+                                    <code id="bunker-srv-uri" style="flex:1;font-size:11px;color:#a6e22e;word-break:break-all;line-height:1.4;"></code>
+                                    <button id="btn-bunker-srv-copy" class="button" style="min-height:32px;padding:4px 12px;font-size:12px;">Copy</button>
+                                </div>
+                                <p style="color:#8f908a;font-size:12px;margin-bottom:8px;">Paste this URL into any Nostr app that supports bunker login.</p>
+                                <p style="color:#f92672;font-size:12px;font-weight:600;margin-bottom:12px;">Never share this URL. Anyone with it can sign events as you.</p>
+                                <button id="btn-bunker-srv-stop" class="button w-full" style="border-color:#f92672;color:#f92672;">Disconnect</button>
+                            </div>
+                        </div>
+
+                        <!-- Permissions card -->
                         <div class="section-card">
                             <h2 class="section-title">Permissions</h2>
                             <p style="color:#b0b0a8;font-size:14px;margin-bottom:12px;">App permissions for signing requests.</p>

src/sidepanel.js

@@ -120,6 +120,13 @@ function initElements() {
     elements.addRelayBtn = $('add-relay-btn');
     // Permissions view
     elements.permissionsList = $('permissions-list');
+    // Bunker server
+    elements.bunkerSrvReady = $('bunker-srv-ready');
+    elements.bunkerSrvActive = $('bunker-srv-active');
+    elements.bunkerSrvUri = $('bunker-srv-uri');
+    elements.btnBunkerSrvStart = $('btn-bunker-srv-start');
+    elements.btnBunkerSrvCopy = $('btn-bunker-srv-copy');
+    elements.btnBunkerSrvStop = $('btn-bunker-srv-stop');
     // Settings view buttons
     elements.openSettingsBtn = $('open-settings-btn');
     elements.openHistoryBtn = $('open-history-btn');
@@ -1019,6 +1026,7 @@ async function loadPermissionsView() {
         state.permissions = [];
         renderPermissionsList();
     }
+    checkBunkerServerStatus();
 }
 
 function renderPermissionsList() {
@@ -1035,6 +1043,59 @@ function renderPermissionsList() {
     `).join('');
 }
 
+// Bunker server UI
+async function checkBunkerServerStatus() {
+    try {
+        const status = await api.runtime.sendMessage({ kind: 'bunkerServer.status' });
+        if (status && status.active) {
+            elements.bunkerSrvReady.style.display = 'none';
+            elements.bunkerSrvActive.style.display = '';
+            elements.bunkerSrvUri.textContent = status.uri || '';
+        } else {
+            elements.bunkerSrvReady.style.display = '';
+            elements.bunkerSrvActive.style.display = 'none';
+        }
+    } catch {
+        // Extension may not support it yet
+    }
+}
+
+async function startBunkerServer() {
+    elements.btnBunkerSrvStart.disabled = true;
+    elements.btnBunkerSrvStart.textContent = 'Creating\u2026';
+    try {
+        const result = await api.runtime.sendMessage({
+            kind: 'bunkerServer.start',
+            payload: { relayUrls: ['wss://relay.nostrkey.com'] },
+        });
+        if (!result || !result.success) throw new Error(result?.error || 'Failed');
+        elements.bunkerSrvUri.textContent = result.uri;
+        elements.bunkerSrvReady.style.display = 'none';
+        elements.bunkerSrvActive.style.display = '';
+    } catch (e) {
+        console.error('Bunker start error:', e);
+    }
+    elements.btnBunkerSrvStart.disabled = false;
+    elements.btnBunkerSrvStart.textContent = 'Create Bunker URL';
+}
+
+async function stopBunkerServer() {
+    try {
+        await api.runtime.sendMessage({ kind: 'bunkerServer.stop' });
+    } catch {}
+    elements.bunkerSrvActive.style.display = 'none';
+    elements.bunkerSrvReady.style.display = '';
+}
+
+function copyBunkerUri() {
+    const uri = elements.bunkerSrvUri.textContent;
+    if (!uri) return;
+    navigator.clipboard.writeText(uri).then(() => {
+        elements.btnBunkerSrvCopy.textContent = 'Copied!';
+        setTimeout(() => { elements.btnBunkerSrvCopy.textContent = 'Copy'; }, 1500);
+    });
+}
+
 // Event bindings
 function bindEvents() {
     elements.unlockForm.addEventListener('submit', async (e) => {
@@ -1167,6 +1228,17 @@ function bindEvents() {
         });
     }
 
+    // Bunker server
+    if (elements.btnBunkerSrvStart) {
+        elements.btnBunkerSrvStart.addEventListener('click', startBunkerServer);
+    }
+    if (elements.btnBunkerSrvStop) {
+        elements.btnBunkerSrvStop.addEventListener('click', stopBunkerServer);
+    }
+    if (elements.btnBunkerSrvCopy) {
+        elements.btnBunkerSrvCopy.addEventListener('click', copyBunkerUri);
+    }
+
     // Vault unlock form
     if (elements.vaultUnlockForm) {
         elements.vaultUnlockForm.addEventListener('submit', async (e) => {