From 470de704d57138ee0bc2ff15b994a825517f629d Mon Sep 17 00:00:00 2001
From: Dan Brown <danbrown@gmail.com>
Date: Wed, 27 May 2026 10:58:15 +0200
Subject: [PATCH 01/20] Fix URL open in PWA mode by using noopener,noreferrer

window.open from a PWA standalone window was opening URLs in a new
standalone PWA context, causing scheme-less URLs like "paperlesspost.com"
to resolve relative to the PWA base path instead of opening in the
browser. Adding 'noopener,noreferrer' severs the opener relationship so
Chrome treats the new window as an independent browser tab.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 pwa/src/lib/Dashboard.svelte  | 2 +-
 pwa/src/lib/RecordList.svelte | 2 +-
 pwa/src/lib/RecordRead.svelte | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/pwa/src/lib/Dashboard.svelte b/pwa/src/lib/Dashboard.svelte
index a522118..c2c3ee7 100644
--- a/pwa/src/lib/Dashboard.svelte
+++ b/pwa/src/lib/Dashboard.svelte
@@ -1524,7 +1524,7 @@
     if (e.ctrlKey && e.key === 'Enter') { e.preventDefault(); startEdit(); return }
     if (e.key === 'Enter' && !e.target.matches('button, a')) {
       e.preventDefault()
-      if (record.URL) window.open(absoluteUrl(record.URL), '_blank')
+      if (record.URL) window.open(absoluteUrl(record.URL), '_blank', 'noopener,noreferrer')
       return
     }
     if (e.ctrlKey && e.key === 'c') {
diff --git a/pwa/src/lib/RecordList.svelte b/pwa/src/lib/RecordList.svelte
index aaaf915..6cd2b35 100644
--- a/pwa/src/lib/RecordList.svelte
+++ b/pwa/src/lib/RecordList.svelte
@@ -471,7 +471,7 @@
       <button onclick={() => { handleCopy(contextMenu.rec.URL, contextMenu.uuid, 'URL'); closeMenu() }}>
         <span>Copy URL</span><span class="ctx-keys"><kbd>Ctrl</kbd><kbd>U</kbd></span>
       </button>
-      <button onclick={() => { window.open(absoluteUrl(contextMenu.rec.URL), '_blank'); closeMenu() }}>
+      <button onclick={() => { window.open(absoluteUrl(contextMenu.rec.URL), '_blank', 'noopener,noreferrer'); closeMenu() }}>
         <span>Visit URL</span><span class="ctx-keys"><kbd>↵</kbd></span>
       </button>
     {/if}
diff --git a/pwa/src/lib/RecordRead.svelte b/pwa/src/lib/RecordRead.svelte
index e26354a..bcbea50 100644
--- a/pwa/src/lib/RecordRead.svelte
+++ b/pwa/src/lib/RecordRead.svelte
@@ -470,7 +470,7 @@
           <!-- svelte-ignore a11y_no_static_element_interactions -->
           <!-- svelte-ignore a11y_click_events_have_key_events -->
           <div class="copy-row-actions" onclick={e => e.stopPropagation()}>
-            <a class="icon-btn-flat" href={absoluteUrl(record.URL)} target="_blank" rel="noreferrer" aria-label="Open URL" onclick={e => { e.preventDefault(); window.open(absoluteUrl(record.URL), '_blank') }}>
+            <a class="icon-btn-flat" href={absoluteUrl(record.URL)} target="_blank" rel="noreferrer" aria-label="Open URL" onclick={e => { e.preventDefault(); window.open(absoluteUrl(record.URL), '_blank', 'noopener,noreferrer') }}>
               <Icon name="external" size={18}/>
             </a>
             <button class="icon-btn-flat copy-btn" onclick={() => handleCopy(record.URL, 'URL')} aria-label="Copy URL">

From 15de22d563647ced7bc702b9f000772693cd2667 Mon Sep 17 00:00:00 2001
From: Dan Brown <danbrown@gmail.com>
Date: Wed, 27 May 2026 11:34:39 +0200
Subject: [PATCH 02/20] Fix Android PWA vaults opening read-only for Google
 Drive files
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Request readwrite permission explicitly in showOpenFilePicker and
requestPermission calls. On Android, createWritable() requires write
permission to be granted upfront — it cannot silently prompt the way
desktop Chrome does. Falls back to read permission if readwrite is
denied, preserving read-only vault support.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 pwa/src/lib/StartPage.svelte | 37 ++++++++++++++++++++++--------------
 1 file changed, 23 insertions(+), 14 deletions(-)

diff --git a/pwa/src/lib/StartPage.svelte b/pwa/src/lib/StartPage.svelte
index 42a3209..7ff73fb 100644
--- a/pwa/src/lib/StartPage.svelte
+++ b/pwa/src/lib/StartPage.svelte
@@ -68,6 +68,7 @@
     try {
       ;[fileHandle] = await window.showOpenFilePicker({
         types: [{ description: 'Password Safe', accept: { 'application/octet-stream': ['.psafe3', '.dat'] } }],
+        mode: 'readwrite',
       })
       mode = 'unlock'
       error = ''
@@ -127,10 +128,14 @@
         buf = await fallbackFile.arrayBuffer()
       } else {
         // requestPermission is a Chrome extension; guard for Firefox.
-        const perm = fileHandle.requestPermission
-          ? await fileHandle.requestPermission({ mode: 'read' })
-          : 'granted'
-        if (perm !== 'granted') { error = 'File access was denied.'; return }
+        // Request readwrite so createWritable() works on Android; fall back to read if denied.
+        if (fileHandle.requestPermission) {
+          let perm = await fileHandle.requestPermission({ mode: 'readwrite' })
+          if (perm !== 'granted') {
+            perm = await fileHandle.requestPermission({ mode: 'read' })
+            if (perm !== 'granted') { error = 'File access was denied.'; return }
+          }
+        }
         let file
         try { file = await fileHandle.getFile() } catch (e) {
           if (e.name === 'NotFoundError') { await handleFileMissing(); return }
@@ -167,13 +172,14 @@
       const fname = fileHandle?.name ?? fallbackFile?.name
 
       // 2. Request file permission (file handle path only — user activation requirement)
+      // Request readwrite so createWritable() works on Android; fall back to read if denied.
       if (fileHandle) {
-        const perm = fileHandle.requestPermission
-          ? await fileHandle.requestPermission({ mode: 'read' })
-          : 'granted'
-        if (perm !== 'granted') {
-          error = 'File access was denied.'
-          return
+        if (fileHandle.requestPermission) {
+          let perm = await fileHandle.requestPermission({ mode: 'readwrite' })
+          if (perm !== 'granted') {
+            perm = await fileHandle.requestPermission({ mode: 'read' })
+            if (perm !== 'granted') { error = 'File access was denied.'; return }
+          }
         }
       }
 
@@ -276,10 +282,13 @@
         const handle = cred.handle
         if (!handle) continue // no stored handle; user must manually re-link
         try {
-          const perm = handle.requestPermission
-            ? await handle.requestPermission({ mode: 'read' })
-            : 'granted'
-          if (perm !== 'granted') continue
+          if (handle.requestPermission) {
+            let perm = await handle.requestPermission({ mode: 'readwrite' })
+            if (perm !== 'granted') {
+              perm = await handle.requestPermission({ mode: 'read' })
+              if (perm !== 'granted') continue
+            }
+          }
           const vaultUuid = await loadVaultFile(handle, cred.masterPassword)
           if (vaultUuid !== cred.vaultUuid) { closeDatabase(vaultUuid); continue }
           const info  = getDatabaseInfo(vaultUuid)

From f8566f6fe5523d9645f7ead2e2c60d59866b6908 Mon Sep 17 00:00:00 2001
From: Dan Brown <danbrown@gmail.com>
Date: Wed, 27 May 2026 23:15:25 +0200
Subject: [PATCH 03/20] Fix three autofill security issues found in code review

- Remove legacy unauthenticated popup postMessage handler (hello/query
  via window.opener) that bypassed delegate verification entirely; the
  same-profile BC flow with ECDSA auth is the only supported path now
- Fix same-profile BC hello: import ECDH key from signed msg.ecdhSpki
  (SPKI) instead of unsigned msg.pubkey (JWK), closing the key-binding
  gap where an attacker could substitute their own ECDH key
- Fix cross-profile switchboard signatures: extend canonical signed
  payload from {url,nonce,ecdh,ts} to include msgType, uuid, vaultUuid,
  and query so a compromised relay cannot redirect operations or swap
  target records after signature verification

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 pwa/public/autofill.html         |   9 +-
 pwa/src/lib/Dashboard.svelte     |  96 +----------
 pwa/tests/autofill_popup.spec.ts | 285 +------------------------------
 3 files changed, 14 insertions(+), 376 deletions(-)

diff --git a/pwa/public/autofill.html b/pwa/public/autofill.html
index 778496b..90e667f 100644
--- a/pwa/public/autofill.html
+++ b/pwa/public/autofill.html
@@ -466,7 +466,7 @@
       setupWsTransport()
 
       var ts = Date.now()
-      var signedPayload = JSON.stringify({ url: currentUrl, nonce: pingNonce, ecdh: cpEcdhSpkiB64, ts: ts })
+      var signedPayload = JSON.stringify({ url: currentUrl, nonce: pingNonce, ecdh: cpEcdhSpkiB64, ts: ts, msgType: '', uuid: '', vaultUuid: '', query: '' })
       var sigBytes = await crypto.subtle.sign(
         { name: 'ECDSA', hash: 'SHA-256' }, cpSigningKey, new TextEncoder().encode(signedPayload)
       )
@@ -592,7 +592,8 @@
   async function cpSignAndSend(msgType, extraFields) {
     var ts = Date.now()
     var reqNonce = crypto.randomUUID()
-    var signedPayload = JSON.stringify({ url: extraFields.url || '', nonce: reqNonce, ecdh: cpEcdhSpkiB64, ts: ts })
+    var signedPayload = JSON.stringify({ url: extraFields.url || '', nonce: reqNonce, ecdh: cpEcdhSpkiB64, ts: ts,
+      msgType: msgType, uuid: extraFields.uuid || '', vaultUuid: extraFields.vaultUuid || '', query: extraFields.query || '' })
     var sigBytes = await crypto.subtle.sign(
       { name: 'ECDSA', hash: 'SHA-256' }, cpSigningKey, new TextEncoder().encode(signedPayload)
     )
@@ -622,7 +623,7 @@
     if (!cpSigningKey || !cpPubSpkiB64) return
     var nonce = crypto.randomUUID()
     var ts = Date.now()
-    var payload = JSON.stringify({ url: '', nonce: nonce, ecdh: '', ts: ts })
+    var payload = JSON.stringify({ url: '', nonce: nonce, ecdh: '', ts: ts, msgType: 'fill-done', uuid: '', vaultUuid: '', query: '' })
     crypto.subtle.sign(
       { name: 'ECDSA', hash: 'SHA-256' }, cpSigningKey, new TextEncoder().encode(payload)
     ).then(function(sigBytes) {
@@ -644,7 +645,7 @@
     if (!cpSigningKey || !cpPubSpkiB64) return
     var saveNonce = crypto.randomUUID()
     var ts = Date.now()
-    var payload = JSON.stringify({ url: saveUrl, nonce: saveNonce, ecdh: '', ts: ts })
+    var payload = JSON.stringify({ url: saveUrl, nonce: saveNonce, ecdh: '', ts: ts, msgType: 'save-url', uuid: uuid || '', vaultUuid: vaultUuid || '', query: '' })
     crypto.subtle.sign(
       { name: 'ECDSA', hash: 'SHA-256' }, cpSigningKey, new TextEncoder().encode(payload)
     ).then(function(sigBytes) {
diff --git a/pwa/src/lib/Dashboard.svelte b/pwa/src/lib/Dashboard.svelte
index c2c3ee7..0c5bdd9 100644
--- a/pwa/src/lib/Dashboard.svelte
+++ b/pwa/src/lib/Dashboard.svelte
@@ -410,7 +410,8 @@
         if (age > 60000 || age < -5000) return
         const spkiBytes = Uint8Array.from(atob(msg.pub), c => c.charCodeAt(0))
         const sigBytes  = Uint8Array.from(atob(msg.sig), c => c.charCodeAt(0))
-        const message   = new TextEncoder().encode(JSON.stringify({ url: msg.url, nonce: msg.replyTo, ecdh: msg.ecdh, ts: msg.ts }))
+        const message   = new TextEncoder().encode(JSON.stringify({ url: msg.url || '', nonce: msg.replyTo, ecdh: msg.ecdh || '', ts: msg.ts,
+          msgType: msg.msgType || '', uuid: msg.uuid || '', vaultUuid: msg.vaultUuid || '', query: msg.query || '' }))
         const verified  = await verifyDelegate(dbKey, spkiBytes, message, sigBytes)
         if (!verified) return
         if (msg.msgType === 'fill-done') {
@@ -512,96 +513,6 @@
     return ''
   }
 
-  $effect(() => {
-    if (!isPopup) return
-
-    let sessionKey = null  // AES-256-GCM key derived from ECDH; null until hello exchange
-    let helloInProgress = false  // guard against duplicate hellos overwriting the session key
-
-    async function handleMessage(event) {
-      if (!event.source) return
-      const msg = event.data
-      if (!msg?.type) return
-
-      if (msg.type === 'hello') {
-        // Ignore a second hello while we're still processing the first one.
-        // Without this guard, a retry from the bookmarklet could overwrite sessionKey
-        // after the bookmarklet has already derived its key from the first response.
-        if (helloInProgress) return
-        helloInProgress = true
-        try {
-          const openerPub = await crypto.subtle.importKey(
-            'jwk', msg.pubkey,
-            { name: 'ECDH', namedCurve: 'P-256' }, false, []
-          )
-          const pair = await crypto.subtle.generateKey(
-            { name: 'ECDH', namedCurve: 'P-256' }, false, ['deriveKey']
-          )
-          sessionKey = await crypto.subtle.deriveKey(
-            { name: 'ECDH', public: openerPub },
-            pair.privateKey,
-            { name: 'AES-GCM', length: 256 }, false, ['encrypt']
-          )
-          const pubJwk = await crypto.subtle.exportKey('jwk', pair.publicKey)
-          event.source.postMessage({ type: 'hello', pubkey: pubJwk }, event.origin)
-        } catch {
-          sessionKey = null
-          event.source.postMessage({ type: 'error', message: 'Key exchange failed' }, event.origin)
-        } finally {
-          helloInProgress = false
-        }
-        return
-      }
-
-      if (msg.type === 'query') {
-        if (!sessionKey) {
-          event.source.postMessage(
-            { type: 'error', message: 'No secure session — click the bookmarklet again' },
-            event.origin
-          )
-          return
-        }
-
-        // URL search: return list of candidate records for the bookmarklet picker.
-        if (msg.url !== undefined) {
-          event.source.postMessage({ type: 'records', records: autofillFindRecords(msg.url) }, event.origin)
-          return
-        }
-
-        // Targeted fetch: return encrypted credentials for the specified (or selected) record.
-        const uuid = msg.uuid || selectedUUID
-        const vaultUuid = msg.uuid ? (msg.vaultUuid || null) : selectedVaultUuid
-        if (!uuid) {
-          event.source.postMessage({ type: 'error', message: 'Open a record in Portpass first' }, event.origin)
-          return
-        }
-        try {
-          const result = await autofillEncryptRecord(sessionKey, uuid, vaultUuid)
-          event.source.postMessage({ type: 'record', ...result }, event.origin)
-        } catch (e) {
-          event.source.postMessage({ type: 'error', message: e.message }, event.origin)
-        }
-        return
-      }
-
-      if (msg.type === 'save-url') {
-        if (!sessionKey) {
-          event.source.postMessage({ type: 'error', message: 'No secure session' }, event.origin)
-          return
-        }
-        try {
-          await autofillSaveURL(msg.uuid, msg.vaultUuid || null, msg.url)
-          event.source.postMessage({ type: 'url-saved' }, event.origin)
-        } catch (e) {
-          event.source.postMessage({ type: 'error', message: e.message }, event.origin)
-        }
-      }
-    }
-
-    window.addEventListener('message', handleMessage)
-    return () => { window.removeEventListener('message', handleMessage); sessionKey = null }
-  })
-
   // BroadcastChannel handler — lets the autofill popup (opened by the bookmarklet) reach this
   // unlocked tab across browsing-context-group boundaries. Only the main (non-popup) tab
   // handles these messages so the popup's own dashboard (when unlocked directly) is unaffected.
@@ -649,8 +560,9 @@
             return
           }
           bcSessionDelegateId = verified.id
+          const ecdhSpkiBytes = Uint8Array.from(atob(msg.ecdhSpki), c => c.charCodeAt(0))
           const openerPub = await crypto.subtle.importKey(
-            'jwk', msg.pubkey, { name: 'ECDH', namedCurve: 'P-256' }, false, []
+            'spki', ecdhSpkiBytes, { name: 'ECDH', namedCurve: 'P-256' }, false, []
           )
           const pair = await crypto.subtle.generateKey(
             { name: 'ECDH', namedCurve: 'P-256' }, false, ['deriveKey']
diff --git a/pwa/tests/autofill_popup.spec.ts b/pwa/tests/autofill_popup.spec.ts
index 2ed20ba..60c1a9e 100644
--- a/pwa/tests/autofill_popup.spec.ts
+++ b/pwa/tests/autofill_popup.spec.ts
@@ -1,7 +1,6 @@
 import { test, expect, BrowserContext, Page } from '@playwright/test'
 
 const PORTPASS_URL    = 'http://localhost:5173/portpass/'
-const PORTPASS_ORIGIN = 'http://localhost:5173'
 
 // Opens a Portpass popup from an opener page that is at the Portpass origin but does NOT
 // run the Portpass app (which would set window.name = 'portpass_autofill' and cause
@@ -24,281 +23,6 @@ async function openPortpassPopup(context: BrowserContext): Promise<{ opener: Pag
   return { opener, popup }
 }
 
-// Creates a new vault in the popup.
-async function createVaultInPopup(popup: Page) {
-  await popup.getByRole('button', { name: 'Create one' }).click()
-  await popup.getByPlaceholder('Master password').fill('testpassword')
-  await popup.getByRole('button', { name: 'Create vault' }).click()
-  await expect(popup.getByPlaceholder('Search vault')).toBeVisible({ timeout: 10000 })
-}
-
-// Performs the ECDH key exchange from the opener side and returns the derived AES
-// CryptoKey so subsequent calls can decrypt record responses.
-async function doKeyExchange(opener: Page): Promise<void> {
-  // The CryptoKey is stored in window._autofillSessionKey on the opener page.
-  await opener.evaluate(async (origin) => {
-    const win = (window as any).portpassWin
-
-    const pair = await crypto.subtle.generateKey(
-      { name: 'ECDH', namedCurve: 'P-256' }, true, ['deriveKey']
-    )
-    const pubJwk = await crypto.subtle.exportKey('jwk', pair.publicKey)
-
-    const response = await new Promise<any>((resolve) => {
-      window.addEventListener('message', (e) => {
-        if (e.source === win && e.data?.type) resolve(e.data)
-      }, { once: true })
-      win.postMessage({ type: 'hello', pubkey: pubJwk }, origin)
-    })
-
-    if (response.type !== 'hello') {
-      ;(window as any)._autofillError = response
-      return
-    }
-
-    const portpassPub = await crypto.subtle.importKey(
-      'jwk', response.pubkey,
-      { name: 'ECDH', namedCurve: 'P-256' }, false, []
-    )
-    ;(window as any)._autofillSessionKey = await crypto.subtle.deriveKey(
-      { name: 'ECDH', public: portpassPub },
-      pair.privateKey,
-      { name: 'AES-GCM', length: 256 }, false, ['decrypt']
-    )
-  }, PORTPASS_ORIGIN)
-}
-
-// Sends a query, then decrypts the record response using the session key stored in
-// window._autofillSessionKey. Returns the full response with decrypted fields.
-async function sendQuery(opener: Page): Promise<any> {
-  return opener.evaluate(async (origin) => {
-    const win = (window as any).portpassWin
-    const sessionKey = (window as any)._autofillSessionKey
-
-    const raw = await new Promise<any>((resolve) => {
-      window.addEventListener('message', (e) => {
-        if (e.source === win && e.data?.type) resolve(e.data)
-      }, { once: true })
-      win.postMessage({ type: 'query' }, origin)
-      setTimeout(() => resolve({ timeout: true }), 5000)
-    })
-
-    if (raw.type !== 'record' || !sessionKey) return raw
-
-    // Decrypt the fields blob.
-    const iv = Uint8Array.from(atob(raw.iv), c => c.charCodeAt(0))
-    const ct = Uint8Array.from(atob(raw.ciphertext), c => c.charCodeAt(0))
-    const pt = await crypto.subtle.decrypt({ name: 'AES-GCM', iv }, sessionKey, ct)
-    const fields = JSON.parse(new TextDecoder().decode(pt))
-    return { ...raw, fields }
-  }, PORTPASS_ORIGIN)
-}
-
-// Sends a query WITHOUT a prior key exchange (raw, no decryption step).
-async function sendRawQuery(opener: Page): Promise<any> {
-  return opener.evaluate(async (origin) => {
-    const win = (window as any).portpassWin
-    return new Promise((resolve) => {
-      window.addEventListener('message', (e) => {
-        if (e.source === win && e.data?.type) resolve(e.data)
-      }, { once: true })
-      win.postMessage({ type: 'query' }, origin)
-      setTimeout(() => resolve({ timeout: true }), 5000)
-    })
-  }, PORTPASS_ORIGIN)
-}
-
-test.describe('Autofill popup mode — query protocol', () => {
-
-  test.beforeEach(async ({ context }) => {
-    await context.addInitScript(() => {
-      if ((window as any).PublicKeyCredential) {
-        (window.PublicKeyCredential as any).isUserVerifyingPlatformAuthenticatorAvailable = async () => false
-      }
-      ;(window as any).showSaveFilePicker = async () => ({
-        name: 'new.psafe3',
-        createWritable: async () => ({ write: async () => {}, close: async () => {}, abort: async () => {} }),
-      })
-    })
-  })
-
-  test('hello while vault is locked returns error', async ({ context }) => {
-    const { opener, popup } = await openPortpassPopup(context)
-    await popup.waitForSelector('button:text("Open vault file"), button:text("Create one")', { timeout: 10000 })
-
-    await opener.evaluate(async (origin) => {
-      const win = (window as any).portpassWin
-      const pair = await crypto.subtle.generateKey({ name: 'ECDH', namedCurve: 'P-256' }, true, ['deriveKey'])
-      const pubJwk = await crypto.subtle.exportKey('jwk', pair.publicKey)
-      const response = await new Promise<any>((resolve) => {
-        window.addEventListener('message', (e) => { if (e.source === win) resolve(e.data) }, { once: true })
-        win.postMessage({ type: 'hello', pubkey: pubJwk }, origin)
-      })
-      ;(window as any)._helloResponse = response
-    }, PORTPASS_ORIGIN)
-
-    const resp = await opener.evaluate(() => (window as any)._helloResponse)
-    expect(resp.type).toBe('error')
-    expect(resp.message).toContain('Vault is locked')
-  })
-
-  test('query without prior key exchange returns error', async ({ context }) => {
-    const { opener, popup } = await openPortpassPopup(context)
-    await createVaultInPopup(popup)
-
-    const response = await sendRawQuery(opener)
-    expect(response.type).toBe('error')
-    expect(response.message).toContain('No secure session')
-  })
-
-  test('unlocked vault with no record selected returns error after key exchange', async ({ context }) => {
-    const { opener, popup } = await openPortpassPopup(context)
-    await createVaultInPopup(popup)
-    await doKeyExchange(opener)
-
-    const response = await sendQuery(opener)
-    expect(response.type).toBe('error')
-    expect(response.message).toContain('Open a record')
-  })
-
-  test('record without autotype uses default sequence \\u\\t\\p\\n', async ({ context }) => {
-    const { opener, popup } = await openPortpassPopup(context)
-    await createVaultInPopup(popup)
-
-    await popup.getByRole('button', { name: 'New', exact: true }).click()
-    await popup.getByPlaceholder('e.g. Bank of America').fill('No Autotype Site')
-    await popup.locator('input.mono').first().fill('secret')
-    // Leave autotype empty — bookmarklet should default to \u\t\p\n.
-    await popup.getByRole('button', { name: 'Save' }).click()
-    await popup.locator('.record-row', { hasText: 'No Autotype Site' }).click()
-
-    await doKeyExchange(opener)
-    const response = await sendQuery(opener)
-    expect(response.type).toBe('record')
-    expect(response.autotype).toBe('\\u\\t\\p\\n')
-  })
-
-  test('record response contains iv and ciphertext, not plaintext fields', async ({ context }) => {
-    const { opener, popup } = await openPortpassPopup(context)
-    await createVaultInPopup(popup)
-
-    await popup.getByRole('button', { name: 'New', exact: true }).click()
-    await popup.getByPlaceholder('e.g. Bank of America').fill('My Bank')
-    await popup.locator('input.mono').first().fill('hunter2')
-    await popup.locator('input.input').nth(2).fill('alice')
-    await popup.locator('.mode-toggle').getByText('Raw').click()
-    await popup.locator('.autotype-input').fill('\\u\\t\\p\\n')
-    await popup.getByRole('button', { name: 'Save' }).click()
-    await popup.locator('.record-row', { hasText: 'My Bank' }).click()
-
-    await doKeyExchange(opener)
-
-    // Get the raw (not-decrypted) response to verify ciphertext is present.
-    const raw = await opener.evaluate(async (origin) => {
-      const win = (window as any).portpassWin
-      return new Promise<any>((resolve) => {
-        window.addEventListener('message', (e) => {
-          if (e.source === win && e.data?.type) resolve(e.data)
-        }, { once: true })
-        win.postMessage({ type: 'query' }, origin)
-        setTimeout(() => resolve({ timeout: true }), 5000)
-      })
-    }, PORTPASS_ORIGIN)
-
-    expect(raw.type).toBe('record')
-    expect(raw.title).toBe('My Bank')
-    expect(raw.autotype).toBe('\\u\\t\\p\\n')
-    expect(raw.iv).toBeDefined()
-    expect(raw.ciphertext).toBeDefined()
-    // No plaintext fields in transit
-    expect(raw.fields).toBeUndefined()
-  })
-
-  test('decrypted response contains correct credentials', async ({ context }) => {
-    const { opener, popup } = await openPortpassPopup(context)
-    await createVaultInPopup(popup)
-
-    await popup.getByRole('button', { name: 'New', exact: true }).click()
-    await popup.getByPlaceholder('e.g. Bank of America').fill('My Bank')
-    await popup.locator('input.mono').first().fill('hunter2')
-    await popup.locator('input.input').nth(2).fill('alice')
-    await popup.locator('.mode-toggle').getByText('Raw').click()
-    await popup.locator('.autotype-input').fill('\\u\\t\\p\\n')
-    await popup.getByRole('button', { name: 'Save' }).click()
-    await popup.locator('.record-row', { hasText: 'My Bank' }).click()
-
-    await doKeyExchange(opener)
-    const response = await sendQuery(opener)
-
-    expect(response.type).toBe('record')
-    expect(response.title).toBe('My Bank')
-    expect(response.autotype).toBe('\\u\\t\\p\\n')
-    expect(response.fields.u).toBe('alice')
-    expect(response.fields.p).toBe('hunter2')
-  })
-
-  test('two sessions derive independent keys', async ({ context }) => {
-    const { opener, popup } = await openPortpassPopup(context)
-    await createVaultInPopup(popup)
-
-    await popup.getByRole('button', { name: 'New', exact: true }).click()
-    await popup.getByPlaceholder('e.g. Bank of America').fill('Site')
-    await popup.locator('input.mono').first().fill('pass')
-    await popup.locator('.mode-toggle').getByText('Raw').click()
-    await popup.locator('.autotype-input').fill('\\u\\p')
-    await popup.getByRole('button', { name: 'Save' }).click()
-    await popup.locator('.record-row', { hasText: 'Site' }).click()
-
-    // First session.
-    await doKeyExchange(opener)
-    const r1 = await opener.evaluate(async (origin) => {
-      const win = (window as any).portpassWin
-      return new Promise<any>((resolve) => {
-        window.addEventListener('message', (e) => { if (e.source === win && e.data?.type) resolve(e.data) }, { once: true })
-        win.postMessage({ type: 'query' }, origin)
-      })
-    }, PORTPASS_ORIGIN)
-
-    // Second session — new hello, new key pair on both sides.
-    await doKeyExchange(opener)
-    const r2 = await opener.evaluate(async (origin) => {
-      const win = (window as any).portpassWin
-      return new Promise<any>((resolve) => {
-        window.addEventListener('message', (e) => { if (e.source === win && e.data?.type) resolve(e.data) }, { once: true })
-        win.postMessage({ type: 'query' }, origin)
-      })
-    }, PORTPASS_ORIGIN)
-
-    // IVs are random per encryption — very high probability they differ.
-    expect(r1.iv).not.toBe(r2.iv)
-  })
-
-  test('switching records updates the decrypted query response', async ({ context }) => {
-    const { opener, popup } = await openPortpassPopup(context)
-    await createVaultInPopup(popup)
-
-    for (const title of ['Site A', 'Site B']) {
-      await popup.getByRole('button', { name: 'New', exact: true }).click()
-      await popup.getByPlaceholder('e.g. Bank of America').fill(title)
-      await popup.locator('input.mono').first().fill('pass')
-      await popup.locator('.mode-toggle').getByText('Raw').click()
-      await popup.locator('.autotype-input').fill('\\u\\p')
-      await popup.getByRole('button', { name: 'Save' }).click()
-    }
-
-    await doKeyExchange(opener)
-
-    await popup.locator('.record-row', { hasText: 'Site A' }).click()
-    const responseA = await sendQuery(opener)
-    expect(responseA.title).toBe('Site A')
-
-    await popup.locator('.record-row', { hasText: 'Site B' }).click()
-    const responseB = await sendQuery(opener)
-    expect(responseB.title).toBe('Site B')
-  })
-
-})
-
 test.describe('Autofill popup mode — UI', () => {
 
   test('multi-instance warning is suppressed when opened as popup', async ({ context }) => {
@@ -324,7 +48,8 @@ test.describe('Autofill popup mode — UI', () => {
 
 })
 
-// NOTE: The autofill bridge mode tests that tested App.svelte's tryBridge() have been removed.
-// That path (Portpass opened as a popup bridging postMessage↔BC) is no longer exercised
-// by the bookmarklet — autofill.html now handles the same-profile BC bridging directly and
-// authenticates with ECDSA. The autofill.html same-profile flow is covered by bookmarklet.spec.ts.
+// NOTE: The autofill popup query protocol (hello/query postMessage) has been removed.
+// It was a legacy direct-popup path not exercised by real bookmarklets that allowed any
+// opener page to bypass delegate authentication. The delegate-authenticated BroadcastChannel
+// flow (autofill.html + bookmarklet.spec.ts) is the only supported autofill path.
+// The autofill.html same-profile flow is covered by bookmarklet.spec.ts.

From 492f3235a74a095bdb226581eeb3970e4976217e Mon Sep 17 00:00:00 2001
From: Dan Brown <danbrown@gmail.com>
Date: Wed, 27 May 2026 23:20:41 +0200
Subject: [PATCH 04/20] Fix renaming a withheld sensitive custom field silently
 dropping its value

Track OriginalName in JS custom field state and use it in Go's lookup so
a name change doesn't break the match against the stored field value.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 cmd/wasm/main.go              | 13 +++++++++----
 pwa/src/lib/RecordEdit.svelte |  2 +-
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/cmd/wasm/main.go b/cmd/wasm/main.go
index f78fb86..2dd7e26 100644
--- a/cmd/wasm/main.go
+++ b/cmd/wasm/main.go
@@ -333,9 +333,10 @@ func updateRecordFields(this js.Value, args []js.Value) interface{} {
 			} else {
 				// Use *string for Value so JSON null (withheld) can be distinguished from "" (clear).
 				type cfInput struct {
-					Name      string  `json:"Name"`
-					Value     *string `json:"Value"`
-					Sensitive bool    `json:"Sensitive"`
+					Name         string  `json:"Name"`
+					Value        *string `json:"Value"`
+					Sensitive    bool    `json:"Sensitive"`
+					OriginalName string  `json:"OriginalName,omitempty"`
 				}
 				var inputs []cfInput
 				if err := json.Unmarshal([]byte(value), &inputs); err != nil {
@@ -350,8 +351,12 @@ func updateRecordFields(this js.Value, args []js.Value) interface{} {
 					if inp.Value != nil {
 						cfs[i].Value = *inp.Value
 					}
+					lookupName := inp.Name
+					if inp.OriginalName != "" {
+						lookupName = inp.OriginalName
+					}
 					for _, ex := range rec.CustomFields {
-						if ex.Name == inp.Name {
+						if ex.Name == lookupName {
 							if inp.Value == nil {
 								cfs[i].Value = ex.Value
 							}
diff --git a/pwa/src/lib/RecordEdit.svelte b/pwa/src/lib/RecordEdit.svelte
index 97cb1dc..2d60dda 100644
--- a/pwa/src/lib/RecordEdit.svelte
+++ b/pwa/src/lib/RecordEdit.svelte
@@ -51,7 +51,7 @@
   let totpPeriod   = $state(untrack(() => record?.TOTPTimeStep || 30))
 
   // Custom fields — independent editable copy of initial prop value (first 9 only; overflow preserved on save)
-  let customFields  = $state(untrack(() => (record?.CustomFields ?? []).slice(0, 9).map(cf => ({ Name: cf.Name, Value: cf.Value, Sensitive: !!cf.Sensitive }))))
+  let customFields  = $state(untrack(() => (record?.CustomFields ?? []).slice(0, 9).map(cf => ({ Name: cf.Name, Value: cf.Value, Sensitive: !!cf.Sensitive, OriginalName: cf.Name }))))
   let overflowFields = untrack(() => (record?.CustomFields ?? []).slice(9))
   let totpGearOpen = $state(false)
   let totpRevealed = $state(false)

From 604e3afa966d505d4e08c1ec40a78344db12d1c3 Mon Sep 17 00:00:00 2001
From: Dan Brown <danbrown@gmail.com>
Date: Wed, 27 May 2026 23:23:25 +0200
Subject: [PATCH 05/20] Fix out-of-range panic on truncated record data in
 unmarshalRecord

The short-header guard checked fieldStart > len(records) (needs 1 byte)
but the next two slices need 5 bytes. Match the fieldStart+5 guard
already used by UnmarshalHeader, and add a regression test.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 pwsafe/decrypt.go      |  2 +-
 pwsafe/decrypt_test.go | 10 ++++++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/pwsafe/decrypt.go b/pwsafe/decrypt.go
index 1b8f133..18d1a5f 100644
--- a/pwsafe/decrypt.go
+++ b/pwsafe/decrypt.go
@@ -181,7 +181,7 @@ func unmarshalRecord(records []byte, setter fieldSetter) (int, []byte, error) {
 	var rdata []byte
 	fieldStart := 0
 	for {
-		if fieldStart > len(records) {
+		if fieldStart+5 > len(records) {
 			return 0, rdata, errors.New("no END field found when UnMarshaling")
 		}
 		fieldLength := int(binary.LittleEndian.Uint32(records[fieldStart : fieldStart+4]))
diff --git a/pwsafe/decrypt_test.go b/pwsafe/decrypt_test.go
index 3b99991..8f10b7a 100644
--- a/pwsafe/decrypt_test.go
+++ b/pwsafe/decrypt_test.go
@@ -455,6 +455,16 @@ func TestEdgeCases_EmptyDBOperations(t *testing.T) {
 	assert.Empty(t, openedDbNewEmpty.Groups(), "Reloaded new empty DB Groups() should be empty")
 }
 
+func TestUnmarshalRecord_TruncatedInput(t *testing.T) {
+	// A field header is 5 bytes (4 length + 1 type). Inputs shorter than that must
+	// return an error rather than panicking with an out-of-range slice.
+	for length := 0; length < 5; length++ {
+		input := make([]byte, length)
+		_, _, err := unmarshalRecord(input, &Record{})
+		assert.NotNil(t, err, "expected error for %d-byte input", length)
+	}
+}
+
 func TestEdgeCases_ModifyDeleteAndNonExistent(t *testing.T) {
 	// Part 1: Modify then Delete
 	modifyDeletePath := "./test_dbs/modify_delete_test.dat"

From 9bdef9ca5e759a437edee64788e5998ea737996e Mon Sep 17 00:00:00 2001
From: Dan Brown <danbrown@gmail.com>
Date: Wed, 27 May 2026 23:37:50 +0200
Subject: [PATCH 06/20] Fix conflict check happening after WASM mutation on
 save/delete
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

For both saveRecord and deleteRecord, conflict detection was running
after WASM memory and UI state were already mutated. Cancelling the
dialog left the edit/delete silently stranded in WASM — a later save
would apply it on top of the external change the user chose not to
overwrite. Also fixes web+portpass intent URLs being replayable
indefinitely by enforcing the same 60s freshness window used in the
switchboard WebSocket path.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 pwa/src/App.svelte           |  1 +
 pwa/src/lib/Dashboard.svelte | 73 +++++++++++++++++++++++++-----------
 2 files changed, 53 insertions(+), 21 deletions(-)

diff --git a/pwa/src/App.svelte b/pwa/src/App.svelte
index 4042d0b..9486c7b 100644
--- a/pwa/src/App.svelte
+++ b/pwa/src/App.svelte
@@ -41,6 +41,7 @@
 
 
     const age = Date.now() - ts
+    if (age > 60000 || age < -5000) return
 
     const vaultUuid = get(selectedFile)?.uuid ?? ''
     if (!vaultUuid) return
diff --git a/pwa/src/lib/Dashboard.svelte b/pwa/src/lib/Dashboard.svelte
index 0c5bdd9..c162986 100644
--- a/pwa/src/lib/Dashboard.svelte
+++ b/pwa/src/lib/Dashboard.svelte
@@ -747,9 +747,53 @@
     }
   }
 
+  async function checkPrimaryConflict() {
+    const handle = $selectedFile?.handle
+    if (!handle || primaryModified === null) return true
+    try {
+      const file = await handle.getFile()
+      if (file.lastModified !== primaryModified) {
+        let realConflict = true
+        if (primaryHead) {
+          try {
+            const buf = await file.slice(72, 152).arrayBuffer()
+            realConflict = !sameHead(new Uint8Array(buf), primaryHead)
+          } catch {}
+        }
+        if (realConflict) {
+          if (!confirm('This vault was modified since it was loaded.\n\nSaving will overwrite those changes. Save anyway?')) return false
+          primaryModified = file.lastModified
+        }
+      }
+    } catch {}
+    return true
+  }
+
   async function saveRecord(draft) {
     try {
       const targetVault = isNew ? (newRecordVaultUuid || dbKey) : (selectedVaultUuid || dbKey)
+
+      if (targetVault === dbKey) {
+        if (!await checkPrimaryConflict()) return
+      } else {
+        const sv = get(secondaryVaults).find(v => v.uuid === targetVault)
+        if (sv?.handle && !sv.readonly && secondaryModified[targetVault] !== undefined) {
+          try {
+            const file = await sv.handle.getFile()
+            if (file.lastModified !== secondaryModified[targetVault]) {
+              let realConflict = true
+              if (secondaryHead[targetVault]) {
+                try {
+                  const buf = await file.slice(72, 152).arrayBuffer()
+                  realConflict = !sameHead(new Uint8Array(buf), secondaryHead[targetVault])
+                } catch {}
+              }
+              if (realConflict && !confirm(`"${sv.name || sv.filename}" was modified since it was loaded.\n\nSaving will overwrite those changes. Save anyway?`)) return
+            }
+          } catch {}
+        }
+      }
+
       const uuid = updateRecordFields(targetVault, isNew ? null : selectedUUID, draft)
       selectedUUID = uuid ?? selectedUUID
       record = getRecordData(targetVault, selectedUUID)
@@ -772,21 +816,6 @@
             : v
           ))
           selectedVaultUuid = targetVault
-          if (sv.handle && !sv.readonly && secondaryModified[targetVault] !== undefined) {
-            try {
-              const file = await sv.handle.getFile()
-              if (file.lastModified !== secondaryModified[targetVault]) {
-                let realConflict = true
-                if (secondaryHead[targetVault]) {
-                  try {
-                    const buf = await file.slice(72, 152).arrayBuffer()
-                    realConflict = !sameHead(new Uint8Array(buf), secondaryHead[targetVault])
-                  } catch {}
-                }
-                if (realConflict && !confirm(`"${sv.name || sv.filename}" was modified since it was loaded.\n\nSaving will overwrite those changes. Save anyway?`)) return
-              }
-            } catch {}
-          }
           const data = saveDatabase(targetVault)
           if (sv.handle && !sv.readonly) {
             const w = await sv.handle.createWritable()
@@ -827,19 +856,15 @@
 
       pendingDeleteTimer = setTimeout(async () => {
         try {
-          wasmDeleteRecord(targetVault, pendingDeleteUUID)
           if (targetVault === dbKey) {
+            if (!await checkPrimaryConflict()) return
+            wasmDeleteRecord(targetVault, pendingDeleteUUID)
             dbItems.set(getDatabaseData(dbKey))
             isDirty = true
             await saveFile(true)
           } else {
             const sv = get(secondaryVaults).find(v => v.uuid === targetVault)
             if (sv) {
-              const items = getDatabaseData(targetVault)
-              secondaryVaults.update(vs => vs.map(v => v.uuid === targetVault
-                ? { ...v, items: items.map(i => ({ ...i, vaultUuid: targetVault })) }
-                : v
-              ))
               if (sv.handle && !sv.readonly && secondaryModified[targetVault] !== undefined) {
                 try {
                   const file = await sv.handle.getFile()
@@ -855,6 +880,12 @@
                   }
                 } catch {}
               }
+              wasmDeleteRecord(targetVault, pendingDeleteUUID)
+              const items = getDatabaseData(targetVault)
+              secondaryVaults.update(vs => vs.map(v => v.uuid === targetVault
+                ? { ...v, items: items.map(i => ({ ...i, vaultUuid: targetVault })) }
+                : v
+              ))
               const data = saveDatabase(targetVault)
               if (sv.handle && !sv.readonly) {
                 const w = await sv.handle.createWritable()

From ed4efc8bd24d8ebd566059b747ae331857c4d88e Mon Sep 17 00:00:00 2001
From: Dan Brown <danbrown@gmail.com>
Date: Wed, 27 May 2026 23:40:33 +0200
Subject: [PATCH 07/20] Fix secondary vault name/notes edits not persisted to
 disk

saveSvAndBack() was updating WASM and the in-memory store but never
writing the vault file. Add onsvdbsave callback (parallel to ondbsave
for primary vault) that Dashboard implements via saveSecondaryDBFields,
which serialises and writes the secondary vault after a metadata save.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 pwa/src/lib/Dashboard.svelte  | 19 +++++++++++++++++++
 pwa/src/lib/VaultSheet.svelte |  3 ++-
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/pwa/src/lib/Dashboard.svelte b/pwa/src/lib/Dashboard.svelte
index c162986..7f1ee7f 100644
--- a/pwa/src/lib/Dashboard.svelte
+++ b/pwa/src/lib/Dashboard.svelte
@@ -1175,6 +1175,24 @@
     }
   }
 
+  async function saveSecondaryDBFields(uuid) {
+    const sv = get(secondaryVaults).find(v => v.uuid === uuid)
+    if (!sv || sv.readonly) return
+    try {
+      const data = saveDatabase(uuid)
+      if (sv.handle) {
+        const w = await sv.handle.createWritable()
+        await w.write(data)
+        await w.close()
+        secondaryHead[uuid] = data.slice(72, 152)
+        try { secondaryModified[uuid] = (await sv.handle.getFile()).lastModified } catch {}
+        showToast('Saved to ' + (sv.name || sv.filename), null, 2000)
+      }
+    } catch (e) {
+      if (e.name !== 'AbortError') showToast('Failed to save: ' + e.message)
+    }
+  }
+
   function closeVaultSheet() {
     if (vaultDirty) {
       if (!confirm('Discard unsaved changes?')) return
@@ -1624,6 +1642,7 @@
       onlocksecondary={lockSecondaryVault}
       onunlockadditional={unlockAdditionalVault}
       ondbsave={saveDBFields}
+      onsvdbsave={saveSecondaryDBFields}
       ondirtychange={(d) => vaultDirty = d}
       {ontheme}
       {onaccent}
diff --git a/pwa/src/lib/VaultSheet.svelte b/pwa/src/lib/VaultSheet.svelte
index d98511c..39fad65 100644
--- a/pwa/src/lib/VaultSheet.svelte
+++ b/pwa/src/lib/VaultSheet.svelte
@@ -8,7 +8,7 @@
   import { getDelegates, addDelegate, revokeDelegate, setSwitchboardUrl, setCrossProfileEnabled } from './delegates.js'
   import Icon from './Icon.svelte'
 
-  let { isDesktop, bookmarkletsSupported = false, onback, onlock, onlockall, onlocksecondary, onunlockadditional, ondbsave, ondirtychange, theme, accent, ontheme, onaccent } = $props()
+  let { isDesktop, bookmarkletsSupported = false, onback, onlock, onlockall, onlocksecondary, onunlockadditional, ondbsave, onsvdbsave, ondirtychange, theme, accent, ontheme, onaccent } = $props()
 
   // ── Biometric ──────────────────────────────────────────────────────────────
   let biometricAvailable = $state(false)
@@ -153,6 +153,7 @@
     svDetailOrigDesc = svDetailDraftDesc
     secondaryVaults.update(vs => vs.map(v => v.uuid === uuid ? { ...v, name: svDetailDraftName } : v))
     selectedDetailVault = null
+    onsvdbsave?.(uuid)
   }
 
   function saveAndBack() {

From 014bb36b72ea4213ac7845b05ddf3a05ad59952a Mon Sep 17 00:00:00 2001
From: Dan Brown <danbrown@gmail.com>
Date: Wed, 27 May 2026 23:43:09 +0200
Subject: [PATCH 08/20] Fix saveFile callers treating cancelled/failed saves as
 successful

saveFile() now returns true on an actual write or download, false on
conflict cancellation, AbortError, or write failure. saveDBFields()
guards clearing vaultDirty and showing "Vault info saved" on that
return value, so a conflict cancel or permission denial no longer
falsely marks the vault as clean.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 pwa/src/lib/Dashboard.svelte | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/pwa/src/lib/Dashboard.svelte b/pwa/src/lib/Dashboard.svelte
index 7f1ee7f..4aa57a7 100644
--- a/pwa/src/lib/Dashboard.svelte
+++ b/pwa/src/lib/Dashboard.svelte
@@ -965,7 +965,7 @@
           isDirty = false
           try { lastSave = getDatabaseInfo(dbKey)?.when ?? '' } catch {}
           if (!silent) showToast('Vault saved')
-          return
+          return true
         }
       }
 
@@ -980,7 +980,7 @@
                 realConflict = !sameHead(new Uint8Array(buf), primaryHead)
               } catch {}
             }
-            if (realConflict && !confirm('This vault was modified since it was loaded.\n\nSaving will overwrite those changes. Save anyway?')) return
+            if (realConflict && !confirm('This vault was modified since it was loaded.\n\nSaving will overwrite those changes. Save anyway?')) return false
           }
         } catch {}
       }
@@ -995,8 +995,10 @@
       isDirty = false
       try { lastSave = getDatabaseInfo(dbKey)?.when ?? '' } catch {}
       if (!silent) showToast('Vault saved')
+      return true
     } catch (e) {
       if (e.name !== 'AbortError') showToast('Save failed: ' + e.message)
+      return false
     }
   }
 
@@ -1166,10 +1168,11 @@
   async function saveDBFields(fields) {
     try {
       updateDBFields(dbKey, fields)
-      await saveFile(true)
-      dbName = fields.Name ?? dbName  // fields uses PascalCase for the WASM write API
-      vaultDirty = false
-      showToast('Vault info saved')
+      if (await saveFile(true)) {
+        dbName = fields.Name ?? dbName  // fields uses PascalCase for the WASM write API
+        vaultDirty = false
+        showToast('Vault info saved')
+      }
     } catch (e) {
       showToast('Failed to save vault info: ' + e.message)
     }

From a685d998e9120dae50ed8e68b51bb9d738a9c844 Mon Sep 17 00:00:00 2001
From: Dan Brown <danbrown@gmail.com>
Date: Wed, 27 May 2026 23:51:33 +0200
Subject: [PATCH 09/20] Fix clipboard write Promise not awaited in WASM copy
 paths

Go's writeToClipboard and copyTOTP called navigator.clipboard.writeText
and ignored the returned Promise, so clipboard rejections were silently
swallowed and the UI reported success regardless. Move the async write
to JS: WASM now returns the plaintext value as JSON, and the wasm.js
wrappers (copyFieldToClipboard, copyCustomFieldToClipboard, copyTOTP)
are now async and own the await so rejections propagate to callers.
Dashboard await-s all three call sites; tests updated to match the
new raw-WASM API contract.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 cmd/wasm/main.go                 | 24 ++++++++++++++--------
 pwa/src/lib/Dashboard.svelte     |  6 +++---
 pwa/src/wasm.js                  | 35 +++++++++++++++++++-------------
 pwa/tests/lazy_sensitive.spec.ts | 13 ++++++------
 4 files changed, 46 insertions(+), 32 deletions(-)

diff --git a/cmd/wasm/main.go b/cmd/wasm/main.go
index 2dd7e26..f7d1e0f 100644
--- a/cmd/wasm/main.go
+++ b/cmd/wasm/main.go
@@ -573,18 +573,23 @@ func standardFieldValue(rec pwsafe.Record, fieldname string) (string, error) {
 	}
 }
 
-// writeToClipboard writes value to the clipboard via the browser API.
-// Returns "{}" or a JSON hash object depending on returnHash.
+// writeToClipboard returns the value (and optionally its SHA-256 hash) as JSON.
+// The caller (JS) is responsible for writing to the clipboard so the async
+// Promise rejection can be observed and surfaced to the user.
 func writeToClipboard(value string, returnHash bool) string {
-	js.Global().Get("navigator").Get("clipboard").Call("writeText", value)
 	if !returnHash {
-		return `{}`
+		type Result struct {
+			Value string `json:"value"`
+		}
+		data, _ := json.Marshal(Result{Value: value})
+		return string(data)
 	}
 	h := sha256.Sum256([]byte(value))
 	type Result struct {
-		Hash string `json:"hash"`
+		Value string `json:"value"`
+		Hash  string `json:"hash"`
 	}
-	data, _ := json.Marshal(Result{Hash: hex.EncodeToString(h[:])})
+	data, _ := json.Marshal(Result{Value: value, Hash: hex.EncodeToString(h[:])})
 	return string(data)
 }
 
@@ -650,8 +655,11 @@ func copyTOTP(this js.Value, args []js.Value) interface{} {
 		t0 = rec.TOTPStartTime.Unix()
 	}
 	code, _ := pwsafe.ComputeTOTP(rec.TwoFactorKey, time.Now().Unix(), t0, rec.TOTPTimeStep, rec.TOTPLength)
-	js.Global().Get("navigator").Get("clipboard").Call("writeText", code)
-	return `{}`
+	type Result struct {
+		Value string `json:"value"`
+	}
+	data, _ := json.Marshal(Result{Value: code})
+	return string(data)
 }
 
 func getFieldValueFn(this js.Value, args []js.Value) interface{} {
diff --git a/pwa/src/lib/Dashboard.svelte b/pwa/src/lib/Dashboard.svelte
index 4aa57a7..bec09b5 100644
--- a/pwa/src/lib/Dashboard.svelte
+++ b/pwa/src/lib/Dashboard.svelte
@@ -1098,7 +1098,7 @@
 
   async function copyFieldViaWasm(recordVaultUuid, recordUuid, fieldname) {
     try {
-      const { hash } = copyFieldToClipboard(recordVaultUuid, recordUuid, fieldname, true)
+      const { hash } = await copyFieldToClipboard(recordVaultUuid, recordUuid, fieldname, true)
       const hashBytes = hexToBytes(hash)
       clipHash = hashBytes
       const token = ++sessionSerial
@@ -1114,7 +1114,7 @@
 
   async function copyCustomFieldViaWasm(recordVaultUuid, recordUuid, fieldname) {
     try {
-      const { hash } = copyCustomFieldToClipboard(recordVaultUuid, recordUuid, fieldname, true)
+      const { hash } = await copyCustomFieldToClipboard(recordVaultUuid, recordUuid, fieldname, true)
       const hashBytes = hexToBytes(hash)
       clipHash = hashBytes
       const token = ++sessionSerial
@@ -1139,7 +1139,7 @@
   async function copyTOTPForUUID(uuid) {
     try {
       const vaultUuid = vaultUuidForRecord(uuid)
-      wasmCopyTOTP(vaultUuid, uuid)
+      await wasmCopyTOTP(vaultUuid, uuid)
       if (clearTimer) { clearTimeout(clearTimer); clearTimer = null }
       clipHash = null
       const token = ++sessionSerial
diff --git a/pwa/src/wasm.js b/pwa/src/wasm.js
index b423b38..e25c2af 100644
--- a/pwa/src/wasm.js
+++ b/pwa/src/wasm.js
@@ -120,20 +120,27 @@ export function getTOTP(vaultUuid, recordUuid) {
 }
 
 
-// Copies a standard field value directly to clipboard from WASM.
-// returnHash=true causes a SHA-256 hash of the value to be returned (for clipboard drain).
-export function copyFieldToClipboard(vaultUuid, recordUuid, fieldname, returnHash = false) {
-    return parseOrThrow(window.copyFieldToClipboard(vaultUuid, recordUuid, fieldname, returnHash))
-}
-
-// Copies a custom field value directly to clipboard from WASM.
-export function copyCustomFieldToClipboard(vaultUuid, recordUuid, customFieldName, returnHash = false) {
-    return parseOrThrow(window.copyCustomFieldToClipboard(vaultUuid, recordUuid, customFieldName, returnHash))
-}
-
-// Copies the current TOTP code directly to clipboard from WASM. No drain needed (codes expire).
-export function copyTOTP(vaultUuid, recordUuid) {
-    return parseOrThrow(window.copyTOTP(vaultUuid, recordUuid))
+// Copies a standard field value to clipboard. WASM returns the plaintext; JS
+// owns the async write so clipboard rejection is observable by the caller.
+// returnHash=true includes a SHA-256 hash of the value for clipboard drain.
+export async function copyFieldToClipboard(vaultUuid, recordUuid, fieldname, returnHash = false) {
+    const result = parseOrThrow(window.copyFieldToClipboard(vaultUuid, recordUuid, fieldname, returnHash))
+    await navigator.clipboard.writeText(result.value)
+    return result
+}
+
+// Copies a custom field value to clipboard. Same async ownership model as copyFieldToClipboard.
+export async function copyCustomFieldToClipboard(vaultUuid, recordUuid, customFieldName, returnHash = false) {
+    const result = parseOrThrow(window.copyCustomFieldToClipboard(vaultUuid, recordUuid, customFieldName, returnHash))
+    await navigator.clipboard.writeText(result.value)
+    return result
+}
+
+// Copies the current TOTP code to clipboard. No drain needed (codes expire).
+export async function copyTOTP(vaultUuid, recordUuid) {
+    const result = parseOrThrow(window.copyTOTP(vaultUuid, recordUuid))
+    await navigator.clipboard.writeText(result.value)
+    return result
 }
 
 // Returns the plaintext value of a standard sensitive field for display only.
diff --git a/pwa/tests/lazy_sensitive.spec.ts b/pwa/tests/lazy_sensitive.spec.ts
index 1d17702..2ce3c99 100644
--- a/pwa/tests/lazy_sensitive.spec.ts
+++ b/pwa/tests/lazy_sensitive.spec.ts
@@ -62,25 +62,24 @@ test.describe('Lazy sensitive WASM functions', () => {
 
   // ── copyFieldToClipboard ─────────────────────────────────────────────────────
 
-  test('copyFieldToClipboard writes password to clipboard', async ({ page }) => {
+  test('copyFieldToClipboard returns the plaintext value', async ({ page }) => {
     const { vaultUuid, items } = await openVaultInEval(page)
     const recordUuid = items.find(i => i.title === 'three entry 1')?.uuid
-    await page.evaluate(
-      ([vu, ru]: string[]) => (window as any).copyFieldToClipboard(vu, ru, 'Password'),
+    const result = await page.evaluate(
+      ([vu, ru]: string[]) => JSON.parse((window as any).copyFieldToClipboard(vu, ru, 'Password')),
       [vaultUuid, recordUuid]
     )
-    const clip = await page.evaluate(() => navigator.clipboard.readText())
-    expect(clip).toBe('three1!@$%^&*()')
+    expect(result.value).toBe('three1!@$%^&*()')
   })
 
-  test('copyFieldToClipboard returns {} without returnHash', async ({ page }) => {
+  test('copyFieldToClipboard returns value without hash by default', async ({ page }) => {
     const { vaultUuid, items } = await openVaultInEval(page)
     const recordUuid = items.find(i => i.title === 'three entry 1')?.uuid
     const result = await page.evaluate(
       ([vu, ru]: string[]) => JSON.parse((window as any).copyFieldToClipboard(vu, ru, 'Password')),
       [vaultUuid, recordUuid]
     )
-    expect(result).toEqual({})
+    expect(result.hash).toBeUndefined()
   })
 
   test('copyFieldToClipboard returns hash when requested', async ({ page }) => {

From 72c1693e0cb393116a4b4bb6bfc015dd1ba28690 Mon Sep 17 00:00:00 2001
From: Dan Brown <danbrown@gmail.com>
Date: Wed, 27 May 2026 23:53:34 +0200
Subject: [PATCH 10/20] Add length checks for all fixed-size fields in header
 and record parsers

Five timestamp fields (headerLastSave, recordCreateTime, recordAccessTime,
recordPasswordExpiry, recordModTime) called binary.LittleEndian.Uint32
without first checking len(data) >= 4, allowing a valid-password
corrupted vault to panic rather than returning a clean error. Guards
now match the pattern already used for Version, UUID, DoubleClickAction,
ProtectedEntry, and PasswordExpiryInterval.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 pwsafe/header.go |  3 +++
 pwsafe/record.go | 12 ++++++++++++
 2 files changed, 15 insertions(+)

diff --git a/pwsafe/header.go b/pwsafe/header.go
index b5ed92a..72357cb 100644
--- a/pwsafe/header.go
+++ b/pwsafe/header.go
@@ -78,6 +78,9 @@ func (h *header) setField(id byte, data []byte) error {
 	case headerTree:
 		h.Tree = string(data)
 	case headerLastSave:
+		if len(data) != 4 {
+			return fmt.Errorf("invalid length for LastSave: %d", len(data))
+		}
 		h.LastSave = time.Unix(int64(binary.LittleEndian.Uint32(data)), 0)
 	case headerLastSaveBy:
 		h.LastSaveBy = data
diff --git a/pwsafe/record.go b/pwsafe/record.go
index a055773..891bff3 100644
--- a/pwsafe/record.go
+++ b/pwsafe/record.go
@@ -117,14 +117,26 @@ func (r *Record) setField(id byte, data []byte) error {
 	case recordPassword:
 		r.Password = string(data)
 	case recordCreateTime:
+		if len(data) != 4 {
+			return fmt.Errorf("invalid length for CreateTime: %d", len(data))
+		}
 		r.CreateTime = time.Unix(int64(binary.LittleEndian.Uint32(data)), 0)
 	case recordPasswordModTime:
 		r.PasswordModTime = string(data)
 	case recordAccessTime:
+		if len(data) != 4 {
+			return fmt.Errorf("invalid length for AccessTime: %d", len(data))
+		}
 		r.AccessTime = time.Unix(int64(binary.LittleEndian.Uint32(data)), 0)
 	case recordPasswordExpiry:
+		if len(data) != 4 {
+			return fmt.Errorf("invalid length for PasswordExpiry: %d", len(data))
+		}
 		r.PasswordExpiry = time.Unix(int64(binary.LittleEndian.Uint32(data)), 0)
 	case recordModTime:
+		if len(data) != 4 {
+			return fmt.Errorf("invalid length for ModTime: %d", len(data))
+		}
 		r.ModTime = time.Unix(int64(binary.LittleEndian.Uint32(data)), 0)
 	case recordURL:
 		r.URL = string(data)

From fc8a4deea8843c7a72e9b537fc0acf7a3a0cfc76 Mon Sep 17 00:00:00 2001
From: Dan Brown <danbrown@gmail.com>
Date: Wed, 27 May 2026 23:55:20 +0200
Subject: [PATCH 11/20] Fix modulo bias in password generation random sampling

randomFrom() and cryptoShuffle() used Uint32 % n which gives a slight
bias toward low indices when 2^32 is not divisible by n. Replace with
rejection sampling via unbiasedBelow(n): values in the biased tail
[floor(2^32/n)*n, 2^32) are discarded and redrawn. Expected extra
draws per call is less than one, and pools are small enough that
the limit computation is exact in 64-bit JS arithmetic.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 pwa/src/lib/passwordgen.js | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/pwa/src/lib/passwordgen.js b/pwa/src/lib/passwordgen.js
index f8b531c..d0c533b 100644
--- a/pwa/src/lib/passwordgen.js
+++ b/pwa/src/lib/passwordgen.js
@@ -32,18 +32,23 @@ function filtered(pool, excludeChars) {
   return pool.split('').filter(c => !exclude.has(c)).join('')
 }
 
+function unbiasedBelow(n) {
+  // Rejection sampling: discard values in the biased tail so every index
+  // in [0, n) is equally likely. Expected iterations < 2.
+  const limit = 0x100000000 - (0x100000000 % n)
+  const arr = new Uint32Array(1)
+  do { crypto.getRandomValues(arr) } while (arr[0] >= limit)
+  return arr[0] % n
+}
+
 function randomFrom(pool) {
   if (!pool) return ''
-  const arr = new Uint32Array(1)
-  crypto.getRandomValues(arr)
-  return pool[arr[0] % pool.length]
+  return pool[unbiasedBelow(pool.length)]
 }
 
 function cryptoShuffle(arr) {
   for (let i = arr.length - 1; i > 0; i--) {
-    const rnd = new Uint32Array(1)
-    crypto.getRandomValues(rnd)
-    const j = rnd[0] % (i + 1)
+    const j = unbiasedBelow(i + 1)
     ;[arr[i], arr[j]] = [arr[j], arr[i]]
   }
 }

From 1f892e3b65aad709c970db6bd995fe5e14b3f8ed Mon Sep 17 00:00:00 2001
From: Dan Brown <danbrown@gmail.com>
Date: Thu, 28 May 2026 00:20:06 +0200
Subject: [PATCH 12/20] Fix multi-vault record identity to use (uuid,
 vaultUuid) pair throughout

Selection, keyboard navigation, copy-on-tap, context menu, and auto-expand
all used UUID alone to identify records. With UUID collisions across
simultaneously-open vaults the wrong vault could be targeted. Fixes all
functional paths; clipboard drain animation (cosmetic only) still matches
on UUID alone as that requires a separate change to clipboardContext.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 pwa/src/lib/Dashboard.svelte  | 10 +++++-----
 pwa/src/lib/RecordList.svelte | 35 ++++++++++++++++++-----------------
 2 files changed, 23 insertions(+), 22 deletions(-)

diff --git a/pwa/src/lib/Dashboard.svelte b/pwa/src/lib/Dashboard.svelte
index bec09b5..7ce0b5d 100644
--- a/pwa/src/lib/Dashboard.svelte
+++ b/pwa/src/lib/Dashboard.svelte
@@ -1136,9 +1136,9 @@
     return selectedVaultUuid || dbKey
   }
 
-  async function copyTOTPForUUID(uuid) {
+  async function copyTOTPForUUID(uuid, vaultUuidHint = null) {
     try {
-      const vaultUuid = vaultUuidForRecord(uuid)
+      const vaultUuid = vaultUuidHint ?? vaultUuidForRecord(uuid)
       await wasmCopyTOTP(vaultUuid, uuid)
       if (clearTimer) { clearTimeout(clearTimer); clearTimer = null }
       clipHash = null
@@ -1449,7 +1449,7 @@
         const next = flatList[0]
         if (next) { selectRecord(next.uuid, next.vaultUuid); searchInput?.blur() }
       } else {
-        const idx = flatList.findIndex(i => i.uuid === selectedUUID)
+        const idx = flatList.findIndex(i => i.uuid === selectedUUID && i.vaultUuid === selectedVaultUuid)
         if (idx === flatList.length - 1) {
           record = null; selectedUUID = null; searchInput?.focus()
         } else {
@@ -1465,7 +1465,7 @@
         const prev = flatList[flatList.length - 1]
         if (prev) { selectRecord(prev.uuid, prev.vaultUuid); searchInput?.blur() }
       } else {
-        const idx = flatList.findIndex(i => i.uuid === selectedUUID)
+        const idx = flatList.findIndex(i => i.uuid === selectedUUID && i.vaultUuid === selectedVaultUuid)
         if (idx === 0) {
           record = null; selectedUUID = null; searchInput?.focus()
         } else {
@@ -1575,7 +1575,7 @@
     {/if}
   </div>
 
-  <RecordList query={debouncedQuery} {selectedUUID} {collapseSeq} excludeUUID={pendingDeleteUUID} storageKey={dbKey} primaryVaultName={vaultName} ontap={selectRecord} oncopy={copyToClipboard} oncopytotp={copyTOTPForUUID} onwasmcopyfield={copyFieldViaWasm} onwasmcopycustomfield={copyCustomFieldViaWasm}/>
+  <RecordList query={debouncedQuery} {selectedUUID} {selectedVaultUuid} {collapseSeq} excludeUUID={pendingDeleteUUID} storageKey={dbKey} primaryVaultName={vaultName} ontap={selectRecord} oncopy={copyToClipboard} oncopytotp={copyTOTPForUUID} onwasmcopyfield={copyFieldViaWasm} onwasmcopycustomfield={copyCustomFieldViaWasm}/>
 
   <!-- FAB (mobile) -->
   <button class="fab" onclick={startNew} aria-label="New">
diff --git a/pwa/src/lib/RecordList.svelte b/pwa/src/lib/RecordList.svelte
index 6cd2b35..ab79bba 100644
--- a/pwa/src/lib/RecordList.svelte
+++ b/pwa/src/lib/RecordList.svelte
@@ -5,7 +5,7 @@
   import { searchRecords, getRecordData } from '../wasm.js'
   import Icon from './Icon.svelte'
 
-  let { selectedUUID = null, excludeUUID = null, query = '', primaryVaultName = '', collapseSeq = '', ontap, oncopy, oncopytotp, onwasmcopyfield = null, onwasmcopycustomfield = null, storageKey = null } = $props()
+  let { selectedUUID = null, selectedVaultUuid = null, excludeUUID = null, query = '', primaryVaultName = '', collapseSeq = '', ontap, oncopy, oncopytotp, onwasmcopyfield = null, onwasmcopycustomfield = null, storageKey = null } = $props()
 
   function loadGroupState() {
     if (!storageKey) return {}
@@ -211,12 +211,13 @@
   // Auto-expand the group containing the newly-selected record (e.g. via arrow key navigation)
   $effect(() => {
     const uuid = selectedUUID
+    const vaultUuid = selectedVaultUuid
     if (!uuid) return
     const allItems = [
       ...get(dbItems),
       ...get(secondaryVaults).flatMap(sv => sv.items ?? [])
     ]
-    const item = allItems.find(i => i.uuid === uuid)
+    const item = allItems.find(i => i.uuid === uuid && (i.vaultUuid ?? null) === vaultUuid)
     if (!item) return
     const group = item.group || 'Ungrouped'
     untrack(() => {
@@ -269,8 +270,8 @@
 
   function handleClick(uuid, vaultUuid = null) {
     if (contextMenu) { contextMenu = null; return }
-    if (uuid === selectedUUID && !vaultUuid) {
-      copyPassword(uuid)
+    if (uuid === selectedUUID && (vaultUuid ?? null) === selectedVaultUuid) {
+      copyPassword(uuid, vaultUuid)
     } else {
       ontap(uuid, vaultUuid)
     }
@@ -281,23 +282,24 @@
     copyPassword(uuid)
   }
 
-  function handleContextMenu(e, uuid) {
+  function handleContextMenu(e, uuid, vaultUuid = null) {
     e.preventDefault()
     try {
-      const rec = getRecordData(vaultUuidForRecord(uuid), uuid)
+      const resolvedVaultUuid = vaultUuid !== null && vaultUuid !== undefined ? vaultUuid : vaultUuidForRecord(uuid)
+      const rec = getRecordData(resolvedVaultUuid, uuid)
       // Clamp to viewport so menu doesn't appear off-screen
       const menuW = 180, menuH = 500
       const x = Math.min(e.clientX, window.innerWidth  - menuW - 8)
       const y = Math.min(e.clientY, window.innerHeight - menuH - 8)
-      contextMenu = { x, y, rec, uuid }
+      contextMenu = { x, y, rec, uuid, vaultUuid: resolvedVaultUuid }
     } catch {}
   }
 
-  function copyPassword(uuid) {
+  function copyPassword(uuid, vaultUuid = null) {
     try {
-      const vaultUuid = vaultUuidForRecord(uuid)
-      const rec = getRecordData(vaultUuid, uuid)
-      if (rec.Password === null) handleWasmCopy(vaultUuid, uuid, 'Password')  // withheld — use WASM
+      const resolvedVaultUuid = vaultUuid !== null && vaultUuid !== undefined ? vaultUuid : vaultUuidForRecord(uuid)
+      const rec = getRecordData(resolvedVaultUuid, uuid)
+      if (rec.Password === null) handleWasmCopy(resolvedVaultUuid, uuid, 'Password')  // withheld — use WASM
       else if (rec.Password) handleCopy(rec.Password, uuid, 'Password')
     } catch {}
   }
@@ -421,7 +423,7 @@
 {#snippet recordRow(r)}
   <button
     class="record-row"
-    class:is-selected={r.uuid === selectedUUID}
+    class:is-selected={r.uuid === selectedUUID && (r.vaultUuid ?? null) === selectedVaultUuid}
     class:clipboard-active={flashedUUID === r.uuid}
     class:is-secondary={!!r.vaultUuid}
     style={flashedUUID === r.uuid
@@ -431,7 +433,7 @@
       : ''}
     onclick={() => handleClick(r.uuid, r.vaultUuid)}
     ondblclick={() => handleDblClick(r.uuid, r.vaultUuid)}
-    oncontextmenu={e => handleContextMenu(e, r.uuid)}
+    oncontextmenu={e => handleContextMenu(e, r.uuid, r.vaultUuid)}
   >
     <div class="record-row-main">
       <span class="record-row-title">
@@ -460,7 +462,7 @@
     {/if}
     {#if contextMenu.rec.Password !== ''}
       <button onclick={() => {
-        if (contextMenu.rec.Password === null) handleWasmCopy(vaultUuidForRecord(contextMenu.uuid), contextMenu.uuid, 'Password')
+        if (contextMenu.rec.Password === null) handleWasmCopy(contextMenu.vaultUuid, contextMenu.uuid, 'Password')
         else handleCopy(contextMenu.rec.Password, contextMenu.uuid, 'Password')
         closeMenu()
       }}>
@@ -476,14 +478,13 @@
       </button>
     {/if}
     {#if contextMenu.rec.TwoFactorKey !== undefined}
-      <button onclick={async () => { const u = contextMenu.uuid; closeMenu(); await oncopytotp(u) }}>
+      <button onclick={async () => { const u = contextMenu.uuid; const v = contextMenu.vaultUuid; closeMenu(); await oncopytotp(u, v) }}>
         <span>Copy one-time code</span><span class="ctx-keys"><kbd>Ctrl</kbd><kbd>T</kbd></span>
       </button>
     {/if}
     {#each (contextMenu.rec.CustomFields ?? []).slice(0, 9) as cf, i}
       <button onclick={() => {
-        const vaultUuid = vaultUuidForRecord(contextMenu.uuid)
-        if (cf.Value === null) handleWasmCustomCopy(vaultUuid, contextMenu.uuid, cf.Name, `custom-${i}`)
+        if (cf.Value === null) handleWasmCustomCopy(contextMenu.vaultUuid, contextMenu.uuid, cf.Name, `custom-${i}`)
         else handleCopy(cf.Value, contextMenu.uuid, `custom-${i}`, cf.Name)
         closeMenu()
       }}>

From 530147eede3ba1aabd4c517fb69701ee16b9d47a Mon Sep 17 00:00:00 2001
From: Dan Brown <danbrown@gmail.com>
Date: Thu, 28 May 2026 00:36:29 +0200
Subject: [PATCH 13/20] Clear vault state on lock and fix Ctrl+L test assertion

lockVault/lockAllVaults now clear selectedFile, dbItems, clipboard session/context,
and cancel the pending clipboard timer before calling onclosed(). Prevents stale
vault UUID from being used by App.svelte's handleIntent after lock.

Fix keyboard test: after openVault a recent handle is stored in IDB, so locking
returns to the re-unlock UI ("Vault is locked" + Master password field), not the
fresh "Open vault file" screen. Check for the password field instead.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 pwa/src/lib/Dashboard.svelte | 12 ++++++++++++
 pwa/tests/keyboard.spec.ts   |  2 +-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/pwa/src/lib/Dashboard.svelte b/pwa/src/lib/Dashboard.svelte
index 7ce0b5d..5a3a14e 100644
--- a/pwa/src/lib/Dashboard.svelte
+++ b/pwa/src/lib/Dashboard.svelte
@@ -1208,6 +1208,12 @@
     get(secondaryVaults).forEach(v => closeDatabase(v.uuid))
     closeDatabase(dbKey)
     secondaryVaults.set([])
+    dbItems.set([])
+    selectedFile.set(null)
+    if (clearTimer) { clearTimeout(clearTimer); clearTimer = null }
+    clipHash = null
+    clipboardSession.set(null)
+    clipboardContext.set(null)
     onclosed()
   }
 
@@ -1224,6 +1230,12 @@
     get(secondaryVaults).forEach(v => closeDatabase(v.uuid))
     closeDatabase(dbKey)
     secondaryVaults.set([])
+    dbItems.set([])
+    selectedFile.set(null)
+    if (clearTimer) { clearTimeout(clearTimer); clearTimer = null }
+    clipHash = null
+    clipboardSession.set(null)
+    clipboardContext.set(null)
     onclosed()
   }
 
diff --git a/pwa/tests/keyboard.spec.ts b/pwa/tests/keyboard.spec.ts
index 17b6cfa..2cb6e6f 100644
--- a/pwa/tests/keyboard.spec.ts
+++ b/pwa/tests/keyboard.spec.ts
@@ -25,7 +25,7 @@ test.describe('Keyboard shortcuts', () => {
   test('Ctrl+L locks vault and returns to unlock screen', async ({ page }) => {
     await page.keyboard.press('ArrowDown') // moves focus off search (required — Ctrl+L blocked while search is focused)
     await page.keyboard.press('Control+l')
-    await expect(page.getByRole('button', { name: 'Open vault file' })).toBeVisible({ timeout: 5000 })
+    await expect(page.getByPlaceholder('Master password')).toBeVisible({ timeout: 5000 })
   })
 
   // ── New record ──────────────────────────────────────────────────────────────

From 8aa736a778e8c5317bb68d95b503abd8346446bc Mon Sep 17 00:00:00 2001
From: Dan Brown <danbrown@gmail.com>
Date: Thu, 28 May 2026 00:39:17 +0200
Subject: [PATCH 14/20] Preserve duplicate unknown fields in wire order instead
 of map

UnknownFields was map[byte][]byte in both header and Record, so a second
field with the same type ID silently overwrote the first. Changed to
[]unknownField to preserve all occurrences in the order they appear in
the file, matching the forward-compatibility intent. Marshal now emits
them in that same order rather than sorted-by-key.

Adds a header test for the duplicate case; updates the existing single
unknown-field test to use the new struct accessor.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 pwsafe/header.go      | 19 ++++---------------
 pwsafe/header_test.go | 28 ++++++++++++++++++----------
 pwsafe/record.go      | 25 ++++++++++---------------
 3 files changed, 32 insertions(+), 40 deletions(-)

diff --git a/pwsafe/header.go b/pwsafe/header.go
index 72357cb..22a9a94 100644
--- a/pwsafe/header.go
+++ b/pwsafe/header.go
@@ -5,7 +5,6 @@ import (
 	"encoding/binary"
 	"errors"
 	"fmt"
-	"sort"
 	"time"
 
 	"github.com/pborman/uuid"
@@ -47,7 +46,7 @@ type header struct {
 	RecentyUsed    string    // 0x0f
 	Tree           string    // 0x03
 	UUID           [16]byte        // 0x01
-	UnknownFields  map[byte][]byte // forward compatibility: fields not yet parsed
+	UnknownFields  []unknownField  // forward compatibility: fields not yet parsed, in wire order
 	Version        [2]byte         // 0x00
 }
 
@@ -101,10 +100,7 @@ func (h *header) setField(id byte, data []byte) error {
 	case headerEmptyGroups:
 		h.EmptyGroups = append(h.EmptyGroups, string(data))
 	default:
-		if h.UnknownFields == nil {
-			h.UnknownFields = make(map[byte][]byte)
-		}
-		h.UnknownFields[id] = append([]byte(nil), data...)
+		h.UnknownFields = append(h.UnknownFields, unknownField{id, append([]byte(nil), data...)})
 	}
 	return nil
 }
@@ -157,15 +153,8 @@ func (h *header) marshal() ([]byte, []byte) {
 		appendField(headerEmptyGroups, []byte(group))
 	}
 
-	if len(h.UnknownFields) > 0 {
-		keys := make([]byte, 0, len(h.UnknownFields))
-		for k := range h.UnknownFields {
-			keys = append(keys, k)
-		}
-		sort.Slice(keys, func(i, j int) bool { return keys[i] < keys[j] })
-		for _, k := range keys {
-			appendField(k, h.UnknownFields[k])
-		}
+	for _, f := range h.UnknownFields {
+		appendField(f.ID, f.Data)
 	}
 
 	// End of entry
diff --git a/pwsafe/header_test.go b/pwsafe/header_test.go
index f1a0b7a..c078924 100644
--- a/pwsafe/header_test.go
+++ b/pwsafe/header_test.go
@@ -67,26 +67,34 @@ func TestUnmarshalHeader_MissingEndField(t *testing.T) {
 }
 
 func TestUnmarshalHeader_UnknownFieldType(t *testing.T) {
-	// Field 1: Version (type 0x00, data {0x0E, 0x03})
-	versionData := []byte{0x0E, 0x03}
-	versionFieldBytes := buildHeaderField(0x00, versionData)
-
-	// Field 2: Unknown Field (type 0xFE, data {0x01})
+	versionFieldBytes := buildHeaderField(0x00, []byte{0x0E, 0x03})
 	unknownFieldData := []byte{0x01}
 	unknownFieldBytes := buildHeaderField(0xFE, unknownFieldData)
-
-	// Field 3: END (type 0xFF, data nil)
 	endFieldBytes := buildHeaderField(0xFF, nil)
 
-	// Concatenate fields
 	headerBytes := append(versionFieldBytes, unknownFieldBytes...)
 	headerBytes = append(headerBytes, endFieldBytes...)
 
-	// var h header // h is not used when only checking for error
 	h, _, _, err := UnmarshalHeader(headerBytes)
 
 	assert.Nil(t, err, "UnmarshalHeader should not error on unknown field type")
-	assert.Equal(t, unknownFieldData, h.UnknownFields[0xFE], "Unknown field should be preserved")
+	assert.Equal(t, []unknownField{{ID: 0xFE, Data: unknownFieldData}}, h.UnknownFields, "Unknown field should be preserved")
+}
+
+func TestUnmarshalHeader_DuplicateUnknownFieldType(t *testing.T) {
+	versionFieldBytes := buildHeaderField(0x00, []byte{0x0E, 0x03})
+	dataA := []byte{0x01}
+	dataB := []byte{0x02, 0x03}
+	endFieldBytes := buildHeaderField(0xFF, nil)
+
+	headerBytes := append(versionFieldBytes, buildHeaderField(0xFE, dataA)...)
+	headerBytes = append(headerBytes, buildHeaderField(0xFE, dataB)...)
+	headerBytes = append(headerBytes, endFieldBytes...)
+
+	h, _, _, err := UnmarshalHeader(headerBytes)
+
+	assert.Nil(t, err, "UnmarshalHeader should not error on duplicate unknown field type")
+	assert.Equal(t, []unknownField{{ID: 0xFE, Data: dataA}, {ID: 0xFE, Data: dataB}}, h.UnknownFields, "Both occurrences of the unknown field should be preserved in order")
 }
 
 func TestUnmarshalHeader_FieldLengthExceedsData(t *testing.T) {
diff --git a/pwsafe/record.go b/pwsafe/record.go
index 891bff3..12d7225 100644
--- a/pwsafe/record.go
+++ b/pwsafe/record.go
@@ -6,7 +6,6 @@ import (
 	"encoding/binary"
 	"errors"
 	"fmt"
-	"sort"
 	"strconv"
 	"strings"
 	"time"
@@ -56,6 +55,12 @@ type customFieldProp struct {
 	val string
 }
 
+// unknownField preserves a field whose type ID is not recognised, in wire order.
+type unknownField struct {
+	ID   byte
+	Data []byte
+}
+
 // CustomField is one entry in a record's custom text fields (field 0x30).
 type CustomField struct {
 	Name         string            `json:"Name"`
@@ -95,7 +100,7 @@ type Record struct {
 	URL                    string          // 0x0d
 	UUID                   [16]byte        // 0x01
 	CustomFields           []CustomField   // 0x30
-	UnknownFields          map[byte][]byte // forward compatibility: fields not yet parsed
+	UnknownFields          []unknownField  // forward compatibility: fields not yet parsed, in wire order
 }
 
 // setField sets the field value based on the ID
@@ -208,10 +213,7 @@ func (r *Record) setField(id byte, data []byte) error {
 			}
 		}
 	default:
-		if r.UnknownFields == nil {
-			r.UnknownFields = make(map[byte][]byte)
-		}
-		r.UnknownFields[id] = append([]byte(nil), data...)
+		r.UnknownFields = append(r.UnknownFields, unknownField{id, append([]byte(nil), data...)})
 	}
 	return nil
 }
@@ -312,15 +314,8 @@ func (r *Record) marshal() ([]byte, []byte, error) {
 		appendField(recordCustomTextField, marshalCustomFields(r.CustomFields))
 	}
 
-	if len(r.UnknownFields) > 0 {
-		keys := make([]byte, 0, len(r.UnknownFields))
-		for k := range r.UnknownFields {
-			keys = append(keys, k)
-		}
-		sort.Slice(keys, func(i, j int) bool { return keys[i] < keys[j] })
-		for _, k := range keys {
-			appendField(k, r.UnknownFields[k])
-		}
+	for _, f := range r.UnknownFields {
+		appendField(f.ID, f.Data)
 	}
 
 	// End of entry

From 35e57352d335453ada7b271ce3940b0be56c08f8 Mon Sep 17 00:00:00 2001
From: Dan Brown <danbrown@gmail.com>
Date: Thu, 28 May 2026 22:57:23 +0200
Subject: [PATCH 15/20] Secure autofill delegate pairing

---
 AUTOFILL.md                   | 462 ++++++++++++++++++++++++++++++++++
 pwa/public/autofill.html      | 115 ++++++---
 pwa/src/lib/Dashboard.svelte  |  55 ++--
 pwa/src/lib/VaultSheet.svelte |  30 +--
 pwa/src/lib/bookmarklet.js    |  15 +-
 pwa/src/lib/delegates.js      |  30 +++
 pwa/src/lib/pairedAutofill.js |  92 +++++++
 pwa/tests/bookmarklet.spec.ts |  34 ++-
 8 files changed, 749 insertions(+), 84 deletions(-)
 create mode 100644 AUTOFILL.md
 create mode 100644 pwa/src/lib/pairedAutofill.js

diff --git a/AUTOFILL.md b/AUTOFILL.md
new file mode 100644
index 0000000..878b423
--- /dev/null
+++ b/AUTOFILL.md
@@ -0,0 +1,462 @@
+# Portpass Autofill
+
+Autofill allows users to automatically fill login form fields using credential data from their Portpass vault. A bookmarklet communicates with the Portpass PWA via an encrypted postMessage channel, fills form fields directly using the browser's DOM APIs, and navigates between fields using tab order — no clipboard involved.
+
+## Scope
+
+**Desktop browsers, bookmarklet-first.** Same-profile autofill is the primary zero-install path. Cross-profile and cross-browser autofill use the local switchboard relay when the user wants to keep Portpass in a separate clean browser profile; the relay transport and stricter authorization policy are implemented, while the full human-authenticated pairing ceremony is still in progress.
+
+Portpass's core value is PWA portability — a URL that works on any device with no installation. Same-profile autofill preserves that model. Cross-profile autofill is an optional exception for users who deliberately want a clean Portpass browser profile; it requires a small local relay because browsers do not provide native cross-profile messaging.
+
+Consequences of this scope:
+- Mobile browsers: not supported — the bookmarks bar is not accessible
+- Same-profile: works with no helper process. `window.open()`, `postMessage`, and `BroadcastChannel` stay within one browser profile.
+- Cross-profile and cross-browser: uses a local WebSocket switchboard relay. Browser-native `BroadcastChannel` cannot cross profile or browser boundaries, so the relay is the transport bridge.
+- Clean browser profile: supported by the relay protocol; the remaining product work is the explicit cross-profile pairing UI.
+
+### Cross-profile / cross-browser bridging options
+
+These approaches trade the extension attack surface on the Portpass side for other costs. The local relay is the implemented cross-profile path.
+
+- **Local WebSocket relay / switchboard** (companion app): a minimal local process runs a WebSocket switchboard on loopback, normally `http://localhost:7577` / `ws://localhost:7577/ws`. Cross-profile and cross-browser. Requires a running process. **Implemented** — see the `switchboard` repository and the **Cross-profile autofill** section below for the full design.
+- **Protocol handler + clipboard dead drop** (not implemented): a connectionless protocol using `web+portpass://` launch URLs and a temporary encrypted clipboard response. This remains experimental because browser/OS routing across profiles is inconsistent.
+- **Reflector server**: a remote WebSocket relay. Works cross-machine. Introduces server dependency, availability risk, and metadata leakage; conflicts with the no-server design principle.
+
+Mobile autofill (iOS Credential Provider, Android Autofill Service) is a separate product decision that involves consciously leaving the PWA model. It is out of scope here.
+
+### Current paired-delegate design (May 28, 2026)
+
+The older cross-profile implementation proved that the relay model works, but its delegate private key was embedded in the bookmarklet. That made the page-side bookmarklet a long-lived authority holder, which is the wrong trust boundary: a hostile website or extension in the filling profile should never be able to steal a reusable key that can query the clean Portpass profile later.
+
+The redesign treats the WebSocket relay as a public, untrusted packet carrier and makes `autofill.html` the paired delegate. The bookmarklet becomes a short-lived page agent with no durable secret.
+
+Actors:
+- **B**: bookmarklet/page agent, running on the login page in browser profile A
+- **A**: `autofill.html`, running on the Portpass origin in browser profile A
+- **D**: Dashboard, running on the Portpass origin in browser profile B with the unlocked vault
+- **R**: public relay/switchboard; may observe, delay, replay, drop, reorder, or inject packets
+
+Trust boundaries:
+- B runs in the website page context and is not trusted with any long-lived secret.
+- A is trusted only as an enrolled delegate. Its private key lives in Portpass-origin storage in profile A, preferably as a non-extractable WebCrypto key.
+- D owns vault access and makes all authorization decisions.
+- R is never trusted for confidentiality, integrity, ordering, or identity.
+
+#### Pairing and delegate identity
+
+A delegate is an enrolled autofill popup/profile. Its durable authority is the non-extractable ECDSA P-256 signing key stored by `autofill.html` in Portpass-origin IndexedDB. The bookmarklet does **not** contain the private key.
+
+The delegate ID is deterministic from the delegate signing public key:
+
+```
+afp1_<base32(first 16 bytes of SHA-256(publicKeySpki))>
+```
+
+This ID is public. It selects the registered delegate record, while the private key proves control. VaultSheet may show a short display code derived from the same fingerprint, such as the final 8 base32 characters grouped as `ABCD-2345`.
+
+Same-profile setup currently uses the "New bookmarklet" flow:
+1. Portpass generates A's non-extractable signing keypair in the current browser profile.
+2. Portpass stores A's private signing key, public key, delegate ID, created time, and relay URL in Portpass-origin storage.
+3. Dashboard stores the delegate public key, name, created time, display code, and revocation/use metadata.
+4. The generated bookmarklet contains only the Portpass URL, relay routing data, delegate ID, and page-agent code.
+
+True cross-profile pairing needs one additional UI ceremony because profile A and profile B do not share IndexedDB. The intended flow is:
+
+1. User opens D in the clean Portpass profile and chooses "Add autofill profile".
+2. User opens A in the filling profile.
+3. A generates a delegate signing keypair locally. The private key never leaves profile A's Portpass origin storage.
+4. A and D pair over R using a human-authenticated ceremony: QR code, short pairing code, or copy/paste pairing token.
+5. D stores A's public key, delegate name, created time, and revocation metadata.
+6. A stores D's public key or pairing identifier so it can authenticate D's replies.
+
+Pairing is the only moment where D grants durable authority. Revoking the delegate in D immediately prevents future cross-profile requests from A.
+
+The same delegate model is used for same-profile and cross-profile autofill. The transport changes; the identity and authorization model does not.
+
+#### Runtime exact-match flow
+
+1. User clicks B while on a login page.
+2. B opens A and sends page URL/routing data using `postMessage`.
+3. A creates a fresh session ID and ephemeral ECDH keypair for its session with D.
+4. A validates `event.source === opener`, validates that `event.origin` matches `pageUrl`, and rejects non-HTTPS pages except localhost.
+5. A signs a request to D containing `{version, delegateId, sessionId, pageOrigin, pageUrl, aEphemeralPublicKey, action: "match", timestamp, nonce}`.
+6. D verifies A's signature, freshness, delegate status, and message binding.
+7. D searches only records whose saved URL is authorized for the verified page origin.
+8. If an exact match is allowed by policy, D encrypts the credential payload to A's ephemeral public key and replies.
+9. A decrypts the credential payload, waits for the user to click the form field if needed, and sends fill instructions to B.
+10. B fills the page and discards all session material.
+
+#### Same-profile behavior
+
+Same-profile uses `BroadcastChannel('portpass-autofill')` between `autofill.html` and the unlocked Dashboard tab. The page-side bookmarklet opens `autofill.html`, passes page URL/routing data by `postMessage`, and then waits for the popup to send back fill instructions.
+
+Same-profile keeps the existing convenience behavior:
+- Initial lookup can return exact matches and same-site fuzzy metadata for the picker.
+- If exactly one exact match exists, the popup auto-advances to the "click a field to begin" state.
+- If multiple exact matches or fuzzy suggestions exist, the popup shows a picker.
+- Picker search is available in the same-profile path.
+- Credentials are fetched lazily after the user selects a record, encrypted to the popup's session ECDH key, then posted to the bookmarklet for filling.
+- Save URL can update a selected non-readonly record after explicit user action.
+
+#### Cross-profile behavior
+
+Cross-profile uses the local switchboard WebSocket relay. The relay is a public packet carrier: it can observe metadata, delay, drop, replay, reorder, or inject packets, but it cannot forge signed delegate requests or decrypt credential replies.
+
+Cross-profile is intentionally stricter than same-profile:
+- Initial lookup releases no credentials unless there is an exact authorized saved URL match.
+- If there is no exact match, D returns only a near-match count and the popup offers to view/edit the records in Portpass.
+- Global cross-profile search is disabled by default. If it is reintroduced, it should be an explicit high-risk setting and metadata-only until an exact URL authorization exists.
+- Relay `fill-uuid` credential fetches require the selected record's saved URL to exactly match the verified current page URL.
+- Revoked delegates, stale timestamps, reused nonces, missing bindings, or wrong-origin URL claims are rejected.
+
+#### Picker/search flow
+
+For anything other than one exact authorized match, D returns metadata only to A:
+- vault UUID
+- record UUID
+- title
+- saved URL
+- match type
+- read-only flag
+
+D must not include passwords, TOTP secrets/codes, sensitive custom fields, notes, or autotype field values in picker/search metadata.
+
+Recommended policy:
+- Exact match: may return one matching credential payload after A's signed request.
+- Same-site fuzzy match: may return metadata to A for user selection.
+- No same-site match: return "no match"; do not expose global vault search over cross-profile autofill. Could summarize count of fuzzy matches and offer to show them in Portpass to facilitate editing there.
+- Save URL: require explicit user action in A and a signed request from A; D may update only the selected record with the verified current page URL.
+
+If global search is retained for convenience, it should be an explicit high-risk feature, disabled by default, and should return metadata only until the user selects a record. A stronger mode is to require the user to open D for global search or URL attachment.
+
+#### Message requirements
+
+Every signed message should include:
+- protocol version
+- sender delegate ID
+- intended recipient ID
+- session ID
+- action
+- verified page origin and URL when relevant
+- monotonic counter or nonce
+- timestamp with a short validity window
+- previous message hash or request ID for replies
+
+D should reject messages with missing bindings, stale timestamps, reused nonces, unknown delegate IDs, revoked delegates, unexpected actions, or page origins outside the requested record's saved URL scope.
+
+Sensitive credential payloads are encrypted to A's ephemeral session key for the selected fill session. A then sends the selected fill instructions to B over `postMessage` restricted to the verified opener origin.
+
+#### Security properties
+
+This redesign removes the transport trust concern: R can see traffic, but cannot read credentials, forge requests, or alter replies without detection.
+
+It also removes the reusable-secret exposure from B. A malicious website can still observe credentials after they are filled into the page, and a sufficiently privileged extension in profile A can still steal filled values. That is inherent to autofill. The goal is narrower and achievable: the page-side actor cannot obtain a durable delegate key and cannot browse or request arbitrary vault records outside the verified current site authorization policy.
+
+#### Remaining work
+
+1. Add the human-authenticated cross-profile pairing ceremony and UI.
+2. Bind relay replies more tightly to request IDs / previous message hashes.
+3. Add relay-focused tests for replay rejection, wrong-origin URL claims, metadata-only no-match behavior, and exact-match credential release.
+4. Optionally add activity logs in VaultSheet: delegate, channel, page origin, action, record title, timestamp, and whether credentials were released.
+
+---
+
+## Relationship to the Password Safe format
+
+Autofill uses the existing **Autotype field** (field type 0x0e) from the Password Safe v3 format. The default sequence `\u\t\p\n` covers the common case: fill username, tab to password, fill password, submit. Users configure this manually by editing the Autotype field on each record.
+
+Documentation for the Password Safe Autotype feature is here: https://pwsafe.org/help/pwsafe.html
+
+---
+
+## Autotype codes recognised by Portpass
+
+### Standard fields
+
+| Code | Meaning |
+|---|---|
+| `\u` | Username |
+| `\p` | Password |
+| `\m` | Email |
+| `\2` | TOTP one-time code (current value at fill time) |
+
+**Security restriction:** if the autotype sequence references any sensitive field — `\p` (password), `\2` (TOTP), or a sensitive custom field (`\fN` where that field is hidden in the record view) — and the login page is served over plain HTTP (not HTTPS or localhost), Portpass refuses to fill and shows an error. Non-sensitive fields (`\u`, `\m`, non-sensitive `\fN`, literal text) are not restricted.
+
+### Navigation
+
+| Code | Meaning |
+|---|---|
+| `\t` | Tab — advance focus to the next field in tab order |
+| `\s` | Shift-Tab — move focus to the previous field in tab order |
+| `\n` | Enter — submit the form (`form.requestSubmit()`) |
+
+### Delays
+
+| Code | Meaning |
+|---|---|
+| `\wNNN` | Wait NNN milliseconds (1–3 digits, 0–999) |
+| `\WNNN` | Wait NNN seconds (1–3 digits, 0–999) |
+
+### Literal text
+
+| Code | Meaning |
+|---|---|
+| `\\` | Literal backslash character |
+| *(any other character)* | Typed literally into the current field |
+
+Literal characters and `\\` are accumulated into a single fill operation. For example, `abc\\def` fills the current field with `abc\def` in one step, not three.
+
+### Custom fields (Portpass extension — not in official Password Safe)
+
+| Code | Meaning |
+|---|---|
+| `\f` | Value of custom field 1 (bare `\f` defaults to field 1) |
+| `\fN` | Value of custom field N, where N is a single digit 1–9 |
+
+`\f0` is an error. `\f` codes are a Portpass-specific extension; the official Password Safe desktop app does not recognise them and will treat them as unknown.
+
+### Unknown codes
+
+Any `\X` not listed above is treated as an **unknown code**. Portpass:
+- Allows saving the sequence (shows an amber warning, does not block Save)
+- Shows the same warning in the record read view
+- Silently skips the unknown code at fill time — surrounding literal text is preserved and joined
+
+This means sequences written for the official Password Safe app (which supports additional codes such as `\g` group, `\i` title, `\l` notes, `\e` Escape, and various key codes) can be stored in Portpass without error, and the recognised portions will execute without error but will not behave the same as when they are executed by the official Password Safe app.
+
+---
+
+## User flow
+
+### Installation (one-time per browser profile)
+
+#### Same-profile installation
+
+1. Open Portpass in the target browser profile
+2. Open VaultSheet settings — drag the Autofill bookmarklet link to the browser bookmarks bar
+
+The bookmarklet contains no private key. Portpass creates a paired autofill profile with a non-extractable signing key in Portpass-origin storage and registers the corresponding public key as a delegate. Each browser profile — and each browser — requires its own independent installation.
+
+#### Cross-profile installation
+
+1. Start the local switchboard relay.
+2. Open and unlock Portpass in the clean profile.
+3. Enable cross-profile autofill and configure the relay URL if needed.
+4. Pair the filling profile's `autofill.html` delegate with the clean-profile Dashboard.
+5. Install the bookmarklet in the filling profile.
+
+The full human-authenticated cross-profile pairing UI is still a separate step from the same-profile "New bookmarklet" flow. The protocol expects the filling profile to hold the non-extractable private signing key and the clean profile to hold the matching public delegate record.
+
+### Per-use
+
+1. Make sure Portpass is open in a tab and the vault is unlocked (any tab — doesn't need to be the active tab)
+2. Switch to the login page tab
+3. Click the bookmarklet
+4. Same-profile: a picker appears listing exact URL matches first. If there is no exact match, it can show fuzzy suggestions (Levenshtein ≤ 5 on hostname) plus the currently open record if any.
+5. Cross-profile: exact authorized matches can be filled. If there is no exact match, the popup shows only a near-match count and offers to open Portpass so the saved URL can be updated there.
+6. Select a record when a picker is shown. Optionally save/replace the URL on a non-readonly record to make future requests exact matches.
+7. If the page had a focused input when the bookmarklet was clicked (`document.activeElement`), autofill executes immediately on that field; otherwise a "Click the field to start from" prompt appears.
+
+The URL matching (step 4) removes the need to pre-select a record in Portpass before switching tabs. Note that URLs are canonicalized (remove "https://[www.]" and and url parameters ("?trackingcode=abc123#section3")
+
+### Focus handling
+
+Clicking the bookmarks bar typically causes the page to lose its focused element. Autofill handles this with a two-step model:
+
+- **Step 1 (bookmarklet click):** Portpass popup opens, authenticates the paired delegate, and looks up records for the current page URL
+- **Step 2 (field click):** Overlay prompts "Click the field to start from" — when the user clicks a form input, autofill begins from that element
+
+macOS users can configure an App Shortcut (System Settings → Keyboard → App Shortcuts) to trigger the bookmarklet via keyboard. This preserves the page's focused element and skips Step 2 entirely, matching the desktop app's workflow.
+
+### Field filling
+
+Fields are filled using the native input value setter, which works correctly with React, Vue, Angular, and other frameworks that intercept the standard `value` property setter:
+
+```javascript
+const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value').set;
+setter.call(field, value);
+field.dispatchEvent(new Event('input', { bubbles: true }));
+field.dispatchEvent(new Event('change', { bubbles: true }));
+```
+
+`\t` advances focus by calling `.focus()` on the next focusable element in tab order. `\n` submits via `form.requestSubmit()` or by clicking the submit button.
+
+---
+
+## Error states
+
+Displayed in a small overlay on the page:
+
+| Condition | Message |
+|---|---|
+| Vault locked | "Vault is locked — unlock Portpass first" |
+| No record open in Portpass | "Open a record in Portpass first" |
+| Autotype field empty or missing | "No autofill sequence set — edit the record in Portpass to add one" |
+| Unrecognised token in sequence | "Could not parse autofill sequence: [value]" |
+
+---
+
+## Security model
+
+Same-profile credentials travel: Portpass WASM memory → encrypted BroadcastChannel → autofill.html → postMessage → bookmarklet JS → form field. Cross-profile credentials travel: Portpass WASM memory → signed/encrypted relay reply → autofill.html → postMessage → bookmarklet JS → form field. No clipboard is used at any point.
+
+**Credential briefly in JS:** after decryption, the credential exists as a JS variable in the bookmarklet's main-world context for the duration of the fill. This is equivalent in exposure to a user manually typing a memorised password — not a meaningful regression.
+
+**After filling:** the credential is in `input.value`, readable by any extension on the page. This is identical to the exposure from manual typing or any other password manager. It cannot be avoided without browser-level autofill APIs (which require site cooperation).
+
+**Cross-profile isolation:** `window.open()`, `postMessage`, and `BroadcastChannel` are browser-internal and scoped to a single browser profile. Cross-profile communication uses the local switchboard relay and does not trust the relay for confidentiality, integrity, ordering, identity, or freshness.
+
+**Passkeys:** where a site supports passkeys (WebAuthn), using them is always preferable — no credential to intercept at any stage. Autofill is for sites that still require passwords.
+
+### Channel notes
+
+Same-profile Dashboard communication uses `BroadcastChannel('portpass-autofill')`. The channel is origin-scoped but still broadcast-style, so requests are signed by the paired delegate and credential payloads are encrypted to a per-session ECDH key.
+
+Cross-profile communication uses the switchboard relay. The relay is treated as hostile transport: signatures authenticate requests, timestamps and nonces protect freshness, and encrypted replies protect credential contents.
+
+---
+
+## Implementation status (as of 2026-05-28)
+
+The secure paired-delegate foundation is implemented. The bookmarklet no longer contains a private key; the durable signing key lives in `autofill.html`'s Portpass-origin IndexedDB storage and is created as a non-extractable WebCrypto key. Same-profile autofill is working through this model. Cross-profile transport and stricter relay-side authorization are implemented; the full human-authenticated cross-profile pairing ceremony is still the remaining UI/protocol step.
+
+### What is built
+
+**Go (`pwsafe/db.go`)**: `Search(query, mode int)` — mode 0 = all fields (incl. non-sensitive custom fields), mode 1 = names only, mode 2 = URL exact match on `CanonicalURL`. `CanonicalURL` strips scheme/www/query/fragment/trailing slash.
+
+**WASM (`cmd/wasm/main.go`)**: `getDBData` now returns `url` per item. `searchRecords` takes mode int (JS callers updated from bool to 0/1/2).
+
+**Autofill popup (`pwa/public/autofill.html`)**: A minimal static HTML page (no WASM, no Svelte). Loads its paired delegate profile from IndexedDB, signs requests with the non-extractable signing key, and uses a `$transport` abstraction set once at startup: BroadcastChannel path (same-profile, if Portpass responds to a `ping`) or switchboard WebSocket path (cross-profile). Picker shows autotype sequence as read-only chips; theme/accent are received from Portpass in the first reply.
+
+**Dashboard.svelte**: BC autofill handler responds to signed paired-popup `hello` messages, performs replay/freshness checks, and encrypts credential payloads to the popup's ECDH session key. `connectSwitchboard` maintains a persistent WebSocket connection to the switchboard on vault unlock, verifies signed relay messages by delegate ID, rejects replayed nonces, and enforces exact saved-URL authorization before releasing credentials on the relay path.
+
+**App.svelte**: `tryBridge()` in popup `onMount` — pings main Portpass tab via BroadcastChannel; if found, enters bridge mode (`bridgeMode = true`, skips WASM, bridges postMessage↔BC). Shows "Portpass autofill in progress" text. `handleIntent` parses `web+portpass://` LaunchQueue intents (currently reaches Portpass in the same Chrome profile rather than a clean profile on Linux — see cross-profile section for details).
+
+**bookmarklet.js**: Page-agent variant — `makeDelegateBookmarkletUrl(portpassUrl, delegateId, relayUrl)` embeds only routing data and the public delegate ID in the `javascript:` URL. Bookmarklet opens `autofill.html` as popup, sends `{url, saveUrl, isSecure, delegateId, relayUrl}` via `postMessage`, and bridges field-click events. Autotype execution and DOM helpers are self-contained in the IIFE.
+
+**pairedAutofill.js**: IDB module for A-side paired profiles. Generates non-extractable ECDSA P-256 signing keys, exports the public SPKI, derives `delegateId = afp1_<base32(first 16 bytes of SHA-256(publicKeySpki))>`, and stores created time, relay URL, display code, public key, and the private `CryptoKey`.
+
+**delegates.js**: IDB module for D-side delegate records keyed by vault UUID. Records contain `{id, name, publicKey, displayCode, created, bcCount, bcLastUsed, relayCount, relayLastUsed}`. Functions include `getDelegates`, `addDelegate`, `revokeDelegate`, `verifyDelegateById`, and usage counter updates.
+
+**RecordEdit.svelte**: Visual/Raw toggle for autotype field. Visual mode: chip builder with `parseTokens`/`tokensToRaw`, drag-to-reorder, three-row palette, inline mini-forms for freeform text and wait delays, raw equivalence line. Error/warning shown as styled banner cards. Raw mode: monospace input with three-row token legend.
+
+**RecordRead.svelte**: Read-only chip display of autotype sequence (same chip styles as RecordEdit). Warning banner for unknown codes.
+
+### Open UX issue: bookmarklet shows globe icon in bookmarks bar
+
+When the bookmarklet `javascript:` link is dragged from VaultSheet to the bookmarks bar, Chrome shows a generic globe icon instead of the Portpass Pkey logo. Root cause: App.svelte replaces the `<link rel="icon">` href with a `data:image/svg+xml,...` URL for theme-aware tab favicon display. Chrome stores that data: URL as the bookmark's favicon URL, but cannot later fetch it from storage → falls back to globe. The browser tab shows the correct icon because it uses the data: URL directly in memory.
+
+Appending a separate `<link rel="icon">` element (rather than mutating the original) was tried and did not resolve the issue.
+
+**Workaround**: bookmark the Portpass page normally first (Chrome captures the favicon at this point), then right-click the bookmark → Edit → paste the `javascript:` URL. Chrome preserves the captured favicon when the URL is edited.
+
+---
+
+## Cross-profile autofill
+
+Allows Portpass to run in a dedicated clean browser profile (no extensions, single purpose) while autofill is triggered from a regular browsing profile in the same or a different browser on the same machine.
+
+### switchboard
+
+A tiny local WebSocket pub/sub broker (standalone repo: github.com/dbro/switchboard). Protocol:
+
+- Portpass (subscriber) → `{"type":"subscribe","channels":["portpass-autofill"]}`
+- autofill.html (publisher) → `{"type":"publish","channel":"portpass-autofill","replyTo":"nonce",...signed payload...}`
+- Switchboard forwards the publish verbatim to the subscriber for that channel
+- Portpass → `{"type":"reply","replyTo":"nonce",...encrypted blob...}`
+- Switchboard routes the reply back to the waiting autofill.html connection
+
+The switchboard is a dumb pipe — it never inspects payload content. Publisher connections that receive no reply within 60 seconds are closed. Binds to `127.0.0.1` only. Builds as a single portable APE binary via Cosmopolitan Libc (Linux/macOS/Windows/FreeBSD). Runs continuously as a background process (systemd/launchd/Task Scheduler).
+
+Auto-start instructions (systemd, launchd, Task Scheduler) are documented in the switchboard repository.
+
+### Trust model
+
+The attack surface of the bookmarklet approach: any JavaScript running on a page (XSS, malicious ad) can replicate the page-agent mechanics — open `autofill.html` and ask for data. The page-side bookmarklet therefore must not be treated as a durable authority holder.
+
+The solution is to make `autofill.html`, not the bookmarklet, the cryptographic authenticator.
+
+**Trusted islands:**
+- **autofill.html** — served from the Portpass HTTPS origin; cross-origin isolated from the page it autofills. Holds the non-extractable delegate signing key in profile-local IndexedDB.
+- **Portpass PWA / Dashboard** — holds the registered delegate public key; verifies every request signature, freshness value, nonce, delegate status, and URL binding before acting.
+- **Bookmarklet URL** — stored in the browser's bookmark store. It contains only routing data, delegate ID, and page-agent code. It is not a secret.
+
+**Untrusted channels** (carry only public/encrypted material — no secrets leak even if observed):
+- Page → autofill.html postMessage: secured by `targetOrigin`
+- switchboard: sees only encrypted blobs it cannot decrypt
+- localhost network: same
+
+An attacker who controls the page can observe credentials after they are filled into that page, which is inherent to autofill. The narrower guarantee is that the page-side actor cannot steal a reusable delegate private key from the bookmarklet and cannot use the relay to browse or fetch arbitrary vault records outside the current-site authorization policy. OS-level compromise is outside the threat model.
+
+### Delegate model
+
+Each paired autofill profile is a **delegate** — a registered autofill agent that Portpass trusts to request credentials on the user's behalf.
+
+**Per-delegate record (stored in IDB, keyed by vault UUID):**
+```
+{
+  id:        "afp1_<public-key-fingerprint>",
+  name:      string,        // user-assigned: "Chrome — work profile"
+  publicKey: ECDSA P-256 SPKI,
+  displayCode: string,      // short UI code derived from the same fingerprint
+  created:   timestamp,
+  bcCount:   number,
+  bcLastUsed: timestamp,
+  relayCount: number,
+  relayLastUsed: timestamp,
+}
+```
+
+Use counters are updated only on requests that pass signature verification — they serve as a record of legitimate use and provide the user feedback on how much time the feature is saving them.
+
+**Key storage:** A stores its non-extractable private signing key in Portpass-origin IndexedDB in the filling profile. D stores the delegate public key in IndexedDB keyed by vault UUID. If site data is cleared, delegates must be re-paired and new bookmarklets dragged to the bar. Acceptable tradeoff — vault storage would require extending the psafe3 format.
+
+**Revocation:** delete the public key entry from D's delegate list. Any bookmarklet naming that delegate ID is immediately rejected because D no longer accepts signatures for that delegate.
+
+### VaultSheet UI
+
+The AUTOFILL section in VaultSheet lists registered bookmarklets (called "delegates" internally):
+
+| Name | Created | Uses | Last used | |
+|---|---|---|---|---|
+| Chrome — work profile | 2026-05-20 | 47 | today | Revoke |
+
+"New bookmarklet" button: prompts for a name → generates a non-extractable ECDSA P-256 key pair → derives the delegate ID from the public key fingerprint → stores the private key in the paired autofill profile and the public key in the delegate list → shows draggable bookmarklet `<a>` chip with routing data and delegate ID only.
+
+### Protocol flow
+
+1. User clicks bookmarklet on a login page
+2. Bookmarklet opens `autofill.html` as a popup, passes `{url, saveUrl, isSecure, delegateId, relayUrl}` via `postMessage` with `targetOrigin = Portpass origin`
+3. `autofill.html` loads the paired delegate profile, generates an ECDH key pair, and signs `{version, sender: delegateId, recipient, url, nonce, ecdhSpki, timestamp, action}` with its non-extractable private key
+4. autofill.html opens a WebSocket to `ws://localhost:7577/ws`; sends `{type:"publish", channel:"portpass-autofill", delegateId, replyTo:nonce, url, ecdh, ts, sig, pub}`
+5. Switchboard forwards the publish to the Portpass subscriber registered for that channel (or returns `{type:"error"}` if Portpass is not connected)
+6. Portpass verifies the ECDSA signature against the registered public key; rejects silently if invalid
+7. Portpass checks the current-site authorization policy. On the cross-profile path, credentials are released only for exact saved URL matches; otherwise only near-match count metadata is returned.
+8. Portpass encrypts allowed credential payloads for `autofill.html`'s ECDH public key, sends `{type:"reply", replyTo:nonce, ...blob}` on its switchboard WebSocket
+9. Switchboard routes the reply to `autofill.html`'s publisher connection; `autofill.html` decrypts and shows the picker or near-match notice
+10. User selects a record when a picker is available; `autofill.html` sends `{type: 'fill', ...}` to `window.opener`; bookmarklet executes autotype
+11. Portpass increments same-profile or relay use counters for the verified delegate after a fill completes
+
+**Note on `web+portpass://` LaunchQueue:** The original design routed cross-profile requests via a `web+portpass://` URL handled by the OS. On Chrome/Linux, the protocol handler routes to the active browser profile rather than the profile where the PWA is installed, making it unreliable for cross-profile use. The relay-server polling approach above is used instead. The LaunchQueue handler (`handleIntent` in App.svelte) remains wired up and may work correctly on macOS/Windows — untested.
+
+### Same-profile versus cross-profile behavior
+
+The popup code uses the same broad UI shell in both modes, but credential release policy differs:
+
+| Behavior | Same-profile | Cross-profile |
+|---|---|---|
+| Transport | BroadcastChannel within the same profile | Local WebSocket switchboard |
+| Request authentication | Signed by A's paired non-extractable key | Signed by A's paired non-extractable key |
+| Initial lookup | Exact matches plus fuzzy picker metadata | Exact authorized matches only, otherwise near-match count |
+| Global search | Available in the same-profile picker | Disabled by default |
+| Credential fetch after selection | Allowed for selected picker record | Allowed only when selected record URL exactly matches verified page URL |
+| Save URL | Explicit user action updates selected non-readonly record | Should require explicit user action and signed request; exact-match policy applies before future credential release |
+| Revocation | Delete delegate record in VaultSheet | Delete delegate record in clean-profile VaultSheet |
+
+### Browser notes
+
+- **Chrome and Firefox** tested for the same-profile bookmarklet flow. Cross-profile relay transport is implemented; full cross-profile pairing UI remains to be completed.
+- **Switchboard URL**: use `http://localhost:7577` (not `http://127.0.0.1:7577`). Firefox's mixed-content loopback exemption is specified for `localhost`; `127.0.0.1` may not be exempt on older Firefox versions.
+- **Protocol handler** (`web+portpass://` LaunchQueue): tested on Chrome/Linux where it routes to the active profile rather than the PWA's profile. May behave correctly on macOS/Windows — `handleIntent` in App.svelte is wired up for this path.
+
+---
diff --git a/pwa/public/autofill.html b/pwa/public/autofill.html
index 90e667f..2b96d1e 100644
--- a/pwa/public/autofill.html
+++ b/pwa/public/autofill.html
@@ -295,7 +295,7 @@
   var saveUrl = ''
 
   // Mode detection
-  var cprivKey = null
+  var pairedProfile = null
   var delegateId = null
   var bcPongCount = 0
   var wsProbeReplies = []
@@ -404,7 +404,6 @@
     currentUrl = msg.url || ''
     saveUrl = msg.saveUrl || currentUrl
     isSecure = !!msg.isSecure
-    cprivKey = msg.privKey || null
     delegateId = msg.delegateId || null
     hasActiveField = !!msg.hasActiveField
     if (msg.relayUrl) wsRelayUrl = msg.relayUrl.replace(/^http/, 'ws').replace(/\/ws$/, '') + '/ws'
@@ -419,7 +418,14 @@
       } catch(_) {}
     }
 
-    startProbe()
+    loadPairedProfile(delegateId).then(function(profile) {
+      pairedProfile = profile
+      if (!pairedProfile) { sendError('Autofill profile is not paired — create a new bookmarklet in Portpass'); return }
+      cpPubSpkiB64 = pairedProfile.publicKeyB64 || btoa(String.fromCharCode.apply(null, new Uint8Array(pairedProfile.publicKey || [])))
+      startProbe()
+    }).catch(function() {
+      sendError('Autofill profile is not paired — create a new bookmarklet in Portpass')
+    })
   }
 
   // ── Messages from bookmarklet (field-clicked, fill-done, fill-error) ──────
@@ -452,21 +458,13 @@
   }
 
   async function startWsProbe() {
-    if (!cprivKey) return
+    if (!pairedProfile || !pairedProfile.signingKey) return
     try {
-      cpSigningKey = await crypto.subtle.importKey(
-        'jwk', cprivKey, { name: 'ECDSA', namedCurve: 'P-256' }, false, ['sign']
-      )
-      var pubJwk = { kty: cprivKey.kty, crv: cprivKey.crv, x: cprivKey.x, y: cprivKey.y }
-      var pubKey = await crypto.subtle.importKey(
-        'jwk', pubJwk, { name: 'ECDSA', namedCurve: 'P-256' }, true, ['verify']
-      )
-      var pubSpki = await crypto.subtle.exportKey('spki', pubKey)
-      cpPubSpkiB64 = btoa(String.fromCharCode.apply(null, new Uint8Array(pubSpki)))
+      cpSigningKey = pairedProfile.signingKey
       setupWsTransport()
 
       var ts = Date.now()
-      var signedPayload = JSON.stringify({ url: currentUrl, nonce: pingNonce, ecdh: cpEcdhSpkiB64, ts: ts, msgType: '', uuid: '', vaultUuid: '', query: '' })
+      var signedPayload = JSON.stringify({ version: 1, sender: delegateId || '', recipient: pairedProfile.dashboardId || '', url: currentUrl, nonce: pingNonce, ecdh: cpEcdhSpkiB64, ts: ts, msgType: '', uuid: '', vaultUuid: '', query: '' })
       var sigBytes = await crypto.subtle.sign(
         { name: 'ECDSA', hash: 'SHA-256' }, cpSigningKey, new TextEncoder().encode(signedPayload)
       )
@@ -476,7 +474,7 @@
       wsProbeWs.onopen = function() {
         wsProbeWs.send(JSON.stringify({
           type: 'publish', channel: 'portpass-autofill', replyTo: pingNonce,
-          url: currentUrl, ecdh: cpEcdhSpkiB64, ts: ts, sig: sigB64, pub: cpPubSpkiB64
+          delegateId: delegateId, url: currentUrl, ecdh: cpEcdhSpkiB64, ts: ts, sig: sigB64, pub: cpPubSpkiB64
         }))
       }
       wsProbeWs.onmessage = function(e) {
@@ -506,7 +504,7 @@
         return decryptReply(blob)
       },
       fill: async function(uuid, vu) {
-        var blob = await cpSignAndSend('fill-uuid', { url: uuid, uuid: uuid, vaultUuid: vu || null })
+        var blob = await cpSignAndSend('fill-uuid', { url: currentUrl, uuid: uuid, vaultUuid: vu || null })
         var results = await decryptReply(blob)
         if (!results || !results.length) throw new Error('Could not get credentials')
         return results[0]
@@ -554,6 +552,7 @@
       ws.onmessage = function(e) {
         try {
           var msg = JSON.parse(e.data)
+          if (msg._switchboard_origin !== location.origin) return
           if (msg.type === 'error') done(reject, new Error(msg.message || 'Autofill failed'))
           else if (msg.type === 'reply') done(resolve, msg)
         } catch(_) { done(reject, new Error('Invalid relay message')) }
@@ -582,7 +581,8 @@
       var data = await decryptReply(blob)
       if (data && data.records) {
         applyTheme(data.theme === 'dark', data.accent || 'amber')
-        showPicker(data.records)
+        if ((!data.records || !data.records.length) && data.nearMatchCount !== undefined) showNearMatchSummary(data.nearMatchCount)
+        else showPicker(data.records)
       } else {
         showPicker(data || [])
       }
@@ -592,7 +592,7 @@
   async function cpSignAndSend(msgType, extraFields) {
     var ts = Date.now()
     var reqNonce = crypto.randomUUID()
-    var signedPayload = JSON.stringify({ url: extraFields.url || '', nonce: reqNonce, ecdh: cpEcdhSpkiB64, ts: ts,
+    var signedPayload = JSON.stringify({ version: 1, sender: delegateId || '', recipient: pairedProfile?.dashboardId || '', url: extraFields.url || '', nonce: reqNonce, ecdh: cpEcdhSpkiB64, ts: ts,
       msgType: msgType, uuid: extraFields.uuid || '', vaultUuid: extraFields.vaultUuid || '', query: extraFields.query || '' })
     var sigBytes = await crypto.subtle.sign(
       { name: 'ECDSA', hash: 'SHA-256' }, cpSigningKey, new TextEncoder().encode(signedPayload)
@@ -600,7 +600,7 @@
     var sigB64 = btoa(String.fromCharCode.apply(null, new Uint8Array(sigBytes)))
     return wsPost(Object.assign({
       type: 'publish', channel: 'portpass-autofill', replyTo: reqNonce,
-      msgType: msgType, ecdh: cpEcdhSpkiB64, ts: ts, sig: sigB64, pub: cpPubSpkiB64
+      delegateId: delegateId, msgType: msgType, ecdh: cpEcdhSpkiB64, ts: ts, sig: sigB64, pub: cpPubSpkiB64
     }, extraFields))
   }
 
@@ -623,7 +623,7 @@
     if (!cpSigningKey || !cpPubSpkiB64) return
     var nonce = crypto.randomUUID()
     var ts = Date.now()
-    var payload = JSON.stringify({ url: '', nonce: nonce, ecdh: '', ts: ts, msgType: 'fill-done', uuid: '', vaultUuid: '', query: '' })
+    var payload = JSON.stringify({ version: 1, sender: delegateId || '', recipient: pairedProfile?.dashboardId || '', url: '', nonce: nonce, ecdh: '', ts: ts, msgType: 'fill-done', uuid: '', vaultUuid: '', query: '' })
     crypto.subtle.sign(
       { name: 'ECDSA', hash: 'SHA-256' }, cpSigningKey, new TextEncoder().encode(payload)
     ).then(function(sigBytes) {
@@ -633,7 +633,7 @@
       ws.onopen = function() {
         ws.send(JSON.stringify({
           type: 'publish', channel: 'portpass-autofill', replyTo: nonce,
-          msgType: 'fill-done', url: '', ecdh: '', ts: ts, sig: sigB64, pub: cpPubSpkiB64
+          delegateId: delegateId, msgType: 'fill-done', url: '', ecdh: '', ts: ts, sig: sigB64, pub: cpPubSpkiB64
         }))
       }
       ws.onmessage = function() { ws.close() }
@@ -645,7 +645,7 @@
     if (!cpSigningKey || !cpPubSpkiB64) return
     var saveNonce = crypto.randomUUID()
     var ts = Date.now()
-    var payload = JSON.stringify({ url: saveUrl, nonce: saveNonce, ecdh: '', ts: ts, msgType: 'save-url', uuid: uuid || '', vaultUuid: vaultUuid || '', query: '' })
+    var payload = JSON.stringify({ version: 1, sender: delegateId || '', recipient: pairedProfile?.dashboardId || '', url: saveUrl, nonce: saveNonce, ecdh: '', ts: ts, msgType: 'save-url', uuid: uuid || '', vaultUuid: vaultUuid || '', query: '' })
     crypto.subtle.sign(
       { name: 'ECDSA', hash: 'SHA-256' }, cpSigningKey, new TextEncoder().encode(payload)
     ).then(function(sigBytes) {
@@ -655,7 +655,7 @@
       ws.onopen = function() {
         ws.send(JSON.stringify({
           type: 'publish', channel: 'portpass-autofill', replyTo: saveNonce,
-          msgType: 'save-url', uuid: uuid, vaultUuid: vaultUuid,
+          delegateId: delegateId, msgType: 'save-url', uuid: uuid, vaultUuid: vaultUuid,
           url: saveUrl, ecdh: '', ts: ts, sig: sigB64, pub: cpPubSpkiB64
         }))
       }
@@ -668,6 +668,27 @@
     $transport.saveUrl(uuid, vaultUuid || null)
   }
 
+  function loadPairedProfile(id) {
+    return new Promise(function(resolve, reject) {
+      var req = indexedDB.open('keyval-store')
+      req.onerror = function() { reject(req.error || new Error('IndexedDB unavailable')) }
+      req.onsuccess = function() {
+        var db = req.result
+        try {
+          var tx = db.transaction('keyval', 'readonly')
+          var store = tx.objectStore('keyval')
+          var gr = store.get('paired-autofill-profiles-v1')
+          gr.onerror = function() { reject(gr.error || new Error('Pairing storage unavailable')) }
+          gr.onsuccess = function() {
+            var all = gr.result || {}
+            var delegateKey = id || all.defaultDelegateId
+            resolve(delegateKey ? (all[delegateKey] || null) : null)
+          }
+        } catch(e) { reject(e) }
+      }
+    })
+  }
+
   // ── Record selection — shared entry point ──────────────────────────────────
   // Called when a picker row is clicked (or auto-advanced for single exact match).
   function selectRecord(rec, fromPhase) {
@@ -1147,6 +1168,35 @@
     setTimeout(function() { try { searchInput.focus() } catch(_) {} }, 50)
   }
 
+  function showNearMatchSummary(count) {
+    hideSearchUI()
+    $subheader.style.display = 'none'
+    $content.innerHTML = ''
+
+    var notice = document.createElement('div')
+    notice.className = 'pp-notice'
+    notice.innerHTML = SVG_WARN + ' No exact password match for '
+    var em = document.createElement('strong')
+    em.textContent = currentUrl
+    em.style.color = 'var(--text)'
+    notice.appendChild(em)
+    $content.appendChild(notice)
+
+    var ph = document.createElement('div')
+    ph.className = 'pp-placeholder'
+    var line1 = document.createElement('div')
+    line1.textContent = count
+      ? count + ' near ' + (count === 1 ? 'match was' : 'matches were') + ' found.'
+      : 'No near matches were found.'
+    var line2 = document.createElement('button')
+    line2.className = 'pp-footer-btn'
+    line2.textContent = 'View in Portpass'
+    line2.onclick = function() { window.open(PORTPASS_URL, '_blank', 'noopener'); window.close() }
+    ph.appendChild(line1)
+    ph.appendChild(line2)
+    $content.appendChild(ph)
+  }
+
   function showSearchResults(records) {
     var hdr = $content.querySelector('.pp-section-hdr')
     var placeholder = $content.querySelector('.pp-placeholder')
@@ -1176,21 +1226,14 @@
       var ecdhSpkiB64 = btoa(String.fromCharCode.apply(null, new Uint8Array(ecdhSpki)))
       nonce = crypto.randomUUID()
 
-      var sigB64 = null, pubSpkiB64 = null
-      if (cprivKey) {
+      var sigB64 = null, pubSpkiB64 = null, helloTs = Date.now()
+      if (pairedProfile && pairedProfile.signingKey) {
         try {
-          var signingKey = await crypto.subtle.importKey(
-            'jwk', cprivKey, { name: 'ECDSA', namedCurve: 'P-256' }, false, ['sign']
-          )
-          var ecdsaPubKey = await crypto.subtle.importKey(
-            'jwk', { kty: cprivKey.kty, crv: cprivKey.crv, x: cprivKey.x, y: cprivKey.y },
-            { name: 'ECDSA', namedCurve: 'P-256' }, true, ['verify']
-          )
-          var ecdsaSpki = await crypto.subtle.exportKey('spki', ecdsaPubKey)
-          pubSpkiB64 = btoa(String.fromCharCode.apply(null, new Uint8Array(ecdsaSpki)))
+          var signingKey = pairedProfile.signingKey
+          pubSpkiB64 = cpPubSpkiB64
           var sigBytes = await crypto.subtle.sign(
             { name: 'ECDSA', hash: 'SHA-256' }, signingKey,
-            new TextEncoder().encode(JSON.stringify({ nonce: nonce, ecdhSpki: ecdhSpkiB64 }))
+            new TextEncoder().encode(JSON.stringify({ version: 1, sender: delegateId || '', recipient: pairedProfile.dashboardId || '', nonce: nonce, ecdhSpki: ecdhSpkiB64, ts: helloTs }))
           )
           sigB64 = btoa(String.fromCharCode.apply(null, new Uint8Array(sigBytes)))
         } catch(_) {}
@@ -1202,7 +1245,7 @@
         if (msg.type === 'hello-response') onHelloResponse(msg)
         else if (msg.type === 'error') sendError(msg.message)
       }
-      var helloMsg = { type: 'hello', pubkey: pubJwk, ecdhSpki: ecdhSpkiB64, nonce: nonce }
+      var helloMsg = { type: 'hello', pubkey: pubJwk, ecdhSpki: ecdhSpkiB64, nonce: nonce, delegateId: delegateId, ts: helloTs }
       if (sigB64 && pubSpkiB64) { helloMsg.sig = sigB64; helloMsg.pub = pubSpkiB64 }
       ch.postMessage(helloMsg)
     } catch(_) { sendError('Key exchange failed') }
diff --git a/pwa/src/lib/Dashboard.svelte b/pwa/src/lib/Dashboard.svelte
index 5a3a14e..1c7b390 100644
--- a/pwa/src/lib/Dashboard.svelte
+++ b/pwa/src/lib/Dashboard.svelte
@@ -13,7 +13,7 @@
   import { addSecondaryCredential, removeSecondaryCredential } from './secondaryVaults.js'
   import { getSwitchboardUrl, getCrossProfileEnabled } from './delegates.js'
   import { isBiometricEnrolledForFile, unlockWithBiometric } from './biometric.js'
-  import { getDelegates, verifyDelegate, recordFill } from './delegates.js'
+  import { getDelegates, verifyDelegateById, recordFill } from './delegates.js'
   import Icon from './Icon.svelte'
   import RecordList from './RecordList.svelte'
   import RecordRead from './RecordRead.svelte'
@@ -382,6 +382,15 @@
 
   let _sbWs = null
   let _sbConnecting = false
+  const sbSeenNonces = new Set()
+  const bcSeenNonces = new Set()
+
+  function rememberNonce(seen, nonce) {
+    if (!nonce || seen.has(nonce)) return false
+    seen.add(nonce)
+    setTimeout(() => seen.delete(nonce), 120000)
+    return true
+  }
 
   function sbWsUrl() {
     // Accept both ws:// and http:// stored formats
@@ -405,14 +414,15 @@
     ws.onmessage = async (event) => {
       try {
         const msg = JSON.parse(event.data)
+        if (msg._switchboard_origin !== location.origin) return
         if (msg.type !== 'publish') return
         const age = Date.now() - msg.ts
         if (age > 60000 || age < -5000) return
-        const spkiBytes = Uint8Array.from(atob(msg.pub), c => c.charCodeAt(0))
         const sigBytes  = Uint8Array.from(atob(msg.sig), c => c.charCodeAt(0))
-        const message   = new TextEncoder().encode(JSON.stringify({ url: msg.url || '', nonce: msg.replyTo, ecdh: msg.ecdh || '', ts: msg.ts,
+        if (!rememberNonce(sbSeenNonces, msg.replyTo)) return
+        const message   = new TextEncoder().encode(JSON.stringify({ version: 1, sender: msg.delegateId || '', recipient: 'local-dashboard', url: msg.url || '', nonce: msg.replyTo, ecdh: msg.ecdh || '', ts: msg.ts,
           msgType: msg.msgType || '', uuid: msg.uuid || '', vaultUuid: msg.vaultUuid || '', query: msg.query || '' }))
-        const verified  = await verifyDelegate(dbKey, spkiBytes, message, sigBytes)
+        const verified  = await verifyDelegateById(dbKey, msg.delegateId || '', message, sigBytes)
         if (!verified) return
         if (msg.msgType === 'fill-done') {
           await recordFill(dbKey, verified.id, 'relay')
@@ -431,26 +441,16 @@
           return
         }
         if (msg.msgType === 'search') {
-          const allVaults = [
-            { uuid: dbKey, readonly: get(selectedFile)?.readonly || false },
-            ...get(secondaryVaults).map(v => ({ uuid: v.uuid, readonly: v.readonly || false })),
-          ]
-          const results = []
-          for (const { uuid: vaultUuid, readonly } of allVaults) {
-            try {
-              for (const recUuid of searchRecords(vaultUuid, msg.query || '', 0)) {
-                const rec = getRecordData(vaultUuid, recUuid)
-                results.push({ uuid: recUuid, vaultUuid: vaultUuid === dbKey ? null : vaultUuid,
-                  title: rec.Title, existingUrl: rec.URL || '', matchType: 'search', readonly })
-              }
-            } catch {}
-          }
-          try { await sbEncryptReply(msg.replyTo, msg.ecdh, results) } catch {}
+          try { await sbEncryptReply(msg.replyTo, msg.ecdh, []) } catch {}
           return
         }
         if (msg.msgType === 'fill-uuid') {
           try {
             const rec = getRecordData(msg.vaultUuid || dbKey, msg.uuid)
+            if (canonicalURL(rec.URL || '') !== canonicalURL(msg.url || '')) {
+              if (_sbWs) _sbWs.send(JSON.stringify({ type: 'reply', replyTo: msg.replyTo, error: 'Credentials require an exact saved URL match' }))
+              return
+            }
             const rf = buildRecordFields(msg.uuid, msg.vaultUuid || null)
             await sbEncryptReply(msg.replyTo, msg.ecdh, [{
               uuid: msg.uuid, vaultUuid: msg.vaultUuid || null,
@@ -462,7 +462,12 @@
           }
           return
         }
-        await processAutofillIntent({ url: msg.url, nonce: msg.replyTo, ecdhSpkiB64: msg.ecdh })
+        const records = autofillFindRecords(msg.url)
+        const exact = records.filter(r => r.matchType === 'exact')
+        const payload = exact.length
+          ? { records: exact, theme: localStorage.getItem('theme') || 'dark', accent: localStorage.getItem('accent') || 'amber' }
+          : { records: [], nearMatchCount: records.length, theme: localStorage.getItem('theme') || 'dark', accent: localStorage.getItem('accent') || 'amber' }
+        await sbEncryptReply(msg.replyTo, msg.ecdh, payload)
       } catch(e) {}
     }
     let closed = false
@@ -551,10 +556,14 @@
             ch.postMessage({ type: 'error', message: 'Autofill request not authorized — reinstall the bookmarklet', nonce: msg.nonce })
             return
           }
-          const spkiBytes = Uint8Array.from(atob(msg.pub), c => c.charCodeAt(0))
           const sigBytes  = Uint8Array.from(atob(msg.sig),  c => c.charCodeAt(0))
-          const sigMsg    = new TextEncoder().encode(JSON.stringify({ nonce: msg.nonce, ecdhSpki: msg.ecdhSpki }))
-          const verified  = await verifyDelegate(dbKey, spkiBytes, sigMsg, sigBytes)
+          const age = Date.now() - (msg.ts || 0)
+          if (age > 60000 || age < -5000 || !rememberNonce(bcSeenNonces, msg.nonce)) {
+            ch.postMessage({ type: 'error', message: 'Autofill request expired — click the bookmarklet again', nonce: msg.nonce })
+            return
+          }
+          const sigMsg    = new TextEncoder().encode(JSON.stringify({ version: 1, sender: msg.delegateId || '', recipient: 'local-dashboard', nonce: msg.nonce, ecdhSpki: msg.ecdhSpki, ts: msg.ts }))
+          const verified  = await verifyDelegateById(dbKey, msg.delegateId || '', sigMsg, sigBytes)
           if (!verified) {
             ch.postMessage({ type: 'error', message: 'Autofill request not authorized', nonce: msg.nonce })
             return
diff --git a/pwa/src/lib/VaultSheet.svelte b/pwa/src/lib/VaultSheet.svelte
index 39fad65..e84fc5b 100644
--- a/pwa/src/lib/VaultSheet.svelte
+++ b/pwa/src/lib/VaultSheet.svelte
@@ -6,6 +6,7 @@
   import { isBiometricSupported, isBiometricEnrolled, enrollBiometric, clearBiometric } from './biometric.js'
   import { makeDelegateBookmarkletUrl } from './bookmarklet.js'
   import { getDelegates, addDelegate, revokeDelegate, setSwitchboardUrl, setCrossProfileEnabled } from './delegates.js'
+  import { createPairedAutofillProfile, removePairedAutofillProfile } from './pairedAutofill.js'
   import Icon from './Icon.svelte'
 
   let { isDesktop, bookmarkletsSupported = false, onback, onlock, onlockall, onlocksecondary, onunlockadditional, ondbsave, onsvdbsave, ondirtychange, theme, accent, ontheme, onaccent } = $props()
@@ -165,7 +166,6 @@
   let delegates = $state([])
   let newDelegateOpen = $state(false)
   let newDelegateName = $state('')
-  let newDelegatePrivKeyJwk = $state(null)
   let newDelegatePubKeySpki = $state(null)
   let newDelegateId   = $state(null)
   let newDelegateUrl  = $state('')
@@ -179,8 +179,8 @@
   let globeTipOpen = $state(false)
 
   let chipUsed   = $derived(chipDragged || chipLinked)
-  let canUseChip = $derived(!!newDelegateName.trim() && !!newDelegatePrivKeyJwk)
-  let canCommit  = $derived((!!newDelegateName.trim() || chipUsed) && !!newDelegatePrivKeyJwk && !newDelegateBusy)
+  let canUseChip = $derived(!!newDelegateName.trim() && !!newDelegatePubKeySpki)
+  let canCommit  = $derived((!!newDelegateName.trim() || chipUsed) && !!newDelegatePubKeySpki && !newDelegateBusy)
 
   function defaultDelegateName() {
     return 'Bookmarklet created ' + new Date(newDelegateBirthAt ?? Date.now()).toLocaleString(
@@ -192,7 +192,6 @@
   async function openNewDelegate() {
     newDelegateOpen = true
     newDelegateName = ''
-    newDelegatePrivKeyJwk = null
     newDelegatePubKeySpki = null
     newDelegateId   = null
     newDelegateUrl  = ''
@@ -204,15 +203,14 @@
     chipLinked  = false
     globeTipOpen = false
     try {
-      const keyPair = await crypto.subtle.generateKey(
-        { name: 'ECDSA', namedCurve: 'P-256' }, true, ['sign', 'verify']
-      )
-      newDelegatePrivKeyJwk = await crypto.subtle.exportKey('jwk', keyPair.privateKey)
-      newDelegatePubKeySpki = await crypto.subtle.exportKey('spki', keyPair.publicKey)
-      newDelegateId  = crypto.randomUUID()
+      const profile = await createPairedAutofillProfile({
+        relayUrl: get(switchboardUrl),
+      })
+      newDelegateId = profile.delegateId
+      newDelegatePubKeySpki = new Uint8Array(profile.publicKey).buffer
       newDelegateUrl = makeDelegateBookmarkletUrl(
         window.location.origin + import.meta.env.BASE_URL,
-        newDelegatePrivKeyJwk, newDelegateId,
+        newDelegateId,
         get(switchboardUrl)
       )
     } catch (e) {
@@ -223,7 +221,6 @@
   function closeNewDelegate() {
     newDelegateOpen = false
     newDelegateName = ''
-    newDelegatePrivKeyJwk = null
     newDelegatePubKeySpki = null
     newDelegateId   = null
     newDelegateUrl  = ''
@@ -252,7 +249,10 @@
 
   async function cancelOrSave() {
     if (chipUsed) await commitDelegate()
-    else closeNewDelegate()
+    else {
+      if (newDelegateId) await removePairedAutofillProfile(newDelegateId).catch(() => {})
+      closeNewDelegate()
+    }
   }
 
   async function revokeOne(delegateId) {
@@ -460,7 +460,7 @@
           <div class="delegate-row">
             <div class="delegate-info">
               <span class="delegate-name">{d.name}</span>
-              <span class="delegate-meta muted">Created {fmtDate(d.created)} · {total} {total === 1 ? 'page filled' : 'pages filled'}{lastTs ? ' · Last filled ' + fmtRelative(lastTs) : ''}</span>
+              <span class="delegate-meta muted">Created {fmtDate(d.created)}{d.displayCode ? ' · ' + d.displayCode : ''} · {total} {total === 1 ? 'page filled' : 'pages filled'}{lastTs ? ' · Last filled ' + fmtRelative(lastTs) : ''}</span>
             </div>
             <button class="delegate-revoke" onclick={() => revokeOne(d.id)}>Revoke</button>
           </div>
@@ -756,7 +756,7 @@
       {/if}
       <div class="vs-install-warning">
         <Icon name="alert-triangle" size={28}/>
-        <span>The bookmarklet contains a unique private key that will not be shown again. Drag it to your bookmarks bar or copy the link before closing.</span>
+        <span>The bookmarklet contains no private key. Its paired signing key stays in this browser profile's Portpass storage and can be revoked here.</span>
       </div>
       <div style="margin-top:8px">
         <button class="vs-close-btn" disabled={!canCommit} onclick={commitDelegate}>
diff --git a/pwa/src/lib/bookmarklet.js b/pwa/src/lib/bookmarklet.js
index b3f9991..8126f77 100644
--- a/pwa/src/lib/bookmarklet.js
+++ b/pwa/src/lib/bookmarklet.js
@@ -1,18 +1,18 @@
-// Portpass autofill bookmarklet — delegate (cross-profile) variant.
-// makeDelegateBookmarkletUrl(portpassUrl, privKeyJwk) returns the javascript: URL
-// for a named delegate. privKeyJwk is a Web Crypto JWK export of the ECDSA P-256 private key.
+// Portpass autofill bookmarklet page agent.
+// The bookmarklet intentionally contains no durable private key. It only carries
+// Portpass routing data; autofill.html signs requests using Portpass-origin storage.
 
-export function makeDelegateBookmarkletUrl(portpassUrl, privKeyJwk, delegateId, relayUrl) {
+export function makeDelegateBookmarkletUrl(portpassUrl, delegateId, relayUrl) {
   const origin = new URL(portpassUrl).origin
   return 'javascript:' + encodeURIComponent(
-    `(${DELEGATE_BOOKMARKLET_IIFE.toString()})(${JSON.stringify(portpassUrl)},${JSON.stringify(origin)},${JSON.stringify(privKeyJwk)},${JSON.stringify(delegateId)},${JSON.stringify(relayUrl)})`
+    `(${DELEGATE_BOOKMARKLET_IIFE.toString()})(${JSON.stringify(portpassUrl)},${JSON.stringify(origin)},${JSON.stringify(delegateId)},${JSON.stringify(relayUrl)})`
   )
 }
 
 // Self-contained IIFE embedded in the javascript: URL.
 // PORTPASS_URL and PORTPASS_ORIGIN are baked in at install time via JSON.stringify.
-// PRIV_KEY_JWK is the ECDSA P-256 private key; DELEGATE_ID identifies the delegate on the switchboard.
-function DELEGATE_BOOKMARKLET_IIFE(PORTPASS_URL, PORTPASS_ORIGIN, PRIV_KEY_JWK, DELEGATE_ID, RELAY_URL) {
+// DELEGATE_ID identifies the paired autofill popup profile.
+function DELEGATE_BOOKMARKLET_IIFE(PORTPASS_URL, PORTPASS_ORIGIN, DELEGATE_ID, RELAY_URL) {
   'use strict'
 
   if (window.__ppRunning) return
@@ -89,7 +89,6 @@ function DELEGATE_BOOKMARKLET_IIFE(PORTPASS_URL, PORTPASS_ORIGIN, PRIV_KEY_JWK,
         url: currentCanonical,
         saveUrl: saveUrl,
         isSecure: isSecure,
-        privKey: PRIV_KEY_JWK,
         delegateId: DELEGATE_ID,
         relayUrl: RELAY_URL,
         hasActiveField: !!activeEl,
diff --git a/pwa/src/lib/delegates.js b/pwa/src/lib/delegates.js
index 72ebe70..da7c996 100644
--- a/pwa/src/lib/delegates.js
+++ b/pwa/src/lib/delegates.js
@@ -3,6 +3,12 @@ import { get, set, del } from 'idb-keyval'
 const STORAGE_KEY = 'delegates-v1'
 const SWITCHBOARD_URL_DEFAULT = 'ws://localhost:7577'
 
+function delegateDisplayCode(id) {
+  if (!id?.startsWith('afp1_')) return null
+  const fp = id.slice(5)
+  return fp.slice(-8).replace(/(.{4})/g, '$1-').replace(/-$/, '').toUpperCase()
+}
+
 async function load() {
   return (await get(STORAGE_KEY)) ?? {}
 }
@@ -26,12 +32,19 @@ export async function getDelegates(vaultUuid) {
   return (all[vaultUuid] ?? []).map(migrate)
 }
 
+export async function getDelegate(vaultUuid, delegateId) {
+  if (!vaultUuid || !delegateId) return null
+  const all = await load()
+  return (all[vaultUuid] ?? []).map(migrate).find(d => d.id === delegateId) ?? null
+}
+
 export async function addDelegate(vaultUuid, name, publicKeySpki, id = crypto.randomUUID()) {
   const all = await load()
   const delegate = {
     id,
     name,
     publicKey: Array.from(new Uint8Array(publicKeySpki)),
+    displayCode: delegateDisplayCode(id),
     created: Date.now(),
     bcCount: 0,
     bcLastUsed: null,
@@ -73,6 +86,23 @@ export async function verifyDelegate(vaultUuid, spkiBytes, message, signatureByt
   return null
 }
 
+export async function verifyDelegateById(vaultUuid, delegateId, message, signatureBytes) {
+  const d = await getDelegate(vaultUuid, delegateId)
+  if (!d) return null
+  try {
+    const spkiBytes = new Uint8Array(d.publicKey)
+    const key = await crypto.subtle.importKey(
+      'spki', spkiBytes, { name: 'ECDSA', namedCurve: 'P-256' }, false, ['verify']
+    )
+    const valid = await crypto.subtle.verify(
+      { name: 'ECDSA', hash: 'SHA-256' }, key, signatureBytes, message
+    )
+    return valid ? d : null
+  } catch {
+    return null
+  }
+}
+
 // Record a successful page fill for a delegate. Called when autofill.html shows
 // its done/checkmark screen — once per page filled, not per field or connection.
 export async function recordFill(vaultUuid, delegateId, channel) {
diff --git a/pwa/src/lib/pairedAutofill.js b/pwa/src/lib/pairedAutofill.js
new file mode 100644
index 0000000..ffd55f8
--- /dev/null
+++ b/pwa/src/lib/pairedAutofill.js
@@ -0,0 +1,92 @@
+import { get, set, del } from 'idb-keyval'
+
+const STORAGE_KEY = 'paired-autofill-profiles-v1'
+
+async function load() {
+  return (await get(STORAGE_KEY)) ?? {}
+}
+
+async function save(all) {
+  if (Object.keys(all).length === 0) await del(STORAGE_KEY)
+  else await set(STORAGE_KEY, all)
+}
+
+function bytesToB64(bytes) {
+  return btoa(String.fromCharCode(...new Uint8Array(bytes)))
+}
+
+const BASE32 = 'abcdefghijklmnopqrstuvwxyz234567'
+
+function base32NoPad(bytes) {
+  let out = ''
+  let value = 0
+  let bits = 0
+  for (const byte of bytes) {
+    value = (value << 8) | byte
+    bits += 8
+    while (bits >= 5) {
+      out += BASE32[(value >>> (bits - 5)) & 31]
+      bits -= 5
+    }
+  }
+  if (bits > 0) out += BASE32[(value << (5 - bits)) & 31]
+  return out
+}
+
+async function delegateIdFromPublicKey(publicKeySpki) {
+  const digest = new Uint8Array(await crypto.subtle.digest('SHA-256', publicKeySpki))
+  const fp = base32NoPad(digest.slice(0, 16))
+  return {
+    delegateId: `afp1_${fp}`,
+    displayCode: fp.slice(-8).replace(/(.{4})/g, '$1-').replace(/-$/, '').toUpperCase(),
+  }
+}
+
+export async function createPairedAutofillProfile({ relayUrl = '', dashboardId = 'local-dashboard' } = {}) {
+  const keyPair = await crypto.subtle.generateKey(
+    { name: 'ECDSA', namedCurve: 'P-256' }, false, ['sign', 'verify']
+  )
+  const publicKeySpki = await crypto.subtle.exportKey('spki', keyPair.publicKey)
+  const { delegateId, displayCode } = await delegateIdFromPublicKey(publicKeySpki)
+  const profile = {
+    delegateId,
+    displayCode,
+    dashboardId,
+    relayUrl,
+    created: Date.now(),
+    signingKey: keyPair.privateKey,
+    publicKey: Array.from(new Uint8Array(publicKeySpki)),
+    publicKeyB64: bytesToB64(publicKeySpki),
+  }
+  const all = await load()
+  all[delegateId] = profile
+  all.defaultDelegateId = delegateId
+  await save(all)
+  return profile
+}
+
+export async function getPairedAutofillProfile(delegateId = null) {
+  const all = await load()
+  const id = delegateId || all.defaultDelegateId
+  if (!id) return null
+  return all[id] ?? null
+}
+
+export async function removePairedAutofillProfile(delegateId) {
+  const all = await load()
+  delete all[delegateId]
+  if (all.defaultDelegateId === delegateId) {
+    const next = Object.keys(all).find(k => k !== 'defaultDelegateId')
+    if (next) all.defaultDelegateId = next
+    else delete all.defaultDelegateId
+  }
+  await save(all)
+}
+
+export async function signPairedAutofillMessage(profile, payload) {
+  const bytes = new TextEncoder().encode(JSON.stringify(payload))
+  const sig = await crypto.subtle.sign(
+    { name: 'ECDSA', hash: 'SHA-256' }, profile.signingKey, bytes
+  )
+  return bytesToB64(sig)
+}
diff --git a/pwa/tests/bookmarklet.spec.ts b/pwa/tests/bookmarklet.spec.ts
index 7b9d191..d56dc7b 100644
--- a/pwa/tests/bookmarklet.spec.ts
+++ b/pwa/tests/bookmarklet.spec.ts
@@ -15,8 +15,8 @@ const LOGIN_FORM_HTML = `<!doctype html><html><body>
 <script>document.getElementById('f').onsubmit=e=>e.preventDefault()</script>
 </body></html>`
 
-// Creates a delegate via the VaultSheet UI and returns its bookmarklet URL.
-// The private key is embedded in the returned javascript: URL by the app.
+// Creates a paired autofill profile via the VaultSheet UI and returns its
+// bookmarklet URL. The URL must not contain private key material.
 async function createDelegateBookmarklet(portpass: Page): Promise<string> {
   await portpass.locator('.vault-pill').click()
   await expect(portpass.locator('.vault-settings-body')).toBeVisible()
@@ -124,6 +124,36 @@ test.setTimeout(30000)
 
 test.describe('Bookmarklet — autofill popup phases', () => {
 
+  test('generated bookmarklet contains routing data but no private key material', async ({ context }) => {
+    const { bookmarkletUrl } = await setupAutofillTest(context)
+    const decoded = decodeURIComponent(bookmarkletUrl)
+
+    expect(decoded).toContain('autofill.html')
+    expect(decoded).toContain('delegateId')
+    expect(decoded).toMatch(/afp1_[a-z2-7]{26}/)
+    expect(decoded).not.toContain('privKey')
+    expect(decoded).not.toContain('d":"')
+    expect(decoded).not.toContain('"key_ops":["sign"]')
+  })
+
+  test('revoked paired delegate is rejected even if bookmarklet URL is stolen', async ({ context }) => {
+    const { login, portpass, bookmarkletUrl } = await setupAutofillTest(context)
+    await createRecord(portpass, {
+      title: 'Revoked Site', username: 'alice', password: 'hunter2',
+      autotype: '\\u\\t\\p', url: LOGIN_URL,
+    })
+
+    await portpass.locator('.vault-pill').click()
+    await portpass.getByRole('button', { name: 'Revoke', exact: true }).click()
+    await portpass.keyboard.press('Escape')
+    await expect(portpass.locator('.vault-settings-body')).not.toBeVisible({ timeout: 3000 })
+
+    const popup = await activateBookmarklet(login, bookmarkletUrl, { clickRow: false })
+    await expect(popup.locator('.pp-error-title')).toBeVisible({ timeout: 5000 })
+    await expect(login.locator('#user')).toHaveValue('')
+    await expect(login.locator('#pass')).toHaveValue('')
+  })
+
   test('waiting phase shows selected record title', async ({ context }) => {
     const { login, portpass, bookmarkletUrl } = await setupAutofillTest(context)
     await createRecord(portpass, { title: 'My Bank', autotype: '\\u\\t\\p\\n' })

From e6efca93c4279b0743dcc1e8eeea422c482ea176 Mon Sep 17 00:00:00 2001
From: Dan Brown <danbrown@gmail.com>
Date: Fri, 29 May 2026 06:42:07 +0200
Subject: [PATCH 16/20] Add cross-profile autofill pairing

---
 AUTOFILL.md                   |  19 ++-
 pwa/public/autofill.html      | 212 +++++++++++++++++++++++++++++++++-
 pwa/src/lib/Dashboard.svelte  |  25 +++-
 pwa/src/lib/VaultSheet.svelte | 165 +++++++++++++++++++++++++-
 pwa/src/lib/delegates.js      |   9 +-
 pwa/src/lib/pairedAutofill.js |  73 ++++++++++--
 pwa/tests/bookmarklet.spec.ts |  34 ++++++
 7 files changed, 505 insertions(+), 32 deletions(-)

diff --git a/AUTOFILL.md b/AUTOFILL.md
index 878b423..39a8884 100644
--- a/AUTOFILL.md
+++ b/AUTOFILL.md
@@ -12,7 +12,7 @@ Consequences of this scope:
 - Mobile browsers: not supported — the bookmarks bar is not accessible
 - Same-profile: works with no helper process. `window.open()`, `postMessage`, and `BroadcastChannel` stay within one browser profile.
 - Cross-profile and cross-browser: uses a local WebSocket switchboard relay. Browser-native `BroadcastChannel` cannot cross profile or browser boundaries, so the relay is the transport bridge.
-- Clean browser profile: supported by the relay protocol; the remaining product work is the explicit cross-profile pairing UI.
+- Clean browser profile: supported by the relay protocol and copy/paste pairing ceremony.
 
 ### Cross-profile / cross-browser bridging options
 
@@ -60,12 +60,12 @@ Same-profile setup currently uses the "New bookmarklet" flow:
 3. Dashboard stores the delegate public key, name, created time, display code, and revocation/use metadata.
 4. The generated bookmarklet contains only the Portpass URL, relay routing data, delegate ID, and page-agent code.
 
-True cross-profile pairing needs one additional UI ceremony because profile A and profile B do not share IndexedDB. The intended flow is:
+True cross-profile pairing needs one additional UI ceremony because profile A and profile B do not share IndexedDB. The implemented copy/paste-token flow is:
 
 1. User opens D in the clean Portpass profile and chooses "Add autofill profile".
 2. User opens A in the filling profile.
 3. A generates a delegate signing keypair locally. The private key never leaves profile A's Portpass origin storage.
-4. A and D pair over R using a human-authenticated ceremony: QR code, short pairing code, or copy/paste pairing token.
+4. A shows a `ppair1_...` token containing its public key, relay URL, expiry, pairing ID, and short display code.
 5. D stores A's public key, delegate name, created time, and revocation metadata.
 6. A stores D's public key or pairing identifier so it can authenticate D's replies.
 
@@ -154,10 +154,9 @@ It also removes the reusable-secret exposure from B. A malicious website can sti
 
 #### Remaining work
 
-1. Add the human-authenticated cross-profile pairing ceremony and UI.
-2. Bind relay replies more tightly to request IDs / previous message hashes.
-3. Add relay-focused tests for replay rejection, wrong-origin URL claims, metadata-only no-match behavior, and exact-match credential release.
-4. Optionally add activity logs in VaultSheet: delegate, channel, page origin, action, record title, timestamp, and whether credentials were released.
+1. Add relay-focused tests for replay rejection, wrong-origin URL claims, metadata-only no-match behavior, and exact-match credential release.
+2. Optionally add QR or short-code pairing on top of the copy/paste token flow.
+3. Optionally add activity logs in VaultSheet: delegate, channel, page origin, action, record title, timestamp, and whether credentials were released.
 
 ---
 
@@ -245,7 +244,7 @@ The bookmarklet contains no private key. Portpass creates a paired autofill prof
 4. Pair the filling profile's `autofill.html` delegate with the clean-profile Dashboard.
 5. Install the bookmarklet in the filling profile.
 
-The full human-authenticated cross-profile pairing UI is still a separate step from the same-profile "New bookmarklet" flow. The protocol expects the filling profile to hold the non-extractable private signing key and the clean profile to hold the matching public delegate record.
+Cross-profile pairing is separate from the same-profile "New bookmarklet" flow. The filling profile holds the non-extractable private signing key and displays a `ppair1_...` token from `autofill.html?pair=1`; the clean profile imports that token with Vault settings → Autofill → Add autofill profile and stores the matching public delegate record.
 
 ### Per-use
 
@@ -318,7 +317,7 @@ Cross-profile communication uses the switchboard relay. The relay is treated as
 
 ## Implementation status (as of 2026-05-28)
 
-The secure paired-delegate foundation is implemented. The bookmarklet no longer contains a private key; the durable signing key lives in `autofill.html`'s Portpass-origin IndexedDB storage and is created as a non-extractable WebCrypto key. Same-profile autofill is working through this model. Cross-profile transport and stricter relay-side authorization are implemented; the full human-authenticated cross-profile pairing ceremony is still the remaining UI/protocol step.
+The secure paired-delegate foundation is implemented. The bookmarklet no longer contains a private key; the durable signing key lives in `autofill.html`'s Portpass-origin IndexedDB storage and is created as a non-extractable WebCrypto key. Same-profile autofill is working through this model. Cross-profile transport, copy/paste pairing, reply binding, and stricter relay-side authorization are implemented.
 
 ### What is built
 
@@ -455,7 +454,7 @@ The popup code uses the same broad UI shell in both modes, but credential releas
 
 ### Browser notes
 
-- **Chrome and Firefox** tested for the same-profile bookmarklet flow. Cross-profile relay transport is implemented; full cross-profile pairing UI remains to be completed.
+- **Chrome and Firefox** tested for the same-profile bookmarklet flow. Cross-profile relay transport and copy/paste pairing UI are implemented; relay end-to-end testing still needs the local switchboard path exercised in CI/manual QA.
 - **Switchboard URL**: use `http://localhost:7577` (not `http://127.0.0.1:7577`). Firefox's mixed-content loopback exemption is specified for `localhost`; `127.0.0.1` may not be exempt on older Firefox versions.
 - **Protocol handler** (`web+portpass://` LaunchQueue): tested on Chrome/Linux where it routes to the active profile rather than the PWA's profile. May behave correctly on macOS/Windows — `handleIntent` in App.svelte is wired up for this path.
 
diff --git a/pwa/public/autofill.html b/pwa/public/autofill.html
index 2b96d1e..84b4421 100644
--- a/pwa/public/autofill.html
+++ b/pwa/public/autofill.html
@@ -287,8 +287,9 @@
   var SVG_WAITING  = '<svg width="90" height="70"' + _S.replace('currentColor','currentColor') + ' stroke-width="1.5"><rect x="4" y="4" width="66" height="46" rx="8" stroke-dasharray="5 3"/><line x1="14" y1="18" x2="50" y2="18" stroke-width="2" stroke-linecap="round"/><line x1="14" y1="28" x2="42" y2="28" stroke-width="2" stroke-linecap="round"/><circle cx="62" cy="46" r="15" style="fill:var(--amber-bg)" stroke="none"/><path d="m55 46 5 5 9-9" style="stroke:var(--amber)" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>'
 
   // ── Shared state ───────────────────────────────────────────────────────────
+  var pairMode = new URLSearchParams(location.search).has('pair')
   var pingNonce = crypto.randomUUID()
-  var ch = new BroadcastChannel('portpass-autofill')
+  var ch = pairMode ? null : new BroadcastChannel('portpass-autofill')
   var bookmarkletOrigin = null
   var isSecure = false
   var currentUrl = ''
@@ -370,6 +371,13 @@
     $content.appendChild(el)
   }
 
+  var PAIR_BASE32 = 'abcdefghijklmnopqrstuvwxyz234567'
+
+  if (pairMode) {
+    showPairingSetup()
+    return
+  }
+
   // ── Startup: generate ECDH key pair, signal ready ─────────────────────────
   crypto.subtle.generateKey(
     { name: 'ECDH', namedCurve: 'P-256' }, true, ['deriveKey']
@@ -501,11 +509,11 @@
     $transport = {
       search: async function(q) {
         var blob = await cpSignAndSend('search', { url: q, query: q })
-        return decryptReply(blob)
+        return decryptReply(blob, blob.replyTo)
       },
       fill: async function(uuid, vu) {
         var blob = await cpSignAndSend('fill-uuid', { url: currentUrl, uuid: uuid, vaultUuid: vu || null })
-        var results = await decryptReply(blob)
+        var results = await decryptReply(blob, blob.replyTo)
         if (!results || !results.length) throw new Error('Could not get credentials')
         return results[0]
       },
@@ -562,7 +570,7 @@
     })
   }
 
-  async function decryptReply(blob) {
+  async function decryptReply(blob, expectedRequestId) {
     var ephPubJwk = JSON.parse(atob(blob.ephPub))
     var ephPubKey = await crypto.subtle.importKey('jwk', ephPubJwk, { name: 'ECDH', namedCurve: 'P-256' }, false, [])
     var cpSessionKey = await crypto.subtle.deriveKey(
@@ -572,13 +580,20 @@
     var iv = Uint8Array.from(atob(blob.iv), function(c) { return c.charCodeAt(0) })
     var ct = Uint8Array.from(atob(blob.ciphertext), function(c) { return c.charCodeAt(0) })
     var pt = await crypto.subtle.decrypt({ name: 'AES-GCM', iv: iv }, cpSessionKey, ct)
-    return JSON.parse(new TextDecoder().decode(pt))
+    var parsed = JSON.parse(new TextDecoder().decode(pt))
+    if (parsed && parsed.v === 1 && Object.prototype.hasOwnProperty.call(parsed, 'data')) {
+      if (expectedRequestId && parsed.requestId !== expectedRequestId) throw new Error('Relay reply did not match request')
+      if (parsed.delegateId && delegateId && parsed.delegateId !== delegateId) throw new Error('Relay reply was for a different delegate')
+      if (parsed.recipient && parsed.recipient !== 'autofill-popup') throw new Error('Relay reply was for a different recipient')
+      return parsed.data
+    }
+    return parsed
   }
 
   async function processRelayBlob(blob) {
     if (blob.error) { sendError(blob.error); return }
     try {
-      var data = await decryptReply(blob)
+      var data = await decryptReply(blob, blob.replyTo)
       if (data && data.records) {
         applyTheme(data.theme === 'dark', data.accent || 'amber')
         if ((!data.records || !data.records.length) && data.nearMatchCount !== undefined) showNearMatchSummary(data.nearMatchCount)
@@ -689,6 +704,191 @@
     })
   }
 
+  function savePairedProfile(profile) {
+    return new Promise(function(resolve, reject) {
+      var req = indexedDB.open('keyval-store')
+      req.onerror = function() { reject(req.error || new Error('IndexedDB unavailable')) }
+      req.onupgradeneeded = function() {
+        var db = req.result
+        if (!db.objectStoreNames.contains('keyval')) db.createObjectStore('keyval')
+      }
+      req.onsuccess = function() {
+        var db = req.result
+        try {
+          var tx = db.transaction('keyval', 'readwrite')
+          var store = tx.objectStore('keyval')
+          var gr = store.get('paired-autofill-profiles-v1')
+          gr.onerror = function() { reject(gr.error || new Error('Pairing storage unavailable')) }
+          gr.onsuccess = function() {
+            var all = gr.result || {}
+            all[profile.delegateId] = profile
+            all.defaultDelegateId = profile.delegateId
+            var pr = store.put(all, 'paired-autofill-profiles-v1')
+            pr.onerror = function() { reject(pr.error || new Error('Pairing storage unavailable')) }
+            pr.onsuccess = function() { resolve(profile) }
+          }
+        } catch(e) { reject(e) }
+      }
+    })
+  }
+
+  function pairBase32(bytes) {
+    var out = '', bits = ''
+    for (var i = 0; i < bytes.length; i++) {
+      bits += bytes[i].toString(2).padStart(8, '0')
+      while (bits.length >= 5) {
+        out += PAIR_BASE32[parseInt(bits.slice(0, 5), 2)]
+        bits = bits.slice(5)
+      }
+    }
+    if (bits.length > 0) out += PAIR_BASE32[parseInt(bits.padEnd(5, '0'), 2)]
+    return out
+  }
+
+  function pairBytesToB64(bytes) {
+    return btoa(String.fromCharCode.apply(null, new Uint8Array(bytes)))
+  }
+
+  function pairB64url(s) {
+    return btoa(s).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '')
+  }
+
+  async function identityFromPairingPublicKey(publicKeySpki) {
+    var digest = new Uint8Array(await crypto.subtle.digest('SHA-256', publicKeySpki))
+    var fp = pairBase32(digest.slice(0, 16))
+    return {
+      delegateId: 'afp1_' + fp,
+      displayCode: fp.slice(-8).replace(/(.{4})/g, '$1-').replace(/-$/, '').toUpperCase(),
+    }
+  }
+
+  function pairingTokenForProfile(profile, name) {
+    var now = Date.now()
+    var token = {
+      v: 1,
+      type: 'portpass-autofill-pairing',
+      delegateId: profile.delegateId,
+      displayCode: profile.displayCode,
+      name: name || '',
+      publicKeyB64: profile.publicKeyB64,
+      relayUrl: profile.relayUrl || '',
+      pairingId: profile.pairingId,
+      created: profile.created,
+      expires: now + 10 * 60 * 1000,
+    }
+    return 'ppair1_' + pairB64url(JSON.stringify(token))
+  }
+
+  async function createPairingProfile(relayUrl) {
+    var keyPair = await crypto.subtle.generateKey(
+      { name: 'ECDSA', namedCurve: 'P-256' }, false, ['sign', 'verify']
+    )
+    var spki = await crypto.subtle.exportKey('spki', keyPair.publicKey)
+    var identity = await identityFromPairingPublicKey(spki)
+    var profile = {
+      delegateId: identity.delegateId,
+      displayCode: identity.displayCode,
+      dashboardId: 'local-dashboard',
+      relayUrl: relayUrl || '',
+      pairingId: crypto.randomUUID(),
+      created: Date.now(),
+      signingKey: keyPair.privateKey,
+      publicKey: Array.from(new Uint8Array(spki)),
+      publicKeyB64: pairBytesToB64(spki),
+    }
+    return savePairedProfile(profile)
+  }
+
+  function showPairingSetup() {
+    hideSearchUI()
+    $subheader.style.display = 'none'
+    $content.innerHTML = ''
+
+    var wrap = document.createElement('div')
+    wrap.style.cssText = 'padding:16px;display:flex;flex-direction:column;gap:12px'
+
+    var title = document.createElement('div')
+    title.className = 'pp-waiting-title'
+    title.textContent = 'Pair this autofill profile'
+    wrap.appendChild(title)
+
+    var help = document.createElement('div')
+    help.className = 'pp-waiting-sub'
+    help.style.textAlign = 'left'
+    help.textContent = 'Create a pairing token here, then paste it into Portpass in the clean profile using Vault settings → Autofill → Add autofill profile.'
+    wrap.appendChild(help)
+
+    var name = document.createElement('input')
+    name.className = 'pp-search'
+    name.placeholder = 'Name, e.g. Firefox — daily profile'
+    wrap.appendChild(name)
+
+    var relay = document.createElement('input')
+    relay.className = 'pp-search'
+    relay.placeholder = 'Relay URL, e.g. http://localhost:7577'
+    relay.value = 'http://localhost:7577'
+    wrap.appendChild(relay)
+
+    var create = document.createElement('button')
+    create.className = 'pp-footer-btn'
+    create.style.alignSelf = 'flex-start'
+    create.textContent = 'Create pairing token'
+    wrap.appendChild(create)
+
+    var code = document.createElement('div')
+    code.className = 'rec-match-badge'
+    code.style.alignSelf = 'flex-start'
+    code.style.display = 'none'
+    wrap.appendChild(code)
+
+    var token = document.createElement('textarea')
+    token.className = 'pp-search'
+    token.rows = 8
+    token.readOnly = true
+    token.style.display = 'none'
+    token.style.resize = 'vertical'
+    wrap.appendChild(token)
+
+    var copy = document.createElement('button')
+    copy.className = 'pp-footer-btn'
+    copy.style.cssText = 'align-self:flex-start;display:none'
+    copy.textContent = 'Copy token'
+    wrap.appendChild(copy)
+
+    var status = document.createElement('div')
+    status.className = 'pp-waiting-sub'
+    status.style.textAlign = 'left'
+    wrap.appendChild(status)
+
+    create.onclick = function() {
+      create.disabled = true
+      status.textContent = 'Creating profile…'
+      createPairingProfile(relay.value.trim()).then(function(profile) {
+        token.value = pairingTokenForProfile(profile, name.value.trim())
+        token.style.display = ''
+        copy.style.display = ''
+        code.style.display = ''
+        code.textContent = 'Code ' + profile.displayCode
+        status.textContent = 'Token expires in 10 minutes. After pairing, create or update the bookmarklet in this profile.'
+      }).catch(function(e) {
+        create.disabled = false
+        status.textContent = e.message || 'Could not create pairing token'
+      })
+    }
+
+    copy.onclick = function() {
+      navigator.clipboard.writeText(token.value).then(function() {
+        copy.textContent = 'Copied!'
+        setTimeout(function() { copy.textContent = 'Copy token' }, 1800)
+      }).catch(function() {
+        token.focus()
+        token.select()
+      })
+    }
+
+    $content.appendChild(wrap)
+  }
+
   // ── Record selection — shared entry point ──────────────────────────────────
   // Called when a picker row is clicked (or auto-advanced for single exact match).
   function selectRecord(rec, fromPhase) {
diff --git a/pwa/src/lib/Dashboard.svelte b/pwa/src/lib/Dashboard.svelte
index 1c7b390..ac7f7b5 100644
--- a/pwa/src/lib/Dashboard.svelte
+++ b/pwa/src/lib/Dashboard.svelte
@@ -337,12 +337,26 @@
   }
 
   // Encrypt data with the autofill popup's ECDH public key and send as a ws-relay reply.
-  async function sbEncryptReply(replyTo, ecdhSpkiB64Arg, data) {
+  async function sha256B64(bytes) {
+    const digest = await crypto.subtle.digest('SHA-256', bytes)
+    return btoa(String.fromCharCode(...new Uint8Array(digest)))
+  }
+
+  async function sbEncryptReply(replyTo, ecdhSpkiB64Arg, data, meta = {}) {
     const ephPair = await crypto.subtle.generateKey({ name: 'ECDH', namedCurve: 'P-256' }, true, ['deriveKey'])
     const relayPub = await crypto.subtle.importKey('spki', Uint8Array.from(atob(ecdhSpkiB64Arg), c => c.charCodeAt(0)), { name: 'ECDH', namedCurve: 'P-256' }, false, [])
     const sk = await crypto.subtle.deriveKey({ name: 'ECDH', public: relayPub }, ephPair.privateKey, { name: 'AES-GCM', length: 256 }, false, ['encrypt'])
     const iv = crypto.getRandomValues(new Uint8Array(12))
-    const ct = await crypto.subtle.encrypt({ name: 'AES-GCM', iv }, sk, new TextEncoder().encode(JSON.stringify(data)))
+    const envelope = {
+      v: 1,
+      requestId: replyTo,
+      requestHash: meta.requestHash || null,
+      delegateId: meta.delegateId || null,
+      recipient: meta.recipient || 'autofill-popup',
+      ts: Date.now(),
+      data,
+    }
+    const ct = await crypto.subtle.encrypt({ name: 'AES-GCM', iv }, sk, new TextEncoder().encode(JSON.stringify(envelope)))
     const ephPubJwk = await crypto.subtle.exportKey('jwk', ephPair.publicKey)
     if (_sbWs) _sbWs.send(JSON.stringify({
       type: 'reply', replyTo,
@@ -422,6 +436,7 @@
         if (!rememberNonce(sbSeenNonces, msg.replyTo)) return
         const message   = new TextEncoder().encode(JSON.stringify({ version: 1, sender: msg.delegateId || '', recipient: 'local-dashboard', url: msg.url || '', nonce: msg.replyTo, ecdh: msg.ecdh || '', ts: msg.ts,
           msgType: msg.msgType || '', uuid: msg.uuid || '', vaultUuid: msg.vaultUuid || '', query: msg.query || '' }))
+        const requestHash = await sha256B64(message)
         const verified  = await verifyDelegateById(dbKey, msg.delegateId || '', message, sigBytes)
         if (!verified) return
         if (msg.msgType === 'fill-done') {
@@ -441,7 +456,7 @@
           return
         }
         if (msg.msgType === 'search') {
-          try { await sbEncryptReply(msg.replyTo, msg.ecdh, []) } catch {}
+          try { await sbEncryptReply(msg.replyTo, msg.ecdh, [], { delegateId: verified.id, requestHash }) } catch {}
           return
         }
         if (msg.msgType === 'fill-uuid') {
@@ -456,7 +471,7 @@
               uuid: msg.uuid, vaultUuid: msg.vaultUuid || null,
               title: rec.Title, matchType: 'search', existingUrl: rec.URL || '',
               autotype: rf.autotype, sensitiveCodes: rf.sensitiveCodes, fields: rf.fields,
-            }])
+            }], { delegateId: verified.id, requestHash })
           } catch(e) {
             if (_sbWs) _sbWs.send(JSON.stringify({ type: 'reply', replyTo: msg.replyTo, error: e.message || 'Could not get credentials' }))
           }
@@ -467,7 +482,7 @@
         const payload = exact.length
           ? { records: exact, theme: localStorage.getItem('theme') || 'dark', accent: localStorage.getItem('accent') || 'amber' }
           : { records: [], nearMatchCount: records.length, theme: localStorage.getItem('theme') || 'dark', accent: localStorage.getItem('accent') || 'amber' }
-        await sbEncryptReply(msg.replyTo, msg.ecdh, payload)
+        await sbEncryptReply(msg.replyTo, msg.ecdh, payload, { delegateId: verified.id, requestHash })
       } catch(e) {}
     }
     let closed = false
diff --git a/pwa/src/lib/VaultSheet.svelte b/pwa/src/lib/VaultSheet.svelte
index e84fc5b..6b2d167 100644
--- a/pwa/src/lib/VaultSheet.svelte
+++ b/pwa/src/lib/VaultSheet.svelte
@@ -6,7 +6,7 @@
   import { isBiometricSupported, isBiometricEnrolled, enrollBiometric, clearBiometric } from './biometric.js'
   import { makeDelegateBookmarkletUrl } from './bookmarklet.js'
   import { getDelegates, addDelegate, revokeDelegate, setSwitchboardUrl, setCrossProfileEnabled } from './delegates.js'
-  import { createPairedAutofillProfile, removePairedAutofillProfile } from './pairedAutofill.js'
+  import { createPairedAutofillProfile, removePairedAutofillProfile, parsePairingToken } from './pairedAutofill.js'
   import Icon from './Icon.svelte'
 
   let { isDesktop, bookmarkletsSupported = false, onback, onlock, onlockall, onlocksecondary, onunlockadditional, ondbsave, onsvdbsave, ondirtychange, theme, accent, ontheme, onaccent } = $props()
@@ -177,6 +177,14 @@
   let chipDragged = $state(false)
   let chipLinked  = $state(false)  // persistent: set on copy, not reset by the feedback timer
   let globeTipOpen = $state(false)
+  let pairDelegateOpen = $state(false)
+  let pairDelegateName = $state('')
+  let pairDelegateToken = $state('')
+  let pairDelegateError = $state('')
+  let pairDelegatePreview = $state(null)
+  let pairDelegateUrl = $state('')
+  let pairBookmarkletCopied = $state(false)
+  let pairDelegateBusy = $state(false)
 
   let chipUsed   = $derived(chipDragged || chipLinked)
   let canUseChip = $derived(!!newDelegateName.trim() && !!newDelegatePubKeySpki)
@@ -260,6 +268,77 @@
     delegates = delegates.filter(d => d.id !== delegateId)
   }
 
+  function openPairDelegate() {
+    pairDelegateOpen = true
+    pairDelegateName = ''
+    pairDelegateToken = ''
+    pairDelegateError = ''
+    pairDelegatePreview = null
+    pairDelegateUrl = ''
+    pairBookmarkletCopied = false
+    pairDelegateBusy = false
+  }
+
+  function closePairDelegate() {
+    pairDelegateOpen = false
+    pairDelegateName = ''
+    pairDelegateToken = ''
+    pairDelegateError = ''
+    pairDelegatePreview = null
+    pairDelegateUrl = ''
+    pairBookmarkletCopied = false
+    pairDelegateBusy = false
+  }
+
+  async function previewPairingToken() {
+    pairDelegateError = ''
+    pairDelegatePreview = null
+    try {
+      const parsed = await parsePairingToken(pairDelegateToken)
+      pairDelegatePreview = parsed
+      pairDelegateUrl = makeDelegateBookmarkletUrl(
+        window.location.origin + import.meta.env.BASE_URL,
+        parsed.delegateId,
+        parsed.relayUrl || get(switchboardUrl)
+      )
+      if (!pairDelegateName.trim()) pairDelegateName = parsed.name || `Autofill profile ${parsed.displayCode}`
+    } catch (e) {
+      pairDelegateError = e.message || 'Pairing token is not valid'
+    }
+  }
+
+  async function commitPairDelegate() {
+    if (!_vaultUuid || pairDelegateBusy) return
+    pairDelegateBusy = true
+    pairDelegateError = ''
+    try {
+      const parsed = pairDelegatePreview || await parsePairingToken(pairDelegateToken)
+      const name = pairDelegateName.trim() || parsed.name || `Autofill profile ${parsed.displayCode}`
+      const delegate = await addDelegate(_vaultUuid, name, parsed.publicKey, parsed.delegateId, {
+        pairingId: parsed.pairingId,
+        relayUrl: parsed.relayUrl,
+      })
+      delegates = [delegate, ...delegates]
+      if (parsed.relayUrl && parsed.relayUrl !== get(switchboardUrl)) {
+        await setSwitchboardUrl(_vaultUuid, parsed.relayUrl)
+        switchboardUrl.set(parsed.relayUrl)
+      }
+      closePairDelegate()
+    } catch (e) {
+      pairDelegateError = e.message || 'Failed to pair autofill profile'
+    } finally {
+      pairDelegateBusy = false
+    }
+  }
+
+  function copyPairBookmarklet() {
+    if (!pairDelegateUrl) return
+    navigator.clipboard.writeText(pairDelegateUrl).then(() => {
+      pairBookmarkletCopied = true
+      setTimeout(() => { pairBookmarkletCopied = false }, 2200)
+    })
+  }
+
   // ── Advanced / switchboard ────────────────────────────────────────────────
   let advancedOpen        = $state(false)
   let editSwitchboardUrl  = $state('')
@@ -468,6 +547,7 @@
       </div>
     {/if}
     <button class="vault-unlock-more" onclick={openNewDelegate}>+ New bookmarklet</button>
+    <button class="vault-unlock-more" onclick={openPairDelegate}>+ Add autofill profile</button>
 
     <!-- Cross-profile autofill -->
     <button class="delegate-advanced-toggle muted" onclick={toggleAdvanced}>
@@ -508,6 +588,11 @@
           <div class="muted" style="font-size:12px">
             Count of cross-profile autofill uses: {totalRelayCount}{#if lastRelayUsed} · Last {fmtRelative(lastRelayUsed)}{/if}
           </div>
+          <div class="muted" style="font-size:12px;line-height:1.4;margin-top:8px">
+            To pair another browser profile, open
+            <span class="mono">{window.location.origin + import.meta.env.BASE_URL + 'autofill.html?pair=1'}</span>
+            in that filling profile, then paste its token here with Add autofill profile.
+          </div>
         {/if}
       </div>
     {/if}
@@ -767,6 +852,84 @@
   </div>
 {/if}
 
+<!-- ── Pair autofill profile modal ────────────────────────────────────────── -->
+{#if pairDelegateOpen}
+  <div class="modal-overlay" role="presentation"
+    onclick={e => { e.stopPropagation(); if (!pairDelegateBusy) closePairDelegate() }}
+    onkeydown={e => { if (e.key === 'Escape' && !pairDelegateBusy) closePairDelegate() }}>
+    <div class="modal modal-install" role="dialog" aria-modal="true" tabindex="-1" onclick={e => e.stopPropagation()} onkeydown={e => e.stopPropagation()}>
+      <div class="vs-modal-header">
+        <div class="modal-title">Add autofill profile</div>
+        <button class="vs-modal-x" onclick={() => { if (!pairDelegateBusy) closePairDelegate() }} aria-label="Cancel">
+          <Icon name="x" size={18}/>
+        </button>
+      </div>
+      <label class="vault-field" style="margin-bottom:10px">
+        <span class="vault-label muted">Pairing token</span>
+        <textarea
+          class="input"
+          rows={5}
+          bind:value={pairDelegateToken}
+          placeholder="Paste ppair1_… token from the autofill profile"
+          oninput={() => { pairDelegatePreview = null; pairDelegateError = '' }}
+          use:focusOnMount
+        ></textarea>
+      </label>
+      <div style="display:flex;gap:8px;margin-bottom:12px">
+        <button class="btn btn-ghost" disabled={!pairDelegateToken.trim() || pairDelegateBusy} onclick={previewPairingToken}>Check token</button>
+      </div>
+      {#if pairDelegatePreview}
+        <div class="vs-install-warning" style="align-items:flex-start">
+          <Icon name="check" size={22}/>
+          <span>
+            Pairing code <strong>{pairDelegatePreview.displayCode}</strong>{pairDelegatePreview.relayUrl ? ` · Relay ${pairDelegatePreview.relayUrl}` : ''}
+          </span>
+        </div>
+        <div class="vs-install-grid" style="margin-top:10px">
+          <div class="vs-install-col vs-install-col-drag">
+            <span class="vs-install-col-label">FILLING PROFILE</span>
+            <a
+              class="vs-bookmarklet-chip"
+              href={pairDelegateUrl || '#'}
+              draggable={pairDelegateUrl ? 'true' : 'false'}
+              onclick={e => e.preventDefault()}
+              title="Drag to the filling profile bookmarks bar"
+              aria-label="Paired Portpass autofill bookmarklet"
+            >
+              <img src="{import.meta.env.BASE_URL}icon.svg" width="16" height="16" alt="" aria-hidden="true" draggable="false">
+              {pairDelegateName || pairDelegatePreview.name || 'Paired autofill'}
+            </a>
+            <span class="vs-install-col-hint">Drag or copy this bookmarklet into the filling profile</span>
+          </div>
+          <div class="vs-install-col vs-install-col-copy">
+            <span class="vs-install-col-label">BAR HIDDEN</span>
+            <button class="vs-copy-link-btn" class:copied={pairBookmarkletCopied} disabled={!pairDelegateUrl} onclick={copyPairBookmarklet}>
+              <Icon name={pairBookmarkletCopied ? 'check' : 'copy'} size={15}/>
+              {pairBookmarkletCopied ? 'Copied!' : 'Copy link'}
+            </button>
+            <span class="vs-install-col-hint">Paste as the bookmark URL in the filling profile</span>
+          </div>
+        </div>
+        <label class="vault-field" style="margin:10px 0 4px">
+          <span class="vault-label muted">Name</span>
+          <input
+            class="input"
+            bind:value={pairDelegateName}
+            placeholder="e.g. Firefox — daily profile"
+            onkeydown={e => { if (e.key === 'Enter') commitPairDelegate() }}
+          />
+        </label>
+      {/if}
+      {#if pairDelegateError}<div class="unlock-error" style="font-size:13px">{pairDelegateError}</div>{/if}
+      <div style="margin-top:12px">
+        <button class="vs-close-btn" disabled={pairDelegateBusy || (!pairDelegatePreview && !pairDelegateToken.trim())} onclick={commitPairDelegate}>
+          {pairDelegateBusy ? 'Pairing…' : 'Pair profile'}
+        </button>
+      </div>
+    </div>
+  </div>
+{/if}
+
 <!-- ── Biometric setup modal ───────────────────────────────────────────────── -->
 {#if setupMode}
   <div class="modal-overlay" role="presentation"
diff --git a/pwa/src/lib/delegates.js b/pwa/src/lib/delegates.js
index da7c996..3fe41ab 100644
--- a/pwa/src/lib/delegates.js
+++ b/pwa/src/lib/delegates.js
@@ -38,20 +38,25 @@ export async function getDelegate(vaultUuid, delegateId) {
   return (all[vaultUuid] ?? []).map(migrate).find(d => d.id === delegateId) ?? null
 }
 
-export async function addDelegate(vaultUuid, name, publicKeySpki, id = crypto.randomUUID()) {
+export async function addDelegate(vaultUuid, name, publicKeySpki, id = crypto.randomUUID(), options = {}) {
   const all = await load()
+  const current = all[vaultUuid] ?? []
+  if (current.some(d => d.id === id)) throw new Error('This autofill profile is already paired')
   const delegate = {
     id,
     name,
     publicKey: Array.from(new Uint8Array(publicKeySpki)),
     displayCode: delegateDisplayCode(id),
     created: Date.now(),
+    pairingId: options.pairingId || null,
+    relayUrl: options.relayUrl || null,
+    pairedAt: options.pairedAt || Date.now(),
     bcCount: 0,
     bcLastUsed: null,
     relayCount: 0,
     relayLastUsed: null,
   }
-  all[vaultUuid] = [delegate, ...(all[vaultUuid] ?? [])]
+  all[vaultUuid] = [delegate, ...current]
   await save(all)
   return delegate
 }
diff --git a/pwa/src/lib/pairedAutofill.js b/pwa/src/lib/pairedAutofill.js
index ffd55f8..7f85aef 100644
--- a/pwa/src/lib/pairedAutofill.js
+++ b/pwa/src/lib/pairedAutofill.js
@@ -15,21 +15,32 @@ function bytesToB64(bytes) {
   return btoa(String.fromCharCode(...new Uint8Array(bytes)))
 }
 
+function b64ToBytes(b64) {
+  return Uint8Array.from(atob(b64), c => c.charCodeAt(0))
+}
+
+function b64urlEncode(s) {
+  return btoa(s).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '')
+}
+
+function b64urlDecode(s) {
+  const b64 = s.replace(/-/g, '+').replace(/_/g, '/') + '='.repeat((4 - s.length % 4) % 4)
+  return atob(b64)
+}
+
 const BASE32 = 'abcdefghijklmnopqrstuvwxyz234567'
 
 function base32NoPad(bytes) {
   let out = ''
-  let value = 0
-  let bits = 0
+  let bits = ''
   for (const byte of bytes) {
-    value = (value << 8) | byte
-    bits += 8
-    while (bits >= 5) {
-      out += BASE32[(value >>> (bits - 5)) & 31]
-      bits -= 5
+    bits += byte.toString(2).padStart(8, '0')
+    while (bits.length >= 5) {
+      out += BASE32[parseInt(bits.slice(0, 5), 2)]
+      bits = bits.slice(5)
     }
   }
-  if (bits > 0) out += BASE32[(value << (5 - bits)) & 31]
+  if (bits.length > 0) out += BASE32[parseInt(bits.padEnd(5, '0'), 2)]
   return out
 }
 
@@ -42,6 +53,51 @@ async function delegateIdFromPublicKey(publicKeySpki) {
   }
 }
 
+export async function delegateIdentityFromPublicKey(publicKeySpki) {
+  return delegateIdFromPublicKey(publicKeySpki)
+}
+
+export function makePairingToken(profile, { name = '', ttlMs = 10 * 60 * 1000 } = {}) {
+  const now = Date.now()
+  const token = {
+    v: 1,
+    type: 'portpass-autofill-pairing',
+    delegateId: profile.delegateId,
+    displayCode: profile.displayCode,
+    name,
+    publicKeyB64: profile.publicKeyB64,
+    relayUrl: profile.relayUrl || '',
+    pairingId: profile.pairingId || crypto.randomUUID(),
+    created: profile.created || now,
+    expires: now + ttlMs,
+  }
+  return 'ppair1_' + b64urlEncode(JSON.stringify(token))
+}
+
+export async function parsePairingToken(raw) {
+  const text = (raw || '').trim()
+  if (!text.startsWith('ppair1_')) throw new Error('Pairing token must start with ppair1_')
+  let token
+  try {
+    token = JSON.parse(b64urlDecode(text.slice('ppair1_'.length)))
+  } catch {
+    throw new Error('Pairing token is not valid')
+  }
+  if (token?.type !== 'portpass-autofill-pairing' || token.v !== 1) {
+    throw new Error('Pairing token is not a Portpass autofill token')
+  }
+  if (!token.publicKeyB64 || !token.delegateId) throw new Error('Pairing token is missing key data')
+  if (!token.expires || Date.now() > token.expires) throw new Error('Pairing token has expired')
+  const publicKey = b64ToBytes(token.publicKeyB64)
+  const identity = await delegateIdFromPublicKey(publicKey.buffer)
+  if (identity.delegateId !== token.delegateId) throw new Error('Pairing token fingerprint does not match its public key')
+  return {
+    ...token,
+    displayCode: token.displayCode || identity.displayCode,
+    publicKey: publicKey.buffer,
+  }
+}
+
 export async function createPairedAutofillProfile({ relayUrl = '', dashboardId = 'local-dashboard' } = {}) {
   const keyPair = await crypto.subtle.generateKey(
     { name: 'ECDSA', namedCurve: 'P-256' }, false, ['sign', 'verify']
@@ -53,6 +109,7 @@ export async function createPairedAutofillProfile({ relayUrl = '', dashboardId =
     displayCode,
     dashboardId,
     relayUrl,
+    pairingId: crypto.randomUUID(),
     created: Date.now(),
     signingKey: keyPair.privateKey,
     publicKey: Array.from(new Uint8Array(publicKeySpki)),
diff --git a/pwa/tests/bookmarklet.spec.ts b/pwa/tests/bookmarklet.spec.ts
index d56dc7b..bf2a43c 100644
--- a/pwa/tests/bookmarklet.spec.ts
+++ b/pwa/tests/bookmarklet.spec.ts
@@ -154,6 +154,40 @@ test.describe('Bookmarklet — autofill popup phases', () => {
     await expect(login.locator('#pass')).toHaveValue('')
   })
 
+  test('cross-profile pairing token can be imported and shows bookmarklet without private key', async ({ context }) => {
+    const { portpass } = await setupAutofillTest(context)
+    const pairing = await context.newPage()
+    await pairing.goto(PORTPASS_URL + 'autofill.html?pair=1')
+    await pairing.getByPlaceholder('Name, e.g. Firefox — daily profile').fill('Firefox daily')
+    await pairing.getByRole('button', { name: 'Create pairing token' }).click()
+    const tokenBox = pairing.locator('textarea').first()
+    await expect.poll(() => tokenBox.inputValue(), { timeout: 15000 }).toMatch(/^ppair1_/)
+    const token = await tokenBox.inputValue()
+    expect(token).toMatch(/^ppair1_/)
+
+    await portpass.locator('.vault-pill').click()
+    await portpass.getByRole('button', { name: '+ Add autofill profile' }).click()
+    await portpass.getByPlaceholder('Paste ppair1_… token from the autofill profile').fill(token)
+    await portpass.getByRole('button', { name: 'Check token' }).click()
+    await expect(portpass.locator('.vs-install-warning')).toContainText('Pairing code')
+    const bookmarkletUrl = await portpass.locator('.vs-bookmarklet-chip').last().getAttribute('href') ?? ''
+    const decoded = decodeURIComponent(bookmarkletUrl)
+    expect(decoded).toContain('autofill.html')
+    expect(decoded).toMatch(/afp1_[a-z2-7]{26}/)
+    expect(decoded).not.toContain('privKey')
+    await portpass.getByRole('button', { name: 'Pair profile' }).click()
+    await expect(portpass.locator('.delegate-row', { hasText: 'Firefox daily' })).toBeVisible()
+  })
+
+  test('wrong autofill pairing token is rejected', async ({ context }) => {
+    const { portpass } = await setupAutofillTest(context)
+    await portpass.locator('.vault-pill').click()
+    await portpass.getByRole('button', { name: '+ Add autofill profile' }).click()
+    await portpass.getByPlaceholder('Paste ppair1_… token from the autofill profile').fill('ppair1_not-a-token')
+    await portpass.getByRole('button', { name: 'Check token' }).click()
+    await expect(portpass.locator('.unlock-error')).toContainText('Pairing token')
+  })
+
   test('waiting phase shows selected record title', async ({ context }) => {
     const { login, portpass, bookmarkletUrl } = await setupAutofillTest(context)
     await createRecord(portpass, { title: 'My Bank', autotype: '\\u\\t\\p\\n' })

From 8863341c8313c9f6f695b6b036eda3eaed611687 Mon Sep 17 00:00:00 2001
From: Dan Brown <danbrown@gmail.com>
Date: Fri, 29 May 2026 09:44:36 +0200
Subject: [PATCH 17/20] Polish cross-profile autofill setup

---
 README.md                        | 53 +++++++++++++------
 SECURITY.md                      | 32 +++++------
 pwa/src/lib/VaultSheet.svelte    | 91 +++++++++++++++++++-------------
 pwa/tests/bookmarklet.spec.ts    |  9 ++--
 pwa/tests/service_worker.spec.ts | 24 +++++++++
 pwa/tests/vault_sheet.spec.ts    | 20 +++----
 pwa/vite.config.js               |  1 +
 7 files changed, 148 insertions(+), 82 deletions(-)
 create mode 100644 pwa/tests/service_worker.spec.ts

diff --git a/README.md b/README.md
index b5391ec..2aa644e 100644
--- a/README.md
+++ b/README.md
@@ -14,19 +14,19 @@ You decide where to store your vault file: on-device, self-hosted, or in a cloud
 
 ## What Portpass does
 
-* works fully offline, no network connection required after initial installation. Can also work with cloud-hosted files if you choose.
-* runs on all your devices: mobile, tablet, and desktop
-* stores each vault as a file on your device, for easy sync/backup/sharing
-* unlocks vault files using WebAuthn methods: fingerprint, face recognition, and PIN
-* fills login forms on websites using a bookmarklet in two clicks (desktop only). No browser extension with excessive permissions, no copying secrets to the system clipboard
+* works fully **offline**, no network connection required after initial installation. Can also work with cloud-hosted files if you choose.
+* runs on all your devices: **mobile, tablet, and desktop**
+* stores each vault as a file on your device, for easy **sync/backup/sharing**
+* unlocks vault files using WebAuthn methods: **fingerprint, face recognition, and PIN**
+* **fills login forms on websites** using a bookmarklet in two clicks (desktop only). No browser extension with excessive permissions, no copying secrets to the system clipboard
 * generates strong passwords
 * keeps a history of previous password values
-* generates one-time codes (TOTP) for two-factor authentication (2FA)
-* supports custom fields (eg. credit card numbers, PIN codes, account numbers, API keys)
+* generates **one-time codes (TOTP)** for two-factor authentication (2FA)
+* supports **custom fields** (eg. credit card numbers, PIN codes, account numbers, API keys)
 * searches instantly across multiple vaults and multiple data fields
 * organizes password records into groups for browsing
 * encrypts your vault using an established open source format (pwsafe v3)
-* opens multiple vaults simultaneously (eg. personal, work, family), supports sharing vaults with other people
+* opens **multiple vaults simultaneously** (eg. personal, work, family), supports sharing vaults with other people
 * respects read-only file permissions for each vault
 * has a mobile-first design with both light and dark modes
 
@@ -126,7 +126,7 @@ There is no server, no account, and nothing to trust except the open source code
 
 **Biometric/PIN unlock** can be enabled to use your device's built-in authentication (fingerprint, face recognition, or PIN) so you don't have to type your master password on repeat visits. Your master password is encrypted with a key only your device can produce and stored locally, it is never transmitted anywhere.
 
-On Android, Chrome routes biometric/PIN unlock setup through [Google Password Manager](https://passwords.google.com/), which requires a recovery PIN to have been set up previously. Google Password Manager stores a synced copy of the passkey in Google's cloud (but not your vault's master password, which always stays on your device). To set up or reset a Google Password Manager recovery PIN, visit [passwords.google.com/passkeys/reset/intro](https://passwords.google.com/passkeys/reset/intro).
+The Chrome browser routes biometric/PIN unlock setup through [Google Password Manager](https://passwords.google.com/), which requires a recovery PIN to have been set up previously. Google Password Manager stores a synced copy of the passkey in Google's cloud (but not your vault's master password, which always stays on your device). To set up or reset a Google Password Manager recovery PIN, visit [passwords.google.com/passkeys/reset/intro](https://passwords.google.com/passkeys/reset/intro). Other browsers beyond Chrome use similar hosted services (eg. Microsoft password manager, Apple iCloud keychain).
 
 ## Autofill
 
@@ -142,11 +142,15 @@ Portpass finds matching vault entries by URL, lets you pick one if there are mul
 
 ### How Autofill works
 
-A `javascript:` bookmarklet in your browser's bookmarks bar opens a small picker popup when you click it on a login page. The popup shows credentials that match the current page's URL. Click a record and Portpass fills the fields directly, following the record's Autofill sequence setting (default: fill username → Tab → fill password → Submit).
+A `javascript:` bookmarklet in your browser's bookmarks bar opens a small picker popup when you click it on a login page. The popup shows credentials that match the current page's URL. Click a record and Portpass fills the fields directly, following the record's Autofill sequence setting (default: fill username -> Tab -> fill password -> Submit).
 
-The bookmarklet communicates with your open Portpass vault over an encrypted channel. No credentials pass through the clipboard at any point — this matters on Windows and Linux, where clipboard contents can be read by any running process, and in browsers where extensions with clipboard permission could read a copied password before it is pasted. The encryption key is unique to each new bookmarklet created in Portpass, and can be revoked from Portpass's vault settings.
+The bookmarklet itself is not a secret and contains no private key. It opens Portpass's `autofill.html` popup, which holds a non-extractable signing key in Portpass-origin browser storage for that profile. Portpass stores the matching public key as a revocable autofill delegate. Requests are signed by the popup, and credential replies are encrypted to a fresh per-session key.
 
-Portpass searches all unlocked vaults for URLs that match the current web page. It compares the canonical version, removing "www." as well as url parameters after the "?" and "#" characters. It looks for exact matches first, then falls back to offering the current open record (if one is open) as well as up to 5 near matches. If one of the non-exact matches is chosen, you can instruct Portpass to update that entry's URL in the vault to match the current webpage URL to accelerate future Autofill requests on this webpage. The "near match" method uses edit distance (Levenshtein) showing the five closest matches within a distance of 5 edits.
+No credentials pass through the clipboard at any point -- this matters on Windows and Linux, where clipboard contents can be read by any running process, and in browsers where extensions with clipboard permission could read a copied password before it is pasted.
+
+In same-profile autofill, Portpass searches all unlocked vaults for URLs that match the current web page. It compares the canonical version, removing "www." as well as url parameters after the "?" and "#" characters. It looks for exact matches first, then falls back to offering the current open record (if one is open) as well as up to 5 near matches. If one of the non-exact matches is chosen, you can instruct Portpass to update that entry's URL in the vault to match the current webpage URL to accelerate future Autofill requests on this webpage. The "near match" method uses edit distance (Levenshtein) showing the five closest matches within a distance of 5 edits.
+
+In cross-profile autofill, credential release is stricter: Portpass only sends credentials over the relay for exact authorized URL matches. If there is no exact match, it returns metadata only, such as the count of near matches, and prompts you to view or update the record inside Portpass.
 
 ### Setting up autofill
 
@@ -157,6 +161,14 @@ Portpass searches all unlocked vaults for URLs that match the current web page.
 
 For cross-profile setup, start the [switchboard](https://github.com/dbro/switchboard) as a background service on your machine before using the bookmarklet. See the repo README for instructions to run switchboard automatically in the background.
 
+Cross-profile setup uses a separate pairing ceremony because the filling profile and the clean Portpass profile do not share browser storage:
+
+1. In the filling browser profile, open `https://dbro.github.io/portpass/autofill.html?pair=1`.
+2. Click **Create pairing token** and copy the `ppair1_...` token.
+3. In the clean Portpass profile, open vault settings -> **Autofill** -> **Add autofill profile**.
+4. Paste the token, compare the short pairing code, and click **Pair profile**.
+5. Drag or copy the generated bookmarklet into the filling profile's bookmarks bar.
+
 <img src="https://github.com/user-attachments/assets/677ce196-f282-4de6-8506-407905e077c4" width="35%" alt="Screenshot of autofill bookmarklet creation">
 
 ### Autofill form field configuration
@@ -188,7 +200,7 @@ The text representation is also possible, and is easier to document here. The de
 
 ### Best practices with Autofill
 
-- **Use a unique bookmarklet for each browser profile.** Each bookmarklet holds a unique private key. Create a separate bookmarklet for each browser and profile where you want autofill, and give each a descriptive name so you can revoke individual ones if needed.
+- **Use a unique autofill profile for each browser profile.** Each profile has its own non-extractable signing key stored by `autofill.html` in that browser profile's Portpass-origin storage. Create a separate bookmarklet/delegate for each browser and profile where you want autofill, and give each a descriptive name so you can revoke individual ones if needed.
 - **Revoke bookmarklets you no longer use.** Open vault settings → Autofill, and click **Revoke** next to any entry you want to invalidate. The corresponding bookmarklet will be rejected immediately, even if it is still in someone's bookmarks bar.
 - **Prefer autofill over copy-paste on Windows and Linux (X11).** On these platforms, any running process can read the clipboard at any time. Autofill writes directly to the form field without ever putting the credential in the clipboard, eliminating that exposure window entirely. (Linux Wayland has better clipboard security than X11.)
 
@@ -202,9 +214,9 @@ The official desktop Password Safe app has a function called "Autotype" that can
 
 It is possible to autofill while running Portpass in a separate clean profile, following the security best-practice to reduce exposure to browser extensions -- however, it requires a helper switchboard running in its own process on your system. It is also possible to run Portpass in a different browser (eg. Chrome) and use autofill in another browser (eg. Firefox).
 
-**Same-profile**: Portpass and the pages you fill are in the same browser profile. The bookmarklet opens a relay popup that talks to Portpass directly via a browser-internal channel. No extra software needed. This is the simpler approach, but it means that all your browser extensions could try to attack Portpass. If you trust your browser extensions, this is ok.
+**Same-profile**: Portpass and the pages you fill are in the same browser profile. The bookmarklet opens `autofill.html`, which talks to Portpass directly via a browser-internal channel. No extra software needed. This is the simpler approach, but it means that all your browser extensions could try to attack Portpass. If you trust your browser extensions, this is ok.
 
-**Cross-profile**: To protect against malicious browser extensions, you could choose to run Portpass in a separate browser profile with no extensions installed. This means that the browser has stronger isolation between Portpass and the websites that you visit, and the browser prevents the bookmarklet from communicating with Portpass to transfer information from your vault to the bookmarklet. In this scenario, a helper service provides a simple message switchboard between Portpass and the bookmarklet. This service is called **[switchboard](https://github.com/dbro/switchboard)**, and it runs in the background acting as a very limited shared memory. No data leaves your machine. All messages sent between Portpass and the bookmarklet via the switchboard are encrypted end-to-end using the key that is set up when the bookmarklet is installed. An eavesdropper would see only encrypted blobs.
+**Cross-profile**: To protect against malicious browser extensions, you can run Portpass in a separate browser profile with no extensions installed. The filling profile pairs its `autofill.html` popup with the clean Portpass profile using a short-lived copy/paste token. A helper service called **[switchboard](https://github.com/dbro/switchboard)** then provides a local message relay between the two profiles. No data leaves your machine. The relay is treated as untrusted: requests are signed by the paired popup, replies are encrypted to that popup's per-session key, replayed requests are rejected, and credentials are released only for exact authorized URL matches.
 
 See [SECURITY.md](SECURITY.md) for setup instructions.
 
@@ -214,6 +226,17 @@ Note that while Portpass should run in Chrome or Safari, the bookmarklet can run
 
 Portpass's threat model, known limitations, and guidance on protecting yourself from malicious browser extensions are documented in [SECURITY.md](SECURITY.md).
 
+## Roadmap
+
+Possible future improvements:
+* Allow changing vault's master password and the number of key stretching rounds 
+* Import/Export other vault file formats
+* Automatically lock vault after an amount of time or system event (eg screen lock)
+* Companion mobile keyboard app to autofill values
+* Display and store attachments in the vault (one for each password)
+
+Some of these capabilitites can be done today using other apps that read and write pwsafe v3 files (change master password, import/export).
+
 ## Credits
 
 Portpass is built on the Go/WebAssembly backend from [gopwsafe](https://github.com/tkuhlman/gopwsafe). Portpass started as a fork of that project and has contributed changes back upstream.
diff --git a/SECURITY.md b/SECURITY.md
index c5dfaba..9aff5a9 100644
--- a/SECURITY.md
+++ b/SECURITY.md
@@ -52,7 +52,7 @@ Neither browser provides a consolidated view — you must check each extension i
 
 Once you have identified which extensions have broad access, consider two distinct surfaces:
 
-1. **Extensions that can run on the Portpass URL** (`dbro.github.io`): highest impact. They can observe your master password as you type it, read any revealed password in the UI, and — during the brief window when the "New bookmarklet" modal is open — read the delegate private key from the chip's link attribute. If any extension you cannot fully trust has this access, use a dedicated profile for Portpass instead.
+1. **Extensions that can run on the Portpass URL** (`dbro.github.io`): highest impact. They can observe your master password as you type it, read any revealed password in the UI, and interact with Portpass-origin storage and scripts. If any extension you cannot fully trust has this access, use a dedicated profile for Portpass instead.
 
 2. **Extensions that can run on login pages**: they can read form field values after autofill. This is the same exposure that exists with every password manager, including native apps — an extension that runs on `bank.com` can read whatever was typed or filled into that page. Audit extensions on your sensitive login pages separately from the Portpass audit.
 
@@ -84,7 +84,7 @@ Extensions are installed per-profile. A profile with no extensions has no extens
 
 - **Cross-profile autofill**: Portpass runs in a clean, extension-free profile; the bookmarklet runs in your main browsing profile. Credentials travel via [switchboard](https://github.com/dbro/switchboard), a tiny local WebSocket broker (`localhost:7577`). This preserves full extension isolation — Portpass never touches the browsing profile. Requires switchboard to be running as a background service.
 
-Both modes use the **delegate model**: each bookmarklet installation holds an ECDSA P-256 private key; the corresponding public key is registered in Portpass. Every autofill request is signed with the private key and verified by Portpass before any credentials are exchanged. This means a malicious extension on the page cannot impersonate a legitimate bookmarklet and trick Portpass into delivering credentials to an attacker's key.
+Both modes use the **delegate model**: each paired autofill profile has an ECDSA P-256 signing key stored by Portpass's `autofill.html` page in Portpass-origin browser storage. The key is created as non-extractable where the browser supports WebCrypto non-extractability. The bookmarklet contains only routing data and the public delegate ID; it does not contain the private key. Every autofill request is signed by `autofill.html` and verified by Portpass before any credentials are exchanged.
 
 ---
 
@@ -143,39 +143,35 @@ Passkeys (WebAuthn) eliminate the clipboard and extension risks entirely — the
 
 ## Autofill security
 
-The Autofill bookmarklet uses a **delegate model** to create a cryptographically authenticated channel between the bookmarklet and Portpass, without any server infrastructure and without browser extensions.
+The Autofill bookmarklet uses a **delegate model** to create a cryptographically authenticated channel between a paired `autofill.html` popup and Portpass, without a browser extension. Same-profile autofill needs no helper service. Cross-profile autofill uses a local switchboard relay because browser profiles cannot communicate directly.
 
 ### Trusted islands
 
-- **Bookmarklet URL** — stored in the browser's bookmark store, which no web API can read or modify. Contains an ECDSA P-256 private key unique to this installation.
-- **relay.html** — served from the Portpass HTTPS origin, cross-origin isolated from the page being autofilled. Receives the private key from the bookmarklet via `postMessage` with strict `targetOrigin`.
-- **Portpass** — holds the registered public key for each delegate; verifies every autofill request signature before acting.
+- **Bookmarklet URL** — stored in the browser's bookmark store, which no web API can read or modify. Contains only page-agent code, the Portpass URL, relay routing data, and the public delegate ID. It is not a secret.
+- **autofill.html** — served from the Portpass HTTPS origin, cross-origin isolated from the page being autofilled. Holds the paired delegate's non-extractable ECDSA P-256 signing key in Portpass-origin browser storage.
+- **Portpass** — holds the registered public key for each delegate; verifies every autofill request signature, freshness value, delegate status, and URL binding before acting.
 
 ### Authentication
 
-Before exchanging any credentials, relay.html signs a challenge `{relayNonce, ecdhSpki}` (same-profile) or `{url, nonce, ecdh, timestamp}` (cross-profile) with the delegate's ECDSA P-256 private key. Portpass verifies the signature against the registered public keys. A forged or unsigned request is silently rejected.
+Before exchanging any credentials, `autofill.html` creates a fresh ECDH key pair and signs a request containing the delegate ID, action, current page URL/origin, timestamp, nonce, and ECDH public key. Portpass verifies the signature against the registered delegate public key. Stale timestamps, reused nonces, revoked delegates, wrong-origin URL claims, and forged or unsigned requests are rejected.
 
-This prevents the masquerade attack: a malicious extension or page script running at the Portpass origin can observe the BroadcastChannel but cannot forge a valid ECDSA signature for a registered delegate's key.
+This prevents the masquerade attack: a malicious page script can open the popup and send page context, but it cannot forge a valid ECDSA signature for a registered delegate key. A malicious extension that can run on the Portpass origin remains in the high-impact category described above.
 
 ### Credential encryption in transit
 
-After authentication, credentials are encrypted with ECDH P-256 + AES-256-GCM. The session key is ephemeral — a fresh ECDH key pair is generated for each autofill session. Credentials in transit are ciphertext only; no key material appears on the channel.
+After authentication, credentials are encrypted with ECDH P-256 + AES-256-GCM. The session key is ephemeral -- a fresh ECDH key pair is generated for each autofill session. Credential replies are bound to the request ID, previous message hash, delegate ID, and recipient before encryption. Credentials in transit are ciphertext only; no key material appears on the channel.
 
 ### Cross-profile relay server
 
-The switchboard (`localhost:7577`) is a dumb pipe — it stores and forwards encrypted blobs without inspecting content. It binds to `127.0.0.1` only and is not accessible over the network. An attacker who can read the relay server's memory has OS-level access and is outside the threat model.
+The switchboard (`localhost:7577`) is a dumb pipe: it stores and forwards signed requests and encrypted replies without needing to inspect their contents. It binds to `127.0.0.1` only and is not accessible over the network. Portpass treats the relay as untrusted transport that may observe metadata, delay, drop, replay, reorder, or inject packets. Signatures, timestamps, nonces, reply binding, and encryption provide the security properties; the relay itself is not trusted.
+
+Cross-profile credential release is intentionally stricter than same-profile autofill. Portpass sends credentials over the relay only for exact authorized URL matches. If there is no exact match, Portpass returns metadata only, such as a near-match count, and the user must view or update the record inside Portpass.
 
 ### What autofill does not protect against
 
 - **Credential in the DOM**: after filling, the credential is in `input.value` and readable by any extension on the page. This is identical to manual typing or any other password manager and cannot be avoided without browser-level APIs.
-- **Delegate private key in the bookmark store**: the bookmark store is stored as a plaintext JSON file in the browser profile directory. Any process that can read that directory — including backup software, another user account with filesystem access, or malware with user-level permissions — can extract the private key. The key persists indefinitely, so an exfiltrated copy remains valid until the delegate is explicitly revoked in Portpass.
-
-  However, the key is an *authentication token*, not an encryption key. It does not contain or unlock any vault data on its own. An attacker who holds the key can only use it by making a signed request to a running, unlocked Portpass instance — and only via BroadcastChannel (same browser profile) or the local switchboard WebSocket (same machine). Both channels require the attacker to be active on the same machine at the same moment the user has Portpass open. At that point the attacker already has access to more direct attacks.
-
-  This makes the key fundamentally different from a password captured off the clipboard: a clipboard password is immediately and permanently usable anywhere; the delegate key requires an ongoing session to exploit and becomes worthless the moment the vault is locked.
-
-  The same property that protects the key — the bookmark store is inaccessible to web pages — also means Portpass cannot rotate it automatically. Periodic manual rotation (revoke the old delegate in VaultSheet, drag a new bookmarklet) is good hygiene, especially if you suspect a device may have been accessed by someone else. A future VaultSheet version may display key age to prompt rotation.
-- **Extension present at drag-install time**: an extension running in the **Portpass profile** (the clean profile where the bookmarklet is dragged *from*) could modify the bookmarklet's JavaScript or substitute a different key before the drag completes. This is why the clean profile must have no extensions — not just to protect the vault, but to ensure the bookmarklet delivered to the bookmarks bar is genuine. Extensions in the *destination* browsing profile cannot intercept the bookmarklet because it arrives already stored in the bookmark store, which extensions cannot read.
+- **Delegate key in Portpass-origin browser storage**: the durable signing key is no longer embedded in the bookmarklet, but it still lives in the filling browser profile's site storage. It is created as a non-extractable WebCrypto key, which prevents ordinary JavaScript export, but a fully compromised browser profile, malicious browser, local malware, or privileged debugging access may still be able to abuse it by asking the browser to sign requests. Revoke the delegate in Portpass if a profile or device may be compromised.
+- **Extension present at pairing or bookmarklet install time**: an extension running on the Portpass origin in either the clean profile or filling profile could interfere with pairing, alter the bookmarklet JavaScript, or abuse the paired `autofill.html` page. This is why the clean Portpass profile should have no extensions. Extensions in the filling profile cannot extract the non-extractable private key through normal web APIs, but if they can run on login pages they can still read values after they are filled.
 
 ---
 
diff --git a/pwa/src/lib/VaultSheet.svelte b/pwa/src/lib/VaultSheet.svelte
index 6b2d167..7747680 100644
--- a/pwa/src/lib/VaultSheet.svelte
+++ b/pwa/src/lib/VaultSheet.svelte
@@ -529,7 +529,7 @@
   <div class="vault-section">
     <div class="vault-section-title">AUTOFILL</div>
     <p class="muted" style="font-size:14px;margin:0 0 14px;line-height:1.5">
-      Create a uniquely keyed bookmarklet for each browser profile where you want autofill.
+      Use same-profile autofill when Portpass and login pages are in this browser profile. Use cross-profile autofill when this is your clean Portpass profile and login pages are opened from another profile.
     </p>
     {#if delegates.length > 0}
       <div class="delegate-list">
@@ -546,8 +546,7 @@
         {/each}
       </div>
     {/if}
-    <button class="vault-unlock-more" onclick={openNewDelegate}>+ New bookmarklet</button>
-    <button class="vault-unlock-more" onclick={openPairDelegate}>+ Add autofill profile</button>
+    <button class="vault-unlock-more" onclick={openNewDelegate}>+ Same-profile bookmarklet</button>
 
     <!-- Cross-profile autofill -->
     <button class="delegate-advanced-toggle muted" onclick={toggleAdvanced}>
@@ -555,45 +554,53 @@
     </button>
     {#if advancedOpen}
       <div class="delegate-advanced-body">
+        <div class="muted" style="font-size:13px;line-height:1.45;margin-bottom:10px">
+          Starting from this clean Portpass profile:
+        </div>
+        <ol class="vs-cross-profile-steps">
+          <li>In the filling profile, open <span class="mono">{window.location.origin + import.meta.env.BASE_URL + 'autofill.html?pair=1'}</span>.</li>
+          <li>Create a pairing token there, then paste it here.</li>
+          <li>After pairing, drag or copy the generated bookmarklet into the filling profile's bookmarks bar.</li>
+          <li>Turn on the local switchboard relay below before using the bookmarklet.</li>
+        </ol>
+        <button class="vault-unlock-more" onclick={openPairDelegate}>+ Pair filling profile</button>
         <div class="vault-row" style="margin-bottom:4px">
-          <span class="vault-label muted" style="font-size:13px">Enable cross-profile autofill</span>
+          <span class="vault-label muted" style="font-size:13px">Use local switchboard relay</span>
           <div class="vault-segmented">
             <button class:on={!$crossProfileEnabled} disabled={!delegates.length} onclick={async () => { await setCrossProfileEnabled(_vaultUuid, false); crossProfileEnabled.set(false) }}>Off</button>
             <button class:on={$crossProfileEnabled}  disabled={!delegates.length} onclick={async () => { await setCrossProfileEnabled(_vaultUuid, true);  crossProfileEnabled.set(true)  }}>On</button>
           </div>
         </div>
-        {#if $crossProfileEnabled}
-          <label class="vault-label muted" style="font-size:12px;display:block;margin-bottom:4px">
-            WebSocket Relay URL
-            <input
-              class="input"
-              style="font-size:13px;display:block;width:100%;margin-top:4px"
-              bind:value={editSwitchboardUrl}
-              oninput={() => { switchboardUrlDirty = editSwitchboardUrl !== get(switchboardUrl) }}
-              placeholder="ws://localhost:7577"
-            />
-          </label>
-          {#if switchboardUrlDirty}
-            <div class="switchboard-url-actions">
-              <button class="btn btn-ghost" style="font-size:13px" onclick={cancelRelayUrlEdit}>Cancel</button>
-              <button class="btn btn-primary" style="font-size:13px" onclick={saveRelayUrl}>Save</button>
-            </div>
-          {/if}
-          <div class="switchboard-status-row">
-            <span class="switchboard-status-dot" class:switchboard-ok={$switchboardConnected} class:switchboard-error={!$switchboardConnected}></span>
-            <span class="muted" style="font-size:13px">
-              {$switchboardConnected ? 'Cross-profile autofill ready' : 'websocket relay not connected'}
-            </span>
+        {#if !delegates.length}
+          <div class="muted" style="font-size:12px;line-height:1.4">
+            Pair a filling profile before enabling the relay.
           </div>
-          <div class="muted" style="font-size:12px">
-            Count of cross-profile autofill uses: {totalRelayCount}{#if lastRelayUsed} · Last {fmtRelative(lastRelayUsed)}{/if}
-          </div>
-          <div class="muted" style="font-size:12px;line-height:1.4;margin-top:8px">
-            To pair another browser profile, open
-            <span class="mono">{window.location.origin + import.meta.env.BASE_URL + 'autofill.html?pair=1'}</span>
-            in that filling profile, then paste its token here with Add autofill profile.
+        {/if}
+        <label class="vault-label muted" style="font-size:12px;display:block;margin-bottom:4px">
+          WebSocket Relay URL
+          <input
+            class="input"
+            style="font-size:13px;display:block;width:100%;margin-top:4px"
+            bind:value={editSwitchboardUrl}
+            oninput={() => { switchboardUrlDirty = editSwitchboardUrl !== get(switchboardUrl) }}
+            placeholder="ws://localhost:7577"
+          />
+        </label>
+        {#if switchboardUrlDirty}
+          <div class="switchboard-url-actions">
+            <button class="btn btn-ghost" style="font-size:13px" onclick={cancelRelayUrlEdit}>Cancel</button>
+            <button class="btn btn-primary" style="font-size:13px" onclick={saveRelayUrl}>Save</button>
           </div>
         {/if}
+        <div class="switchboard-status-row">
+          <span class="switchboard-status-dot" class:switchboard-ok={$crossProfileEnabled && $switchboardConnected} class:switchboard-error={!$crossProfileEnabled || !$switchboardConnected}></span>
+          <span class="muted" style="font-size:13px">
+            {!$crossProfileEnabled ? 'Cross-profile relay disabled' : ($switchboardConnected ? 'Cross-profile autofill ready' : 'websocket relay not connected')}
+          </span>
+        </div>
+        <div class="muted" style="font-size:12px">
+          Count of cross-profile autofill uses: {totalRelayCount}{#if lastRelayUsed} · Last {fmtRelative(lastRelayUsed)}{/if}
+        </div>
       </div>
     {/if}
   </div>
@@ -786,7 +793,7 @@
     onkeydown={e => { if (e.key === 'Escape' && !newDelegateBusy) cancelOrSave() }}>
     <div class="modal modal-install" role="dialog" aria-modal="true" tabindex="-1" onclick={e => e.stopPropagation()} onkeydown={e => e.stopPropagation()}>
       <div class="vs-modal-header">
-        <div class="modal-title">New autofill bookmarklet</div>
+        <div class="modal-title">New same-profile bookmarklet</div>
         <button class="vs-modal-x" onclick={() => { if (!newDelegateBusy) cancelOrSave() }} aria-label="Cancel">
           <Icon name="x" size={18}/>
         </button>
@@ -841,7 +848,7 @@
       {/if}
       <div class="vs-install-warning">
         <Icon name="alert-triangle" size={28}/>
-        <span>The bookmarklet contains no private key. Its paired signing key stays in this browser profile's Portpass storage and can be revoked here.</span>
+        <span>The bookmarklet contains no private key. Its paired signing key stays in this browser profile's Portpass storage and can be revoked here. Use this only when Portpass and the login pages are in the same browser profile.</span>
       </div>
       <div style="margin-top:8px">
         <button class="vs-close-btn" disabled={!canCommit} onclick={commitDelegate}>
@@ -859,7 +866,7 @@
     onkeydown={e => { if (e.key === 'Escape' && !pairDelegateBusy) closePairDelegate() }}>
     <div class="modal modal-install" role="dialog" aria-modal="true" tabindex="-1" onclick={e => e.stopPropagation()} onkeydown={e => e.stopPropagation()}>
       <div class="vs-modal-header">
-        <div class="modal-title">Add autofill profile</div>
+        <div class="modal-title">Pair cross-profile autofill</div>
         <button class="vs-modal-x" onclick={() => { if (!pairDelegateBusy) closePairDelegate() }} aria-label="Cancel">
           <Icon name="x" size={18}/>
         </button>
@@ -1420,6 +1427,18 @@
     gap: 10px;
   }
 
+  .vs-cross-profile-steps {
+    margin: 0 0 2px;
+    padding-left: 20px;
+    color: var(--text-muted);
+    font-size: 13px;
+    line-height: 1.45;
+  }
+
+  .vs-cross-profile-steps li {
+    margin: 0 0 6px;
+  }
+
   .switchboard-url-actions {
     display: flex;
     gap: 8px;
diff --git a/pwa/tests/bookmarklet.spec.ts b/pwa/tests/bookmarklet.spec.ts
index bf2a43c..0942a86 100644
--- a/pwa/tests/bookmarklet.spec.ts
+++ b/pwa/tests/bookmarklet.spec.ts
@@ -21,7 +21,7 @@ async function createDelegateBookmarklet(portpass: Page): Promise<string> {
   await portpass.locator('.vault-pill').click()
   await expect(portpass.locator('.vault-settings-body')).toBeVisible()
 
-  await portpass.getByRole('button', { name: '+ New bookmarklet' }).click()
+  await portpass.getByRole('button', { name: '+ Same-profile bookmarklet' }).click()
   await portpass.getByPlaceholder('e.g. Chrome — work profile').fill('test')
   await portpass.locator('.vs-bookmarklet-chip:not(.chip-inactive)').waitFor({ timeout: 5000 })
   const url = await portpass.locator('.vs-bookmarklet-chip').getAttribute('href') ?? ''
@@ -166,7 +166,9 @@ test.describe('Bookmarklet — autofill popup phases', () => {
     expect(token).toMatch(/^ppair1_/)
 
     await portpass.locator('.vault-pill').click()
-    await portpass.getByRole('button', { name: '+ Add autofill profile' }).click()
+    await portpass.getByRole('button', { name: /Cross-profile autofill/ }).click()
+    await expect(portpass.getByText('Starting from this clean Portpass profile:')).toBeVisible()
+    await portpass.getByRole('button', { name: '+ Pair filling profile' }).click()
     await portpass.getByPlaceholder('Paste ppair1_… token from the autofill profile').fill(token)
     await portpass.getByRole('button', { name: 'Check token' }).click()
     await expect(portpass.locator('.vs-install-warning')).toContainText('Pairing code')
@@ -182,7 +184,8 @@ test.describe('Bookmarklet — autofill popup phases', () => {
   test('wrong autofill pairing token is rejected', async ({ context }) => {
     const { portpass } = await setupAutofillTest(context)
     await portpass.locator('.vault-pill').click()
-    await portpass.getByRole('button', { name: '+ Add autofill profile' }).click()
+    await portpass.getByRole('button', { name: /Cross-profile autofill/ }).click()
+    await portpass.getByRole('button', { name: '+ Pair filling profile' }).click()
     await portpass.getByPlaceholder('Paste ppair1_… token from the autofill profile').fill('ppair1_not-a-token')
     await portpass.getByRole('button', { name: 'Check token' }).click()
     await expect(portpass.locator('.unlock-error')).toContainText('Pairing token')
diff --git a/pwa/tests/service_worker.spec.ts b/pwa/tests/service_worker.spec.ts
new file mode 100644
index 0000000..2c3e767
--- /dev/null
+++ b/pwa/tests/service_worker.spec.ts
@@ -0,0 +1,24 @@
+import { test, expect } from '@playwright/test'
+import fs from 'fs'
+import path from 'path'
+import { fileURLToPath } from 'url'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const projectRoot = path.resolve(__dirname, '..')
+
+test.describe('PWA service worker routing', () => {
+  test('autofill pairing page is served as its own page', async ({ page }) => {
+    await page.goto('/portpass/autofill.html?pair=1')
+
+    await expect(page.getByText('Pair this autofill profile')).toBeVisible()
+    await expect(page.getByRole('button', { name: 'Create pairing token' })).toBeVisible()
+    await expect(page.getByText('Vault is locked')).not.toBeVisible()
+  })
+
+  test('production service worker does not app-shell rewrite autofill.html', async () => {
+    const config = fs.readFileSync(path.join(projectRoot, 'vite.config.js'), 'utf8')
+
+    expect(config).toContain('navigateFallbackDenylist')
+    expect(config).toContain('/\\/autofill\\.html(?:\\?.*)?$/')
+  })
+})
diff --git a/pwa/tests/vault_sheet.spec.ts b/pwa/tests/vault_sheet.spec.ts
index 73a5ef6..df33ef6 100644
--- a/pwa/tests/vault_sheet.spec.ts
+++ b/pwa/tests/vault_sheet.spec.ts
@@ -115,7 +115,7 @@ test.describe('VaultSheet autofill installation UI', () => {
 
   async function createBookmarklet(page) {
     await page.locator('.vault-pill').click()
-    await page.getByRole('button', { name: '+ New bookmarklet' }).click()
+    await page.getByRole('button', { name: '+ Same-profile bookmarklet' }).click()
     // wait for key generation (chip activates once keys are ready + name is entered)
     await page.getByPlaceholder('e.g. Chrome — work profile').fill('Test')
     await expect(page.locator('.vs-bookmarklet-chip:not(.chip-inactive)')).toBeVisible({ timeout: 5000 })
@@ -139,7 +139,7 @@ test.describe('VaultSheet autofill installation UI', () => {
     await openVault(page)
     await createBookmarklet(page)
     await page.locator('.vs-bookmarklet-chip').click()
-    await expect(page.locator('.modal-title', { hasText: 'New autofill bookmarklet' })).toBeVisible()
+    await expect(page.locator('.modal-title', { hasText: 'New same-profile bookmarklet' })).toBeVisible()
   })
 
   test('Copy link button copies the javascript: URL to clipboard', async ({ page, context }) => {
@@ -164,8 +164,8 @@ test.describe('VaultSheet autofill installation UI', () => {
   test('modal shows name input, warning banner, and two-column install layout', async ({ page }) => {
     await openVault(page)
     await page.locator('.vault-pill').click()
-    await page.getByRole('button', { name: '+ New bookmarklet' }).click()
-    await expect(page.locator('.modal-title', { hasText: 'New autofill bookmarklet' })).toBeVisible()
+    await page.getByRole('button', { name: '+ Same-profile bookmarklet' }).click()
+    await expect(page.locator('.modal-title', { hasText: 'New same-profile bookmarklet' })).toBeVisible()
     await expect(page.getByPlaceholder('e.g. Chrome — work profile')).toBeVisible()
     await expect(page.locator('.vs-install-warning')).toBeVisible()
     await expect(page.locator('.vs-install-col-drag')).toBeVisible()
@@ -175,7 +175,7 @@ test.describe('VaultSheet autofill installation UI', () => {
   test('chip is inactive and copy button disabled before name is entered', async ({ page }) => {
     await openVault(page)
     await page.locator('.vault-pill').click()
-    await page.getByRole('button', { name: '+ New bookmarklet' }).click()
+    await page.getByRole('button', { name: '+ Same-profile bookmarklet' }).click()
     await expect(page.locator('.vs-bookmarklet-chip.chip-inactive')).toBeVisible({ timeout: 5000 })
     await expect(page.locator('.vs-copy-link-btn')).toBeDisabled()
     await page.getByPlaceholder('e.g. Chrome — work profile').fill('test')
@@ -186,7 +186,7 @@ test.describe('VaultSheet autofill installation UI', () => {
   test('"Save and Close" is disabled until a name is entered', async ({ page }) => {
     await openVault(page)
     await page.locator('.vault-pill').click()
-    await page.getByRole('button', { name: '+ New bookmarklet' }).click()
+    await page.getByRole('button', { name: '+ Same-profile bookmarklet' }).click()
     await expect(page.locator('.vs-close-btn')).toBeDisabled()
     await page.getByPlaceholder('e.g. Chrome — work profile').fill('My bookmark')
     await expect(page.locator('.vs-close-btn')).toBeEnabled({ timeout: 5000 })
@@ -195,9 +195,9 @@ test.describe('VaultSheet autofill installation UI', () => {
   test('X button cancels without saving when chip unused', async ({ page }) => {
     await openVault(page)
     await page.locator('.vault-pill').click()
-    await page.getByRole('button', { name: '+ New bookmarklet' }).click()
+    await page.getByRole('button', { name: '+ Same-profile bookmarklet' }).click()
     await page.locator('.vs-modal-x').click()
-    await expect(page.locator('.modal-title', { hasText: 'New autofill bookmarklet' })).not.toBeVisible()
+    await expect(page.locator('.modal-title', { hasText: 'New same-profile bookmarklet' })).not.toBeVisible()
     await expect(page.locator('.delegate-name')).not.toBeVisible()
   })
 
@@ -214,9 +214,9 @@ test.describe('VaultSheet autofill installation UI', () => {
   test('"Save and Close" saves the delegate and dismisses the modal', async ({ page }) => {
     await openVault(page)
     await createBookmarklet(page)
-    await expect(page.locator('.modal-title', { hasText: 'New autofill bookmarklet' })).toBeVisible()
+    await expect(page.locator('.modal-title', { hasText: 'New same-profile bookmarklet' })).toBeVisible()
     await page.locator('.vs-close-btn').click()
-    await expect(page.locator('.modal-title', { hasText: 'New autofill bookmarklet' })).not.toBeVisible()
+    await expect(page.locator('.modal-title', { hasText: 'New same-profile bookmarklet' })).not.toBeVisible()
     await expect(page.locator('.delegate-name', { hasText: 'Test' })).toBeVisible()
   })
 
diff --git a/pwa/vite.config.js b/pwa/vite.config.js
index 798312f..df9765a 100644
--- a/pwa/vite.config.js
+++ b/pwa/vite.config.js
@@ -86,6 +86,7 @@ export default defineConfig({
       },
       workbox: {
         globPatterns: ['**/*.{js,css,html,ico,png,svg,wasm,gz,webmanifest}'],
+        navigateFallbackDenylist: [/\/autofill\.html(?:\?.*)?$/],
         maximumFileSizeToCacheInBytes: 5000000,
 	// Inject the header into the requests
         manifestTransforms: [async (entries) => {

From e006ac6cd77362bf48b715cd17d4dbc5992b2530 Mon Sep 17 00:00:00 2001
From: Dan Brown <danbrown@gmail.com>
Date: Fri, 29 May 2026 09:54:50 +0200
Subject: [PATCH 18/20] Show autofill delegate mode

---
 pwa/src/lib/VaultSheet.svelte |  5 +++--
 pwa/src/lib/delegates.js      | 12 ++++++++++++
 pwa/tests/bookmarklet.spec.ts |  1 +
 pwa/tests/delegates.spec.ts   | 18 ++++++++++++++++++
 pwa/tests/vault_sheet.spec.ts |  1 +
 5 files changed, 35 insertions(+), 2 deletions(-)
 create mode 100644 pwa/tests/delegates.spec.ts

diff --git a/pwa/src/lib/VaultSheet.svelte b/pwa/src/lib/VaultSheet.svelte
index 7747680..b3b607e 100644
--- a/pwa/src/lib/VaultSheet.svelte
+++ b/pwa/src/lib/VaultSheet.svelte
@@ -5,7 +5,7 @@
   import { selectedFile, dbItems, secondaryVaults, switchboardUrl, switchboardConnected, crossProfileEnabled, delegatesVersion } from '../store.js'
   import { isBiometricSupported, isBiometricEnrolled, enrollBiometric, clearBiometric } from './biometric.js'
   import { makeDelegateBookmarkletUrl } from './bookmarklet.js'
-  import { getDelegates, addDelegate, revokeDelegate, setSwitchboardUrl, setCrossProfileEnabled } from './delegates.js'
+  import { getDelegates, addDelegate, revokeDelegate, setSwitchboardUrl, setCrossProfileEnabled, delegateFillMode } from './delegates.js'
   import { createPairedAutofillProfile, removePairedAutofillProfile, parsePairingToken } from './pairedAutofill.js'
   import Icon from './Icon.svelte'
 
@@ -536,10 +536,11 @@
         {#each delegates as d}
           {@const total   = (d.bcCount ?? 0) + (d.relayCount ?? 0)}
           {@const lastTs  = Math.max(d.bcLastUsed ?? 0, d.relayLastUsed ?? 0) || null}
+          {@const mode    = delegateFillMode(d)}
           <div class="delegate-row">
             <div class="delegate-info">
               <span class="delegate-name">{d.name}</span>
-              <span class="delegate-meta muted">Created {fmtDate(d.created)}{d.displayCode ? ' · ' + d.displayCode : ''} · {total} {total === 1 ? 'page filled' : 'pages filled'}{lastTs ? ' · Last filled ' + fmtRelative(lastTs) : ''}</span>
+              <span class="delegate-meta muted">Created {fmtDate(d.created)}{d.displayCode ? ' · ' + d.displayCode : ''} · {total} {total === 1 ? 'page filled' : 'pages filled'} ({mode}){lastTs ? ' · Last filled ' + fmtRelative(lastTs) : ''}</span>
             </div>
             <button class="delegate-revoke" onclick={() => revokeOne(d.id)}>Revoke</button>
           </div>
diff --git a/pwa/src/lib/delegates.js b/pwa/src/lib/delegates.js
index 3fe41ab..19a751d 100644
--- a/pwa/src/lib/delegates.js
+++ b/pwa/src/lib/delegates.js
@@ -26,6 +26,18 @@ function migrate(d) {
   return d
 }
 
+export function delegateFillMode(delegate) {
+  const bcCount = delegate?.bcCount ?? 0
+  const relayCount = delegate?.relayCount ?? 0
+  const usedSameProfile = bcCount > 0
+  const usedCrossProfile = relayCount > 0
+
+  if (usedSameProfile && usedCrossProfile) return 'same profile + cross profile'
+  if (usedCrossProfile) return 'cross profile'
+  if (usedSameProfile) return 'same profile'
+  return delegate?.pairingId || delegate?.relayUrl ? 'cross profile' : 'same profile'
+}
+
 export async function getDelegates(vaultUuid) {
   if (!vaultUuid) return []
   const all = await load()
diff --git a/pwa/tests/bookmarklet.spec.ts b/pwa/tests/bookmarklet.spec.ts
index 0942a86..618921b 100644
--- a/pwa/tests/bookmarklet.spec.ts
+++ b/pwa/tests/bookmarklet.spec.ts
@@ -179,6 +179,7 @@ test.describe('Bookmarklet — autofill popup phases', () => {
     expect(decoded).not.toContain('privKey')
     await portpass.getByRole('button', { name: 'Pair profile' }).click()
     await expect(portpass.locator('.delegate-row', { hasText: 'Firefox daily' })).toBeVisible()
+    await expect(portpass.locator('.delegate-row', { hasText: 'Firefox daily' }).locator('.delegate-meta')).toContainText('0 pages filled (cross profile)')
   })
 
   test('wrong autofill pairing token is rejected', async ({ context }) => {
diff --git a/pwa/tests/delegates.spec.ts b/pwa/tests/delegates.spec.ts
new file mode 100644
index 0000000..b748724
--- /dev/null
+++ b/pwa/tests/delegates.spec.ts
@@ -0,0 +1,18 @@
+import { test, expect } from '@playwright/test'
+import { delegateFillMode } from '../src/lib/delegates.js'
+
+test.describe('autofill delegate display helpers', () => {
+  test('infers same-profile delegates before and after same-profile use', () => {
+    expect(delegateFillMode({ bcCount: 0, relayCount: 0 })).toBe('same profile')
+    expect(delegateFillMode({ bcCount: 74, relayCount: 0 })).toBe('same profile')
+  })
+
+  test('infers cross-profile delegates from pairing metadata or relay use', () => {
+    expect(delegateFillMode({ pairingId: 'pair-1', relayUrl: 'ws://localhost:7577', bcCount: 0, relayCount: 0 })).toBe('cross profile')
+    expect(delegateFillMode({ bcCount: 0, relayCount: 74 })).toBe('cross profile')
+  })
+
+  test('shows both modes if a delegate has unexpected mixed usage', () => {
+    expect(delegateFillMode({ bcCount: 10, relayCount: 64 })).toBe('same profile + cross profile')
+  })
+})
diff --git a/pwa/tests/vault_sheet.spec.ts b/pwa/tests/vault_sheet.spec.ts
index df33ef6..5c1d792 100644
--- a/pwa/tests/vault_sheet.spec.ts
+++ b/pwa/tests/vault_sheet.spec.ts
@@ -218,6 +218,7 @@ test.describe('VaultSheet autofill installation UI', () => {
     await page.locator('.vs-close-btn').click()
     await expect(page.locator('.modal-title', { hasText: 'New same-profile bookmarklet' })).not.toBeVisible()
     await expect(page.locator('.delegate-name', { hasText: 'Test' })).toBeVisible()
+    await expect(page.locator('.delegate-row', { hasText: 'Test' }).locator('.delegate-meta')).toContainText('0 pages filled (same profile)')
   })
 
   test('bookmarklet is not visible on per-vault detail page', async ({ page }) => {

From 68efa1a0163e9c58cc16c3471e6dab920863fa89 Mon Sep 17 00:00:00 2001
From: Dan Brown <danbrown@gmail.com>
Date: Fri, 29 May 2026 15:30:56 +0200
Subject: [PATCH 19/20] Redesign cross-profile autofill pairing

---
 pwa/public/autofill.html         | 515 +++++++++++++++++++++++++++----
 pwa/src/lib/VaultSheet.svelte    | 323 +++++++++++--------
 pwa/tests/bookmarklet.spec.ts    |  31 +-
 pwa/tests/service_worker.spec.ts |   5 +-
 4 files changed, 680 insertions(+), 194 deletions(-)

diff --git a/pwa/public/autofill.html b/pwa/public/autofill.html
index 84b4421..c10bbe1 100644
--- a/pwa/public/autofill.html
+++ b/pwa/public/autofill.html
@@ -13,6 +13,7 @@
   --bg: #14161a; --surface: #1c1f24; --surface-2: #262a31;
   --border: #2c3038; --text: #f1ede4; --text-muted: #a6a39b;
   --text-soft: #757279; --amber: #d9a358; --amber-bg: #3a2e1a;
+  --accent: #d9a358; --accent-strong: #e6b572; --accent-soft: #3a2e1a; --accent-on: #1a1407;
   --success: #6cba8a; --green-bg: #1a3025;
   --red: #e08673; --orange: #c47030;
 }
@@ -233,10 +234,10 @@
 
   // ── Theme ─────────────────────────────────────────────────────────────────
   var _accentMap = {
-    amber:    { light: ['#b07418', '#f3e6c9'], dark: ['#d9a358', '#3a2e1a'] },
-    sage:     { light: ['#5a7a4f', '#dde6d4'], dark: ['#97b386', '#2c3a26'] },
-    slate:    { light: ['#4a5d82', '#dee3ee'], dark: ['#8da3c8', '#25304a'] },
-    burgundy: { light: ['#8a3a3a', '#ead4d4'], dark: ['#c98a8a', '#3a2222'] },
+    amber:    { light: ['#b07418', '#8c5c12', '#f3e6c9', '#ffffff'], dark: ['#d9a358', '#e6b572', '#3a2e1a', '#1a1407'] },
+    sage:     { light: ['#5a7a4f', '#466239', '#dde6d4', '#ffffff'], dark: ['#97b386', '#a8c298', '#2c3a26', '#11160d'] },
+    slate:    { light: ['#4a5d82', '#364770', '#dee3ee', '#ffffff'], dark: ['#8da3c8', '#9fb6da', '#25304a', '#0f1320'] },
+    burgundy: { light: ['#8a3a3a', '#6b2828', '#ead4d4', '#ffffff'], dark: ['#c98a8a', '#d99b9b', '#3a2222', '#1a0d0d'] },
   }
   function applyTheme(dark, accent) {
     var r = document.documentElement.style
@@ -266,10 +267,26 @@
       r.setProperty('--orange',    '#c47030')
     }
     var av = (_accentMap[accent] || _accentMap.amber)[dark ? 'dark' : 'light']
-    r.setProperty('--amber',    av[0])
-    r.setProperty('--amber-bg', av[1])
+    r.setProperty('--accent',        av[0])
+    r.setProperty('--accent-strong', av[1])
+    r.setProperty('--accent-soft',   av[2])
+    r.setProperty('--accent-on',     av[3])
+    r.setProperty('--amber',         av[0])
+    r.setProperty('--amber-bg',      av[2])
   }
-  // Theme applied when first message arrives from Portpass via applyTheme().
+  function applyStoredThemeFromParams() {
+    var p = new URLSearchParams(location.search)
+    var theme = p.get('theme') || localStorage.getItem('theme') || 'dark'
+    var accent = p.get('accent') || localStorage.getItem('accent') || 'amber'
+    if (theme !== 'light' && theme !== 'dark') theme = 'dark'
+    if (!_accentMap[accent]) accent = 'amber'
+    try {
+      localStorage.setItem('theme', theme)
+      localStorage.setItem('accent', accent)
+    } catch(_) {}
+    applyTheme(theme === 'dark', accent)
+  }
+  // Theme is applied from Portpass messages during fill, and from URL/storage on the pairing page.
 
   // ── SVG icons ─────────────────────────────────────────────────────────────
   var _S = ' viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"'
@@ -278,6 +295,7 @@
   var SVG_X_ICO      = '<svg width="16" height="16"' + _S + ' stroke-width="1.6"><path d="M6 6l12 12M18 6 6 18"/></svg>'
   var SVG_PENCIL = '<svg width="13" height="13"' + _S + ' stroke-width="1.6"><path d="M4 20h4l10-10-4-4L4 16v4Z"/><path d="m14 6 4 4"/></svg>'
   var SVG_UNDO   = '<svg width="13" height="13"' + _S + ' stroke-width="1.6"><path d="M3 7v6h6"/><path d="M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13"/></svg>'
+  var SVG_COPY   = '<svg width="15" height="15"' + _S + ' stroke-width="1.8"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>'
   var SVG_CHECK_SM = '<svg width="12" height="12"' + _S + ' stroke-width="2.2"><path d="m5 12 5 5L20 7"/></svg>'
   var SVG_CHECK_MD = '<svg width="24" height="24"' + _S + ' stroke-width="2"><path d="m5 12 5 5L20 7"/></svg>'
   // Large error icons (40px)
@@ -374,6 +392,7 @@
   var PAIR_BASE32 = 'abcdefghijklmnopqrstuvwxyz234567'
 
   if (pairMode) {
+    applyStoredThemeFromParams()
     showPairingSetup()
     return
   }
@@ -799,94 +818,484 @@
     return savePairedProfile(profile)
   }
 
+  function makeDelegateBookmarkletUrl(portpassUrl, delegateId, relayUrl) {
+    var origin = new URL(portpassUrl).origin
+    return 'javascript:' + encodeURIComponent(
+      '(' + DELEGATE_BOOKMARKLET_IIFE.toString() + ')(' +
+      JSON.stringify(portpassUrl) + ',' +
+      JSON.stringify(origin) + ',' +
+      JSON.stringify(delegateId) + ',' +
+      JSON.stringify(relayUrl) + ')'
+    )
+  }
+
+  function DELEGATE_BOOKMARKLET_IIFE(PORTPASS_URL, PORTPASS_ORIGIN, DELEGATE_ID, RELAY_URL) {
+    'use strict'
+    if (window.__ppRunning) return
+    window.__ppRunning = true
+    var activeEl = isUsableInput(document.activeElement) ? document.activeElement : null
+    var isSecure = window.location.protocol === 'https:' || window.location.hostname === 'localhost'
+    var currentCanonical = canonicalURL(window.location.href)
+    var saveUrl = window.location.origin + window.location.pathname
+    var AUTOFILL_URL = PORTPASS_URL + 'autofill.html'
+    var pp = null
+    var startEl = null
+    var cleanedUp = false
+
+    function cleanup() {
+      if (cleanedUp) return
+      cleanedUp = true
+      document.removeEventListener('click', onFieldClick, true)
+      window.removeEventListener('message', onPopupMessage)
+      window.__ppRunning = false
+    }
+    function onFieldClick(e) {
+      var target = e.target
+      if (!isUsableInput(target)) return
+      e.preventDefault()
+      startEl = target
+      try { pp.postMessage({ type: 'field-clicked' }, PORTPASS_ORIGIN) } catch(_) {}
+    }
+    function onPopupMessage(e) {
+      if (!pp || e.source !== pp) return
+      var msg = e.data
+      if (!msg) return
+      if (msg.type === 'fill') {
+        document.removeEventListener('click', onFieldClick, true)
+        var el = startEl || activeEl
+        executeAutotype(el, msg.autotype, msg.fields).then(function() {
+          try { pp.postMessage({ type: 'fill-done' }, PORTPASS_ORIGIN) } catch(_) {}
+          try { pp.focus() } catch(_) {}
+          cleanup()
+        })
+      } else if (msg.type === 'cancel') cleanup()
+    }
+    ;(async function run() {
+      try {
+        var ppW = 380, ppH = 480
+        var ppLeft = screen.width - ppW - 24
+        pp = window.open(AUTOFILL_URL, 'portpass_autofill', 'popup=yes,width=' + ppW + ',height=' + ppH + ',left=' + ppLeft + ',top=24')
+        if (!pp) { cleanup(); return }
+        var readyMsg
+        try { readyMsg = await recv(pp, ['ready', 'error'], 10000) }
+        catch (_) { try { pp.close() } catch (_2) {}; cleanup(); return }
+        if (readyMsg.type === 'error') { cleanup(); return }
+        pp.postMessage({
+          type: 'init',
+          url: currentCanonical,
+          saveUrl: saveUrl,
+          isSecure: isSecure,
+          delegateId: DELEGATE_ID,
+          relayUrl: RELAY_URL,
+          hasActiveField: !!activeEl,
+        }, PORTPASS_ORIGIN)
+        window.addEventListener('message', onPopupMessage)
+        document.addEventListener('click', onFieldClick, true)
+        var closeCheck = setInterval(function() {
+          if (pp && pp.closed) { clearInterval(closeCheck); cleanup() }
+        }, 500)
+      } catch (e) { cleanup() }
+    })()
+    function recv(target, types, timeout) {
+      timeout = timeout || 5000
+      return new Promise(function(resolve, reject) {
+        var t = setTimeout(function() {
+          window.removeEventListener('message', handler)
+          reject('timeout')
+        }, timeout)
+        function handler(e) {
+          if (e.source !== target) return
+          if (types.indexOf(e.data && e.data.type) >= 0) {
+            clearTimeout(t)
+            window.removeEventListener('message', handler)
+            resolve(e.data)
+          }
+        }
+        window.addEventListener('message', handler)
+      })
+    }
+    function canonicalURL(href) {
+      var s = href || ''
+      var pfxs = ['https://', 'http://']
+      for (var i = 0; i < pfxs.length; i++) {
+        if (s.toLowerCase().indexOf(pfxs[i]) === 0) { s = s.slice(pfxs[i].length); break }
+      }
+      var h = s.indexOf('#'); if (h >= 0) s = s.slice(0, h)
+      var q = s.indexOf('?'); if (q >= 0) s = s.slice(0, q)
+      s = s.toLowerCase()
+      var sl = s.indexOf('/')
+      if (sl >= 0) s = s.slice(0, sl).replace(/^www\./, '') + s.slice(sl)
+      else s = s.replace(/^www\./, '')
+      return s.replace(/\/+$/, '')
+    }
+    function parseAutotype(seq) {
+      var tokens = [], lit = '', i = 0
+      while (i < seq.length) {
+        if (seq[i] !== '\\') { lit += seq[i]; i++; continue }
+        var code = seq[i + 1]
+        if (!code) break
+        if (code === '\\') { lit += '\\'; i += 2 }
+        else if (code === 'f') {
+          if (lit) { tokens.push({ type: 'lit', text: lit }); lit = '' }
+          var d = seq[i + 2]
+          if (d && /^[1-9]$/.test(d)) { tokens.push({ type: 'f', n: parseInt(d) }); i += 3 }
+          else { tokens.push({ type: 'f', n: 1 }); i += 2 }
+        } else if (code === 'w' || code === 'W') {
+          if (lit) { tokens.push({ type: 'lit', text: lit }); lit = '' }
+          var j = i + 2, count = 0
+          while (j < seq.length && count < 3 && /^[0-9]$/.test(seq[j])) { j++; count++ }
+          tokens.push({ type: 'delay', ms: (parseInt(seq.slice(i + 2, j)) || 0) * (code === 'W' ? 1000 : 1) }); i = j
+        } else if ('uptmn2s'.indexOf(code) >= 0) {
+          if (lit) { tokens.push({ type: 'lit', text: lit }); lit = '' }
+          tokens.push({ type: 'code', code: code }); i += 2
+        } else i += 2
+      }
+      if (lit) tokens.push({ type: 'lit', text: lit })
+      return tokens
+    }
+    function isUsableInput(el) {
+      if (!el) return false
+      var tag = el.tagName
+      if (tag !== 'INPUT' && tag !== 'TEXTAREA') return false
+      if (el.disabled || el.type === 'hidden') return false
+      if (['submit', 'button', 'reset', 'image', 'checkbox', 'radio'].indexOf(el.type) >= 0) return false
+      var s = getComputedStyle(el)
+      return s.display !== 'none' && s.visibility !== 'hidden'
+    }
+    function fillField(el, value) {
+      var proto = el.tagName === 'TEXTAREA' ? HTMLTextAreaElement.prototype : HTMLInputElement.prototype
+      var setter = Object.getOwnPropertyDescriptor(proto, 'value')
+      if (setter && setter.set) setter.set.call(el, value)
+      el.dispatchEvent(new Event('input', { bubbles: true }))
+      el.dispatchEvent(new Event('change', { bubbles: true }))
+    }
+    function focusableList() {
+      var q = 'input:not([disabled]):not([type=hidden]):not([type=submit]):not([type=button]):not([type=reset]):not([type=image]):not([type=checkbox]):not([type=radio]),textarea:not([disabled])'
+      var all = Array.from(document.querySelectorAll(q)).filter(function(e) {
+        var s = getComputedStyle(e)
+        return e.tabIndex >= 0 && s.display !== 'none' && s.visibility !== 'hidden'
+      })
+      return all.filter(function(e) { return e.tabIndex > 0 }).sort(function(a, b) { return a.tabIndex - b.tabIndex }).concat(all.filter(function(e) { return e.tabIndex === 0 }))
+    }
+    function nextFocusable(el) {
+      var sorted = focusableList()
+      var i = sorted.indexOf(el)
+      return i >= 0 ? sorted[i + 1] || null : null
+    }
+    function prevFocusable(el) {
+      var sorted = focusableList()
+      var i = sorted.indexOf(el)
+      return i > 0 ? sorted[i - 1] : null
+    }
+    async function executeAutotype(startEl, sequence, fields) {
+      var tokens = parseAutotype(sequence)
+      var el = startEl
+      for (var i = 0; i < tokens.length; i++) {
+        var tok = tokens[i]
+        if (tok.type === 'delay') await new Promise(function(r) { setTimeout(r, tok.ms) })
+        else if (tok.type === 'lit' || tok.type === 'f') {
+          if (el) fillField(el, tok.type === 'f' ? (fields['f' + tok.n] || '') : tok.text)
+        } else {
+          var code = tok.code
+          if (code === 'u' || code === 'p' || code === 'm' || code === '2') {
+            if (el) fillField(el, fields[code] || '')
+          } else if (code === 't') {
+            var next = nextFocusable(el)
+            if (next) { if (el) el.dispatchEvent(new Event('blur', { bubbles: true })); next.focus(); el = next }
+          } else if (code === 's') {
+            var prev = prevFocusable(el)
+            if (prev) { if (el) el.dispatchEvent(new Event('blur', { bubbles: true })); prev.focus(); el = prev }
+          } else if (code === 'n') {
+            if (el) ['keydown', 'keypress', 'keyup'].forEach(function(evType) {
+              el.dispatchEvent(new KeyboardEvent(evType, { key: 'Enter', code: 'Enter', keyCode: 13, which: 13, bubbles: true, cancelable: true }))
+            })
+            var form = el && el.closest('form')
+            var submitBtn = (form && form.querySelector('[type=submit]')) || (form && form.querySelector('[default-button]'))
+            if (!submitBtn && form) {
+              var btns = Array.from(form.querySelectorAll('button:not([type=reset])'))
+              if (btns.length === 1) submitBtn = btns[0]
+            }
+            if (submitBtn) submitBtn.click()
+            else if (form) try { form.requestSubmit() } catch (_) { try { form.submit() } catch (_2) {} }
+          }
+        }
+      }
+    }
+  }
+
   function showPairingSetup() {
     hideSearchUI()
     $subheader.style.display = 'none'
     $content.innerHTML = ''
 
     var wrap = document.createElement('div')
-    wrap.style.cssText = 'padding:16px;display:flex;flex-direction:column;gap:12px'
+    wrap.style.cssText = 'padding:26px 28px 34px;display:flex;flex-direction:column;gap:24px;max-width:760px'
 
     var title = document.createElement('div')
     title.className = 'pp-waiting-title'
-    title.textContent = 'Pair this autofill profile'
+    title.style.cssText = 'font-size:26px;line-height:1.15'
+    title.textContent = 'Pair this everyday browser'
     wrap.appendChild(title)
 
     var help = document.createElement('div')
     help.className = 'pp-waiting-sub'
-    help.style.textAlign = 'left'
-    help.textContent = 'Create a pairing token here, then paste it into Portpass in the clean profile using Vault settings → Autofill → Add autofill profile.'
+    help.style.cssText = 'text-align:left;font-size:16px;line-height:1.45;margin-top:-14px'
+    help.textContent = 'This creates a signing key that stays in this browser. Pair it with your vault profile so Portpass will trust autofill requests from here.'
     wrap.appendChild(help)
 
+    function step(num, heading, body) {
+      var row = document.createElement('div')
+      row.style.cssText = 'display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:start'
+      var badge = document.createElement('div')
+      badge.textContent = String(num)
+      badge.style.cssText = 'width:30px;height:30px;border:1.5px solid var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--accent);font-weight:800;font-size:17px;margin-top:2px'
+      var col = document.createElement('div')
+      col.style.cssText = 'display:flex;flex-direction:column;gap:10px;min-width:0'
+      var h = document.createElement('div')
+      h.className = 'pp-waiting-title'
+      h.style.cssText = 'font-size:18px'
+      h.textContent = heading
+      col.appendChild(h)
+      if (body) {
+        var b = document.createElement('div')
+        b.className = 'pp-waiting-sub'
+        b.style.cssText = 'text-align:left;line-height:1.45'
+        b.textContent = body
+        col.appendChild(b)
+      }
+      row.appendChild(badge)
+      row.appendChild(col)
+      wrap.appendChild(row)
+      return col
+    }
+
+    var nameStep = step(1, 'Name this bookmarklet', 'The label shown in your bookmarks bar.')
     var name = document.createElement('input')
     name.className = 'pp-search'
-    name.placeholder = 'Name, e.g. Firefox — daily profile'
-    wrap.appendChild(name)
-
+    name.placeholder = 'Portpass Autofill'
+    name.value = 'Portpass Autofill'
+    nameStep.appendChild(name)
+
+    var relayWrap = document.createElement('details')
+    relayWrap.style.cssText = 'color:var(--text-soft)'
+    var relaySummary = document.createElement('summary')
+    relaySummary.textContent = 'Advanced · relay endpoint'
+    relaySummary.style.cursor = 'pointer'
+    relayWrap.appendChild(relaySummary)
+    var relayBox = document.createElement('div')
+    relayBox.style.cssText = 'margin-top:12px;padding:16px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);display:flex;flex-direction:column;gap:10px'
+    relayWrap.appendChild(relayBox)
+    var relayLabel = document.createElement('label')
+    relayLabel.className = 'pp-waiting-sub'
+    relayLabel.style.cssText = 'text-align:left'
+    relayLabel.textContent = 'Relay endpoint'
+    relayBox.appendChild(relayLabel)
     var relay = document.createElement('input')
     relay.className = 'pp-search'
-    relay.placeholder = 'Relay URL, e.g. http://localhost:7577'
+    relay.placeholder = 'http://localhost:7577'
     relay.value = 'http://localhost:7577'
-    wrap.appendChild(relay)
-
-    var create = document.createElement('button')
-    create.className = 'pp-footer-btn'
-    create.style.alignSelf = 'flex-start'
-    create.textContent = 'Create pairing token'
-    wrap.appendChild(create)
+    relayBox.appendChild(relay)
+    var relayHint = document.createElement('div')
+    relayHint.className = 'pp-waiting-sub'
+    relayHint.style.cssText = 'text-align:left;line-height:1.45'
+    relayHint.textContent = 'Defaults to the local relay. Baked into the token and bookmarklet below — change it only if your relay runs elsewhere.'
+    relayBox.appendChild(relayHint)
+    nameStep.appendChild(relayWrap)
+
+    var bookmarkletStep = step(2, 'Install the bookmarklet here', "It carries no key — it just opens this page to fill. Works once you've paired in the next step.")
+    var installGrid = document.createElement('div')
+    installGrid.style.cssText = 'display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:4px'
+    bookmarkletStep.appendChild(installGrid)
+
+    var dragCol = document.createElement('div')
+    dragCol.style.cssText = 'display:flex;flex-direction:column;align-items:center;gap:12px;border:1.5px dashed var(--border);border-radius:10px;background:var(--surface-2);padding:22px 14px;opacity:0.55'
+    installGrid.appendChild(dragCol)
+    var dragLabel = document.createElement('div')
+    dragLabel.textContent = 'BOOKMARKS BAR VISIBLE'
+    dragLabel.style.cssText = 'font-size:11px;font-weight:800;letter-spacing:0.08em;color:var(--text-soft)'
+    dragCol.appendChild(dragLabel)
+    var chip = document.createElement('a')
+    chip.href = '#'
+    chip.draggable = false
+    chip.onclick = function(e) { e.preventDefault() }
+    chip.style.cssText = 'display:inline-flex;align-items:center;gap:8px;padding:9px 16px;background:var(--bg);border:1.5px dashed var(--border);border-radius:999px;color:var(--text);text-decoration:none;font-weight:800;cursor:default'
+    chip.innerHTML = '<img src="icon.svg" width="16" height="16" alt="" draggable="false"> <span>Portpass Autofill</span>'
+    dragCol.appendChild(chip)
+    var dragHint = document.createElement('div')
+    dragHint.className = 'pp-waiting-sub'
+    dragHint.textContent = 'Drag to your bookmarks bar'
+    dragCol.appendChild(dragHint)
+
+    var copyCol = document.createElement('div')
+    copyCol.style.cssText = 'display:flex;flex-direction:column;align-items:center;gap:12px;border:1.5px solid var(--border);border-radius:10px;background:var(--surface-2);padding:22px 14px;opacity:0.55'
+    installGrid.appendChild(copyCol)
+    var copyLabel = document.createElement('div')
+    copyLabel.textContent = 'BAR HIDDEN'
+    copyLabel.style.cssText = dragLabel.style.cssText
+    copyCol.appendChild(copyLabel)
+    var copyLink = document.createElement('button')
+    copyLink.className = 'pp-footer-btn'
+    copyLink.disabled = true
+    copyLink.style.cssText = 'display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--accent);border-radius:8px;color:var(--accent);padding:9px 18px;font-weight:800'
+    copyLink.innerHTML = SVG_COPY + ' Copy link'
+    copyCol.appendChild(copyLink)
+    var copyHint = document.createElement('div')
+    copyHint.className = 'pp-waiting-sub'
+    copyHint.style.textAlign = 'center'
+    copyHint.textContent = 'Add a bookmark and paste the link'
+    copyCol.appendChild(copyHint)
+
+    var tokenStep = step(3, 'Copy the pairing token to the vault profile', 'Paste it into Portpass in your vault profile and confirm this code matches. This is the last step here.')
+    var tokenRow = document.createElement('div')
+    tokenRow.style.cssText = 'display:flex;align-items:center;gap:14px;flex-wrap:wrap'
+    tokenStep.appendChild(tokenRow)
 
     var code = document.createElement('div')
-    code.className = 'rec-match-badge'
-    code.style.alignSelf = 'flex-start'
-    code.style.display = 'none'
-    wrap.appendChild(code)
+    code.textContent = '---- ----'
+    code.style.cssText = 'border:1.5px solid var(--accent);border-radius:8px;padding:7px 13px;color:var(--accent);font-family:ui-monospace,monospace;font-size:18px;font-weight:800;letter-spacing:0.04em'
+    tokenRow.appendChild(code)
+
+    var copyToken = document.createElement('button')
+    copyToken.className = 'pp-footer-btn'
+    copyToken.disabled = true
+    copyToken.style.cssText = 'display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:var(--accent-on);border:none;border-radius:8px;padding:10px 20px;font-weight:800'
+    copyToken.innerHTML = SVG_COPY + ' Copy token'
+    tokenRow.appendChild(copyToken)
+
+    var tokenMeta = document.createElement('div')
+    tokenMeta.className = 'pp-waiting-sub'
+    tokenMeta.style.cssText = 'text-align:left;line-height:1.45'
+    tokenMeta.textContent = 'Stays valid while this page is open · 10 min after you copy'
+    tokenStep.appendChild(tokenMeta)
+
+    var regen = document.createElement('button')
+    regen.className = 'pp-footer-btn'
+    regen.style.cssText = 'align-self:flex-start;color:var(--text-soft)'
+    regen.textContent = '↻ Regenerate'
+    tokenMeta.appendChild(document.createTextNode(' · '))
+    tokenMeta.appendChild(regen)
+
+    var rawToggle = document.createElement('button')
+    rawToggle.className = 'pp-footer-btn'
+    rawToggle.style.cssText = 'align-self:flex-start;color:var(--text-soft)'
+    rawToggle.textContent = '▶ Show raw token'
+    tokenStep.appendChild(rawToggle)
 
     var token = document.createElement('textarea')
     token.className = 'pp-search'
-    token.rows = 8
+    token.rows = 5
     token.readOnly = true
-    token.style.display = 'none'
-    token.style.resize = 'vertical'
-    wrap.appendChild(token)
-
-    var copy = document.createElement('button')
-    copy.className = 'pp-footer-btn'
-    copy.style.cssText = 'align-self:flex-start;display:none'
-    copy.textContent = 'Copy token'
-    wrap.appendChild(copy)
+    token.style.cssText = 'display:none;resize:vertical;font-family:ui-monospace,monospace'
+    tokenStep.appendChild(token)
 
     var status = document.createElement('div')
     status.className = 'pp-waiting-sub'
     status.style.textAlign = 'left'
     wrap.appendChild(status)
 
-    create.onclick = function() {
-      create.disabled = true
-      status.textContent = 'Creating profile…'
-      createPairingProfile(relay.value.trim()).then(function(profile) {
-        token.value = pairingTokenForProfile(profile, name.value.trim())
-        token.style.display = ''
-        copy.style.display = ''
-        code.style.display = ''
-        code.textContent = 'Code ' + profile.displayCode
-        status.textContent = 'Token expires in 10 minutes. After pairing, create or update the bookmarklet in this profile.'
-      }).catch(function(e) {
-        create.disabled = false
-        status.textContent = e.message || 'Could not create pairing token'
+    var pairedProfile = null
+    var tokenValue = ''
+    var bookmarkletUrl = ''
+    var expiresAt = 0
+    var expiryTimer = null
+    var regenTimer = null
+
+    function setInstallEnabled(enabled) {
+      dragCol.style.opacity = enabled ? '1' : '0.55'
+      copyCol.style.opacity = enabled ? '1' : '0.55'
+      chip.draggable = enabled
+      chip.style.cursor = enabled ? 'grab' : 'default'
+      copyLink.disabled = !enabled
+      copyToken.disabled = !enabled
+    }
+
+    function updateChipName() {
+      chip.querySelector('span').textContent = name.value.trim() || 'Portpass Autofill'
+    }
+    name.oninput = updateChipName
+
+    function updateExpiry() {
+      var remaining = Math.max(0, Math.ceil((expiresAt - Date.now()) / 1000))
+      var m = Math.floor(remaining / 60)
+      var s = String(remaining % 60).padStart(2, '0')
+      tokenMeta.firstChild.nodeValue = remaining > 0
+        ? 'Stays valid while this page is open · expires in ' + m + ':' + s
+        : 'Stays valid while this page is open · 10 min after you copy'
+      if (remaining <= 0 && expiryTimer) clearInterval(expiryTimer)
+    }
+
+    function currentRelayUrl() {
+      return relay.value.trim() || 'http://localhost:7577'
+    }
+
+    function setBusy(msg) {
+      status.textContent = msg || ''
+      setInstallEnabled(false)
+      copyToken.disabled = true
+    }
+
+    function setProfile(profile) {
+      pairedProfile = profile
+      tokenValue = ''
+      token.value = ''
+      expiresAt = 0
+      if (expiryTimer) clearInterval(expiryTimer)
+      tokenMeta.firstChild.nodeValue = 'Stays valid while this page is open · 10 min after you copy'
+      code.textContent = profile.displayCode
+      bookmarkletUrl = makeDelegateBookmarkletUrl(location.href.split('autofill.html')[0], profile.delegateId, currentRelayUrl())
+      chip.href = bookmarkletUrl
+      setInstallEnabled(true)
+      status.textContent = ''
+    }
+
+    function regenerateProfile(reason) {
+      setBusy(reason || 'Creating profile…')
+      createPairingProfile(currentRelayUrl()).then(setProfile).catch(function(e) {
+        status.textContent = e.message || 'Could not create pairing profile'
       })
     }
 
-    copy.onclick = function() {
-      navigator.clipboard.writeText(token.value).then(function() {
-        copy.textContent = 'Copied!'
-        setTimeout(function() { copy.textContent = 'Copy token' }, 1800)
+    rawToggle.onclick = function() {
+      var open = token.style.display === 'none'
+      token.style.display = open ? '' : 'none'
+      rawToggle.textContent = open ? '▼ Hide raw token' : '▶ Show raw token'
+    }
+
+    copyToken.onclick = function() {
+      if (!pairedProfile) return
+      tokenValue = pairingTokenForProfile(pairedProfile, '')
+      token.value = tokenValue
+      navigator.clipboard.writeText(tokenValue).then(function() {
+        copyToken.innerHTML = SVG_CHECK_SM + ' Copied'
+        expiresAt = Date.now() + 10 * 60 * 1000
+        updateExpiry()
+        if (expiryTimer) clearInterval(expiryTimer)
+        expiryTimer = setInterval(updateExpiry, 1000)
+        setTimeout(function() { copyToken.innerHTML = SVG_COPY + ' Copy token' }, 1800)
       }).catch(function() {
         token.focus()
         token.select()
       })
     }
 
+    regen.onclick = function() { regenerateProfile('Regenerating profile…') }
+
+    relay.oninput = function() {
+      clearTimeout(regenTimer)
+      setBusy('Relay changed — regenerating token and bookmarklet…')
+      regenTimer = setTimeout(function() { regenerateProfile('Regenerating profile…') }, 500)
+    }
+
+    copyLink.onclick = function() {
+      if (!bookmarkletUrl) return
+      navigator.clipboard.writeText(bookmarkletUrl).then(function() {
+        copyLink.innerHTML = SVG_CHECK_SM + ' Copied'
+        setTimeout(function() { copyLink.innerHTML = SVG_COPY + ' Copy link' }, 1800)
+      })
+    }
+
     $content.appendChild(wrap)
+    regenerateProfile('Creating profile…')
   }
 
   // ── Record selection — shared entry point ──────────────────────────────────
diff --git a/pwa/src/lib/VaultSheet.svelte b/pwa/src/lib/VaultSheet.svelte
index b3b607e..3fd61cf 100644
--- a/pwa/src/lib/VaultSheet.svelte
+++ b/pwa/src/lib/VaultSheet.svelte
@@ -178,12 +178,9 @@
   let chipLinked  = $state(false)  // persistent: set on copy, not reset by the feedback timer
   let globeTipOpen = $state(false)
   let pairDelegateOpen = $state(false)
-  let pairDelegateName = $state('')
   let pairDelegateToken = $state('')
   let pairDelegateError = $state('')
   let pairDelegatePreview = $state(null)
-  let pairDelegateUrl = $state('')
-  let pairBookmarkletCopied = $state(false)
   let pairDelegateBusy = $state(false)
 
   let chipUsed   = $derived(chipDragged || chipLinked)
@@ -270,23 +267,17 @@
 
   function openPairDelegate() {
     pairDelegateOpen = true
-    pairDelegateName = ''
     pairDelegateToken = ''
     pairDelegateError = ''
     pairDelegatePreview = null
-    pairDelegateUrl = ''
-    pairBookmarkletCopied = false
     pairDelegateBusy = false
   }
 
   function closePairDelegate() {
     pairDelegateOpen = false
-    pairDelegateName = ''
     pairDelegateToken = ''
     pairDelegateError = ''
     pairDelegatePreview = null
-    pairDelegateUrl = ''
-    pairBookmarkletCopied = false
     pairDelegateBusy = false
   }
 
@@ -296,12 +287,6 @@
     try {
       const parsed = await parsePairingToken(pairDelegateToken)
       pairDelegatePreview = parsed
-      pairDelegateUrl = makeDelegateBookmarkletUrl(
-        window.location.origin + import.meta.env.BASE_URL,
-        parsed.delegateId,
-        parsed.relayUrl || get(switchboardUrl)
-      )
-      if (!pairDelegateName.trim()) pairDelegateName = parsed.name || `Autofill profile ${parsed.displayCode}`
     } catch (e) {
       pairDelegateError = e.message || 'Pairing token is not valid'
     }
@@ -313,7 +298,7 @@
     pairDelegateError = ''
     try {
       const parsed = pairDelegatePreview || await parsePairingToken(pairDelegateToken)
-      const name = pairDelegateName.trim() || parsed.name || `Autofill profile ${parsed.displayCode}`
+      const name = parsed.name || `Everyday profile ${parsed.displayCode}`
       const delegate = await addDelegate(_vaultUuid, name, parsed.publicKey, parsed.delegateId, {
         pairingId: parsed.pairingId,
         relayUrl: parsed.relayUrl,
@@ -323,6 +308,8 @@
         await setSwitchboardUrl(_vaultUuid, parsed.relayUrl)
         switchboardUrl.set(parsed.relayUrl)
       }
+      await setCrossProfileEnabled(_vaultUuid, true)
+      crossProfileEnabled.set(true)
       closePairDelegate()
     } catch (e) {
       pairDelegateError = e.message || 'Failed to pair autofill profile'
@@ -331,18 +318,14 @@
     }
   }
 
-  function copyPairBookmarklet() {
-    if (!pairDelegateUrl) return
-    navigator.clipboard.writeText(pairDelegateUrl).then(() => {
-      pairBookmarkletCopied = true
-      setTimeout(() => { pairBookmarkletCopied = false }, 2200)
-    })
-  }
-
   // ── Advanced / switchboard ────────────────────────────────────────────────
   let advancedOpen        = $state(false)
+  let relayAdvancedOpen   = $state(false)
   let editSwitchboardUrl  = $state('')
   let switchboardUrlDirty = $state(false)
+  let pairingPageUrl      = $derived(
+    window.location.origin + import.meta.env.BASE_URL + `autofill.html?pair=1&theme=${encodeURIComponent(theme)}&accent=${encodeURIComponent(accent)}`
+  )
 
   let totalRelayCount = $derived(delegates.reduce((n, d) => n + (d.relayCount ?? 0), 0))
   let lastRelayUsed   = $derived(
@@ -351,7 +334,11 @@
 
   function toggleAdvanced() {
     advancedOpen = !advancedOpen
-    if (advancedOpen) {
+  }
+
+  function toggleRelayAdvanced() {
+    relayAdvancedOpen = !relayAdvancedOpen
+    if (relayAdvancedOpen) {
       editSwitchboardUrl  = get(switchboardUrl)
       switchboardUrlDirty = false
     }
@@ -550,60 +537,76 @@
     <button class="vault-unlock-more" onclick={openNewDelegate}>+ Same-profile bookmarklet</button>
 
     <!-- Cross-profile autofill -->
-    <button class="delegate-advanced-toggle muted" onclick={toggleAdvanced}>
-      Cross-profile autofill {advancedOpen ? '▲' : '▼'}
-    </button>
-    {#if advancedOpen}
-      <div class="delegate-advanced-body">
-        <div class="muted" style="font-size:13px;line-height:1.45;margin-bottom:10px">
-          Starting from this clean Portpass profile:
-        </div>
-        <ol class="vs-cross-profile-steps">
-          <li>In the filling profile, open <span class="mono">{window.location.origin + import.meta.env.BASE_URL + 'autofill.html?pair=1'}</span>.</li>
-          <li>Create a pairing token there, then paste it here.</li>
-          <li>After pairing, drag or copy the generated bookmarklet into the filling profile's bookmarks bar.</li>
-          <li>Turn on the local switchboard relay below before using the bookmarklet.</li>
-        </ol>
-        <button class="vault-unlock-more" onclick={openPairDelegate}>+ Pair filling profile</button>
-        <div class="vault-row" style="margin-bottom:4px">
-          <span class="vault-label muted" style="font-size:13px">Use local switchboard relay</span>
-          <div class="vault-segmented">
-            <button class:on={!$crossProfileEnabled} disabled={!delegates.length} onclick={async () => { await setCrossProfileEnabled(_vaultUuid, false); crossProfileEnabled.set(false) }}>Off</button>
-            <button class:on={$crossProfileEnabled}  disabled={!delegates.length} onclick={async () => { await setCrossProfileEnabled(_vaultUuid, true);  crossProfileEnabled.set(true)  }}>On</button>
+    <div class="vs-cross-profile-card">
+      <button class="delegate-advanced-toggle vs-cross-profile-title" onclick={toggleAdvanced}>
+        Cross-profile autofill {advancedOpen ? '▲' : '▼'}
+      </button>
+      {#if advancedOpen}
+        <p class="muted vs-cross-profile-intro">
+          Use this when Portpass runs in a separate, clean <strong>vault profile</strong> from the <strong>everyday profile</strong> where you log in.
+        </p>
+        <div class="vs-location-note">
+          <span class="vs-location-bar"></span>
+          <div>
+            <div class="vs-location-title">IN YOUR EVERYDAY BROWSER</div>
+            <div class="muted">Open <span class="mono">{pairingPageUrl}</span>, set the relay endpoint if needed, install the bookmarklet it shows you, then copy the pairing token.</div>
           </div>
         </div>
-        {#if !delegates.length}
-          <div class="muted" style="font-size:12px;line-height:1.4">
-            Pair a filling profile before enabling the relay.
-          </div>
-        {/if}
-        <label class="vault-label muted" style="font-size:12px;display:block;margin-bottom:4px">
-          WebSocket Relay URL
-          <input
-            class="input"
-            style="font-size:13px;display:block;width:100%;margin-top:4px"
-            bind:value={editSwitchboardUrl}
-            oninput={() => { switchboardUrlDirty = editSwitchboardUrl !== get(switchboardUrl) }}
-            placeholder="ws://localhost:7577"
-          />
-        </label>
-        {#if switchboardUrlDirty}
-          <div class="switchboard-url-actions">
-            <button class="btn btn-ghost" style="font-size:13px" onclick={cancelRelayUrlEdit}>Cancel</button>
-            <button class="btn btn-primary" style="font-size:13px" onclick={saveRelayUrl}>Save</button>
+        <div class="vs-location-note active">
+          <span class="vs-location-bar"></span>
+          <div>
+            <div class="vs-location-title">HERE, IN THE VAULT PROFILE</div>
+            <div class="muted">Paste the token to pair. The relay turns on automatically.</div>
           </div>
-        {/if}
-        <div class="switchboard-status-row">
+        </div>
+        <button class="vs-primary-action" onclick={openPairDelegate}>+ Pair everyday profile</button>
+        <div class="switchboard-status-row vs-cross-profile-status">
           <span class="switchboard-status-dot" class:switchboard-ok={$crossProfileEnabled && $switchboardConnected} class:switchboard-error={!$crossProfileEnabled || !$switchboardConnected}></span>
-          <span class="muted" style="font-size:13px">
-            {!$crossProfileEnabled ? 'Cross-profile relay disabled' : ($switchboardConnected ? 'Cross-profile autofill ready' : 'websocket relay not connected')}
+          <span>
+            {$crossProfileEnabled && $switchboardConnected ? 'Cross-profile autofill ready' : (!$crossProfileEnabled ? 'Cross-profile relay disabled' : 'websocket relay not connected')}
+            <span class="muted"> · {$crossProfileEnabled ? 'relay on' : 'relay off'} · {totalRelayCount} {totalRelayCount === 1 ? 'use' : 'uses'}{lastRelayUsed ? ` · Last ${fmtRelative(lastRelayUsed)}` : ''}</span>
           </span>
         </div>
-        <div class="muted" style="font-size:12px">
-          Count of cross-profile autofill uses: {totalRelayCount}{#if lastRelayUsed} · Last {fmtRelative(lastRelayUsed)}{/if}
+        <button class="delegate-advanced-toggle vs-nested-advanced-toggle muted" onclick={toggleRelayAdvanced}>
+          {relayAdvancedOpen ? '▼' : '▶'} Advanced
+        </button>
+      {/if}
+      {#if advancedOpen && relayAdvancedOpen}
+        <div class="delegate-advanced-body">
+          <div class="vault-row" style="margin-bottom:4px">
+            <span class="vault-label muted" style="font-size:13px">Use local switchboard relay</span>
+            <div class="vault-segmented">
+              <button class:on={!$crossProfileEnabled} disabled={!delegates.length} onclick={async () => { await setCrossProfileEnabled(_vaultUuid, false); crossProfileEnabled.set(false) }}>Off</button>
+              <button class:on={$crossProfileEnabled}  disabled={!delegates.length} onclick={async () => { await setCrossProfileEnabled(_vaultUuid, true);  crossProfileEnabled.set(true)  }}>On</button>
+            </div>
+          </div>
+          {#if !delegates.length}
+            <div class="muted" style="font-size:12px;line-height:1.4">
+              Pair an everyday profile before enabling the relay.
+            </div>
+          {/if}
+          <label class="vault-label muted" style="font-size:12px;display:block;margin-bottom:4px">
+            Relay URL
+            <input
+              class="input"
+              style="font-size:13px;display:block;width:100%;margin-top:4px"
+              bind:value={editSwitchboardUrl}
+              oninput={() => { switchboardUrlDirty = editSwitchboardUrl !== get(switchboardUrl) }}
+              placeholder="http://localhost:7577"
+            />
+          </label>
+          <div class="muted" style="font-size:12px;line-height:1.4">
+            The pairing page shows an http:// URL. Portpass converts it to ws:// when opening the WebSocket relay.
+          </div>
+          {#if switchboardUrlDirty}
+            <div class="switchboard-url-actions">
+              <button class="btn btn-ghost" style="font-size:13px" onclick={cancelRelayUrlEdit}>Cancel</button>
+              <button class="btn btn-primary" style="font-size:13px" onclick={saveRelayUrl}>Save</button>
+            </div>
+          {/if}
         </div>
-      </div>
-    {/if}
+      {/if}
+    </div>
   </div>
   {/if}
 
@@ -867,73 +870,48 @@
     onkeydown={e => { if (e.key === 'Escape' && !pairDelegateBusy) closePairDelegate() }}>
     <div class="modal modal-install" role="dialog" aria-modal="true" tabindex="-1" onclick={e => e.stopPropagation()} onkeydown={e => e.stopPropagation()}>
       <div class="vs-modal-header">
-        <div class="modal-title">Pair cross-profile autofill</div>
+        <div class="modal-title">Pair everyday browser</div>
         <button class="vs-modal-x" onclick={() => { if (!pairDelegateBusy) closePairDelegate() }} aria-label="Cancel">
           <Icon name="x" size={18}/>
         </button>
       </div>
+      <p class="muted" style="font-size:14px;margin:0 0 14px;line-height:1.4">
+        Paste the pairing token from your everyday browser.
+      </p>
       <label class="vault-field" style="margin-bottom:10px">
-        <span class="vault-label muted">Pairing token</span>
         <textarea
           class="input"
           rows={5}
           bind:value={pairDelegateToken}
-          placeholder="Paste ppair1_… token from the autofill profile"
+          placeholder="ppair1_..."
           oninput={() => { pairDelegatePreview = null; pairDelegateError = '' }}
           use:focusOnMount
         ></textarea>
       </label>
-      <div style="display:flex;gap:8px;margin-bottom:12px">
-        <button class="btn btn-ghost" disabled={!pairDelegateToken.trim() || pairDelegateBusy} onclick={previewPairingToken}>Check token</button>
-      </div>
+      {#if !pairDelegatePreview}
+        <button class="vs-close-btn vs-primary-modal-btn" disabled={!pairDelegateToken.trim() || pairDelegateBusy} onclick={previewPairingToken}>Check token</button>
+      {/if}
       {#if pairDelegatePreview}
-        <div class="vs-install-warning" style="align-items:flex-start">
+        <div class="vs-install-warning vs-code-confirm">
           <Icon name="check" size={22}/>
           <span>
-            Pairing code <strong>{pairDelegatePreview.displayCode}</strong>{pairDelegatePreview.relayUrl ? ` · Relay ${pairDelegatePreview.relayUrl}` : ''}
+            Confirm this matches the code shown in your everyday browser:
+            <strong class="vs-code-chip">{pairDelegatePreview.displayCode}</strong>
           </span>
         </div>
-        <div class="vs-install-grid" style="margin-top:10px">
-          <div class="vs-install-col vs-install-col-drag">
-            <span class="vs-install-col-label">FILLING PROFILE</span>
-            <a
-              class="vs-bookmarklet-chip"
-              href={pairDelegateUrl || '#'}
-              draggable={pairDelegateUrl ? 'true' : 'false'}
-              onclick={e => e.preventDefault()}
-              title="Drag to the filling profile bookmarks bar"
-              aria-label="Paired Portpass autofill bookmarklet"
-            >
-              <img src="{import.meta.env.BASE_URL}icon.svg" width="16" height="16" alt="" aria-hidden="true" draggable="false">
-              {pairDelegateName || pairDelegatePreview.name || 'Paired autofill'}
-            </a>
-            <span class="vs-install-col-hint">Drag or copy this bookmarklet into the filling profile</span>
-          </div>
-          <div class="vs-install-col vs-install-col-copy">
-            <span class="vs-install-col-label">BAR HIDDEN</span>
-            <button class="vs-copy-link-btn" class:copied={pairBookmarkletCopied} disabled={!pairDelegateUrl} onclick={copyPairBookmarklet}>
-              <Icon name={pairBookmarkletCopied ? 'check' : 'copy'} size={15}/>
-              {pairBookmarkletCopied ? 'Copied!' : 'Copy link'}
-            </button>
-            <span class="vs-install-col-hint">Paste as the bookmark URL in the filling profile</span>
-          </div>
+        <div class="vs-relay-auto">
+          <Icon name="check" size={16}/>
+          <span>Relay will be enabled automatically</span>
         </div>
-        <label class="vault-field" style="margin:10px 0 4px">
-          <span class="vault-label muted">Name</span>
-          <input
-            class="input"
-            bind:value={pairDelegateName}
-            placeholder="e.g. Firefox — daily profile"
-            onkeydown={e => { if (e.key === 'Enter') commitPairDelegate() }}
-          />
-        </label>
       {/if}
       {#if pairDelegateError}<div class="unlock-error" style="font-size:13px">{pairDelegateError}</div>{/if}
+      {#if pairDelegatePreview}
       <div style="margin-top:12px">
         <button class="vs-close-btn" disabled={pairDelegateBusy || (!pairDelegatePreview && !pairDelegateToken.trim())} onclick={commitPairDelegate}>
           {pairDelegateBusy ? 'Pairing…' : 'Pair profile'}
         </button>
       </div>
+      {/if}
     </div>
   </div>
 {/if}
@@ -1409,7 +1387,6 @@
 
   .delegate-advanced-toggle {
     display: block;
-    margin-top: 14px;
     background: none;
     border: none;
     cursor: pointer;
@@ -1428,16 +1405,77 @@
     gap: 10px;
   }
 
-  .vs-cross-profile-steps {
-    margin: 0 0 2px;
-    padding-left: 20px;
-    color: var(--text-muted);
-    font-size: 13px;
-    line-height: 1.45;
+  .vs-cross-profile-card {
+    margin-top: 18px;
+    padding: 16px;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: var(--r-card);
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+  }
+
+  .vs-cross-profile-title {
+    color: var(--text);
+    font-size: 18px;
+    font-weight: 700;
+    text-align: left;
+  }
+
+  .vs-cross-profile-intro {
+    margin: 0;
+    font-size: 14px;
+    line-height: 1.5;
+  }
+  .vs-cross-profile-intro strong { color: var(--text); }
+
+  .vs-location-note {
+    display: grid;
+    grid-template-columns: 3px 1fr;
+    gap: 12px;
+    font-size: 14px;
+    line-height: 1.5;
+  }
+
+  .vs-location-bar {
+    width: 3px;
+    background: var(--border-strong);
+    border-radius: 999px;
+  }
+  .vs-location-note.active .vs-location-bar { background: var(--accent); }
+
+  .vs-location-title {
+    color: var(--accent);
+    font-size: 12px;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    margin-bottom: 4px;
+  }
+
+  .vs-primary-action {
+    align-self: flex-start;
+    min-height: 42px;
+    padding: 0 22px;
+    border: none;
+    border-radius: 9px;
+    background: var(--accent);
+    color: var(--accent-on);
+    font-size: 15px;
+    font-weight: 700;
+    cursor: pointer;
+    font-family: inherit;
   }
+  .vs-primary-action:hover { background: var(--accent-strong); }
 
-  .vs-cross-profile-steps li {
-    margin: 0 0 6px;
+  .vs-nested-advanced-toggle {
+    align-self: flex-start;
+    font-size: 14px;
+  }
+
+  .vs-cross-profile-status {
+    font-size: 14px;
+    color: var(--text);
   }
 
   .switchboard-url-actions {
@@ -1512,6 +1550,33 @@
   }
   .vs-install-warning :global(svg) { flex-shrink: 0; margin-top: 1px; }
 
+  .vs-code-confirm {
+    margin-top: 4px;
+    margin-bottom: 14px;
+  }
+
+  .vs-code-chip {
+    display: table;
+    margin-top: 10px;
+    padding: 8px 14px;
+    border: 1.5px solid var(--accent);
+    border-radius: 8px;
+    color: var(--accent);
+    font-family: ui-monospace, monospace;
+    font-size: 18px;
+    letter-spacing: 0.04em;
+  }
+
+  .vs-relay-auto {
+    display: flex;
+    align-items: center;
+    gap: 9px;
+    color: var(--text-muted);
+    font-size: 14px;
+    margin-top: 12px;
+  }
+  .vs-relay-auto :global(svg) { color: var(--success); }
+
   .vs-install-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
@@ -1574,10 +1639,10 @@
     align-items: center;
     gap: 7px;
     padding: 9px 18px;
-    border: 1.5px solid var(--amber);
+    border: 1.5px solid var(--accent);
     border-radius: 8px;
     background: transparent;
-    color: var(--amber);
+    color: var(--accent);
     font-size: 14px;
     font-weight: 600;
     cursor: pointer;
@@ -1629,4 +1694,14 @@
     font-family: inherit;
   }
   .vs-close-btn:hover { background: var(--surface); }
+  .vs-primary-modal-btn {
+    background: var(--accent);
+    border-color: var(--accent);
+    color: var(--accent-on);
+  }
+  .vs-primary-modal-btn:hover:not(:disabled) {
+    background: var(--accent-strong);
+    border-color: var(--accent-strong);
+    color: var(--accent-on);
+  }
 </style>
diff --git a/pwa/tests/bookmarklet.spec.ts b/pwa/tests/bookmarklet.spec.ts
index 618921b..e20ea20 100644
--- a/pwa/tests/bookmarklet.spec.ts
+++ b/pwa/tests/bookmarklet.spec.ts
@@ -158,8 +158,14 @@ test.describe('Bookmarklet — autofill popup phases', () => {
     const { portpass } = await setupAutofillTest(context)
     const pairing = await context.newPage()
     await pairing.goto(PORTPASS_URL + 'autofill.html?pair=1')
-    await pairing.getByPlaceholder('Name, e.g. Firefox — daily profile').fill('Firefox daily')
-    await pairing.getByRole('button', { name: 'Create pairing token' }).click()
+    await pairing.getByPlaceholder('Portpass Autofill').fill('Portpass Autofill')
+    await expect(pairing.getByText(/^[A-Z2-7]{4}-[A-Z2-7]{4}$/)).toBeVisible({ timeout: 15000 })
+    const bookmarkletUrl = await pairing.locator('a[href^="javascript:"]').getAttribute('href') ?? ''
+    const decoded = decodeURIComponent(bookmarkletUrl)
+    expect(decoded).toContain('autofill.html')
+    expect(decoded).toMatch(/afp1_[a-z2-7]{26}/)
+    expect(decoded).not.toContain('privKey')
+    await pairing.getByRole('button', { name: 'Copy token' }).click()
     const tokenBox = pairing.locator('textarea').first()
     await expect.poll(() => tokenBox.inputValue(), { timeout: 15000 }).toMatch(/^ppair1_/)
     const token = await tokenBox.inputValue()
@@ -167,27 +173,22 @@ test.describe('Bookmarklet — autofill popup phases', () => {
 
     await portpass.locator('.vault-pill').click()
     await portpass.getByRole('button', { name: /Cross-profile autofill/ }).click()
-    await expect(portpass.getByText('Starting from this clean Portpass profile:')).toBeVisible()
-    await portpass.getByRole('button', { name: '+ Pair filling profile' }).click()
-    await portpass.getByPlaceholder('Paste ppair1_… token from the autofill profile').fill(token)
+    await expect(portpass.getByText('IN YOUR EVERYDAY BROWSER')).toBeVisible()
+    await portpass.getByRole('button', { name: '+ Pair everyday profile' }).click()
+    await portpass.getByPlaceholder('ppair1_...').fill(token)
     await portpass.getByRole('button', { name: 'Check token' }).click()
-    await expect(portpass.locator('.vs-install-warning')).toContainText('Pairing code')
-    const bookmarkletUrl = await portpass.locator('.vs-bookmarklet-chip').last().getAttribute('href') ?? ''
-    const decoded = decodeURIComponent(bookmarkletUrl)
-    expect(decoded).toContain('autofill.html')
-    expect(decoded).toMatch(/afp1_[a-z2-7]{26}/)
-    expect(decoded).not.toContain('privKey')
+    await expect(portpass.locator('.vs-install-warning')).toContainText('Confirm this matches')
     await portpass.getByRole('button', { name: 'Pair profile' }).click()
-    await expect(portpass.locator('.delegate-row', { hasText: 'Firefox daily' })).toBeVisible()
-    await expect(portpass.locator('.delegate-row', { hasText: 'Firefox daily' }).locator('.delegate-meta')).toContainText('0 pages filled (cross profile)')
+    await expect(portpass.locator('.delegate-row', { hasText: 'Everyday profile' })).toBeVisible()
+    await expect(portpass.locator('.delegate-row', { hasText: 'Everyday profile' }).locator('.delegate-meta')).toContainText('0 pages filled (cross profile)')
   })
 
   test('wrong autofill pairing token is rejected', async ({ context }) => {
     const { portpass } = await setupAutofillTest(context)
     await portpass.locator('.vault-pill').click()
     await portpass.getByRole('button', { name: /Cross-profile autofill/ }).click()
-    await portpass.getByRole('button', { name: '+ Pair filling profile' }).click()
-    await portpass.getByPlaceholder('Paste ppair1_… token from the autofill profile').fill('ppair1_not-a-token')
+    await portpass.getByRole('button', { name: '+ Pair everyday profile' }).click()
+    await portpass.getByPlaceholder('ppair1_...').fill('ppair1_not-a-token')
     await portpass.getByRole('button', { name: 'Check token' }).click()
     await expect(portpass.locator('.unlock-error')).toContainText('Pairing token')
   })
diff --git a/pwa/tests/service_worker.spec.ts b/pwa/tests/service_worker.spec.ts
index 2c3e767..d512990 100644
--- a/pwa/tests/service_worker.spec.ts
+++ b/pwa/tests/service_worker.spec.ts
@@ -10,8 +10,9 @@ test.describe('PWA service worker routing', () => {
   test('autofill pairing page is served as its own page', async ({ page }) => {
     await page.goto('/portpass/autofill.html?pair=1')
 
-    await expect(page.getByText('Pair this autofill profile')).toBeVisible()
-    await expect(page.getByRole('button', { name: 'Create pairing token' })).toBeVisible()
+    await expect(page.getByText('Pair this everyday browser')).toBeVisible()
+    await expect(page.getByText('Install the bookmarklet here')).toBeVisible()
+    await expect(page.getByRole('button', { name: 'Copy token' })).toBeVisible()
     await expect(page.getByText('Vault is locked')).not.toBeVisible()
   })
 

From ecd5f6f8b3f9cdff7c93db5721a34d15cd54b176 Mon Sep 17 00:00:00 2001
From: Dan Brown <danbrown@gmail.com>
Date: Sat, 30 May 2026 01:21:02 +0200
Subject: [PATCH 20/20] Redesign vault autofill setup

---
 pwa/src/lib/VaultSheet.svelte | 194 +++++++++++++++++++++++-----------
 pwa/tests/bookmarklet.spec.ts |  10 +-
 pwa/tests/vault_sheet.spec.ts |  10 +-
 3 files changed, 142 insertions(+), 72 deletions(-)

diff --git a/pwa/src/lib/VaultSheet.svelte b/pwa/src/lib/VaultSheet.svelte
index 3fd61cf..3751135 100644
--- a/pwa/src/lib/VaultSheet.svelte
+++ b/pwa/src/lib/VaultSheet.svelte
@@ -281,14 +281,16 @@
     pairDelegateBusy = false
   }
 
-  async function previewPairingToken() {
+  async function refreshPairingPreview() {
     pairDelegateError = ''
     pairDelegatePreview = null
+    const token = pairDelegateToken.trim()
+    if (!token) return
     try {
-      const parsed = await parsePairingToken(pairDelegateToken)
+      const parsed = await parsePairingToken(token)
       pairDelegatePreview = parsed
     } catch (e) {
-      pairDelegateError = e.message || 'Pairing token is not valid'
+      pairDelegateError = token.startsWith('ppair1_') ? (e.message || 'Pairing token is not valid') : ''
     }
   }
 
@@ -319,7 +321,6 @@
   }
 
   // ── Advanced / switchboard ────────────────────────────────────────────────
-  let advancedOpen        = $state(false)
   let relayAdvancedOpen   = $state(false)
   let editSwitchboardUrl  = $state('')
   let switchboardUrlDirty = $state(false)
@@ -332,10 +333,6 @@
     delegates.reduce((t, d) => d.relayLastUsed ? Math.max(t, d.relayLastUsed) : t, 0) || null
   )
 
-  function toggleAdvanced() {
-    advancedOpen = !advancedOpen
-  }
-
   function toggleRelayAdvanced() {
     relayAdvancedOpen = !relayAdvancedOpen
     if (relayAdvancedOpen) {
@@ -516,7 +513,7 @@
   <div class="vault-section">
     <div class="vault-section-title">AUTOFILL</div>
     <p class="muted" style="font-size:14px;margin:0 0 14px;line-height:1.5">
-      Use same-profile autofill when Portpass and login pages are in this browser profile. Use cross-profile autofill when this is your clean Portpass profile and login pages are opened from another profile.
+      Fill logins straight from this vault. Set up either method — or both.
     </p>
     {#if delegates.length > 0}
       <div class="delegate-list">
@@ -534,44 +531,58 @@
         {/each}
       </div>
     {/if}
-    <button class="vault-unlock-more" onclick={openNewDelegate}>+ Same-profile bookmarklet</button>
+    <div class="vs-autofill-options">
+      <div class="vs-autofill-card">
+        <div class="vs-option-heading-row">
+          <h3 class="vs-option-title">Same-profile bookmarklet</h3>
+          <span class="vs-tradeoff-badge">SIMPLEST</span>
+        </div>
+        <p class="muted vs-option-copy">
+          Portpass and the sites you log in to share one browser profile. Quickest to set up; the bookmarklet is exposed to any extensions in this profile.
+        </p>
+        <button class="vs-primary-action vs-primary-action-wide" onclick={openNewDelegate}>+ Add same-profile bookmarklet</button>
+      </div>
 
-    <!-- Cross-profile autofill -->
-    <div class="vs-cross-profile-card">
-      <button class="delegate-advanced-toggle vs-cross-profile-title" onclick={toggleAdvanced}>
-        Cross-profile autofill {advancedOpen ? '▲' : '▼'}
-      </button>
-      {#if advancedOpen}
-        <p class="muted vs-cross-profile-intro">
-          Use this when Portpass runs in a separate, clean <strong>vault profile</strong> from the <strong>everyday profile</strong> where you log in.
+      <div class="vs-autofill-card">
+        <div class="vs-option-heading-row">
+          <h3 class="vs-option-title">Cross-profile pairing</h3>
+          <span class="vs-tradeoff-badge vs-tradeoff-badge-accent">MOST ISOLATED</span>
+          <span class="vs-card-status">
+            <span class="switchboard-status-dot" class:switchboard-ok={$crossProfileEnabled && $switchboardConnected} class:switchboard-error={!$crossProfileEnabled || !$switchboardConnected}></span>
+            {$crossProfileEnabled && $switchboardConnected ? 'Active' : 'Inactive'}
+          </span>
+        </div>
+        <p class="muted vs-option-copy">
+          Keep Portpass in this clean vault profile and fill from your everyday browser. Best protection from extensions; needs a one-time pairing.
         </p>
-        <div class="vs-location-note">
-          <span class="vs-location-bar"></span>
+        <div class="vs-step">
+          <span class="vs-step-num">1</span>
           <div>
-            <div class="vs-location-title">IN YOUR EVERYDAY BROWSER</div>
-            <div class="muted">Open <span class="mono">{pairingPageUrl}</span>, set the relay endpoint if needed, install the bookmarklet it shows you, then copy the pairing token.</div>
+            <div class="vs-step-title">In your everyday browser <span class="vs-profile-badge">OTHER PROFILE</span></div>
+            <div class="muted vs-step-copy">Open <span class="mono">{pairingPageUrl}</span>, name and install the bookmarklet, then copy the pairing token.</div>
           </div>
         </div>
-        <div class="vs-location-note active">
-          <span class="vs-location-bar"></span>
+        <div class="vs-step">
+          <span class="vs-step-num">2</span>
           <div>
-            <div class="vs-location-title">HERE, IN THE VAULT PROFILE</div>
-            <div class="muted">Paste the token to pair. The relay turns on automatically.</div>
+            <div class="vs-step-title">Here, in the vault profile <span class="vs-profile-badge vs-profile-badge-accent">THIS PROFILE</span></div>
+            <div class="muted vs-step-copy">Click <strong>Pair everyday profile</strong>, paste the token, and confirm the code matches. The relay turns on automatically.</div>
           </div>
         </div>
         <button class="vs-primary-action" onclick={openPairDelegate}>+ Pair everyday profile</button>
+        <div class="vs-card-divider"></div>
         <div class="switchboard-status-row vs-cross-profile-status">
           <span class="switchboard-status-dot" class:switchboard-ok={$crossProfileEnabled && $switchboardConnected} class:switchboard-error={!$crossProfileEnabled || !$switchboardConnected}></span>
           <span>
-            {$crossProfileEnabled && $switchboardConnected ? 'Cross-profile autofill ready' : (!$crossProfileEnabled ? 'Cross-profile relay disabled' : 'websocket relay not connected')}
+            {$crossProfileEnabled && $switchboardConnected ? 'Ready' : (!$crossProfileEnabled ? 'Relay disabled' : 'Relay not connected')}
             <span class="muted"> · {$crossProfileEnabled ? 'relay on' : 'relay off'} · {totalRelayCount} {totalRelayCount === 1 ? 'use' : 'uses'}{lastRelayUsed ? ` · Last ${fmtRelative(lastRelayUsed)}` : ''}</span>
           </span>
         </div>
         <button class="delegate-advanced-toggle vs-nested-advanced-toggle muted" onclick={toggleRelayAdvanced}>
           {relayAdvancedOpen ? '▼' : '▶'} Advanced
         </button>
-      {/if}
-      {#if advancedOpen && relayAdvancedOpen}
+      </div>
+      {#if relayAdvancedOpen}
         <div class="delegate-advanced-body">
           <div class="vault-row" style="margin-bottom:4px">
             <span class="vault-label muted" style="font-size:13px">Use local switchboard relay</span>
@@ -870,7 +881,7 @@
     onkeydown={e => { if (e.key === 'Escape' && !pairDelegateBusy) closePairDelegate() }}>
     <div class="modal modal-install" role="dialog" aria-modal="true" tabindex="-1" onclick={e => e.stopPropagation()} onkeydown={e => e.stopPropagation()}>
       <div class="vs-modal-header">
-        <div class="modal-title">Pair everyday browser</div>
+        <div class="modal-title">Pair everyday profile</div>
         <button class="vs-modal-x" onclick={() => { if (!pairDelegateBusy) closePairDelegate() }} aria-label="Cancel">
           <Icon name="x" size={18}/>
         </button>
@@ -882,15 +893,11 @@
         <textarea
           class="input"
           rows={5}
-          bind:value={pairDelegateToken}
           placeholder="ppair1_..."
-          oninput={() => { pairDelegatePreview = null; pairDelegateError = '' }}
+          oninput={e => { pairDelegateToken = e.target.value; refreshPairingPreview() }}
           use:focusOnMount
         ></textarea>
       </label>
-      {#if !pairDelegatePreview}
-        <button class="vs-close-btn vs-primary-modal-btn" disabled={!pairDelegateToken.trim() || pairDelegateBusy} onclick={previewPairingToken}>Check token</button>
-      {/if}
       {#if pairDelegatePreview}
         <div class="vs-install-warning vs-code-confirm">
           <Icon name="check" size={22}/>
@@ -905,13 +912,11 @@
         </div>
       {/if}
       {#if pairDelegateError}<div class="unlock-error" style="font-size:13px">{pairDelegateError}</div>{/if}
-      {#if pairDelegatePreview}
       <div style="margin-top:12px">
-        <button class="vs-close-btn" disabled={pairDelegateBusy || (!pairDelegatePreview && !pairDelegateToken.trim())} onclick={commitPairDelegate}>
-          {pairDelegateBusy ? 'Pairing…' : 'Pair profile'}
+        <button class="vs-close-btn vs-primary-modal-btn" disabled={pairDelegateBusy || !pairDelegateToken.trim()} onclick={commitPairDelegate}>
+          {pairDelegateBusy ? 'Pairing…' : 'Pair everyday profile'}
         </button>
       </div>
-      {/if}
     </div>
   </div>
 {/if}
@@ -1405,8 +1410,13 @@
     gap: 10px;
   }
 
-  .vs-cross-profile-card {
-    margin-top: 18px;
+  .vs-autofill-options {
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+  }
+
+  .vs-autofill-card {
     padding: 16px;
     background: var(--surface);
     border: 1px solid var(--border);
@@ -1416,41 +1426,101 @@
     gap: 14px;
   }
 
-  .vs-cross-profile-title {
+  .vs-option-heading-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-wrap: wrap;
+  }
+
+  .vs-option-title {
     color: var(--text);
     font-size: 18px;
     font-weight: 700;
-    text-align: left;
+    line-height: 1.2;
+    margin: 0;
+  }
+
+  .vs-tradeoff-badge,
+  .vs-profile-badge {
+    display: inline-flex;
+    align-items: center;
+    min-height: 22px;
+    padding: 0 9px;
+    border: 1px solid var(--border-strong);
+    border-radius: 7px;
+    color: var(--text-soft);
+    background: var(--surface-2);
+    font-size: 11px;
+    font-weight: 800;
+    letter-spacing: 0.08em;
+    line-height: 1;
   }
 
-  .vs-cross-profile-intro {
+  .vs-tradeoff-badge-accent,
+  .vs-profile-badge-accent {
+    border-color: var(--accent);
+    color: var(--accent);
+    background: var(--orange-bg-strong);
+  }
+
+  .vs-card-status {
+    display: inline-flex;
+    align-items: center;
+    gap: 7px;
+    margin-left: auto;
+    color: var(--text-muted);
+    font-size: 14px;
+  }
+
+  .vs-option-copy {
     margin: 0;
     font-size: 14px;
     line-height: 1.5;
   }
-  .vs-cross-profile-intro strong { color: var(--text); }
 
-  .vs-location-note {
+  .vs-step {
     display: grid;
-    grid-template-columns: 3px 1fr;
+    grid-template-columns: 30px 1fr;
     gap: 12px;
-    font-size: 14px;
-    line-height: 1.5;
+    align-items: flex-start;
   }
 
-  .vs-location-bar {
-    width: 3px;
-    background: var(--border-strong);
-    border-radius: 999px;
+  .vs-step-num {
+    width: 30px;
+    height: 30px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: 2px solid var(--accent);
+    border-radius: 50%;
+    color: var(--accent);
+    font-weight: 800;
+    font-size: 15px;
+    line-height: 1;
   }
-  .vs-location-note.active .vs-location-bar { background: var(--accent); }
 
-  .vs-location-title {
-    color: var(--accent);
-    font-size: 12px;
-    font-weight: 700;
-    letter-spacing: 0.08em;
-    margin-bottom: 4px;
+  .vs-step-title {
+    color: var(--text);
+    font-size: 15px;
+    font-weight: 800;
+    line-height: 1.35;
+    display: flex;
+    align-items: center;
+    gap: 9px;
+    flex-wrap: wrap;
+  }
+
+  .vs-step-copy {
+    font-size: 14px;
+    line-height: 1.5;
+    margin-top: 4px;
+  }
+
+  .vs-card-divider {
+    height: 1px;
+    background: var(--border);
+    margin-top: 4px;
   }
 
   .vs-primary-action {
@@ -1467,6 +1537,10 @@
     font-family: inherit;
   }
   .vs-primary-action:hover { background: var(--accent-strong); }
+  .vs-primary-action-wide {
+    width: 100%;
+    align-self: stretch;
+  }
 
   .vs-nested-advanced-toggle {
     align-self: flex-start;
diff --git a/pwa/tests/bookmarklet.spec.ts b/pwa/tests/bookmarklet.spec.ts
index e20ea20..b1b63b7 100644
--- a/pwa/tests/bookmarklet.spec.ts
+++ b/pwa/tests/bookmarklet.spec.ts
@@ -21,7 +21,7 @@ async function createDelegateBookmarklet(portpass: Page): Promise<string> {
   await portpass.locator('.vault-pill').click()
   await expect(portpass.locator('.vault-settings-body')).toBeVisible()
 
-  await portpass.getByRole('button', { name: '+ Same-profile bookmarklet' }).click()
+  await portpass.getByRole('button', { name: '+ Add same-profile bookmarklet' }).click()
   await portpass.getByPlaceholder('e.g. Chrome — work profile').fill('test')
   await portpass.locator('.vs-bookmarklet-chip:not(.chip-inactive)').waitFor({ timeout: 5000 })
   const url = await portpass.locator('.vs-bookmarklet-chip').getAttribute('href') ?? ''
@@ -172,13 +172,11 @@ test.describe('Bookmarklet — autofill popup phases', () => {
     expect(token).toMatch(/^ppair1_/)
 
     await portpass.locator('.vault-pill').click()
-    await portpass.getByRole('button', { name: /Cross-profile autofill/ }).click()
-    await expect(portpass.getByText('IN YOUR EVERYDAY BROWSER')).toBeVisible()
+    await expect(portpass.getByText('In your everyday browser')).toBeVisible()
     await portpass.getByRole('button', { name: '+ Pair everyday profile' }).click()
     await portpass.getByPlaceholder('ppair1_...').fill(token)
-    await portpass.getByRole('button', { name: 'Check token' }).click()
     await expect(portpass.locator('.vs-install-warning')).toContainText('Confirm this matches')
-    await portpass.getByRole('button', { name: 'Pair profile' }).click()
+    await portpass.getByRole('button', { name: 'Pair everyday profile', exact: true }).click()
     await expect(portpass.locator('.delegate-row', { hasText: 'Everyday profile' })).toBeVisible()
     await expect(portpass.locator('.delegate-row', { hasText: 'Everyday profile' }).locator('.delegate-meta')).toContainText('0 pages filled (cross profile)')
   })
@@ -186,10 +184,8 @@ test.describe('Bookmarklet — autofill popup phases', () => {
   test('wrong autofill pairing token is rejected', async ({ context }) => {
     const { portpass } = await setupAutofillTest(context)
     await portpass.locator('.vault-pill').click()
-    await portpass.getByRole('button', { name: /Cross-profile autofill/ }).click()
     await portpass.getByRole('button', { name: '+ Pair everyday profile' }).click()
     await portpass.getByPlaceholder('ppair1_...').fill('ppair1_not-a-token')
-    await portpass.getByRole('button', { name: 'Check token' }).click()
     await expect(portpass.locator('.unlock-error')).toContainText('Pairing token')
   })
 
diff --git a/pwa/tests/vault_sheet.spec.ts b/pwa/tests/vault_sheet.spec.ts
index 5c1d792..ae9dbe9 100644
--- a/pwa/tests/vault_sheet.spec.ts
+++ b/pwa/tests/vault_sheet.spec.ts
@@ -115,7 +115,7 @@ test.describe('VaultSheet autofill installation UI', () => {
 
   async function createBookmarklet(page) {
     await page.locator('.vault-pill').click()
-    await page.getByRole('button', { name: '+ Same-profile bookmarklet' }).click()
+    await page.getByRole('button', { name: '+ Add same-profile bookmarklet' }).click()
     // wait for key generation (chip activates once keys are ready + name is entered)
     await page.getByPlaceholder('e.g. Chrome — work profile').fill('Test')
     await expect(page.locator('.vs-bookmarklet-chip:not(.chip-inactive)')).toBeVisible({ timeout: 5000 })
@@ -164,7 +164,7 @@ test.describe('VaultSheet autofill installation UI', () => {
   test('modal shows name input, warning banner, and two-column install layout', async ({ page }) => {
     await openVault(page)
     await page.locator('.vault-pill').click()
-    await page.getByRole('button', { name: '+ Same-profile bookmarklet' }).click()
+    await page.getByRole('button', { name: '+ Add same-profile bookmarklet' }).click()
     await expect(page.locator('.modal-title', { hasText: 'New same-profile bookmarklet' })).toBeVisible()
     await expect(page.getByPlaceholder('e.g. Chrome — work profile')).toBeVisible()
     await expect(page.locator('.vs-install-warning')).toBeVisible()
@@ -175,7 +175,7 @@ test.describe('VaultSheet autofill installation UI', () => {
   test('chip is inactive and copy button disabled before name is entered', async ({ page }) => {
     await openVault(page)
     await page.locator('.vault-pill').click()
-    await page.getByRole('button', { name: '+ Same-profile bookmarklet' }).click()
+    await page.getByRole('button', { name: '+ Add same-profile bookmarklet' }).click()
     await expect(page.locator('.vs-bookmarklet-chip.chip-inactive')).toBeVisible({ timeout: 5000 })
     await expect(page.locator('.vs-copy-link-btn')).toBeDisabled()
     await page.getByPlaceholder('e.g. Chrome — work profile').fill('test')
@@ -186,7 +186,7 @@ test.describe('VaultSheet autofill installation UI', () => {
   test('"Save and Close" is disabled until a name is entered', async ({ page }) => {
     await openVault(page)
     await page.locator('.vault-pill').click()
-    await page.getByRole('button', { name: '+ Same-profile bookmarklet' }).click()
+    await page.getByRole('button', { name: '+ Add same-profile bookmarklet' }).click()
     await expect(page.locator('.vs-close-btn')).toBeDisabled()
     await page.getByPlaceholder('e.g. Chrome — work profile').fill('My bookmark')
     await expect(page.locator('.vs-close-btn')).toBeEnabled({ timeout: 5000 })
@@ -195,7 +195,7 @@ test.describe('VaultSheet autofill installation UI', () => {
   test('X button cancels without saving when chip unused', async ({ page }) => {
     await openVault(page)
     await page.locator('.vault-pill').click()
-    await page.getByRole('button', { name: '+ Same-profile bookmarklet' }).click()
+    await page.getByRole('button', { name: '+ Add same-profile bookmarklet' }).click()
     await page.locator('.vs-modal-x').click()
     await expect(page.locator('.modal-title', { hasText: 'New same-profile bookmarklet' })).not.toBeVisible()
     await expect(page.locator('.delegate-name')).not.toBeVisible()