save load keys

index.html

@@ -403,8 +403,9 @@ sequenceDiagram
             <p id="keygenStatus" class="status" aria-live="polite">Ready to generate keys</p>
             <span id="keygenSpin" class="loader" hidden aria-label="Generating keys"></span>
           </div>
-          <div style="margin-top: auto;">
-            <button id="btnKeygen" class="btn" aria-describedby="keygenStatus">🔑 Generate keys</button>
+          <div style="display:flex; gap:var(--spacing-unit); margin-top:auto">
+            <button id="btnKeygen"     class="btn" aria-describedby="keygenStatus">🔑 Generate keys</button>
+            <button id="btnLoadSaved"  class="btn" aria-describedby="keygenStatus">🗝️ Load keys</button>
           </div>
         </div>
       </section>

wasm-demo.js

@@ -26,6 +26,22 @@ function uint8ToBase64(uint8) {
     });
 }
 
+// ——— local key cache helpers ——————————————————————————————
+const KEYS_STORAGE_KEY = 'synthid_keys_v1';
+
+/** base64 → Uint8Array (works in all browsers, avoids atob size limits) */
+function base64ToUint8(base64) {
+  const binStr = atob(base64);
+  const len    = binStr.length;
+  const bytes  = new Uint8Array(len);
+  for (let i = 0; i < len; i++) bytes[i] = binStr.charCodeAt(i);
+  return bytes;
+}
+
+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);          }
+
 const $ = id => document.getElementById(id);
 const enable = (id, ok=true) => $(id).disabled = !ok;
 const show = (id, visible=true) => $(id).hidden = !visible;
@@ -55,29 +71,7 @@ show('tokenizerSpin', false);
                 
                 try {
                     // Initialize encryption worker
-                    encryptWorker = new Worker(new URL('./encrypt-worker.js', import.meta.url), { type: 'module' });
-                    encryptWorker.onmessage = function(e) {
-                        if (e.data.type === 'ready') {
-                            console.log('[Main] Encryption worker ready');
-                        } else if (e.data.type === 'success') {
-                            encTokens = e.data.result;
-                            console.log(`[Main] Encryption completed: ${encTokens.length} bytes`);
-                            show('encryptSpin', false);
-                            show('encIcon', true);
-                            enable('btnEncrypt', true);
-                            enable('btnSend');
-                            $('encStatus').textContent = 'Your text is encrypted 🔒';
-                        } else if (e.data.type === 'error') {
-                            console.error('[Main] Encryption error:', e.data.error);
-                            show('encryptSpin', false);
-                            enable('btnEncrypt', true);
-                            $('encStatus').textContent = `Encryption failed: ${e.data.error}`;
-                            alert(`Encryption failed: ${e.data.error}`);
-                        }
-                    };
-                    
-                    // Initialize the worker with the client key
-                    encryptWorker.postMessage({ type: 'init', clientKey });
+                    initEncryptWorkerWithKey(clientKey);
                     
                     console.log('[Main] Sending server key to server...');
                     $('keygenStatus').textContent = 'Keys generated, sending server key...';
@@ -104,6 +98,14 @@ show('tokenizerSpin', false);
                     console.log('[Main] Server key sent and UID received:', sessionUid);
                     $('keygenStatus').textContent = 'Keys generated & UID received ✓';
                     enable('btnEncrypt');
+
+                    // Persist clientKey ⟷ uid for reuse
+                    uint8ToBase64(clientKey)
+                      .then(b64 => {
+                        saveKeyset(sessionUid, b64);
+                        console.log(`[Main] Saved clientKey for uid ${sessionUid} to localStorage`);
+                      })
+                      .catch(err => console.warn('[Main] Failed to save key:', err));
                 } catch (error) {
                     console.error('[Main] Server key submission error:', error);
                     $('keygenStatus').textContent = `Server key submission failed: ${error.message}`;
@@ -140,6 +142,39 @@ $('btnKeygen').onclick = async () => {
     }
 };
 
+$('btnLoadSaved').onclick = async () => {
+  const saved = getSavedKeys();
+  const ids   = Object.keys(saved);
+  if (!ids.length) {
+    alert('No saved keys found on this machine.');
+    return;
+  }
+
+  // Very lightweight UI: ask which uid to use
+  const uid = prompt(
+    `Saved key sets:\n${ids.join('\n')}\n\nEnter the uid you want to use:`,
+    ids[0]
+  );
+  if (!uid || !saved[uid]) {
+    alert('Invalid or unknown uid.');
+    return;
+  }
+
+  try {
+    sessionUid = uid;
+    clientKey  = base64ToUint8(saved[uid]);
+
+    // Make sure we have an encryption worker ready
+    initEncryptWorkerWithKey(clientKey);
+
+    $('keygenStatus').textContent = `Loaded saved keys for ${uid} ✓`;
+    enable('btnEncrypt');
+  } catch (err) {
+    console.error('[Main] Failed to load key:', err);
+    alert(`Failed to load saved key: ${err.message}`);
+  }
+};
+
 // Add token counter functionality
 $('tokenInput').addEventListener('input', () => {
     const text = $('tokenInput').value.trim();
@@ -361,4 +396,30 @@ $('btnDecrypt').onclick = () => {
         console.error('[Main] Decryption error:', e);
         $('decResult').textContent = `Decryption failed: ${e.message}`;
     }
-};
+};
+
+function encryptWorker_onmessage(e) {
+  if (e.data.type === 'ready') {
+    console.log('[Main] Encryption worker ready');
+  } else if (e.data.type === 'success') {
+    encTokens = e.data.result;
+    console.log(`[Main] Encryption completed: ${encTokens.length} bytes`);
+    show('encryptSpin', false);
+    show('encIcon', true);
+    enable('btnEncrypt', true);
+    enable('btnSend');
+    $('encStatus').textContent = 'Your text is encrypted 🔒';
+  } else if (e.data.type === 'error') {
+    console.error('[Main] Encryption error:', e.data.error);
+    show('encryptSpin', false);
+    enable('btnEncrypt', true);
+    $('encStatus').textContent = `Encryption failed: ${e.data.error}`;
+    alert(`Encryption failed: ${e.data.error}`);
+  }
+}
+
+function initEncryptWorkerWithKey(keyUint8) {
+  encryptWorker = new Worker(new URL('./encrypt-worker.js', import.meta.url), { type: 'module' });
+  encryptWorker.onmessage = encryptWorker_onmessage;
+  encryptWorker.postMessage({ type: 'init', clientKey: keyUint8 });
+}