`:
+
+- `login.ts`: `${renderSections(item, 'login')}` before form-actions.
+- `secure-note.ts`: `${renderSections(item, 'secure-note')}` before form-actions.
+- `identity.ts`: `${renderSections(item, 'identity')}` before form-actions.
+- `card.ts`: `${renderSections(item, 'card')}` before form-actions.
+- `key.ts`: `${renderSections(item, 'key')}` before form-actions.
+- `totp.ts`: `${renderSections(item, 'totp')}` before form-actions.
+
+Each module's `wireFieldHandlers(app)` call (already present at the bottom of each `renderDetail`) picks up the new rows automatically.
+
+- [ ] **Step 3: Verify build + tests still pass**
+
+```bash
+cd extension && bun run build 2>&1 | tail -3
+cd extension && bun run test 2>&1 | grep -E "Tests|Test Files" | tail -3
+```
+
+Expected: build clean; 91 tests pass (unchanged — no new tests, just integration).
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add extension/src/popup/components/types/*.ts
+git commit -m "feat(ext/popup): render custom sections in all 6 type detail views"
+```
+
+---
+
+## Slice 2 — Custom-fields edit rendering
+
+### Task 3: Add `renderSectionsEditor` + `generateFieldId` helpers + tests
+
+**Files:**
+- Modify: `extension/src/popup/components/fields.ts`
+- Modify: `extension/src/popup/components/__tests__/sections-render.test.ts` (or add a new `sections-editor.test.ts`)
+- Modify: `extension/src/popup/styles.css`
+
+- [ ] **Step 1: Write the failing tests**
+
+Create `extension/src/popup/components/__tests__/sections-editor.test.ts`:
+
+```ts
+import { describe, expect, it, vi } from 'vitest';
+import { renderSectionsEditor, generateFieldId, wireSectionsEditor } from '../fields';
+import type { Section } from '../../../shared/types';
+
+describe('generateFieldId', () => {
+ it('returns 16 hex chars', () => {
+ const id = generateFieldId();
+ expect(id).toMatch(/^[0-9a-f]{16}$/);
+ });
+ it('returns unique values on successive calls', () => {
+ const ids = new Set(Array.from({ length: 50 }, () => generateFieldId()));
+ expect(ids.size).toBe(50);
+ });
+});
+
+describe('renderSectionsEditor', () => {
+ it('shows the disclosure toggle with the correct count', () => {
+ const sections: Section[] = [
+ { name: 'a', fields: [
+ { id: 'f0', label: 'l', kind: 'text', value: { kind: 'text', value: 'v' }, hidden_by_default: false },
+ { id: 'f1', label: 'l', kind: 'password', value: { kind: 'password', value: 'p' }, hidden_by_default: true },
+ ] },
+ { fields: [
+ { id: 'f2', label: 'l', kind: 'concealed', value: { kind: 'concealed', value: 'c' }, hidden_by_default: true },
+ ] },
+ ];
+ const html = renderSectionsEditor(sections, false);
+ expect(html).toContain('2 sections');
+ expect(html).toContain('3 fields');
+ expect(html).toContain('data-expanded="false"');
+ });
+
+ it('shows singular "1 section / 1 field" when applicable', () => {
+ const sections: Section[] = [
+ { name: 'only', fields: [
+ { id: 'f0', label: 'l', kind: 'text', value: { kind: 'text', value: 'v' }, hidden_by_default: false },
+ ] },
+ ];
+ const html = renderSectionsEditor(sections, false);
+ expect(html).toContain('1 section');
+ expect(html).toContain('1 field');
+ expect(html).not.toContain('1 sections');
+ expect(html).not.toContain('1 fields');
+ });
+
+ it('renders expanded body when expanded=true', () => {
+ const html = renderSectionsEditor([], true);
+ expect(html).toContain('data-expanded="true"');
+ expect(html).toContain('add section');
+ });
+});
+
+describe('wireSectionsEditor', () => {
+ it('toggle click flips data-expanded', () => {
+ document.body.innerHTML = renderSectionsEditor([], false);
+ const sections: Section[] = [];
+ const rerender = vi.fn();
+ wireSectionsEditor(document.body, sections, rerender);
+ const toggle = document.querySelector('.disclosure__toggle') as HTMLButtonElement;
+ toggle.click();
+ const disclosure = document.querySelector('.disclosure') as HTMLElement;
+ expect(disclosure.getAttribute('data-expanded')).toBe('true');
+ });
+
+ it('add-section click appends an empty section', () => {
+ const sections: Section[] = [];
+ document.body.innerHTML = renderSectionsEditor(sections, true);
+ const rerender = vi.fn();
+ wireSectionsEditor(document.body, sections, rerender);
+ const addBtn = document.querySelector('.add-section') as HTMLButtonElement;
+ addBtn.click();
+ expect(sections).toHaveLength(1);
+ expect(sections[0]).toEqual({ name: undefined, fields: [] });
+ expect(rerender).toHaveBeenCalled();
+ });
+
+ it('add-text-field click on a section pushes a text field', () => {
+ const sections: Section[] = [{ name: undefined, fields: [] }];
+ document.body.innerHTML = renderSectionsEditor(sections, true);
+ const rerender = vi.fn();
+ wireSectionsEditor(document.body, sections, rerender);
+ const addText = document.querySelector('[data-add-field="text"][data-section-idx="0"]') as HTMLButtonElement;
+ addText.click();
+ expect(sections[0].fields).toHaveLength(1);
+ expect(sections[0].fields[0].kind).toBe('text');
+ expect(sections[0].fields[0].value.kind).toBe('text');
+ expect(sections[0].fields[0].value.value).toBe('');
+ expect(sections[0].fields[0].hidden_by_default).toBe(false);
+ expect(sections[0].fields[0].id).toMatch(/^[0-9a-f]{16}$/);
+ });
+
+ it('add-password-field sets hidden_by_default=true', () => {
+ const sections: Section[] = [{ name: undefined, fields: [] }];
+ document.body.innerHTML = renderSectionsEditor(sections, true);
+ wireSectionsEditor(document.body, sections, vi.fn());
+ (document.querySelector('[data-add-field="password"][data-section-idx="0"]') as HTMLButtonElement).click();
+ expect(sections[0].fields[0].hidden_by_default).toBe(true);
+ expect(sections[0].fields[0].kind).toBe('password');
+ });
+
+ it('remove-field button splices field', () => {
+ const sections: Section[] = [{ name: undefined, fields: [
+ { id: 'f0', label: 'a', kind: 'text', value: { kind: 'text', value: '' }, hidden_by_default: false },
+ { id: 'f1', label: 'b', kind: 'text', value: { kind: 'text', value: '' }, hidden_by_default: false },
+ ] }];
+ document.body.innerHTML = renderSectionsEditor(sections, true);
+ wireSectionsEditor(document.body, sections, vi.fn());
+ const deleteBtn = document.querySelector('[data-delete-field="0-0"]') as HTMLButtonElement;
+ deleteBtn.click();
+ expect(sections[0].fields).toHaveLength(1);
+ expect(sections[0].fields[0].id).toBe('f1');
+ });
+
+ it('remove-section button splices section (after confirm)', () => {
+ const confirmSpy = vi.spyOn(window, 'confirm').mockReturnValue(true);
+ const sections: Section[] = [
+ { name: 'to-remove', fields: [] },
+ { name: 'keep', fields: [] },
+ ];
+ document.body.innerHTML = renderSectionsEditor(sections, true);
+ wireSectionsEditor(document.body, sections, vi.fn());
+ (document.querySelector('[data-remove-section="0"]') as HTMLButtonElement).click();
+ expect(sections).toHaveLength(1);
+ expect(sections[0].name).toBe('keep');
+ confirmSpy.mockRestore();
+ });
+
+ it('remove-section cancelled confirm leaves section intact', () => {
+ const confirmSpy = vi.spyOn(window, 'confirm').mockReturnValue(false);
+ const sections: Section[] = [{ name: 'stays', fields: [] }];
+ document.body.innerHTML = renderSectionsEditor(sections, true);
+ wireSectionsEditor(document.body, sections, vi.fn());
+ (document.querySelector('[data-remove-section="0"]') as HTMLButtonElement).click();
+ expect(sections).toHaveLength(1);
+ confirmSpy.mockRestore();
+ });
+
+ it('label input change mutates section field label in place (no rerender)', () => {
+ const sections: Section[] = [{ name: undefined, fields: [
+ { id: 'f0', label: 'old', kind: 'text', value: { kind: 'text', value: '' }, hidden_by_default: false },
+ ] }];
+ document.body.innerHTML = renderSectionsEditor(sections, true);
+ const rerender = vi.fn();
+ wireSectionsEditor(document.body, sections, rerender);
+ const labelInput = document.querySelector('[data-field-label="0-0"]') as HTMLInputElement;
+ labelInput.value = 'new';
+ labelInput.dispatchEvent(new Event('input', { bubbles: true }));
+ expect(sections[0].fields[0].label).toBe('new');
+ // rerender NOT called on input (would steal focus)
+ expect(rerender).not.toHaveBeenCalled();
+ });
+
+ it('value input change mutates section field value in place', () => {
+ const sections: Section[] = [{ name: undefined, fields: [
+ { id: 'f0', label: 'l', kind: 'text', value: { kind: 'text', value: 'old' }, hidden_by_default: false },
+ ] }];
+ document.body.innerHTML = renderSectionsEditor(sections, true);
+ wireSectionsEditor(document.body, sections, vi.fn());
+ const valueInput = document.querySelector('[data-field-value-input="0-0"]') as HTMLInputElement;
+ valueInput.value = 'new';
+ valueInput.dispatchEvent(new Event('input', { bubbles: true }));
+ expect(sections[0].fields[0].value).toEqual({ kind: 'text', value: 'new' });
+ });
+});
+```
+
+- [ ] **Step 2: Run — tests fail**
+
+```bash
+cd extension && bun run test src/popup/components/__tests__/sections-editor.test.ts 2>&1 | tail -10
+```
+
+Expected: import errors for `renderSectionsEditor`, `generateFieldId`, `wireSectionsEditor`.
+
+- [ ] **Step 3: Add the helpers to `fields.ts`**
+
+Append to `extension/src/popup/components/fields.ts`:
+
+```ts
+import type { Field, FieldValue } from '../../shared/types';
+
+/// 16-char hex FieldId. crypto.getRandomValues for 8 bytes.
+export function generateFieldId(): string {
+ const bytes = new Uint8Array(8);
+ crypto.getRandomValues(bytes);
+ return Array.from(bytes).map((b) => b.toString(16).padStart(2, '0')).join('');
+}
+
+function makeField(kind: 'text' | 'password' | 'concealed'): Field {
+ const value: FieldValue = { kind, value: '' };
+ return {
+ id: generateFieldId(),
+ label: 'new field',
+ kind,
+ value,
+ hidden_by_default: kind !== 'text',
+ };
+}
+
+/// Render the collapsible custom-sections editor. Returns HTML for the
+/// disclosure toggle + body. The expanded-state is owned externally
+/// (via a module-scope flag in the caller); this helper reads it as
+/// the `expanded` parameter.
+export function renderSectionsEditor(sections: Section[], expanded: boolean): string {
+ const sectionCount = sections.length;
+ const fieldCount = sections.reduce((sum, s) => sum + s.fields.length, 0);
+ const sectionLabel = sectionCount === 1 ? '1 section' : `${sectionCount} sections`;
+ const fieldLabel = fieldCount === 1 ? '1 field' : `${fieldCount} fields`;
+ const summary = sectionCount === 0 && fieldCount === 0
+ ? 'no custom fields'
+ : `${sectionLabel}, ${fieldLabel}`;
+
+ const body = sections.map((section, sIdx) => renderSectionBlock(section, sIdx)).join('');
+
+ return `
+
+
+
+ ${body}
+
+
+
+ `;
+}
+
+function renderSectionBlock(section: Section, sIdx: number): string {
+ const nameDisplay = section.name
+ ? `
${escapeHtml(section.name)}`
+ : `
(anonymous)`;
+
+ const fieldsHtml = section.fields.map((f, fIdx) => renderEditorField(f, sIdx, fIdx)).join('');
+
+ return `
+
+
+ ${nameDisplay}
+
+
+
+
+
+ ${fieldsHtml}
+
+
+
+
+
+
+ `;
+}
+
+function renderEditorField(field: Field, sIdx: number, fIdx: number): string {
+ const valueStr = (field.value.kind === 'text' || field.value.kind === 'password' || field.value.kind === 'concealed')
+ ? field.value.value
+ : '';
+ const inputType = field.kind === 'text' ? 'text' : 'password';
+ const key = `${sIdx}-${fIdx}`;
+ return `
+
+
+
+
+
+ `;
+}
+
+/// Wire click + input handlers on a rendered sections-editor. Mutations
+/// happen in place on `sectionsDraft`. `rerender` is called after any
+/// structural change (add/remove) to regenerate the disclosure body;
+/// label/value edits do NOT trigger rerender (would steal focus).
+export function wireSectionsEditor(
+ scope: HTMLElement,
+ sectionsDraft: Section[],
+ rerender: () => void,
+): void {
+ // Disclosure toggle
+ const toggle = scope.querySelector('.disclosure__toggle') as HTMLButtonElement | null;
+ const disclosure = scope.querySelector('.disclosure') as HTMLElement | null;
+ toggle?.addEventListener('click', () => {
+ if (!disclosure) return;
+ const expanded = disclosure.getAttribute('data-expanded') === 'true';
+ disclosure.setAttribute('data-expanded', expanded ? 'false' : 'true');
+ });
+
+ // Add section
+ scope.querySelector('.add-section')?.addEventListener('click', () => {
+ sectionsDraft.push({ name: undefined, fields: [] });
+ rerender();
+ });
+
+ // Rename section
+ scope.querySelectorAll
('[data-rename-section]').forEach((btn) => {
+ btn.addEventListener('click', () => {
+ const sIdx = Number(btn.dataset.renameSection);
+ const current = sectionsDraft[sIdx]?.name ?? '';
+ const name = window.prompt('Section name (empty for none):', current);
+ if (name === null) return; // user cancelled
+ const trimmed = name.trim();
+ sectionsDraft[sIdx].name = trimmed || undefined;
+ rerender();
+ });
+ });
+
+ // Remove section
+ scope.querySelectorAll('[data-remove-section]').forEach((btn) => {
+ btn.addEventListener('click', () => {
+ const sIdx = Number(btn.dataset.removeSection);
+ const name = sectionsDraft[sIdx]?.name ?? '(anonymous)';
+ if (!window.confirm(`Remove section "${name}" and all its fields?`)) return;
+ sectionsDraft.splice(sIdx, 1);
+ rerender();
+ });
+ });
+
+ // Add field
+ scope.querySelectorAll('[data-add-field]').forEach((btn) => {
+ btn.addEventListener('click', () => {
+ const sIdx = Number(btn.dataset.sectionIdx);
+ const kind = btn.dataset.addField as 'text' | 'password' | 'concealed';
+ sectionsDraft[sIdx].fields.push(makeField(kind));
+ rerender();
+ });
+ });
+
+ // Delete field
+ scope.querySelectorAll('[data-delete-field]').forEach((btn) => {
+ btn.addEventListener('click', () => {
+ const [sIdxStr, fIdxStr] = (btn.dataset.deleteField ?? '0-0').split('-');
+ const sIdx = Number(sIdxStr);
+ const fIdx = Number(fIdxStr);
+ sectionsDraft[sIdx].fields.splice(fIdx, 1);
+ rerender();
+ });
+ });
+
+ // Label + value inputs (mutate in place, no rerender)
+ scope.querySelectorAll('[data-field-label]').forEach((input) => {
+ input.addEventListener('input', () => {
+ const [sIdxStr, fIdxStr] = (input.dataset.fieldLabel ?? '0-0').split('-');
+ const sIdx = Number(sIdxStr);
+ const fIdx = Number(fIdxStr);
+ if (sectionsDraft[sIdx]?.fields[fIdx]) {
+ sectionsDraft[sIdx].fields[fIdx].label = input.value;
+ }
+ });
+ });
+
+ scope.querySelectorAll('[data-field-value-input]').forEach((input) => {
+ input.addEventListener('input', () => {
+ const [sIdxStr, fIdxStr] = (input.dataset.fieldValueInput ?? '0-0').split('-');
+ const sIdx = Number(sIdxStr);
+ const fIdx = Number(fIdxStr);
+ const field = sectionsDraft[sIdx]?.fields[fIdx];
+ if (!field) return;
+ // FieldValue is tagged; mutate the `value` field while preserving `kind`.
+ const kind = field.value.kind as 'text' | 'password' | 'concealed';
+ field.value = { kind, value: input.value };
+ });
+ });
+}
+```
+
+- [ ] **Step 4: Add CSS**
+
+Append to `extension/src/popup/styles.css`:
+
+```css
+/* --- custom-section editor (β₂ slice 2) --- */
+.disclosure {
+ border-top: 1px solid #21262d;
+ margin-top: 14px;
+ padding-top: 10px;
+}
+.disclosure__toggle {
+ background: transparent; border: 0; color: #58a6ff;
+ cursor: pointer; font-size: 12px; padding: 0;
+ font-family: inherit;
+}
+.disclosure[data-expanded="false"] .disclosure__body { display: none; }
+
+.section-editor__head {
+ display: flex; align-items: baseline; gap: 8px;
+ margin-top: 10px; margin-bottom: 4px;
+ font-size: 11px;
+}
+.section-editor__head .name { color: #c9d1d9; font-weight: 600; }
+.section-editor__head .name.anon { color: #8b949e; font-style: italic; font-weight: normal; }
+.section-editor__head .actions { color: #8b949e; font-size: 10px; margin-left: auto; }
+.section-editor__head .actions button {
+ background: transparent; border: 0; color: inherit;
+ cursor: pointer; padding: 0; margin-left: 8px;
+ font: inherit;
+}
+.section-editor__head .actions button:hover { color: #c9d1d9; }
+
+.section-editor__field {
+ display: grid; grid-template-columns: 120px 1fr auto;
+ gap: 4px; margin-bottom: 4px; font-size: 11px;
+}
+.section-editor__field input {
+ background: #0d1117; border: 1px solid #30363d; color: #c9d1d9;
+ padding: 3px 6px; border-radius: 3px; font: inherit; font-size: 11px;
+}
+.section-editor__field .delete-field {
+ background: transparent; border: 0; color: #f85149;
+ cursor: pointer; font-size: 14px; padding: 0 4px;
+}
+
+.section-editor__add {
+ display: flex; gap: 6px; margin-top: 6px;
+}
+.section-editor__add button {
+ background: transparent; border: 1px solid #30363d; color: #8b949e;
+ padding: 2px 10px; border-radius: 3px; cursor: pointer;
+ font-size: 10px; font-family: inherit;
+}
+.section-editor__add button:hover { color: #c9d1d9; border-color: #484f58; }
+
+.disclosure__body .add-section {
+ margin-top: 12px; background: transparent;
+ border: 1px dashed #30363d; color: #8b949e;
+ padding: 6px 10px; border-radius: 4px; cursor: pointer;
+ width: 100%; font-size: 11px; font-family: inherit;
+}
+.disclosure__body .add-section:hover { border-color: #484f58; color: #c9d1d9; }
+```
+
+- [ ] **Step 5: Re-run tests — should pass**
+
+```bash
+cd extension && bun run test 2>&1 | grep -E "Tests|Test Files" | tail -3
+```
+
+Expected: 91 + ~13 = 104 tests pass.
+
+- [ ] **Step 6: Commit**
+
+```bash
+cd /home/alee/Sources/relicario/.worktrees/typed-items-1c-beta2
+git add extension/src/popup/components/fields.ts \
+ extension/src/popup/components/__tests__/sections-editor.test.ts \
+ extension/src/popup/styles.css
+git commit -m "feat(ext/popup): renderSectionsEditor + wireSectionsEditor helpers"
+```
+
+### Task 4: Integrate section editor into all 6 type forms
+
+**Files:**
+- Modify: `extension/src/popup/components/types/login.ts`
+- Modify: `extension/src/popup/components/types/secure-note.ts`
+- Modify: `extension/src/popup/components/types/identity.ts`
+- Modify: `extension/src/popup/components/types/card.ts`
+- Modify: `extension/src/popup/components/types/key.ts`
+- Modify: `extension/src/popup/components/types/totp.ts`
+
+Each of the 6 type modules gets 5 consistent edits. Apply the same pattern to each file:
+
+- [ ] **Step 1: Add imports + module-scope state to each type module**
+
+For each file, extend the `fields` import to include `renderSectionsEditor`, `wireSectionsEditor`:
+
+```ts
+import {
+ renderRow, renderConcealedRow, renderSignatureBlock,
+ wireFieldHandlers, renderSections,
+ renderSectionsEditor, wireSectionsEditor,
+} from '../fields';
+import type { Section } from '../../../shared/types';
+```
+
+Add module-scope state near the existing `activeKeyHandler`:
+
+```ts
+let sectionsExpanded = false;
+```
+
+Extend `teardown()` to reset the expanded flag:
+
+```ts
+export function teardown(): void {
+ // ... existing cleanup ...
+ sectionsExpanded = false;
+}
+```
+
+- [ ] **Step 2: Initialize the draft in each `renderForm`**
+
+Near the top of each `renderForm`, after reading `existing`:
+
+```ts
+const sectionsDraft: Section[] = existing
+ ? JSON.parse(JSON.stringify(existing.sections)) as Section[]
+ : [];
+```
+
+- [ ] **Step 3: Insert `renderSectionsEditor` + wire call into each form**
+
+Find the place in each form's HTML template just before the `` row. Insert:
+
+```ts
+${renderSectionsEditor(sectionsDraft, sectionsExpanded)}
+```
+
+After `app.innerHTML = ...`, add a `rerender` closure and call `wireSectionsEditor`:
+
+```ts
+const rerender = (): void => {
+ const disclosure = app.querySelector('.disclosure');
+ if (!disclosure) return;
+ // Preserve expanded state across rerender.
+ sectionsExpanded = disclosure.getAttribute('data-expanded') === 'true';
+ disclosure.outerHTML = renderSectionsEditor(sectionsDraft, sectionsExpanded);
+ wireSectionsEditor(app, sectionsDraft, rerender);
+};
+wireSectionsEditor(app, sectionsDraft, rerender);
+```
+
+- [ ] **Step 4: Wire the save path**
+
+Find each module's `save*` function (`saveLogin`, `saveSecureNote`, etc.) and locate the `Item` construction:
+
+```ts
+const item: Item = {
+ // ...
+ sections: existing?.sections ?? [], // ← replace this line
+ // ...
+};
+```
+
+Replace `sections: existing?.sections ?? []` with `sections: sectionsDraft`. Since `sectionsDraft` is deep-cloned from `existing.sections` (or empty for add), mutations through the editor don't affect `existing`.
+
+- [ ] **Step 5: Verify build + tests**
+
+```bash
+cd extension && bun run build 2>&1 | tail -3
+cd extension && bun run test 2>&1 | grep -E "Tests|Test Files" | tail -3
+```
+
+Expected: build clean; 104 tests still pass (no new tests yet — save-shape tests for the editor piggyback on existing per-type save-shape tests in the next step).
+
+- [ ] **Step 6: Add a per-type save-shape smoke test**
+
+Create `extension/src/popup/components/types/__tests__/sections-save.test.ts`:
+
+```ts
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+vi.mock('../../../popup', async () => {
+ const navigate = vi.fn();
+ const setState = vi.fn();
+ const sendMessage = vi.fn();
+ const getState = vi.fn(() => ({
+ view: 'add', entries: [], selectedId: null, selectedItem: null, selectedIndex: 0,
+ searchQuery: '', activeGroup: null, error: null, loading: false,
+ capturedTabId: null, capturedUrl: '', newType: 'login',
+ vaultSettings: null, generatorDefaults: null,
+ }));
+ const escapeHtml = (s: string) => s
+ .replace(/&/g, '&').replace(//g, '>')
+ .replace(/"/g, '"').replace(/'/g, ''');
+ return { navigate, setState, sendMessage, getState, escapeHtml };
+});
+
+import { renderForm } from '../login';
+import { sendMessage } from '../../../popup';
+
+describe('Login form packs sectionsDraft into Item.sections', () => {
+ beforeEach(() => {
+ document.body.innerHTML = '
';
+ vi.mocked(sendMessage).mockReset();
+ vi.mocked(sendMessage).mockResolvedValue({ ok: true, data: { id: 'fakeid0000000000', items: [] } });
+ });
+
+ it('persists added sections and fields', async () => {
+ const app = document.getElementById('app')!;
+ renderForm(app, 'add', null);
+
+ (document.getElementById('f-title') as HTMLInputElement).value = 'Example';
+
+ // Open disclosure + add section + add text field
+ (document.querySelector('.disclosure__toggle') as HTMLButtonElement).click();
+ (document.querySelector('.add-section') as HTMLButtonElement).click();
+ (document.querySelector('[data-add-field="text"]') as HTMLButtonElement).click();
+
+ // Populate the new field's label + value
+ const labelInput = document.querySelector('[data-field-label="0-0"]') as HTMLInputElement;
+ labelInput.value = 'recovery email';
+ labelInput.dispatchEvent(new Event('input', { bubbles: true }));
+ const valueInput = document.querySelector('[data-field-value-input="0-0"]') as HTMLInputElement;
+ valueInput.value = 'backup@example.com';
+ valueInput.dispatchEvent(new Event('input', { bubbles: true }));
+
+ document.getElementById('save-btn')!.click();
+ await new Promise((r) => setTimeout(r, 5));
+
+ const calls = vi.mocked(sendMessage).mock.calls;
+ const addCall = calls.find(([msg]) => (msg as { type: string }).type === 'add_item');
+ const msg = addCall![0] as { type: 'add_item'; item: any };
+ expect(msg.item.sections).toHaveLength(1);
+ expect(msg.item.sections[0].fields).toHaveLength(1);
+ expect(msg.item.sections[0].fields[0].label).toBe('recovery email');
+ expect(msg.item.sections[0].fields[0].value).toEqual({ kind: 'text', value: 'backup@example.com' });
+ expect(msg.item.sections[0].fields[0].id).toMatch(/^[0-9a-f]{16}$/);
+ });
+});
+```
+
+- [ ] **Step 7: Run + commit**
+
+```bash
+cd extension && bun run test 2>&1 | grep -E "Tests|Test Files" | tail -3
+cd extension && bun run build 2>&1 | tail -3
+```
+
+Expected: 104 + 1 = 105 tests; build clean.
+
+```bash
+cd /home/alee/Sources/relicario/.worktrees/typed-items-1c-beta2
+git add extension/src/popup/components/types/*.ts \
+ extension/src/popup/components/types/__tests__/sections-save.test.ts
+git commit -m "feat(ext/popup): wire custom-field editor into all 6 type forms"
+```
+
+---
+
+## Slice 3 — Vault-settings SW plumbing
+
+### Task 5: Tighten `VaultSettings` TS types
+
+**Files:**
+- Modify: `extension/src/shared/types.ts`
+
+- [ ] **Step 1: Replace the opaque VaultSettings definition**
+
+Find the existing `VaultSettings` interface in `shared/types.ts`:
+
+```ts
+export interface VaultSettings {
+ trash_retention: unknown;
+ field_history_retention: unknown;
+ generator_defaults: unknown;
+ attachment_caps: unknown;
+ autofill_origin_acks: Record
;
+}
+```
+
+Replace with tightened types (keeping `attachment_caps` opaque since γ owns it):
+
+```ts
+export type TrashRetention =
+ | { kind: 'forever' }
+ | { kind: 'days'; value: number };
+
+export type HistoryRetention =
+ | { kind: 'forever' }
+ | { kind: 'last_n'; value: number }
+ | { kind: 'days'; value: number };
+
+export interface VaultSettings {
+ trash_retention: TrashRetention;
+ field_history_retention: HistoryRetention;
+ generator_defaults: GeneratorRequest;
+ attachment_caps: unknown; // opaque — γ tightens
+ autofill_origin_acks: Record;
+}
+```
+
+Note: `GeneratorRequest` is already exported from this file. `attachment_caps` stays `unknown` — γ will refine.
+
+- [ ] **Step 2: Verify build**
+
+```bash
+cd extension && bun run build 2>&1 | tail -3
+```
+
+Expected: clean. No caller tightens consumption of `trash_retention` / `field_history_retention` / `generator_defaults` yet — all downstream reads happen in β₂ slices 3–5 which add those consumers.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add extension/src/shared/types.ts
+git commit -m "feat(ext/shared): tighten VaultSettings types for retention + generator_defaults"
+```
+
+### Task 6: Add `get_vault_settings` + `update_vault_settings` messages + handlers + router tests
+
+**Files:**
+- Modify: `extension/src/shared/messages.ts`
+- Modify: `extension/src/service-worker/router/popup-only.ts`
+- Modify: `extension/src/service-worker/router/__tests__/router.test.ts`
+
+- [ ] **Step 1: Add message types**
+
+In `extension/src/shared/messages.ts`, add to the `PopupMessage` union:
+
+```ts
+ | { type: 'get_vault_settings' }
+ | { type: 'update_vault_settings'; settings: VaultSettings }
+```
+
+(Import `VaultSettings` from `./types` at the top if not already imported.)
+
+Add both types to the `POPUP_ONLY_TYPES` `Set`:
+
+```ts
+const POPUP_ONLY: Array = [
+ // ... existing ...
+ 'get_vault_settings',
+ 'update_vault_settings',
+];
+export const POPUP_ONLY_TYPES: ReadonlySet = new Set(POPUP_ONLY);
+```
+
+Do NOT add them to `SETUP_ALLOWED`.
+
+Add a response helper at the bottom of the file:
+
+```ts
+export interface VaultSettingsResponse extends Extract {
+ data: { settings: VaultSettings };
+}
+```
+
+- [ ] **Step 2: Add SW handlers**
+
+In `extension/src/service-worker/router/popup-only.ts`, inside the message `switch` statement, add:
+
+```ts
+case 'get_vault_settings': {
+ const handle = session.getCurrent();
+ if (!handle || !state.gitHost) return { ok: false, error: 'vault_locked' };
+ const settings = await vault.fetchAndDecryptSettings(state.gitHost, handle);
+ return { ok: true, data: { settings } };
+}
+
+case 'update_vault_settings': {
+ const handle = session.getCurrent();
+ if (!handle || !state.gitHost) return { ok: false, error: 'vault_locked' };
+ await vault.encryptAndWriteSettings(
+ state.gitHost, handle, msg.settings,
+ 'settings: update vault-level config',
+ );
+ return { ok: true };
+}
+```
+
+- [ ] **Step 3: Add router tests**
+
+Append to `extension/src/service-worker/router/__tests__/router.test.ts` (near existing describe blocks):
+
+```ts
+describe('get_vault_settings / update_vault_settings', () => {
+ it('get_vault_settings accepted from popup; returns VaultSettings', async () => {
+ const state = makeState();
+ primeUnlocked(state);
+ const mockSettings = {
+ trash_retention: { kind: 'days', value: 30 },
+ field_history_retention: { kind: 'forever' },
+ generator_defaults: {
+ kind: 'random', length: 20,
+ classes: { lower: true, upper: true, digits: true, symbols: true },
+ symbol_charset: { kind: 'safe_only' },
+ },
+ attachment_caps: {},
+ autofill_origin_acks: { 'github.com': 1000 },
+ };
+ vi.mocked(vault.fetchAndDecryptSettings).mockResolvedValueOnce(mockSettings as any);
+ const res = await route({ type: 'get_vault_settings' }, state, makePopupSender());
+ expect(res).toMatchObject({ ok: true });
+ if (res.ok) {
+ const d = res.data as { settings: typeof mockSettings };
+ expect(d.settings).toEqual(mockSettings);
+ }
+ });
+
+ it('get_vault_settings rejected from content', async () => {
+ const state = makeState();
+ const res = await route({ type: 'get_vault_settings' }, state, makeContentSender());
+ expect(res).toEqual({ ok: false, error: 'unauthorized_sender' });
+ });
+
+ it('update_vault_settings accepted from popup; calls encryptAndWriteSettings', async () => {
+ const state = makeState();
+ primeUnlocked(state);
+ vi.mocked(vault.encryptAndWriteSettings).mockResolvedValueOnce(undefined);
+ const newSettings = {
+ trash_retention: { kind: 'forever' },
+ field_history_retention: { kind: 'last_n', value: 5 },
+ generator_defaults: {
+ kind: 'bip39', word_count: 6, separator: '-', capitalization: 'lower',
+ },
+ attachment_caps: {},
+ autofill_origin_acks: {},
+ };
+ const res = await route(
+ { type: 'update_vault_settings', settings: newSettings as any },
+ state,
+ makePopupSender(),
+ );
+ expect(res).toMatchObject({ ok: true });
+ expect(vault.encryptAndWriteSettings).toHaveBeenCalledWith(
+ expect.anything(), expect.anything(), newSettings, expect.any(String),
+ );
+ });
+
+ it('update_vault_settings rejected from setup tab (not in SETUP_ALLOWED)', async () => {
+ const state = makeState();
+ const res = await route(
+ { type: 'update_vault_settings', settings: {} as any },
+ state,
+ makeSetupSender(),
+ );
+ expect(res).toEqual({ ok: false, error: 'unauthorized_sender' });
+ });
+});
+```
+
+Adapt the `primeUnlocked(state)` / `makePopupSender()` / `makeContentSender()` / `makeSetupSender()` helper invocations to match the existing patterns in the file. If `vault` isn't already mocked at the top of the file via `vi.mock(...)`, add:
+
+```ts
+vi.mock('../../vault', () => ({
+ fetchAndDecryptSettings: vi.fn(),
+ encryptAndWriteSettings: vi.fn(),
+ fetchAndDecryptManifest: vi.fn(),
+ fetchAndDecryptItem: vi.fn(),
+ encryptAndWriteItem: vi.fn(),
+ encryptAndWriteManifest: vi.fn(),
+ listItems: vi.fn(() => []),
+ findByHostname: vi.fn(() => []),
+ setWasm: vi.fn(),
+}));
+```
+
+Check the existing mock set in `router.test.ts` and merge any missing functions.
+
+- [ ] **Step 4: Run tests**
+
+```bash
+cd extension && bun run test 2>&1 | grep -E "Tests|Test Files" | tail -3
+```
+
+Expected: 105 + 4 = 109 tests pass.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add extension/src/shared/messages.ts \
+ extension/src/service-worker/router/popup-only.ts \
+ extension/src/service-worker/router/__tests__/router.test.ts
+git commit -m "feat(ext/sw): get_vault_settings + update_vault_settings popup-only messages"
+```
+
+### Task 7: Add `generate_passphrase` message + handler (if missing)
+
+**Files:**
+- Modify: `extension/src/shared/messages.ts`
+- Modify: `extension/src/service-worker/router/popup-only.ts`
+
+- [ ] **Step 1: Check if `generate_passphrase` message already exists**
+
+```bash
+grep -n "generate_passphrase" extension/src/shared/messages.ts
+```
+
+If it's already present (as of β₁), skip to Step 4. Otherwise proceed.
+
+- [ ] **Step 2: Add to PopupMessage + POPUP_ONLY_TYPES**
+
+In `extension/src/shared/messages.ts`:
+
+```ts
+ | { type: 'generate_passphrase'; request: GeneratorRequest }
+```
+
+Add `'generate_passphrase'` to the `POPUP_ONLY` array.
+
+- [ ] **Step 3: Add SW handler**
+
+In `router/popup-only.ts`, alongside the existing `generate_password` case:
+
+```ts
+case 'generate_passphrase': {
+ const passphrase = state.wasm.generate_passphrase(JSON.stringify(msg.request));
+ return { ok: true, data: { passphrase } };
+}
+```
+
+- [ ] **Step 4: Verify build + tests still pass**
+
+```bash
+cd extension && bun run test 2>&1 | grep -E "Tests|Test Files" | tail -3
+cd extension && bun run build 2>&1 | tail -3
+```
+
+Expected: tests unchanged (109); build clean.
+
+- [ ] **Step 5: Commit (only if changes were made)**
+
+```bash
+git status
+git add -A
+git commit -m "feat(ext/sw): generate_passphrase popup-only message"
+```
+
+If `git status` shows no staged changes (message already existed), skip the commit.
+
+### Task 8: Fetch `vault_settings` at popup init + add to PopupState
+
+**Files:**
+- Modify: `extension/src/popup/popup.ts`
+
+- [ ] **Step 1: Extend PopupState**
+
+In `extension/src/popup/popup.ts`, find the `PopupState` interface and add:
+
+```ts
+ vaultSettings: import('../shared/types').VaultSettings | null;
+ generatorDefaults: import('../shared/types').GeneratorRequest | null;
+```
+
+Also extend the `View` union:
+
+```ts
+export type View = 'locked' | 'list' | 'detail' | 'add' | 'edit' | 'settings' | 'settings-vault';
+```
+
+Add initial values to `currentState`:
+
+```ts
+ vaultSettings: null,
+ generatorDefaults: null,
+```
+
+- [ ] **Step 2: Fetch on unlock**
+
+In `popup.ts#init`, after the `if (data.unlocked)` branch loads entries, add a parallel `get_vault_settings` fetch:
+
+```ts
+// Existing code:
+// if (data.unlocked) {
+// const listResp = await sendMessage({ type: 'list_items' });
+// if (listResp.ok) { ... }
+// }
+
+// Add:
+const vsResp = await sendMessage({ type: 'get_vault_settings' });
+if (vsResp.ok) {
+ const vs = (vsResp.data as { settings: import('../shared/types').VaultSettings }).settings;
+ currentState.vaultSettings = vs;
+ currentState.generatorDefaults = vs.generator_defaults;
+}
+```
+
+Place this AFTER the list fetch but BEFORE the `navigate('list', ...)` call so the state is populated before the list view renders.
+
+- [ ] **Step 3: Verify build + tests**
+
+```bash
+cd extension && bun run build 2>&1 | tail -3
+cd extension && bun run test 2>&1 | grep -E "Tests|Test Files" | tail -3
+```
+
+Expected: clean; 109 tests.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add extension/src/popup/popup.ts
+git commit -m "feat(ext/popup): fetch vault_settings on unlock; add to PopupState"
+```
+
+---
+
+## Slice 4 — Generator inline popover
+
+### Task 9: Create `generator-popover.ts` + tests
+
+**Files:**
+- Create: `extension/src/popup/components/generator-popover.ts`
+- Create: `extension/src/popup/components/__tests__/generator-popover.test.ts`
+- Modify: `extension/src/popup/styles.css`
+
+- [ ] **Step 1: Write the failing tests**
+
+Create `extension/src/popup/components/__tests__/generator-popover.test.ts`:
+
+```ts
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+vi.mock('../../popup', async () => {
+ const sendMessage = vi.fn();
+ return { sendMessage };
+});
+
+import { openGeneratorPopover, closeGeneratorPopover } from '../generator-popover';
+import { sendMessage } from '../../popup';
+import type { GeneratorRequest } from '../../../shared/types';
+
+const DEFAULT_REQ: GeneratorRequest = {
+ kind: 'random',
+ length: 20,
+ classes: { lower: true, upper: true, digits: true, symbols: true },
+ symbol_charset: { kind: 'safe_only' },
+};
+
+function setupAnchor(): HTMLElement {
+ document.body.innerHTML = '';
+ return document.getElementById('anchor')!;
+}
+
+describe('generator-popover', () => {
+ beforeEach(() => {
+ vi.mocked(sendMessage).mockReset();
+ vi.mocked(sendMessage).mockResolvedValue({ ok: true, data: { password: 'Kj7%pW@2xNq!8rMvT' } });
+ });
+
+ it('opens a popover with Random kind by default', async () => {
+ const anchor = setupAnchor();
+ openGeneratorPopover({ anchor, initial: DEFAULT_REQ, onPicked: vi.fn() });
+ await new Promise((r) => setTimeout(r, 200));
+ expect(document.querySelector('.generator-popover')).not.toBeNull();
+ expect(document.querySelector('#gen-kind-random')?.classList.contains('active')).toBe(true);
+ });
+
+ it('sends generate_password on knob change (debounced)', async () => {
+ const anchor = setupAnchor();
+ openGeneratorPopover({ anchor, initial: DEFAULT_REQ, onPicked: vi.fn() });
+ // Wait past the initial preview's debounce
+ await new Promise((r) => setTimeout(r, 200));
+ const slider = document.querySelector('#gen-length') as HTMLInputElement;
+ slider.value = '32';
+ slider.dispatchEvent(new Event('input', { bubbles: true }));
+ await new Promise((r) => setTimeout(r, 200));
+ const calls = vi.mocked(sendMessage).mock.calls.filter(
+ ([msg]) => (msg as { type: string }).type === 'generate_password',
+ );
+ const latest = calls[calls.length - 1]![0] as { request: GeneratorRequest };
+ expect(latest.request.kind).toBe('random');
+ if (latest.request.kind === 'random') {
+ expect(latest.request.length).toBe(32);
+ }
+ });
+
+ it('BIP39 toggle swaps to generate_passphrase', async () => {
+ const anchor = setupAnchor();
+ openGeneratorPopover({ anchor, initial: DEFAULT_REQ, onPicked: vi.fn() });
+ await new Promise((r) => setTimeout(r, 200));
+ (document.getElementById('gen-kind-bip39') as HTMLButtonElement).click();
+ await new Promise((r) => setTimeout(r, 200));
+ const calls = vi.mocked(sendMessage).mock.calls;
+ expect(calls.some(([msg]) => (msg as { type: string }).type === 'generate_passphrase')).toBe(true);
+ });
+
+ it('use-this-value invokes onPicked with current preview and closes', async () => {
+ const anchor = setupAnchor();
+ const onPicked = vi.fn();
+ openGeneratorPopover({ anchor, initial: DEFAULT_REQ, onPicked });
+ await new Promise((r) => setTimeout(r, 200));
+ (document.querySelector('#gen-use') as HTMLButtonElement).click();
+ expect(onPicked).toHaveBeenCalledWith('Kj7%pW@2xNq!8rMvT');
+ expect(document.querySelector('.generator-popover')).toBeNull();
+ });
+
+ it('save-as-default sends update_vault_settings with the current request', async () => {
+ vi.mocked(sendMessage).mockImplementation(async (msg: any) => {
+ if (msg.type === 'generate_password') return { ok: true, data: { password: 'abc' } };
+ if (msg.type === 'get_vault_settings') {
+ return { ok: true, data: { settings: {
+ trash_retention: { kind: 'days', value: 30 },
+ field_history_retention: { kind: 'forever' },
+ generator_defaults: DEFAULT_REQ,
+ attachment_caps: {},
+ autofill_origin_acks: {},
+ } } };
+ }
+ if (msg.type === 'update_vault_settings') return { ok: true };
+ return { ok: false, error: 'unhandled' };
+ });
+ const anchor = setupAnchor();
+ openGeneratorPopover({ anchor, initial: DEFAULT_REQ, onPicked: vi.fn() });
+ await new Promise((r) => setTimeout(r, 200));
+ (document.querySelector('#gen-save-default') as HTMLButtonElement).click();
+ await new Promise((r) => setTimeout(r, 50));
+ const updateCall = vi.mocked(sendMessage).mock.calls.find(
+ ([m]) => (m as any).type === 'update_vault_settings',
+ );
+ expect(updateCall).toBeDefined();
+ const msg = updateCall![0] as { settings: { generator_defaults: GeneratorRequest } };
+ expect(msg.settings.generator_defaults.kind).toBe('random');
+ });
+
+ it('disables use-button when no char class selected (Random)', async () => {
+ const anchor = setupAnchor();
+ openGeneratorPopover({ anchor, initial: DEFAULT_REQ, onPicked: vi.fn() });
+ await new Promise((r) => setTimeout(r, 200));
+ // Uncheck all 4 classes
+ for (const id of ['gen-lower', 'gen-upper', 'gen-digits', 'gen-symbols']) {
+ const cb = document.getElementById(id) as HTMLInputElement;
+ cb.checked = false;
+ cb.dispatchEvent(new Event('change', { bubbles: true }));
+ }
+ const useBtn = document.querySelector('#gen-use') as HTMLButtonElement;
+ expect(useBtn.disabled).toBe(true);
+ });
+
+ it('closeGeneratorPopover removes the DOM + handlers', async () => {
+ const anchor = setupAnchor();
+ openGeneratorPopover({ anchor, initial: DEFAULT_REQ, onPicked: vi.fn() });
+ await new Promise((r) => setTimeout(r, 200));
+ closeGeneratorPopover();
+ expect(document.querySelector('.generator-popover')).toBeNull();
+ });
+});
+```
+
+- [ ] **Step 2: Run — tests fail**
+
+```bash
+cd extension && bun run test src/popup/components/__tests__/generator-popover.test.ts 2>&1 | tail -10
+```
+
+Expected: import errors.
+
+- [ ] **Step 3: Create `generator-popover.ts`**
+
+Create `extension/src/popup/components/generator-popover.ts`:
+
+```ts
+/// Inline generator popover — anchored to a "gen" button, renders a
+/// live preview that updates as knobs change (150ms debounce). Single
+/// underlying GeneratorRequest; kind toggle swaps between Random +
+/// BIP39 knob sets. Actions: use / save-as-default / reset / cancel.
+
+import { sendMessage } from '../popup';
+import type { GeneratorRequest, VaultSettings } from '../../shared/types';
+
+interface UiKnobs {
+ kind: 'random' | 'bip39';
+ // Random
+ length: number;
+ lower: boolean;
+ upper: boolean;
+ digits: boolean;
+ symbols: boolean;
+ symbolCharset: 'safe_only' | 'extended' | 'custom';
+ customSymbols: string;
+ // BIP39
+ wordCount: number;
+ separator: string;
+ capitalization: 'lower' | 'upper' | 'first_of_each' | 'title' | 'mixed';
+}
+
+function knobsFromRequest(req: GeneratorRequest): UiKnobs {
+ const defaults: UiKnobs = {
+ kind: 'random',
+ length: 20, lower: true, upper: true, digits: true, symbols: true,
+ symbolCharset: 'safe_only', customSymbols: '',
+ wordCount: 5, separator: ' ', capitalization: 'lower',
+ };
+ if (req.kind === 'random') {
+ return {
+ ...defaults,
+ kind: 'random',
+ length: req.length,
+ lower: req.classes.lower,
+ upper: req.classes.upper,
+ digits: req.classes.digits,
+ symbols: req.classes.symbols,
+ symbolCharset: req.symbol_charset.kind,
+ customSymbols: req.symbol_charset.kind === 'custom' ? req.symbol_charset.value : '',
+ };
+ }
+ return {
+ ...defaults,
+ kind: 'bip39',
+ wordCount: req.word_count,
+ separator: req.separator,
+ capitalization: req.capitalization,
+ };
+}
+
+function requestFromKnobs(knobs: UiKnobs): GeneratorRequest {
+ if (knobs.kind === 'random') {
+ return {
+ kind: 'random',
+ length: knobs.length,
+ classes: {
+ lower: knobs.lower, upper: knobs.upper,
+ digits: knobs.digits, symbols: knobs.symbols,
+ },
+ symbol_charset:
+ knobs.symbolCharset === 'safe_only' ? { kind: 'safe_only' } :
+ knobs.symbolCharset === 'extended' ? { kind: 'extended' } :
+ { kind: 'custom', value: knobs.customSymbols },
+ };
+ }
+ return {
+ kind: 'bip39',
+ word_count: knobs.wordCount,
+ separator: knobs.separator,
+ capitalization: knobs.capitalization,
+ };
+}
+
+let activePopover: {
+ host: HTMLElement;
+ cleanup: () => void;
+} | null = null;
+let debounceTimer: ReturnType | null = null;
+
+export interface OpenPopoverOpts {
+ anchor: HTMLElement;
+ initial: GeneratorRequest;
+ onPicked: (value: string) => void;
+}
+
+export function openGeneratorPopover(opts: OpenPopoverOpts): void {
+ closeGeneratorPopover();
+
+ const knobs = knobsFromRequest(opts.initial);
+ let currentPreview = '';
+
+ const host = document.createElement('div');
+ host.className = 'generator-popover';
+ document.body.appendChild(host);
+
+ // Position below anchor
+ const rect = opts.anchor.getBoundingClientRect();
+ host.style.top = `${rect.bottom + 6}px`;
+ host.style.left = `${rect.left}px`;
+
+ const render = (): void => {
+ host.innerHTML = buildInnerHtml(knobs);
+ wireInner();
+ refreshPreview();
+ };
+
+ const refreshPreview = (): void => {
+ if (debounceTimer !== null) clearTimeout(debounceTimer);
+ debounceTimer = setTimeout(async () => {
+ debounceTimer = null;
+ const request = requestFromKnobs(knobs);
+ const msg = knobs.kind === 'random'
+ ? { type: 'generate_password' as const, request }
+ : { type: 'generate_passphrase' as const, request };
+ const resp = await sendMessage(msg);
+ if (resp.ok) {
+ const d = resp.data as { password?: string; passphrase?: string };
+ currentPreview = d.password ?? d.passphrase ?? '';
+ const el = host.querySelector('.gen-preview__value');
+ if (el) el.textContent = currentPreview;
+ updateValidation();
+ }
+ }, 150);
+ };
+
+ const updateValidation = (): void => {
+ const useBtn = host.querySelector('#gen-use') as HTMLButtonElement | null;
+ if (!useBtn) return;
+ const noClass = knobs.kind === 'random'
+ && !(knobs.lower || knobs.upper || knobs.digits || knobs.symbols);
+ useBtn.disabled = noClass;
+ const note = host.querySelector('.gen-validation');
+ if (note) (note as HTMLElement).style.display = noClass ? 'block' : 'none';
+ };
+
+ const wireInner = (): void => {
+ host.querySelector('#gen-kind-random')?.addEventListener('click', () => {
+ knobs.kind = 'random'; render();
+ });
+ host.querySelector('#gen-kind-bip39')?.addEventListener('click', () => {
+ knobs.kind = 'bip39'; render();
+ });
+
+ host.querySelector('#gen-length')?.addEventListener('input', (e) => {
+ knobs.length = Number((e.target as HTMLInputElement).value);
+ const out = host.querySelector('#gen-length-val');
+ if (out) out.textContent = String(knobs.length);
+ refreshPreview();
+ });
+
+ for (const { id, key } of [
+ { id: 'gen-lower', key: 'lower' as const },
+ { id: 'gen-upper', key: 'upper' as const },
+ { id: 'gen-digits', key: 'digits' as const },
+ { id: 'gen-symbols', key: 'symbols' as const },
+ ]) {
+ host.querySelector(`#${id}`)?.addEventListener('change', (e) => {
+ knobs[key] = (e.target as HTMLInputElement).checked;
+ refreshPreview();
+ });
+ }
+
+ host.querySelectorAll('[data-symbol-charset]').forEach((btn) => {
+ btn.addEventListener('click', () => {
+ knobs.symbolCharset = btn.dataset.symbolCharset as UiKnobs['symbolCharset'];
+ render();
+ });
+ });
+
+ host.querySelector('#gen-word-count')?.addEventListener('input', (e) => {
+ knobs.wordCount = Number((e.target as HTMLInputElement).value);
+ const out = host.querySelector('#gen-word-count-val');
+ if (out) out.textContent = String(knobs.wordCount);
+ refreshPreview();
+ });
+
+ host.querySelectorAll('[data-separator]').forEach((btn) => {
+ btn.addEventListener('click', () => {
+ knobs.separator = btn.dataset.separator ?? ' ';
+ render();
+ });
+ });
+
+ host.querySelectorAll('[data-capitalization]').forEach((btn) => {
+ btn.addEventListener('click', () => {
+ knobs.capitalization = btn.dataset.capitalization as UiKnobs['capitalization'];
+ render();
+ });
+ });
+
+ host.querySelector('.gen-preview__regen')?.addEventListener('click', () => {
+ refreshPreview();
+ });
+
+ host.querySelector('#gen-use')?.addEventListener('click', () => {
+ opts.onPicked(currentPreview);
+ closeGeneratorPopover();
+ });
+
+ host.querySelector('#gen-save-default')?.addEventListener('click', async () => {
+ const getResp = await sendMessage({ type: 'get_vault_settings' });
+ if (!getResp.ok) return;
+ const vs = (getResp.data as { settings: VaultSettings }).settings;
+ const updated: VaultSettings = { ...vs, generator_defaults: requestFromKnobs(knobs) };
+ await sendMessage({ type: 'update_vault_settings', settings: updated });
+ const btn = host.querySelector('#gen-save-default') as HTMLButtonElement | null;
+ if (btn) {
+ const original = btn.textContent;
+ btn.textContent = 'saved';
+ setTimeout(() => { if (btn.textContent === 'saved') btn.textContent = original; }, 1500);
+ }
+ });
+
+ host.querySelector('#gen-reset')?.addEventListener('click', async () => {
+ const getResp = await sendMessage({ type: 'get_vault_settings' });
+ if (!getResp.ok) return;
+ const vs = (getResp.data as { settings: VaultSettings }).settings;
+ Object.assign(knobs, knobsFromRequest(vs.generator_defaults));
+ render();
+ });
+
+ host.querySelector('#gen-cancel')?.addEventListener('click', () => closeGeneratorPopover());
+ host.querySelector('#gen-close')?.addEventListener('click', () => closeGeneratorPopover());
+ };
+
+ const onOutsideClick = (e: MouseEvent) => {
+ if (!host.contains(e.target as Node) && e.target !== opts.anchor) {
+ closeGeneratorPopover();
+ }
+ };
+ const onEsc = (e: KeyboardEvent) => {
+ if (e.key === 'Escape') closeGeneratorPopover();
+ };
+
+ const cleanup = (): void => {
+ document.removeEventListener('click', onOutsideClick, true);
+ document.removeEventListener('keydown', onEsc);
+ host.remove();
+ };
+
+ activePopover = { host, cleanup };
+
+ setTimeout(() => {
+ document.addEventListener('click', onOutsideClick, true);
+ document.addEventListener('keydown', onEsc);
+ }, 0);
+
+ render();
+}
+
+export function closeGeneratorPopover(): void {
+ if (activePopover === null) return;
+ if (debounceTimer !== null) { clearTimeout(debounceTimer); debounceTimer = null; }
+ activePopover.cleanup();
+ activePopover = null;
+}
+
+// --- HTML builders ---
+
+function buildInnerHtml(knobs: UiKnobs): string {
+ return `
+
+
+
kind
+
+
+
+
+
+
+
+
+ ${knobs.kind === 'random'
+ ? `pick at least one character class
`
+ : ''}
+
+
+
+
+
+
+ `;
+}
+
+function buildRandomKnobs(k: UiKnobs): string {
+ return `
+
+ length
+
+ ${k.length}
+
+
+
+
+
+
+
+
+
symbols
+
+
+
+
+
+ words
+
+ ${k.wordCount}
+
+
+
separator
+
+ ${sepChip('space', ' ')}
+ ${sepChip('-', '-')}
+ ${sepChip('_', '_')}
+ ${sepChip('.', '.')}
+ ${sepChip(':', ':')}
+
+
+
case
+
+ ${capChip('lower', 'lower')}
+ ${capChip('upper', 'upper')}
+ ${capChip('first', 'first_of_each')}
+ ${capChip('title', 'title')}
+
+
Vault settings not loaded yet.
+
+
+
+
retention
+
+ trash
+
+
+
+ field history
+
+
+
+
+
+
generator
+
${escapeHtml(generatorSummary(pendingSettings.generator_defaults))}
+
+
+
+
+
autofill origins
+ ${acksEntries.length === 0
+ ? `
No origins acknowledged yet.
`
+ : acksEntries.map(([host, ts]) => `
+
+ ${escapeHtml(host)}
+ ${escapeHtml(relativeTime(ts))}
+
+
+ `).join('')}
+
+
+
+