add clear keys from storage

index.html

@@ -227,6 +227,22 @@
       cursor: not-allowed; 
     }
 
+    .btn-discrete {
+      background: transparent;
+      border: 1px solid var(--grey-200);
+      min-width: auto;
+      padding: calc(var(--spacing-unit) * 1) calc(var(--spacing-unit) * 1.5);
+      font-size: 0.9rem;
+      opacity: 0.7;
+      transition: all 0.2s ease;
+    }
+    
+    .btn-discrete:hover:not(:disabled) {
+      background: var(--grey-100);
+      opacity: 1;
+      border-color: var(--grey-300);
+    }
+
     .status { 
       font-size: 1.2rem; 
       color: var(--black);
@@ -397,9 +413,10 @@
             <p id="keygenStatus" class="status" aria-live="polite">Generate new keys and send them to the server (requires a 130MB upload). Keys can then be loaded (instantly).</p>
             <span id="keygenSpin" class="loader" hidden aria-label="Generating keys"></span>
           </div>
-          <div style="display:flex; gap:var(--spacing-unit); margin-top:auto">
+          <div style="display:flex; gap:var(--spacing-unit); margin-top:auto; flex-wrap: wrap;">
             <button id="btnKeygen"     class="btn" aria-describedby="keygenStatus">🔑 Generate new keys</button>
             <button id="btnLoadSaved"  class="btn" aria-describedby="keygenStatus">🗝️ Load saved keys</button>
+            <button id="btnDeleteKeys" class="btn btn-discrete" aria-describedby="keygenStatus">🗑️ Delete saved keys</button>
           </div>
         </div>
       </section>

wasm-demo.js

@@ -43,6 +43,7 @@ function base64ToUint8(base64) {
 function getSavedKeys()      { return JSON.parse(localStorage.getItem(KEYS_STORAGE_KEY) || '{}'); }
 function saveKeys(map)       { localStorage.setItem(KEYS_STORAGE_KEY, JSON.stringify(map)); }
 function saveKeyset(uid, b64){ const m = getSavedKeys(); m[uid] = b64; saveKeys(m);          }
+function clearAllKeys()      { localStorage.removeItem(KEYS_STORAGE_KEY);                    }
 
 const $ = id => document.getElementById(id);
 const enable = (id, ok=true) => $(id).disabled = !ok;
@@ -177,6 +178,31 @@ $('btnLoadSaved').onclick = async () => {
   }
 };
 
+$('btnDeleteKeys').onclick = async () => {
+  const saved = getSavedKeys();
+  const ids = Object.keys(saved);
+  
+  if (!ids.length) {
+    alert('No saved keys found on this machine.');
+    return;
+  }
+
+  const confirmed = confirm(
+    `Are you sure you want to delete all saved keys?\n\nThis will remove ${ids.length} saved key set(s):\n${ids.join('\n')}\n\nThis action cannot be undone.`
+  );
+  
+  if (confirmed) {
+    try {
+      clearAllKeys();
+      console.log('[Main] All saved keys deleted');
+      alert('All saved keys have been deleted.');
+    } catch (err) {
+      console.error('[Main] Failed to delete keys:', err);
+      alert(`Failed to delete keys: ${err.message}`);
+    }
+  }
+};
+
 // Add example text buttons
 $('btnWatermarked').onclick = () => {
     $('tokenInput').value = 'watermarking is useful for a variety of reasons like authentication, privacy';