feat(app): persist customization settings

ui/app.js

@@ -136,6 +136,31 @@ function wireVaultActions() {
   if (button) button.addEventListener('click', saveDemoVault);
 }
 
+async function loadAppConfig() {
+  return invokeOrFallback('load_app_config', { theme_id: 'rabby-light', restore_workspace: true, profiles: [], shortcuts: [] });
+}
+
+async function saveSettings() {
+  const theme = document.getElementById('theme-select').value;
+  const output = document.getElementById('settings-status');
+  output.textContent = 'Saving settings…';
+  try {
+    const tauri = window.__TAURI__?.core;
+    if (!tauri) throw new Error('Tauri bridge unavailable in browser preview');
+    const config = await loadAppConfig();
+    config.theme_id = theme;
+    const saved = await tauri.invoke('save_app_config', { config, path: null });
+    output.textContent = `Saved ${saved.theme_id}`;
+  } catch (error) {
+    output.textContent = String(error);
+  }
+}
+
+function wireSettingsActions() {
+  const button = document.getElementById('save-settings');
+  if (button) button.addEventListener('click', saveSettings);
+}
+
 async function runLocalTerminalCommand() {
   const command = document.getElementById('terminal-command').value;
   const output = document.getElementById('terminal-output');
@@ -168,6 +193,7 @@ async function boot() {
   renderDashboard(dashboard);
   renderFeatures(features);
   wireVaultActions();
+  wireSettingsActions();
   wireTerminalActions();
 }
 

ui/index.html

@@ -120,6 +120,19 @@
             </div>
           </div>
           <div id="settings-summary" class="settings-grid"></div>
+          <div class="settings-form">
+            <p class="eyebrow">Persistent customization</p>
+            <label for="theme-select">Theme</label>
+            <div class="vault-row">
+              <select id="theme-select">
+                <option value="rabby-light">Rabby light</option>
+                <option value="rabby-dark">Rabby dark</option>
+                <option value="rabby-system">System</option>
+              </select>
+              <button id="save-settings" class="secondary" type="button">Save settings</button>
+            </div>
+            <small id="settings-status">Customization persists through the Rust config store.</small>
+          </div>
           <div class="vault-form">
             <p class="eyebrow">Encrypted local state</p>
             <label for="vault-passphrase">Demo vault passphrase</label>

ui/styles.css

@@ -312,3 +312,8 @@ h3 { margin-bottom: 0; font-size: 18px; }
 .terminal-form { margin-top: 18px; display: grid; gap: 12px; }
 .terminal-form input { width: 100%; border: 1px solid #dfe6f6; border-radius: 14px; padding: 12px 14px; color: #253052; background: #f8faff; font: 14px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; }
 .terminal-form pre { min-height: 120px; margin: 0; padding: 16px; border-radius: 18px; color: #b9fbcf; background: #12182b; white-space: pre-wrap; overflow: auto; font: 13px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; }
+
+
+.settings-form { margin-top: 18px; padding-top: 16px; border-top: 1px solid #edf1fb; display: grid; gap: 8px; }
+.settings-form label { color: #62708f; font-weight: 800; }
+.settings-form select { flex: 1; min-width: 0; border: 1px solid #dfe6f6; border-radius: 14px; padding: 11px 12px; color: #253052; background: #f8faff; }