feat(wallet): add encrypted local vault runtime

ui/app.js

@@ -28,7 +28,7 @@ const fallbackDashboard = {
 };
 
 const fallbackFeatures = [
-  ['Create/unlock wallet', 'Password, lock/unlock, encrypted local state', 'Modeled'],
+  ['Create/unlock wallet', 'Password, lock/unlock, encrypted local state', 'RuntimeImplemented'],
   ['Import/create accounts', 'Seed phrase, private key, JSON, watch-only', 'Modeled'],
   ['Multi-chain networks', 'Built-in, custom RPC, testnet, offline chain flags', 'Modeled'],
   ['Portfolio dashboard', 'Balances, NFTs, DeFi positions, activity', 'UiPrototype'],
@@ -117,6 +117,25 @@ function renderFeatures(features) {
   }).join('');
 }
 
+async function saveDemoVault() {
+  const passphrase = document.getElementById('vault-passphrase').value;
+  const output = document.getElementById('vault-status');
+  output.textContent = 'Encrypting demo vault…';
+  try {
+    const tauri = window.__TAURI__?.core;
+    if (!tauri) throw new Error('Tauri bridge unavailable in browser preview');
+    const status = await tauri.invoke('save_demo_wallet_vault', { passphrase, path: null });
+    output.textContent = `Encrypted with ${status.cipher} + ${status.kdf}: ${status.path}`;
+  } catch (error) {
+    output.textContent = String(error);
+  }
+}
+
+function wireVaultActions() {
+  const button = document.getElementById('save-vault');
+  if (button) button.addEventListener('click', saveDemoVault);
+}
+
 async function boot() {
   const [dashboard, features] = await Promise.all([
     invokeOrFallback('wallet_dashboard', fallbackDashboard),
@@ -124,6 +143,7 @@ async function boot() {
   ]);
   renderDashboard(dashboard);
   renderFeatures(features);
+  wireVaultActions();
 }
 
 boot();

ui/index.html

@@ -120,6 +120,15 @@
             </div>
           </div>
           <div id="settings-summary" class="settings-grid"></div>
+          <div class="vault-form">
+            <p class="eyebrow">Encrypted local state</p>
+            <label for="vault-passphrase">Demo vault passphrase</label>
+            <div class="vault-row">
+              <input id="vault-passphrase" type="password" value="correct horse battery staple" />
+              <button id="save-vault" class="secondary" type="button">Save vault</button>
+            </div>
+            <small id="vault-status">AES-256-GCM + Argon2id runtime wired through Tauri.</small>
+          </div>
         </article>
       </section>
 

ui/styles.css

@@ -257,6 +257,34 @@ h3 { margin-bottom: 0; font-size: 18px; }
 }
 .settings-grid span { display: block; color: #7d89a5; font-size: 12px; }
 
+.vault-form {
+  margin-top: 18px;
+  padding-top: 18px;
+  border-top: 1px solid #edf1fb;
+}
+.vault-form label {
+  display: block;
+  margin-bottom: 8px;
+  color: #4a5878;
+  font-weight: 800;
+}
+.vault-row { display: flex; gap: 8px; }
+.vault-row input {
+  min-width: 0;
+  flex: 1;
+  border: 1px solid #dfe6f7;
+  border-radius: 14px;
+  padding: 10px 12px;
+  color: #24345f;
+  background: #f8faff;
+}
+.vault-form small {
+  display: block;
+  margin-top: 10px;
+  color: #7d89a5;
+  overflow-wrap: anywhere;
+}
+
 .feature-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));