From 6bb7dedc3ea3b08862b03708e5e1f12d490d576c Mon Sep 17 00:00:00 2001
From: adlee-was-taken <aaron.daniel.lee@gmail.com>
Date: Sun, 3 May 2026 21:14:30 -0400
Subject: [PATCH] feat(ext/settings): generator section (vault defaults)

---
 extension/src/popup/components/settings.ts | 38 ++++++++++++++++++++--
 1 file changed, 36 insertions(+), 2 deletions(-)

diff --git a/extension/src/popup/components/settings.ts b/extension/src/popup/components/settings.ts
index 990a845..ad67579 100644
--- a/extension/src/popup/components/settings.ts
+++ b/extension/src/popup/components/settings.ts
@@ -6,7 +6,7 @@ import {
   DEFAULT_DIGIT_COLOR, DEFAULT_SYMBOL_COLOR,
 } from '../../shared/color-scheme';
 import { colorizePassword } from '../../shared/password-coloring';
-import { openGeneratorPanel, closeGeneratorPanel } from './generator-panel';
+import { openGeneratorPanel, closeGeneratorPanel, isGeneratorPanelOpen } from './generator-panel';
 import { renderSecuritySection, teardownSecuritySection } from './settings-security';
 
 type SettingsSection =
@@ -242,7 +242,41 @@ async function renderDisplaySection(content: HTMLElement): Promise<void> {
 }
 
 async function renderGeneratorSection(content: HTMLElement): Promise<void> {
-  content.innerHTML = '<p class="muted" style="padding:20px;font-size:12px;">Generator — coming soon</p>';
+  content.innerHTML = '<p class="muted" style="padding:20px;font-size:12px;">Loading…</p>';
+  const resp = await sendMessage({ type: 'get_vault_settings' });
+  if (!resp.ok) {
+    const errorMsg = (resp as { ok: false; error: string }).error;
+    content.innerHTML = `<p class="muted" style="padding:20px;">Failed to load: ${escapeHtml(errorMsg)}</p>`;
+    return;
+  }
+  const settings = (resp.data as { settings: VaultSettings }).settings;
+
+  content.innerHTML = `
+    <h3 class="settings-section-title">Generator defaults</h3>
+    <div class="setting-row">
+      <div class="setting-row__info">
+        <div class="setting-row__title">Configure generator</div>
+        <div class="setting-row__desc">Password length, character classes, passphrase word count.</div>
+      </div>
+      <div class="setting-row__control">
+        <button class="btn" id="open-generator-panel" style="font-size:11px;">Configure ▸</button>
+      </div>
+    </div>
+  `;
+
+  document.getElementById('open-generator-panel')?.addEventListener('click', (e) => {
+    const trigger = e.currentTarget as HTMLElement;
+    if (isGeneratorPanelOpen()) {
+      closeGeneratorPanel();
+      return;
+    }
+    openGeneratorPanel({
+      parent: content,
+      trigger,
+      initial: settings.generator_defaults,
+      context: 'configure-defaults',
+    });
+  });
 }
 
 async function renderRetentionSection(content: HTMLElement): Promise<void> {