04/19 Update extension: password generator in-place

extension/background.js

@@ -12,37 +12,49 @@
 
 async function updateBadgeForTab(tabId, url) {
   try {
-    const { vault_items } = await chrome.storage.session.get('vault_items');
+    const { vault_items } = await chrome.storage.session.get("vault_items");
     if (!vault_items?.length) {
-      chrome.action.setBadgeText({ text: '', tabId });
+      chrome.action.setBadgeText({ text: "", tabId });
       return;
     }
 
     let hostname;
-    try { hostname = new URL(url).hostname.replace(/^www\./, ''); }
+    try {
-    catch { chrome.action.setBadgeText({ text: '', tabId }); return; }
+      hostname = new URL(url).hostname.replace(/^www\./, "");
+    } catch {
+      chrome.action.setBadgeText({ text: "", tabId });
+      return;
+    }
 
-    const matches = vault_items.filter(item => {
+    const matches = vault_items.filter((item) => {
-      if (item.item_type !== 'password' || !item.plain?.url) return false;
+      if (item.item_type !== "password" || !item.plain?.url) return false;
       try {
-        const h = new URL(item.plain.url).hostname.replace(/^www\./, '');
+        const h = new URL(item.plain.url).hostname.replace(/^www\./, "");
-        return h === hostname || h.endsWith(`.${hostname}`) || hostname.endsWith(`.${h}`);
+        return (
-      } catch { return false; }
+          h === hostname ||
+          h.endsWith(`.${hostname}`) ||
+          hostname.endsWith(`.${h}`)
+        );
+      } catch {
+        return false;
+      }
     });
 
     if (matches.length > 0) {
       chrome.action.setBadgeText({ text: String(matches.length), tabId });
-      chrome.action.setBadgeBackgroundColor({ color: '#1a73e8', tabId });
+      chrome.action.setBadgeBackgroundColor({ color: "#1a73e8", tabId });
     } else {
-      chrome.action.setBadgeText({ text: '', tabId });
+      chrome.action.setBadgeText({ text: "", tabId });
     }
-  } catch { /* tab may have closed */ }
+  } catch {
+    /* tab may have closed */
+  }
 }
 
 async function refreshAllBadges() {
   const tabs = await chrome.tabs.query({});
   for (const tab of tabs) {
-    if (tab.url?.startsWith('http')) updateBadgeForTab(tab.id, tab.url);
+    if (tab.url?.startsWith("http")) updateBadgeForTab(tab.id, tab.url);
   }
 }
 
@@ -51,12 +63,12 @@ async function refreshAllBadges() {
 chrome.tabs.onActivated.addListener(async ({ tabId }) => {
   try {
     const tab = await chrome.tabs.get(tabId);
-    if (tab.url?.startsWith('http')) updateBadgeForTab(tabId, tab.url);
+    if (tab.url?.startsWith("http")) updateBadgeForTab(tabId, tab.url);
   } catch {}
 });
 
 chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
-  if (changeInfo.status === 'complete' && tab.url?.startsWith('http')) {
+  if (changeInfo.status === "complete" && tab.url?.startsWith("http")) {
     updateBadgeForTab(tabId, tab.url);
   }
 });
@@ -64,33 +76,32 @@ chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
 // ── Message handler ──────────────────────────────────────────────────────────
 
 chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
-
   // No-op ping from popup — keeps the service worker alive while the browser
   // is open so chrome.storage.session is not wiped between popup openings.
-  if (msg.type === 'KEEPALIVE') {
+  if (msg.type === "KEEPALIVE") {
     sendResponse({ ok: true });
     return false;
   }
 
   // Popup signals vault cache was refreshed → re-check all tab badges.
-  if (msg.type === 'VAULT_UPDATED') {
+  if (msg.type === "VAULT_UPDATED") {
     refreshAllBadges();
     sendResponse({ ok: true });
     return false;
   }
 
   // Content script detected credentials on form submit → store for save-prompt.
-  if (msg.type === 'SAVE_CREDENTIALS') {
+  if (msg.type === "SAVE_CREDENTIALS") {
     chrome.storage.session.set({ pending_save: msg.data });
     sendResponse({ ok: true });
     return false;
   }
 
   // Bridge: web app logged in → store tokens in extension storage.
-  if (msg.type === 'WEB_SESSION_SYNC') {
+  if (msg.type === "WEB_SESSION_SYNC") {
     chrome.storage.session.set({
       access_token: msg.access_token,
-      enc_key_salt: msg.enc_key_salt || '',
+      enc_key_salt: msg.enc_key_salt || "",
     });
     // Also persist enc_key_salt locally so the unlock-only view survives browser restarts
     chrome.storage.local.set({
@@ -102,25 +113,35 @@ chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
   }
 
   // Bridge: web app logged out → clear extension session.
-  if (msg.type === 'WEB_SESSION_CLEAR') {
+  if (msg.type === "WEB_SESSION_CLEAR") {
-    chrome.storage.session.remove(['access_token', 'vault_key_jwk', 'vault_items', 'enc_key_salt']);
+    chrome.storage.session.remove([
-    chrome.storage.local.remove('refresh_token');
+      "access_token",
+      "vault_key_jwk",
+      "vault_items",
+      "enc_key_salt",
+    ]);
+    chrome.storage.local.remove("refresh_token");
     sendResponse({ ok: true });
     return false;
   }
 
   // Popup logged in via extension → inject session into open vault tabs.
-  if (msg.type === 'EXT_SESSION_SYNC') {
+  if (msg.type === "EXT_SESSION_SYNC") {
-    chrome.tabs.query({ url: 'https://pwkeeper.ngodanguyen.tech/*' }, tabs => {
+    chrome.tabs.query(
-      tabs.forEach(tab => {
+      { url: "https://pwkeeper.ngodanguyen.tech/*" },
-        chrome.tabs.sendMessage(tab.id, {
+      (tabs) => {
-          type: 'INJECT_SESSION',
+        tabs.forEach((tab) => {
-          access_token: msg.access_token,
+          chrome.tabs
-          refresh_token: msg.refresh_token,
+            .sendMessage(tab.id, {
-          enc_key_salt: msg.enc_key_salt,
+              type: "INJECT_SESSION",
-        }).catch(() => {});
+              access_token: msg.access_token,
-      });
+              refresh_token: msg.refresh_token,
-    });
+              enc_key_salt: msg.enc_key_salt,
+            })
+            .catch(() => {});
+        });
+      },
+    );
     sendResponse({ ok: true });
     return false;
   }

extension/content/content.js

@@ -8,33 +8,37 @@
  * 4. Watches form submissions → shows save-credentials banner.
  */
 (() => {
-  'use strict';
+  "use strict";
 
-  const PK_ATTR      = 'data-pk-decorated';
+  const PK_ATTR = "data-pk-decorated";
-  const PK_BTN_CLASS = '__pk_autofill_btn__';
+  const PK_BTN_CLASS = "__pk_autofill_btn__";
 
-  let _bannerEl        = null;
+  let _bannerEl = null;
   let _hasNotifiedForm = false;
-  let _formObserver    = null;
+  let _formObserver = null;
 
   // ── Helpers ──────────────────────────────────────────────────────────────────
 
   function escHtml(str) {
-    return String(str ?? '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
+    return String(str ?? "")
+      .replace(/&/g, "&amp;")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;");
   }
 
   function visiblePasswordFields() {
-    return Array.from(document.querySelectorAll('input[type="password"]'))
+    return Array.from(
-      .filter(el => el.offsetParent !== null && !el.disabled);
+      document.querySelectorAll('input[type="password"]'),
+    ).filter((el) => el.offsetParent !== null && !el.disabled);
   }
 
   function findUsernameField(pwField) {
-    const all = Array.from(document.querySelectorAll('input'));
+    const all = Array.from(document.querySelectorAll("input"));
     const idx = all.indexOf(pwField);
     for (let i = idx - 1; i >= 0; i--) {
       const el = all[i];
       if (!el.offsetParent || el.disabled) continue;
-      if (['email', 'text', 'tel'].includes(el.type)) return el;
+      if (["email", "text", "tel"].includes(el.type)) return el;
     }
     return null;
   }
@@ -42,24 +46,29 @@
   // ── Framework-compatible fill ─────────────────────────────────────────────────
 
   function fillField(el, value) {
-    const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set;
+    const setter = Object.getOwnPropertyDescriptor(
+      HTMLInputElement.prototype,
+      "value",
+    )?.set;
     if (setter) setter.call(el, value);
     else el.value = value;
-    el.dispatchEvent(new Event('input',  { bubbles: true }));
+    el.dispatchEvent(new Event("input", { bubbles: true }));
-    el.dispatchEvent(new Event('change', { bubbles: true }));
+    el.dispatchEvent(new Event("change", { bubbles: true }));
   }
 
   function doAutofill(username, password) {
     const pwFields = visiblePasswordFields();
     if (!pwFields.length) return;
-    const pwField       = pwFields[0];
+    const pwField = pwFields[0];
     const usernameField = findUsernameField(pwField);
     if (usernameField && username) fillField(usernameField, username);
     if (password) fillField(pwField, password);
 
-    [usernameField, pwField].filter(Boolean).forEach(el => {
+    [usernameField, pwField].filter(Boolean).forEach((el) => {
-      el.style.outline = '2px solid #1a73e8';
+      el.style.outline = "2px solid #1a73e8";
-      setTimeout(() => { el.style.outline = ''; }, 1500);
+      setTimeout(() => {
+        el.style.outline = "";
+      }, 1500);
     });
   }
 
@@ -70,39 +79,39 @@
    * password field. Clicking it opens a tiny dropdown listing matching items.
    */
   function injectAutofillButtons(matchingItems) {
-    visiblePasswordFields().forEach(pwField => {
+    visiblePasswordFields().forEach((pwField) => {
       if (pwField.getAttribute(PK_ATTR)) return; // already decorated
-      pwField.setAttribute(PK_ATTR, '1');
+      pwField.setAttribute(PK_ATTR, "1");
 
       // Wrap the field if it isn't already positioned
-      const wrap = document.createElement('div');
+      const wrap = document.createElement("div");
-      wrap.style.cssText = 'position:relative;display:inline-block;width:100%;';
+      wrap.style.cssText = "position:relative;display:inline-block;width:100%;";
       pwField.parentNode.insertBefore(wrap, pwField);
       wrap.appendChild(pwField);
 
       // Add right-side padding so text doesn't overlap the button
-      pwField.style.paddingRight = '32px';
+      pwField.style.paddingRight = "32px";
 
       // The icon button
-      const btn = document.createElement('button');
+      const btn = document.createElement("button");
-      btn.type = 'button';
+      btn.type = "button";
       btn.className = PK_BTN_CLASS;
-      btn.title = 'Autofill with PassKeeper';
+      btn.title = "Autofill with PassKeeper";
-      btn.setAttribute('aria-label', 'Autofill with PassKeeper');
+      btn.setAttribute("aria-label", "Autofill with PassKeeper");
       btn.style.cssText = [
-        'position:absolute',
+        "position:absolute",
-        'right:6px',
+        "right:6px",
-        'top:50%',
+        "top:50%",
-        'transform:translateY(-50%)',
+        "transform:translateY(-50%)",
-        'background:none',
+        "background:none",
-        'border:none',
+        "border:none",
-        'cursor:pointer',
+        "cursor:pointer",
-        'padding:3px',
+        "padding:3px",
-        'display:flex',
+        "display:flex",
-        'align-items:center',
+        "align-items:center",
-        'justify-content:center',
+        "justify-content:center",
-        'z-index:2147483646',
+        "z-index:2147483646",
-      ].join(';');
+      ].join(";");
 
       btn.innerHTML = `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
         <rect x="3" y="9" width="18" height="12" rx="2" stroke="#1a73e8" stroke-width="1.8"/>
@@ -112,7 +121,7 @@
 
       wrap.appendChild(btn);
 
-      btn.addEventListener('click', e => {
+      btn.addEventListener("click", (e) => {
         e.preventDefault();
         e.stopPropagation();
         toggleDropdown(btn, pwField, matchingItems);
@@ -123,62 +132,73 @@
   // Dropdown showing matching credentials
   function toggleDropdown(btn, pwField, items) {
     // Remove any existing dropdown
-    const existing = document.getElementById('__pk_dropdown__');
+    const existing = document.getElementById("__pk_dropdown__");
-    if (existing) { existing.remove(); return; }
+    if (existing) {
+      existing.remove();
+      return;
+    }
 
     const usernameField = findUsernameField(pwField);
 
-    const dropdown = document.createElement('div');
+    const dropdown = document.createElement("div");
-    dropdown.id = '__pk_dropdown__';
+    dropdown.id = "__pk_dropdown__";
     dropdown.style.cssText = [
-      'position:fixed',
+      "position:fixed",
-      'background:#fff',
+      "background:#fff",
-      'border:1px solid #e2e8f0',
+      "border:1px solid #e2e8f0",
-      'border-radius:10px',
+      "border-radius:10px",
-      'box-shadow:0 8px 30px rgba(0,0,0,0.15)',
+      "box-shadow:0 8px 30px rgba(0,0,0,0.15)",
-      'z-index:2147483647',
+      "z-index:2147483647",
-      'min-width:240px',
+      "min-width:240px",
-      'max-width:300px',
+      "max-width:300px",
       'font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif',
-      'font-size:13px',
+      "font-size:13px",
-      'overflow:hidden',
+      "overflow:hidden",
-    ].join(';');
+    ].join(";");
 
     // Position below the button
     const rect = btn.getBoundingClientRect();
-    dropdown.style.top  = (rect.bottom + 6) + 'px';
+    dropdown.style.top = rect.bottom + 6 + "px";
-    dropdown.style.left = Math.max(8, rect.right - 260) + 'px';
+    dropdown.style.left = Math.max(8, rect.right - 260) + "px";
 
     // Header
-    const header = document.createElement('div');
+    const header = document.createElement("div");
-    header.style.cssText = 'padding:9px 12px 8px;border-bottom:1px solid #f3f4f6;display:flex;align-items:center;gap:6px;';
+    header.style.cssText =
+      "padding:9px 12px 8px;border-bottom:1px solid #f3f4f6;display:flex;align-items:center;gap:6px;";
     header.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none"><rect x="3" y="9" width="18" height="12" rx="2" stroke="#1a73e8" stroke-width="2"/><path d="M8 9V6a4 4 0 018 0v3" stroke="#1a73e8" stroke-width="2" stroke-linecap="round"/></svg><span style="font-weight:600;color:#1a1a2e;font-size:12px;">PassKeeper</span>`;
     dropdown.appendChild(header);
 
     if (!items.length) {
-      const empty = document.createElement('div');
+      const empty = document.createElement("div");
-      empty.style.cssText = 'padding:14px 12px;color:#9ca3af;font-size:12px;text-align:center;';
+      empty.style.cssText =
-      empty.textContent = 'No matching credentials';
+        "padding:14px 12px;color:#9ca3af;font-size:12px;text-align:center;";
+      empty.textContent = "No matching credentials";
       dropdown.appendChild(empty);
     } else {
-      items.forEach(item => {
+      items.forEach((item) => {
-        const row = document.createElement('div');
+        const row = document.createElement("div");
-        row.style.cssText = 'display:flex;align-items:center;gap:9px;padding:9px 12px;cursor:pointer;transition:background 0.1s;';
+        row.style.cssText =
-        row.onmouseenter = () => { row.style.background = '#f9fafb'; };
+          "display:flex;align-items:center;gap:9px;padding:9px 12px;cursor:pointer;transition:background 0.1s;";
-        row.onmouseleave = () => { row.style.background = ''; };
+        row.onmouseenter = () => {
+          row.style.background = "#f9fafb";
+        };
+        row.onmouseleave = () => {
+          row.style.background = "";
+        };
 
-        const username = escHtml(item.plain?.username || '');
+        const username = escHtml(item.plain?.username || "");
-        const name     = escHtml(item.name);
+        const name = escHtml(item.name);
 
         row.innerHTML = `
           <div style="width:30px;height:30px;border-radius:7px;background:#1e2d5a;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;">🔑</div>
           <div style="flex:1;min-width:0;">
             <div style="font-weight:600;color:#111827;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">${name}</div>
-            ${username ? `<div style="font-size:11px;color:#6b7280;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">${username}</div>` : ''}
+            ${username ? `<div style="font-size:11px;color:#6b7280;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">${username}</div>` : ""}
           </div>`;
 
-        row.addEventListener('click', () => {
+        row.addEventListener("click", () => {
-          if (usernameField && item.plain?.username) fillField(usernameField, item.plain.username);
+          if (usernameField && item.plain?.username)
+            fillField(usernameField, item.plain.username);
           if (item.plain?.password) fillField(pwField, item.plain.password);
           dropdown.remove();
         });
@@ -190,13 +210,13 @@
     document.body.appendChild(dropdown);
 
     // Close on outside click
-    const close = e => {
+    const close = (e) => {
       if (!dropdown.contains(e.target) && e.target !== btn) {
         dropdown.remove();
-        document.removeEventListener('click', close, true);
+        document.removeEventListener("click", close, true);
       }
     };
-    setTimeout(() => document.addEventListener('click', close, true), 0);
+    setTimeout(() => document.addEventListener("click", close, true), 0);
   }
 
   // ── Form detection ────────────────────────────────────────────────────────────
@@ -205,23 +225,27 @@
     if (_hasNotifiedForm) return;
     if (!visiblePasswordFields().length) return;
     _hasNotifiedForm = true;
-    chrome.runtime.sendMessage({ type: 'FORMS_DETECTED' }).catch(() => {});
+    chrome.runtime.sendMessage({ type: "FORMS_DETECTED" }).catch(() => {});
   }
 
   async function decorateFields() {
     if (!visiblePasswordFields().length) return;
 
     // Get cached vault items from session storage
-    const { vault_items } = await chrome.storage.session.get('vault_items').catch(() => ({}));
+    const { vault_items } = await chrome.storage.session
+      .get("vault_items")
+      .catch(() => ({}));
     if (!vault_items?.length) return;
 
-    const host = location.hostname.replace(/^www\./, '');
+    const host = location.hostname.replace(/^www\./, "");
-    const matching = vault_items.filter(item => {
+    const matching = vault_items.filter((item) => {
-      if (item.item_type !== 'password' || !item.plain?.url) return false;
+      if (item.item_type !== "password" || !item.plain?.url) return false;
       try {
-        const h = new URL(item.plain.url).hostname.replace(/^www\./, '');
+        const h = new URL(item.plain.url).hostname.replace(/^www\./, "");
         return h === host || h.endsWith(`.${host}`) || host.endsWith(`.${h}`);
-      } catch { return false; }
+      } catch {
+        return false;
+      }
     });
 
     injectAutofillButtons(matching);
@@ -241,33 +265,36 @@
   async function classifyCredentials(username, password) {
     let vault_items;
     try {
-      ({ vault_items } = await chrome.storage.session.get('vault_items'));
+      ({ vault_items } = await chrome.storage.session.get("vault_items"));
     } catch {
       // If we can't read storage (e.g. extension context invalidated), show banner.
-      return 'new';
+      return "new";
     }
-    if (!vault_items?.length) return 'new';
+    if (!vault_items?.length) return "new";
 
-    const host = location.hostname.replace(/^www\./, '');
+    const host = location.hostname.replace(/^www\./, "");
 
-    const siteItems = vault_items.filter(item => {
+    const siteItems = vault_items.filter((item) => {
-      if (item.item_type !== 'password' || !item.plain?.url) return false;
+      if (item.item_type !== "password" || !item.plain?.url) return false;
       try {
-        const h = new URL(item.plain.url).hostname.replace(/^www\./, '');
+        const h = new URL(item.plain.url).hostname.replace(/^www\./, "");
         return h === host || h.endsWith(`.${host}`) || host.endsWith(`.${h}`);
-      } catch { return false; }
+      } catch {
+        return false;
+      }
     });
 
-    if (!siteItems.length) return 'new';
+    if (!siteItems.length) return "new";
 
     // Check for exact match (same username AND same password).
     const exactMatch = siteItems.some(
-      item => item.plain?.username === username && item.plain?.password === password
+      (item) =>
+        item.plain?.username === username && item.plain?.password === password,
     );
-    if (exactMatch) return 'same';
+    if (exactMatch) return "same";
 
     // Credentials differ → treat as updated.
-    return 'updated';
+    return "updated";
   }
 
   // ── Auto-save banner ──────────────────────────────────────────────────────────
@@ -283,30 +310,32 @@
   function showSaveBanner(username, password, credentialState) {
     if (_bannerEl) _bannerEl.remove();
 
-    const banner = document.createElement('div');
+    const banner = document.createElement("div");
-    banner.id = '__pk_save_banner__';
+    banner.id = "__pk_save_banner__";
     Object.assign(banner.style, {
-      position:   'fixed',
+      position: "fixed",
-      top:        '12px',
+      top: "12px",
-      right:      '12px',
+      right: "12px",
-      zIndex:     '2147483647',
+      zIndex: "2147483647",
-      background: '#ffffff',
+      background: "#ffffff",
-      border:     '1px solid #e2e8f0',
+      border: "1px solid #e2e8f0",
-      borderRadius: '10px',
+      borderRadius: "10px",
-      boxShadow:  '0 8px 30px rgba(0,0,0,0.15)',
+      boxShadow: "0 8px 30px rgba(0,0,0,0.15)",
-      padding:    '14px 16px 12px',
+      padding: "14px 16px 12px",
-      fontFamily: "-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif",
+      fontFamily:
-      fontSize:   '13px',
+        "-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif",
-      color:      '#1a1a2e',
+      fontSize: "13px",
-      maxWidth:   '300px',
+      color: "#1a1a2e",
-      minWidth:   '240px',
+      maxWidth: "300px",
+      minWidth: "240px",
     });
 
-    const site  = escHtml(location.hostname);
+    const site = escHtml(location.hostname);
-    const user  = escHtml(username);
+    const user = escHtml(username);
-    const title = credentialState === 'updated'
+    const title =
-      ? 'Update in PassKeeper?'
+      credentialState === "updated"
-      : 'Save to PassKeeper?';
+        ? "Update in PassKeeper?"
+        : "Save to PassKeeper?";
 
     banner.innerHTML = `
       <div style="display:flex;align-items:center;gap:8px;margin-bottom:10px;">
@@ -326,15 +355,30 @@
     _bannerEl = banner;
 
     // No setTimeout — banner stays until the user makes an explicit choice.
-    const dismiss = () => { if (_bannerEl === banner) { banner.remove(); _bannerEl = null; } };
+    const dismiss = () => {
-    banner.querySelector('#__pk_close__').addEventListener('click', dismiss);
+      if (_bannerEl === banner) {
-    banner.querySelector('#__pk_skip__').addEventListener('click', dismiss);
+        banner.remove();
-    banner.querySelector('#__pk_save__').addEventListener('click', () => {
+        _bannerEl = null;
-      console.log('[PassKeeper] User chose to save credentials for', location.hostname);
+      }
-      chrome.runtime.sendMessage({
+    };
-        type: 'SAVE_CREDENTIALS',
+    banner.querySelector("#__pk_close__").addEventListener("click", dismiss);
-        data: { url: location.href, siteName: document.title || location.hostname, username, password },
+    banner.querySelector("#__pk_skip__").addEventListener("click", dismiss);
-      }).catch(() => {});
+    banner.querySelector("#__pk_save__").addEventListener("click", () => {
+      console.log(
+        "[PassKeeper] User chose to save credentials for",
+        location.hostname,
+      );
+      chrome.runtime
+        .sendMessage({
+          type: "SAVE_CREDENTIALS",
+          data: {
+            url: location.href,
+            siteName: document.title || location.hostname,
+            username,
+            password,
+          },
+        })
+        .catch(() => {});
       dismiss();
     });
   }
@@ -342,44 +386,63 @@
   // ── Form submission watch ─────────────────────────────────────────────────────
 
   function watchSubmissions() {
-    document.addEventListener('submit', async e => {
+    document.addEventListener(
-      const form    = e.target;
+      "submit",
-      const pwField = form.querySelector('input[type="password"]:not([disabled])');
+      async (e) => {
-      if (!pwField?.value) return;
+        const form = e.target;
+        const pwField = form.querySelector(
+          'input[type="password"]:not([disabled])',
+        );
+        if (!pwField?.value) return;
 
-      const userField = findUsernameField(pwField)
+        const userField =
-        ?? form.querySelector('input[type="email"]:not([disabled])')
+          findUsernameField(pwField) ??
-        ?? form.querySelector('input[type="text"]:not([disabled])');
+          form.querySelector('input[type="email"]:not([disabled])') ??
+          form.querySelector('input[type="text"]:not([disabled])');
 
-      const username = userField?.value?.trim() || '';
+        const username = userField?.value?.trim() || "";
-      const password = pwField.value;
+        const password = pwField.value;
 
-      if (!username || !password) return;
+        if (!username || !password) return;
 
-      // Run duplicate check before showing the banner.
+        // Run duplicate check before showing the banner.
-      const credentialState = await classifyCredentials(username, password);
+        const credentialState = await classifyCredentials(username, password);
-      console.log('[PassKeeper] Credential state for', location.hostname, '→', credentialState);
+        console.log(
+          "[PassKeeper] Credential state for",
+          location.hostname,
+          "→",
+          credentialState,
+        );
 
-      if (credentialState === 'same') {
+        if (credentialState === "same") {
-        // Credentials unchanged — silently skip.
+          // Credentials unchanged — silently skip.
-        return;
+          return;
-      }
+        }
 
-      setTimeout(() => showSaveBanner(username, password, credentialState), 500);
+        setTimeout(
-    }, true);
+          () => showSaveBanner(username, password, credentialState),
+          500,
+        );
+      },
+      true,
+    );
   }
 
   // ── Message listener ──────────────────────────────────────────────────────────
 
   chrome.runtime.onMessage.addListener((msg, _sender, sendResponse) => {
-    if (msg.type === 'DO_AUTOFILL') {
+    if (msg.type === "DO_AUTOFILL") {
       doAutofill(msg.username, msg.password);
       sendResponse({ ok: true });
     }
-    if (msg.type === 'VAULT_UPDATED') {
+    if (msg.type === "VAULT_UPDATED") {
       // Re-decorate fields with fresh data
-      document.querySelectorAll(`[${PK_ATTR}]`).forEach(el => el.removeAttribute(PK_ATTR));
+      document
-      document.querySelectorAll(`.${PK_BTN_CLASS}`).forEach(el => el.remove());
+        .querySelectorAll(`[${PK_ATTR}]`)
+        .forEach((el) => el.removeAttribute(PK_ATTR));
+      document
+        .querySelectorAll(`.${PK_BTN_CLASS}`)
+        .forEach((el) => el.remove());
       decorateFields();
     }
     return false;
@@ -400,8 +463,8 @@
     _formObserver.observe(document.body, { childList: true, subtree: true });
   }
 
-  if (document.readyState === 'loading') {
+  if (document.readyState === "loading") {
-    document.addEventListener('DOMContentLoaded', init);
+    document.addEventListener("DOMContentLoaded", init);
   } else {
     init();
   }

extension/popup/popup.css

@@ -1,17 +1,30 @@
 /* PassKeeper Extension Popup */
-*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
 
 body {
   width: 320px;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-family:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   font-size: 13px;
   color: #1a1a2e;
   background: #fff;
   overflow: hidden;
 }
 
-.view { display: flex; flex-direction: column; min-height: 0; }
+.view {
-.view.hidden { display: none; }
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+.view.hidden {
+  display: none;
+}
 
 /* ── Login ───────────────────────────────────────────────────────── */
 .login-header {
@@ -22,42 +35,99 @@ body {
   background: linear-gradient(135deg, #c0392b, #922b21);
   color: #fff;
 }
-.login-logo { font-size: 36px; margin-bottom: 8px; }
+.login-logo {
-.login-header h1 { font-size: 18px; font-weight: 600; letter-spacing: 0.3px; }
+  font-size: 36px;
-
+  margin-bottom: 8px;
-.login-body { padding: 18px 20px 20px; }
+}
-.pk-hint { font-size: 12px; color: #666; margin-bottom: 12px; text-align: center; }
+.login-header h1 {
-
+  font-size: 18px;
-.form-group { margin-bottom: 11px; }
+  font-weight: 600;
-.form-group label { display: block; font-size: 11px; color: #555; font-weight: 500; margin-bottom: 3px; }
+  letter-spacing: 0.3px;
-.form-group input {
+}
-  width: 100%; padding: 8px 11px;
+
-  border: 1px solid #ddd; border-radius: 6px;
+.login-body {
-  font-size: 13px; outline: none; background: #fff; color: #1a1a2e;
+  padding: 18px 20px 20px;
-  transition: border-color 0.15s, box-shadow 0.15s;
+}
+.pk-hint {
+  font-size: 12px;
+  color: #666;
+  margin-bottom: 12px;
+  text-align: center;
+}
+
+.form-group {
+  margin-bottom: 11px;
+}
+.form-group label {
+  display: block;
+  font-size: 11px;
+  color: #555;
+  font-weight: 500;
+  margin-bottom: 3px;
+}
+.form-group input {
+  width: 100%;
+  padding: 8px 11px;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  font-size: 13px;
+  outline: none;
+  background: #fff;
+  color: #1a1a2e;
+  transition:
+    border-color 0.15s,
+    box-shadow 0.15s;
+}
+.form-group input:focus {
+  border-color: #c0392b;
+  box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.12);
 }
-.form-group input:focus { border-color: #c0392b; box-shadow: 0 0 0 2px rgba(192,57,43,0.12); }
 
 /* ── Buttons ─────────────────────────────────────────────────────── */
 .btn-primary {
-  display: block; width: 100%; padding: 9px;
+  display: block;
-  background: #c0392b; color: #fff;
+  width: 100%;
-  border: none; border-radius: 6px;
+  padding: 9px;
-  font-size: 13px; font-weight: 600; cursor: pointer;
+  background: #c0392b;
-  margin-top: 10px; transition: background 0.15s;
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  margin-top: 10px;
+  transition: background 0.15s;
+}
+.btn-primary:hover {
+  background: #a93226;
+}
+.btn-primary:disabled {
+  background: #e8a49e;
+  cursor: default;
+}
+.btn-sm {
+  width: auto;
+  padding: 6px 16px;
+  margin-top: 8px;
 }
-.btn-primary:hover { background: #a93226; }
-.btn-primary:disabled { background: #e8a49e; cursor: default; }
-.btn-sm { width: auto; padding: 6px 16px; margin-top: 8px; }
 
 .btn-ghost {
-  display: block; width: 100%; padding: 9px;
+  display: block;
-  background: transparent; color: #c0392b;
+  width: 100%;
-  border: 1px solid #e5c0bb; border-radius: 6px;
+  padding: 9px;
-  font-size: 13px; font-weight: 500; cursor: pointer;
+  background: transparent;
-  margin-top: 6px; transition: background 0.15s;
+  color: #c0392b;
+  border: 1px solid #e5c0bb;
+  border-radius: 6px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  margin-top: 6px;
+  transition: background 0.15s;
+}
+.btn-ghost:hover {
+  background: #fdf2f1;
 }
-.btn-ghost:hover { background: #fdf2f1; }
 
 /* ── Vault top bar ───────────────────────────────────────────────── */
 .vault-topbar {
@@ -78,54 +148,62 @@ body {
   padding: 6px 10px;
   gap: 7px;
 }
-.search-icon { flex-shrink: 0; opacity: 0.6; }
+.search-icon {
-#vault-search {
+  flex-shrink: 0;
-  flex: 1; border: none; background: transparent;
+  opacity: 0.6;
-  font-size: 13px; outline: none; color: #1a1a2e;
+}
+#vault-search {
+  flex: 1;
+  border: none;
+  background: transparent;
+  font-size: 13px;
+  outline: none;
+  color: #1a1a2e;
+}
+#vault-search::placeholder {
+  color: #9ca3af;
 }
-#vault-search::placeholder { color: #9ca3af; }
 
 .btn-vault-link {
-  display: inline-flex; align-items: center; gap: 5px;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
   padding: 6px 10px;
-  background: #1a1a2e; color: #fff;
+  background: #1a1a2e;
-  border: none; border-radius: 7px;
+  color: #fff;
-  font-size: 12px; font-weight: 600; cursor: pointer;
+  border: none;
+  border-radius: 7px;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
   text-decoration: none;
   white-space: nowrap;
   transition: background 0.15s;
   flex-shrink: 0;
 }
-.btn-vault-link:hover { background: #2d2d4e; }
+.btn-vault-link:hover {
+  background: #2d2d4e;
+}
 
 .btn-add {
-  width: 32px; height: 32px;
+  width: 32px;
-  background: #f3f4f6; color: #1a1a2e;
+  height: 32px;
-  border: none; border-radius: 7px;
+  background: #f3f4f6;
-  font-size: 20px; line-height: 1; cursor: pointer;
+  color: #1a1a2e;
-  display: flex; align-items: center; justify-content: center;
+  border: none;
+  border-radius: 7px;
+  font-size: 20px;
+  line-height: 1;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   flex-shrink: 0;
   transition: background 0.15s;
 }
-.btn-add:hover { background: #e5e7eb; }
+.btn-add:hover {
-
+  background: #e5e7eb;
-/* ── Save prompt ─────────────────────────────────────────────────── */
-.save-prompt {
-  background: #fef9f0;
-  border-bottom: 2px solid #f59e0b;
-  padding: 10px 14px 12px;
 }
-.save-prompt.hidden { display: none; }
-.save-prompt-title {
-  display: flex; align-items: center; gap: 6px;
-  font-size: 12px; font-weight: 600; color: #92400e;
-  margin-bottom: 8px;
-}
-.save-dismiss {
-  margin-left: auto; background: none; border: none;
-  cursor: pointer; color: #92400e; font-size: 14px; line-height: 1;
-}
-.save-prompt .form-group { margin-bottom: 6px; }
 
 /* ── Tabs ────────────────────────────────────────────────────────── */
 .vault-tabs {
@@ -137,20 +215,33 @@ body {
   overflow-x: auto;
   scrollbar-width: none;
 }
-.vault-tabs::-webkit-scrollbar { display: none; }
+.vault-tabs::-webkit-scrollbar {
+  display: none;
+}
 
 .tab-btn {
   padding: 6px 12px 8px;
-  background: none; border: none;
+  background: none;
-  font-size: 12px; font-weight: 500;
+  border: none;
-  color: #6b7280; cursor: pointer;
+  font-size: 12px;
+  font-weight: 500;
+  color: #6b7280;
+  cursor: pointer;
   border-bottom: 2px solid transparent;
   white-space: nowrap;
-  transition: color 0.15s, border-color 0.15s;
+  transition:
+    color 0.15s,
+    border-color 0.15s;
   margin-bottom: -1px;
 }
-.tab-btn:hover { color: #1a1a2e; }
+.tab-btn:hover {
-.tab-btn.active { color: #1a1a2e; border-bottom-color: #1a1a2e; font-weight: 600; }
+  color: #1a1a2e;
+}
+.tab-btn.active {
+  color: #1a1a2e;
+  border-bottom-color: #1a1a2e;
+  font-weight: 600;
+}
 
 /* ── Vault list ──────────────────────────────────────────────────── */
 .vault-list {
@@ -159,79 +250,149 @@ body {
   scrollbar-width: thin;
   scrollbar-color: #e5e7eb transparent;
 }
-.vault-list::-webkit-scrollbar { width: 4px; }
+.vault-list::-webkit-scrollbar {
-.vault-list::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 2px; }
+  width: 4px;
+}
+.vault-list::-webkit-scrollbar-thumb {
+  background: #e5e7eb;
+  border-radius: 2px;
+}
 
 .vault-item {
-  display: flex; align-items: center; gap: 10px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
   padding: 10px 14px;
   border-bottom: 1px solid #f3f4f6;
   cursor: default;
   transition: background 0.1s;
 }
-.vault-item:hover { background: #f9fafb; }
+.vault-item:hover {
-.vault-item:last-child { border-bottom: none; }
+  background: #f9fafb;
+}
+.vault-item:last-child {
+  border-bottom: none;
+}
 
 .item-avatar {
-  width: 36px; height: 36px;
+  width: 36px;
+  height: 36px;
   border-radius: 8px;
   background: #1e2d5a;
-  display: flex; align-items: center; justify-content: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   font-size: 17px;
   flex-shrink: 0;
   overflow: hidden;
 }
-.item-avatar.color-red    { background: #7f1d1d; }
+.item-avatar.color-red {
-.item-avatar.color-green  { background: #14532d; }
+  background: #7f1d1d;
-.item-avatar.color-purple { background: #3b0764; }
+}
-.item-avatar.color-teal   { background: #134e4a; }
+.item-avatar.color-green {
+  background: #14532d;
+}
+.item-avatar.color-purple {
+  background: #3b0764;
+}
+.item-avatar.color-teal {
+  background: #134e4a;
+}
 
-.item-avatar img { width: 22px; height: 22px; border-radius: 3px; }
+.item-avatar img {
+  width: 22px;
+  height: 22px;
+  border-radius: 3px;
+}
 
-.item-info { flex: 1; min-width: 0; }
+.item-info {
+  flex: 1;
+  min-width: 0;
+}
 .item-site {
-  font-size: 12px; font-weight: 600; color: #374151;
+  font-size: 12px;
-  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  font-weight: 600;
+  color: #374151;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .item-name {
-  font-size: 11px; color: #9ca3af;
+  font-size: 11px;
-  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  color: #9ca3af;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
   margin-top: 1px;
 }
 
-.item-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
+.item-actions {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  flex-shrink: 0;
+}
 
 .btn-item-action {
-  background: none; border: none; cursor: pointer;
+  background: none;
-  padding: 4px 6px; border-radius: 5px; color: #6b7280;
+  border: none;
-  display: flex; align-items: center; justify-content: center;
+  cursor: pointer;
-  transition: background 0.12s, color 0.12s;
+  padding: 4px 6px;
+  border-radius: 5px;
+  color: #6b7280;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition:
+    background 0.12s,
+    color 0.12s;
+}
+.btn-item-action:hover {
+  background: #f3f4f6;
+  color: #1a1a2e;
+}
+.btn-item-action svg {
+  width: 16px;
+  height: 16px;
 }
-.btn-item-action:hover { background: #f3f4f6; color: #1a1a2e; }
-.btn-item-action svg { width: 16px; height: 16px; }
 
 .badge-match {
   display: inline-block;
-  background: #dbeafe; color: #1d4ed8;
+  background: #dbeafe;
-  font-size: 9px; font-weight: 700;
+  color: #1d4ed8;
-  padding: 1px 5px; border-radius: 8px;
+  font-size: 9px;
-  letter-spacing: 0.3px; margin-left: 4px;
+  font-weight: 700;
+  padding: 1px 5px;
+  border-radius: 8px;
+  letter-spacing: 0.3px;
+  margin-left: 4px;
   vertical-align: middle;
 }
 
 /* ── States ──────────────────────────────────────────────────────── */
 .pk-error {
-  font-size: 12px; color: #b91c1c;
+  font-size: 12px;
-  background: #fef2f2; border-radius: 5px;
+  color: #b91c1c;
-  padding: 7px 10px; margin-bottom: 10px;
+  background: #fef2f2;
+  border-radius: 5px;
+  padding: 7px 10px;
+  margin-bottom: 10px;
+}
+.pk-error.hidden {
+  display: none;
 }
-.pk-error.hidden { display: none; }
 
-.pk-loading, .pk-empty {
+.pk-loading,
-  text-align: center; color: #9ca3af;
+.pk-empty {
-  padding: 28px 16px; font-size: 13px;
+  text-align: center;
+  color: #9ca3af;
+  padding: 28px 16px;
+  font-size: 13px;
+}
+.pk-loading.hidden,
+.pk-empty.hidden {
+  display: none;
 }
-.pk-loading.hidden, .pk-empty.hidden { display: none; }
 
 /* ── Bottom nav ──────────────────────────────────────────────────── */
 .bottom-nav {
@@ -239,15 +400,183 @@ body {
   border-top: 1px solid #f0f0f0;
   background: #fff;
 }
+.bottom-nav.hidden {
+  display: none;
+}
 .nav-btn {
   flex: 1;
-  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
   gap: 3px;
   padding: 8px 4px;
-  background: none; border: none; cursor: pointer;
+  background: none;
+  border: none;
+  cursor: pointer;
   color: #9ca3af;
-  font-size: 9px; font-weight: 500;
+  font-size: 9px;
+  font-weight: 500;
   transition: color 0.15s;
 }
-.nav-btn:hover { color: #374151; }
+.nav-btn:hover {
-.nav-btn.active { color: #1a1a2e; }
+  color: #374151;
+}
+.nav-btn.active {
+  color: #1a1a2e;
+}
+
+/* ── Save-prompt blocking modal ──────────────────────────────────── */
+.save-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.45);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+}
+.save-overlay.hidden {
+  display: none;
+}
+.save-modal {
+  background: #fff;
+  border-radius: 12px;
+  padding: 20px 18px 16px;
+  width: 272px;
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
+}
+.save-modal-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  font-weight: 700;
+  color: #1a1a2e;
+  margin-bottom: 6px;
+}
+.save-modal-sub {
+  font-size: 11px;
+  color: #6b7280;
+  margin-bottom: 12px;
+  word-break: break-all;
+}
+.save-modal-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 10px;
+}
+.save-modal-actions .btn-primary {
+  margin-top: 0;
+}
+.save-modal-actions .btn-ghost {
+  margin-top: 0;
+}
+
+/* ── Generator view ──────────────────────────────────────────────── */
+.gen-suggestion {
+  background: #e8f5f0;
+  border-bottom: 2px solid #16a34a;
+  padding: 12px 14px 10px;
+}
+.gen-suggestion-label {
+  font-size: 10px;
+  color: #374151;
+  font-weight: 500;
+  margin-bottom: 4px;
+}
+.gen-suggestion-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.gen-output {
+  flex: 1;
+  font-family: "Courier New", Courier, monospace;
+  font-size: 13px;
+  font-weight: 700;
+  color: #1a1a2e;
+  word-break: break-all;
+  min-width: 0;
+}
+.gen-suggestion-actions {
+  display: flex;
+  gap: 4px;
+  flex-shrink: 0;
+}
+.gen-icon-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: #1a73e8;
+  padding: 4px;
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.12s;
+}
+.gen-icon-btn:hover {
+  background: rgba(26, 115, 232, 0.1);
+}
+
+.gen-strength-row {
+  padding: 6px 14px 2px;
+  min-height: 22px;
+}
+.gen-strength-label {
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.gen-body {
+  padding: 10px 14px 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.gen-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.gen-label {
+  font-size: 12px;
+  color: #374151;
+  white-space: nowrap;
+}
+.gen-length-num {
+  width: 42px;
+  padding: 3px 5px;
+  border: 1px solid #d1d5db;
+  border-radius: 5px;
+  font-size: 12px;
+  text-align: center;
+  color: #1a1a2e;
+  outline: none;
+}
+.gen-length-num:focus {
+  border-color: #1a73e8;
+}
+.gen-slider {
+  width: 100%;
+  accent-color: #1a73e8;
+  cursor: pointer;
+  height: 4px;
+}
+.gen-check {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  color: #374151;
+  cursor: pointer;
+  user-select: none;
+}
+.gen-check input[type="checkbox"] {
+  width: 15px;
+  height: 15px;
+  accent-color: #1a73e8;
+  cursor: pointer;
+  flex-shrink: 0;
+}

extension/popup/popup.html

@@ -1,160 +1,411 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
+  <head>
-  <meta charset="UTF-8">
+    <meta charset="UTF-8" />
-  <title>PassKeeper</title>
+    <title>PassKeeper</title>
-  <link rel="stylesheet" href="popup.css">
+    <link rel="stylesheet" href="popup.css" />
-</head>
+  </head>
-<body>
+  <body>
-<div id="app">
+    <div id="app">
-
+      <!-- ── Login view ──────────────────────────────────────────────────── -->
-  <!-- ── Login view ──────────────────────────────────────────────────── -->
+      <div id="view-login" class="view hidden">
-  <div id="view-login" class="view hidden">
+        <div class="login-header">
-    <div class="login-header">
+          <span class="login-logo">🔒</span>
-      <span class="login-logo">🔒</span>
+          <h1>PassKeeper</h1>
-      <h1>PassKeeper</h1>
+        </div>
-    </div>
+        <div class="login-body">
-    <div class="login-body">
+          <p id="login-error" class="pk-error hidden"></p>
-      <p id="login-error" class="pk-error hidden"></p>
+          <div class="form-group">
-      <div class="form-group">
+            <label for="login-email">Email</label>
-        <label for="login-email">Email</label>
+            <input
-        <input type="email" id="login-email" placeholder="you@example.com" autocomplete="email">
+              type="email"
+              id="login-email"
+              placeholder="you@example.com"
+              autocomplete="email"
+            />
+          </div>
+          <div class="form-group">
+            <label for="login-password">Master Password</label>
+            <input
+              type="password"
+              id="login-password"
+              placeholder="Master password"
+              autocomplete="current-password"
+            />
+          </div>
+          <button id="btn-login" class="btn-primary">Unlock Vault</button>
+        </div>
       </div>
-      <div class="form-group">
+
-        <label for="login-password">Master Password</label>
+      <!-- ── MFA view ────────────────────────────────────────────────────── -->
-        <input type="password" id="login-password" placeholder="Master password" autocomplete="current-password">
+      <div id="view-mfa" class="view hidden">
+        <div class="login-header">
+          <span class="login-logo">🔐</span>
+          <h1>Two-Factor Auth</h1>
+        </div>
+        <div class="login-body">
+          <p class="pk-hint">Enter your 6-digit authenticator code.</p>
+          <p id="mfa-error" class="pk-error hidden"></p>
+          <div class="form-group">
+            <label for="mfa-code">Verification Code</label>
+            <input
+              type="text"
+              id="mfa-code"
+              inputmode="numeric"
+              maxlength="6"
+              placeholder="000000"
+              autocomplete="one-time-code"
+            />
+          </div>
+          <button id="btn-mfa-verify" class="btn-primary">Verify</button>
+          <button id="btn-mfa-back" class="btn-ghost">← Back</button>
+        </div>
       </div>
-      <button id="btn-login" class="btn-primary">Unlock Vault</button>
-    </div>
-  </div>
 
-  <!-- ── MFA view ────────────────────────────────────────────────────── -->
+      <!-- ── Unlock-only view (tokens from web app, need vault key) ─────── -->
-  <div id="view-mfa" class="view hidden">
+      <div id="view-unlock" class="view hidden">
-    <div class="login-header">
+        <div class="login-header">
-      <span class="login-logo">🔐</span>
+          <span class="login-logo">🔓</span>
-      <h1>Two-Factor Auth</h1>
+          <h1>PassKeeper</h1>
-    </div>
+          <p style="font-size: 12px; opacity: 0.85; margin-top: 4px">
-    <div class="login-body">
+            Signed in via web app
-      <p class="pk-hint">Enter your 6-digit authenticator code.</p>
+          </p>
-      <p id="mfa-error" class="pk-error hidden"></p>
+        </div>
-      <div class="form-group">
+        <div class="login-body">
-        <label for="mfa-code">Verification Code</label>
+          <p class="pk-hint">Enter your master password to unlock the vault.</p>
-        <input type="text" id="mfa-code" inputmode="numeric" maxlength="6" placeholder="000000" autocomplete="one-time-code">
+          <p id="unlock-error" class="pk-error hidden"></p>
+          <div class="form-group">
+            <label for="unlock-password">Master Password</label>
+            <input
+              type="password"
+              id="unlock-password"
+              placeholder="Master password"
+              autocomplete="current-password"
+            />
+          </div>
+          <button id="btn-unlock" class="btn-primary">Unlock</button>
+          <button id="btn-unlock-signout" class="btn-ghost">Sign out</button>
+        </div>
       </div>
-      <button id="btn-mfa-verify" class="btn-primary">Verify</button>
-      <button id="btn-mfa-back" class="btn-ghost">← Back</button>
-    </div>
-  </div>
 
-  <!-- ── Unlock-only view (tokens from web app, need vault key) ─────── -->
+      <!-- ── Vault view ──────────────────────────────────────────────────── -->
-  <div id="view-unlock" class="view hidden">
+      <div id="view-vault" class="view hidden">
-    <div class="login-header">
+        <!-- Top bar -->
-      <span class="login-logo">🔓</span>
+        <div class="vault-topbar">
-      <h1>PassKeeper</h1>
+          <div class="search-wrap">
-      <p style="font-size:12px;opacity:0.85;margin-top:4px;">Signed in via web app</p>
+            <svg
-    </div>
+              class="search-icon"
-    <div class="login-body">
+              viewBox="0 0 20 20"
-      <p class="pk-hint">Enter your master password to unlock the vault.</p>
+              fill="none"
-      <p id="unlock-error" class="pk-error hidden"></p>
+              width="15"
-      <div class="form-group">
+              height="15"
-        <label for="unlock-password">Master Password</label>
+            >
-        <input type="password" id="unlock-password" placeholder="Master password" autocomplete="current-password">
+              <circle
+                cx="8.5"
+                cy="8.5"
+                r="5.5"
+                stroke="#999"
+                stroke-width="1.6"
+              />
+              <path
+                d="M13 13l3.5 3.5"
+                stroke="#999"
+                stroke-width="1.6"
+                stroke-linecap="round"
+              />
+            </svg>
+            <input
+              type="text"
+              id="vault-search"
+              placeholder="Search your vault"
+              autocomplete="off"
+            />
+          </div>
+          <a
+            id="btn-open-vault"
+            class="btn-vault-link"
+            title="Open vault"
+            target="_blank"
+          >
+            Vault
+            <svg viewBox="0 0 16 16" fill="none" width="12" height="12">
+              <path
+                d="M6 3H3a1 1 0 00-1 1v9a1 1 0 001 1h9a1 1 0 001-1v-3"
+                stroke="currentColor"
+                stroke-width="1.5"
+                stroke-linecap="round"
+              />
+              <path
+                d="M9 2h5v5M14 2L8 8"
+                stroke="currentColor"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </a>
+          <button id="btn-add-item" class="btn-add" title="Add item">+</button>
+        </div>
+
+        <!-- Tabs -->
+        <div class="vault-tabs" id="vault-tabs">
+          <button class="tab-btn active" data-tab="relevant">
+            All relevant
+          </button>
+          <button class="tab-btn" data-tab="all">All items</button>
+          <button class="tab-btn" data-tab="recents">Recents</button>
+        </div>
+
+        <!-- List -->
+        <div id="vault-spinner" class="pk-loading hidden">Loading vault…</div>
+        <div id="vault-list" class="vault-list"></div>
+        <div id="vault-empty" class="pk-empty hidden">No items found.</div>
       </div>
-      <button id="btn-unlock" class="btn-primary">Unlock</button>
+      <!-- /view-vault -->
-      <button id="btn-unlock-signout" class="btn-ghost">Sign out</button>
-    </div>
-  </div>
 
-  <!-- ── Vault view ──────────────────────────────────────────────────── -->
+      <!-- ── Generator view ─────────────────────────────────────────────── -->
-  <div id="view-vault" class="view hidden">
+      <div id="view-generator" class="view hidden">
+        <div class="gen-suggestion">
+          <div class="gen-suggestion-label">Password suggestion</div>
+          <div class="gen-suggestion-row">
+            <span id="gen-output" class="gen-output"
+              >Click refresh to generate</span
+            >
+            <div class="gen-suggestion-actions">
+              <button
+                id="btn-gen-copy"
+                class="gen-icon-btn"
+                title="Copy password"
+              >
+                <svg viewBox="0 0 24 24" fill="none" width="18" height="18">
+                  <rect
+                    x="9"
+                    y="9"
+                    width="11"
+                    height="11"
+                    rx="2"
+                    stroke="currentColor"
+                    stroke-width="1.8"
+                  />
+                  <path
+                    d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"
+                    stroke="currentColor"
+                    stroke-width="1.8"
+                  />
+                </svg>
+              </button>
+              <button
+                id="btn-gen-refresh"
+                class="gen-icon-btn"
+                title="Generate new password"
+              >
+                <svg viewBox="0 0 24 24" fill="none" width="18" height="18">
+                  <path
+                    d="M4 4v5h5"
+                    stroke="currentColor"
+                    stroke-width="1.8"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                  <path
+                    d="M20 20v-5h-5"
+                    stroke="currentColor"
+                    stroke-width="1.8"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                  <path
+                    d="M20 9a8 8 0 00-14.93-2.07M4 15a8 8 0 0014.93 2.07"
+                    stroke="currentColor"
+                    stroke-width="1.8"
+                    stroke-linecap="round"
+                  />
+                </svg>
+              </button>
+            </div>
+          </div>
+        </div>
 
-    <!-- Top bar -->
+        <div class="gen-strength-row">
-    <div class="vault-topbar">
+          <span id="gen-strength-label" class="gen-strength-label"></span>
-      <div class="search-wrap">
+        </div>
-        <svg class="search-icon" viewBox="0 0 20 20" fill="none" width="15" height="15">
+
-          <circle cx="8.5" cy="8.5" r="5.5" stroke="#999" stroke-width="1.6"/>
+        <div class="gen-body">
-          <path d="M13 13l3.5 3.5" stroke="#999" stroke-width="1.6" stroke-linecap="round"/>
+          <div class="gen-row">
-        </svg>
+            <label for="gen-length" class="gen-label">Password length:</label>
-        <input type="text" id="vault-search" placeholder="Search your vault" autocomplete="off">
+            <input
+              type="number"
+              id="gen-length-num"
+              class="gen-length-num"
+              value="16"
+              min="8"
+              max="64"
+            />
+            <span class="gen-label">characters</span>
+          </div>
+          <input
+            type="range"
+            id="gen-length"
+            class="gen-slider"
+            min="8"
+            max="64"
+            value="16"
+          />
+
+          <label class="gen-check">
+            <input type="checkbox" id="gen-lower" checked />
+            <span>Lowercase (abc)</span>
+          </label>
+          <label class="gen-check">
+            <input type="checkbox" id="gen-upper" checked />
+            <span>Uppercase (ABC)</span>
+          </label>
+          <label class="gen-check">
+            <input type="checkbox" id="gen-numbers" checked />
+            <span>Numbers (123)</span>
+          </label>
+          <label class="gen-check">
+            <input type="checkbox" id="gen-symbols" checked />
+            <span>Randomized symbols (!#$)</span>
+          </label>
+        </div>
       </div>
-      <a id="btn-open-vault" class="btn-vault-link" title="Open vault" target="_blank">
+      <!-- /view-generator -->
-        Vault
-        <svg viewBox="0 0 16 16" fill="none" width="12" height="12">
-          <path d="M6 3H3a1 1 0 00-1 1v9a1 1 0 001 1h9a1 1 0 001-1v-3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-          <path d="M9 2h5v5M14 2L8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-        </svg>
-      </a>
-      <button id="btn-add-item" class="btn-add" title="Add item">+</button>
-    </div>
 
-    <!-- Save prompt -->
+      <!-- ── Save-prompt modal overlay (shared across vault/generator views) -->
-    <div id="save-prompt" class="save-prompt hidden">
+      <div
-      <div class="save-prompt-title">
+        id="save-prompt-overlay"
-        <span>💾</span> Save new password?
+        class="save-overlay hidden"
-        <button id="btn-save-no" class="save-dismiss">✕</button>
+        role="dialog"
+        aria-modal="true"
+      >
+        <div class="save-modal">
+          <div class="save-modal-header">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
+              <path
+                d="M8 10V7a4 4 0 018 0v3"
+                stroke="#1a1a2e"
+                stroke-width="1.8"
+                stroke-linecap="round"
+              />
+              <rect
+                x="3"
+                y="10"
+                width="18"
+                height="12"
+                rx="2"
+                stroke="#1a1a2e"
+                stroke-width="1.8"
+              />
+            </svg>
+            <span id="save-prompt-title">Save to PassKeeper?</span>
+          </div>
+          <p id="save-prompt-subtitle" class="save-modal-sub"></p>
+          <div class="form-group">
+            <label for="save-name">Site name</label>
+            <input type="text" id="save-name" placeholder="e.g. GitHub" />
+          </div>
+          <div class="form-group">
+            <label for="save-username">Username / Email</label>
+            <input
+              type="text"
+              id="save-username"
+              placeholder="username or email"
+            />
+          </div>
+          <div class="save-modal-actions">
+            <button id="btn-save-yes" class="btn-primary btn-sm">Save</button>
+            <button id="btn-save-no" class="btn-ghost btn-sm">Not now</button>
+          </div>
+        </div>
       </div>
-      <div class="form-group">
+
-        <label for="save-name">Site name</label>
+      <!-- ── Shared bottom nav (visible whenever vault OR generator is shown) -->
-        <input type="text" id="save-name" placeholder="e.g. GitHub">
+      <nav class="bottom-nav" id="main-bottom-nav">
-      </div>
+        <button class="nav-btn active" id="nav-vault">
-      <div class="form-group">
+          <svg viewBox="0 0 24 24" fill="none" width="20" height="20">
-        <label for="save-username">Username</label>
+            <rect
-        <input type="text" id="save-username" placeholder="username or email">
+              x="3"
-      </div>
+              y="6"
-      <button id="btn-save-yes" class="btn-primary btn-sm">Save</button>
+              width="18"
+              height="14"
+              rx="2"
+              stroke="currentColor"
+              stroke-width="1.7"
+            />
+            <circle
+              cx="12"
+              cy="13"
+              r="2.5"
+              stroke="currentColor"
+              stroke-width="1.7"
+            />
+            <path
+              d="M8 6V5a4 4 0 018 0v1"
+              stroke="currentColor"
+              stroke-width="1.7"
+            />
+          </svg>
+          <span>Vault</span>
+        </button>
+        <button class="nav-btn" id="nav-generator" title="Password Generator">
+          <svg viewBox="0 0 24 24" fill="none" width="20" height="20">
+            <path
+              d="M12 2a5 5 0 015 5v1h1a2 2 0 012 2v9a2 2 0 01-2 2H6a2 2 0 01-2-2v-9a2 2 0 012-2h1V7a5 5 0 015-5z"
+              stroke="currentColor"
+              stroke-width="1.7"
+              stroke-linejoin="round"
+            />
+            <circle cx="12" cy="14" r="1.8" fill="currentColor" />
+            <path
+              d="M12 14v2.5"
+              stroke="currentColor"
+              stroke-width="1.7"
+              stroke-linecap="round"
+            />
+          </svg>
+          <span>Generator</span>
+        </button>
+        <button class="nav-btn" id="nav-alerts" title="Security Alerts">
+          <svg viewBox="0 0 24 24" fill="none" width="20" height="20">
+            <path
+              d="M12 3l8.5 15H3.5L12 3z"
+              stroke="currentColor"
+              stroke-width="1.7"
+              stroke-linejoin="round"
+            />
+            <path
+              d="M12 10v4"
+              stroke="currentColor"
+              stroke-width="1.7"
+              stroke-linecap="round"
+            />
+            <circle cx="12" cy="17" r="0.8" fill="currentColor" />
+          </svg>
+          <span>Alerts</span>
+        </button>
+        <button class="nav-btn" id="nav-account" title="Account">
+          <svg viewBox="0 0 24 24" fill="none" width="20" height="20">
+            <circle
+              cx="12"
+              cy="8"
+              r="4"
+              stroke="currentColor"
+              stroke-width="1.7"
+            />
+            <path
+              d="M4 20c0-4 3.6-7 8-7s8 3 8 7"
+              stroke="currentColor"
+              stroke-width="1.7"
+              stroke-linecap="round"
+            />
+          </svg>
+          <span>Account</span>
+        </button>
+      </nav>
     </div>
-
+    <!-- /app -->
-    <!-- Tabs -->
+    <script src="../shared/crypto.js"></script>
-    <div class="vault-tabs" id="vault-tabs">
+    <script src="popup.js"></script>
-      <button class="tab-btn active" data-tab="relevant">All relevant</button>
+  </body>
-      <button class="tab-btn" data-tab="all">All items</button>
-      <button class="tab-btn" data-tab="recents">Recents</button>
-    </div>
-
-    <!-- List -->
-    <div id="vault-spinner" class="pk-loading hidden">Loading vault…</div>
-    <div id="vault-list" class="vault-list"></div>
-    <div id="vault-empty" class="pk-empty hidden">No items found.</div>
-
-    <!-- Bottom nav -->
-    <nav class="bottom-nav">
-      <button class="nav-btn active" id="nav-vault">
-        <svg viewBox="0 0 24 24" fill="none" width="20" height="20">
-          <rect x="3" y="6" width="18" height="14" rx="2" stroke="currentColor" stroke-width="1.7"/>
-          <circle cx="12" cy="13" r="2.5" stroke="currentColor" stroke-width="1.7"/>
-          <path d="M8 6V5a4 4 0 018 0v1" stroke="currentColor" stroke-width="1.7"/>
-        </svg>
-        <span>Vault</span>
-      </button>
-      <button class="nav-btn" id="nav-generator" title="Password Generator">
-        <svg viewBox="0 0 24 24" fill="none" width="20" height="20">
-          <path d="M12 2a5 5 0 015 5v1h1a2 2 0 012 2v9a2 2 0 01-2 2H6a2 2 0 01-2-2v-9a2 2 0 012-2h1V7a5 5 0 015-5z" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/>
-          <circle cx="12" cy="14" r="1.8" fill="currentColor"/>
-          <path d="M12 14v2.5" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/>
-        </svg>
-        <span>Generator</span>
-      </button>
-      <button class="nav-btn" id="nav-alerts" title="Security Alerts">
-        <svg viewBox="0 0 24 24" fill="none" width="20" height="20">
-          <path d="M12 3l8.5 15H3.5L12 3z" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/>
-          <path d="M12 10v4" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/>
-          <circle cx="12" cy="17" r="0.8" fill="currentColor"/>
-        </svg>
-        <span>Alerts</span>
-      </button>
-      <button class="nav-btn" id="nav-account" title="Account">
-        <svg viewBox="0 0 24 24" fill="none" width="20" height="20">
-          <circle cx="12" cy="8" r="4" stroke="currentColor" stroke-width="1.7"/>
-          <path d="M4 20c0-4 3.6-7 8-7s8 3 8 7" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/>
-        </svg>
-        <span>Account</span>
-      </button>
-    </nav>
-
-  </div><!-- /view-vault -->
-
-</div><!-- /app -->
-<script src="../shared/crypto.js"></script>
-<script src="popup.js"></script>
-</body>
 </html>