feat: show queue counter "(X of Y)" in permission UI

When a page fires multiple signing requests, display the current
position in the queue so users know how many approvals remain.
Counter appears in both the bottom sheet and fallback permission tab,
hidden for single requests, and resets when the queue drains.

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

Author: vveerrgg

src/background.js

@@ -60,6 +60,7 @@ const storage = {
 const log = msg => console.log('Background: ', msg);
 const validations = {};
 let prompt = { mutex: new Mutex(), release: null, tabId: null };
+let pendingQueue = { total: 0, processed: 0 };
 
 /**
  * Helper: run an async function and deliver the result via sendResponse.
@@ -1006,6 +1007,10 @@ api.runtime.onMessage.addListener((message, _sender, sendResponse) => {
         case 'nip44.decrypt':
         case 'getRelays':
             validations[uuid] = sendResponse;
+            if (Object.keys(validations).length === 1) {
+                pendingQueue = { total: 0, processed: 0 };
+            }
+            pendingQueue.total++;
             ask(uuid, message);
             setTimeout(() => {
                 // H4 fix: deny pending request on timeout instead of silently releasing
@@ -1074,6 +1079,10 @@ async function ask(uuid, { kind, host, payload }) {
     await forceRelease(); // Clean up previous tab if it closed without cleaning itself up
     prompt.release = await prompt.mutex.acquire();
 
+    pendingQueue.processed++;
+    const queuePosition = pendingQueue.processed;
+    const queueTotal = pendingQueue.total;
+
     let mKind = kind === 'signEvent' ? `signEvent:${payload.kind}` : kind;
     let permission = await getPermission(host, mKind);
     if (permission === 'allow') {
@@ -1102,6 +1111,8 @@ async function ask(uuid, { kind, host, payload }) {
                 kind: 'showPermissionSheet',
                 host,
                 permissionKind: kind,
+                queuePosition,
+                queueTotal,
             });
 
             if (result) {
@@ -1137,6 +1148,8 @@ async function ask(uuid, { kind, host, payload }) {
         kind,
         host,
         payload: JSON.stringify(payload || false),
+        queuePosition,
+        queueTotal,
     });
     let tab = await api.tabs.getCurrent();
     let p = await api.tabs.create({
@@ -1150,6 +1163,9 @@ async function ask(uuid, { kind, host, payload }) {
 function complete({ payload, origKind, event, remember, host }) {
     const sendResponse = validations[payload];
     delete validations[payload];
+    if (Object.keys(validations).length === 0) {
+        pendingQueue = { total: 0, processed: 0 };
+    }
 
     if (remember) {
         let mKind =
@@ -1192,6 +1208,9 @@ function complete({ payload, origKind, event, remember, host }) {
 function deny({ origKind, host, payload, remember, event }) {
     const sendResponse = validations[payload];
     delete validations[payload];
+    if (Object.keys(validations).length === 0) {
+        pendingQueue = { total: 0, processed: 0 };
+    }
 
     if (remember) {
         let mKind =

src/content.js

@@ -143,7 +143,7 @@ function createPermissionSheet() {
         <div class="nk-backdrop"></div>
         <div class="nk-sheet">
             <div class="nk-handle"></div>
-            <div class="nk-title">Permission Request</div>
+            <div class="nk-title">Permission Request <span id="nk-queue" style="color: #8f908a; font-size: 14px; font-weight: 400;"></span></div>
             <div class="nk-text">
                 <span class="nk-host" id="nk-host"></span> wants to:
             </div>
@@ -196,10 +196,14 @@ function getHumanPermission(kind) {
     }
 }
 
-function showPermissionSheet(host, kind) {
+function showPermissionSheet(host, kind, queuePosition, queueTotal) {
     createPermissionSheet();
     permissionSheet.querySelector('#nk-host').textContent = host;
     permissionSheet.querySelector('#nk-permission').textContent = getHumanPermission(kind);
+    const queueEl = permissionSheet.querySelector('#nk-queue');
+    if (queueEl) {
+        queueEl.textContent = queueTotal > 1 ? `(${queuePosition} of ${queueTotal})` : '';
+    }
     permissionSheet.classList.add('active');
 
     return new Promise(resolve => {
@@ -210,7 +214,7 @@ function showPermissionSheet(host, kind) {
 // Listen for permission requests from background
 api.runtime.onMessage.addListener((message, sender, sendResponse) => {
     if (message.kind === 'showPermissionSheet') {
-        showPermissionSheet(message.host, message.permissionKind).then(result => {
+        showPermissionSheet(message.host, message.permissionKind, message.queuePosition, message.queueTotal).then(result => {
             sendResponse(result);
         });
         return true; // Keep channel open for async response

src/permission/permission.html

@@ -98,7 +98,7 @@
     <body>
         <div class="permission-card">
             <h1 class="permission-title text-center">
-                Permission Requested
+                Permission Requested <span id="perm-queue" style="color: #8f908a; font-size: 14px; font-weight: 400;"></span>
             </h1>
 
             <p class="permission-text text-center">

src/permission/permission.js

@@ -8,6 +8,8 @@ const state = {
     event: null,
     remember: false,
     profileType: 'local',
+    queuePosition: 0,
+    queueTotal: 0,
 };
 
 function getHumanPermission(perm) {
@@ -43,6 +45,11 @@ function render() {
     if (hostEl) hostEl.textContent = state.host;
     if (permEl) permEl.textContent = getHumanPermission(state.permission);
 
+    const queueEl = document.getElementById('perm-queue');
+    if (queueEl) {
+        queueEl.textContent = state.queueTotal > 1 ? `(${state.queuePosition} of ${state.queueTotal})` : '';
+    }
+
     if (bunkerNotice) {
         bunkerNotice.style.display = state.profileType === 'bunker' ? 'block' : 'none';
     }
@@ -117,6 +124,8 @@ async function init() {
     state.permission = qs.get('kind');
     state.key = qs.get('uuid');
     state.event = JSON.parse(qs.get('payload'));
+    state.queuePosition = parseInt(qs.get('queuePosition')) || 0;
+    state.queueTotal = parseInt(qs.get('queueTotal')) || 0;
 
     state.profileType = await api.runtime.sendMessage({
         kind: 'getProfileType',