relicario/docs/superpowers/plans/2026-04-24-relicario-gen-ux-redesign.md

# Generator UX Redesign Implementation Plan

> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** Replace the right-anchored popover (which clips off the popup edge) with an inline panel injected into the form below the password row. Trigger becomes ✨; lowercase form labels with a gold required-marker.

**Architecture:** The popover module gets renamed (`generator-popover.ts` → `generator-panel.ts`) and rewritten: same knob → message logic, but DOM mounts inside a passed parent element instead of `document.body`, and the action row varies by context (`fill-field` for the login form's password input, `configure-defaults` for the vault settings screen). Label polish is a single CSS rule update plus an `<span class="req">` wrap around the `*` markers in 6 type forms.

**Tech Stack:** TypeScript, vitest, webpack, plain CSS (no preprocessor).

**Spec:** `docs/superpowers/specs/2026-04-24-relicario-gen-ux-redesign-design.md` (commit `9add305`).

---

## Task 1: Label polish — lowercase + gold required marker

**Files:**
- Modify: `extension/src/popup/styles.css` (the `.label` rule + add `.req` rule)
- Modify: `extension/src/popup/components/types/login.ts` (1 markup change at line ~234)
- Modify: `extension/src/popup/components/types/identity.ts` (1 markup change at line ~129)
- Modify: `extension/src/popup/components/types/card.ts` (1 markup change at line ~169)
- Modify: `extension/src/popup/components/types/key.ts` (2 markup changes at lines ~118, ~120)
- Modify: `extension/src/popup/components/types/totp.ts` (2 markup changes at lines ~208, ~217)
- Modify: `extension/src/popup/components/types/secure-note.ts` (1 markup change at line ~107)

Working dir: `/home/alee/Sources/relicario`. Branch: main. Do NOT push.

- [ ] **Step 1: Update the `.label` rule**

In `extension/src/popup/styles.css`, find the `.label {` block (around line 36-45) and change `text-transform`, `letter-spacing`, and `font-weight`:

Old:
```css
.label {
  font-size: 11px;
  font-weight: 600;
  color: #8b949e;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
```

New:
```css
.label {
  font-size: 11px;
  font-weight: 500;
  color: #8b949e;
  text-transform: lowercase;
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}
```

- [ ] **Step 2: Add the `.req` rule for gold required-marker**

Append this rule directly after the `.label` rule (so it's adjacent and easy to find):

```css
.label .req {
  color: #aa812a;
  margin-left: 2px;
  font-weight: 600;
}
```

- [ ] **Step 3: Update markup in all 6 type forms**

For each of the 7 occurrences of `title *</label>`, `key material *</label>`, `secret (base32) *</label>`, etc., replace the literal `*` with `<span class="req">*</span>`.

Run a sed sweep across the 6 type files (preserves all other content, swaps just the trailing `*</label>` pattern):

```bash
sed -i 's| \*</label>| <span class="req">*</span></label>|g' \
  extension/src/popup/components/types/login.ts \
  extension/src/popup/components/types/identity.ts \
  extension/src/popup/components/types/card.ts \
  extension/src/popup/components/types/key.ts \
  extension/src/popup/components/types/totp.ts \
  extension/src/popup/components/types/secure-note.ts
```

- [ ] **Step 4: Verify the swap landed in every expected file**

```bash
grep -rn '<span class="req">\*</span></label>' extension/src/popup/components/types/
```

Expected: 8 hits across 6 files (login×1, identity×1, card×1, key×2, totp×2, secure-note×1).

```bash
grep -rn ' \*</label>' extension/src/popup/components/types/
```

Expected: no output (every literal `*</label>` should now be wrapped).

- [ ] **Step 5: Run vitest**

```bash
cd extension && bun run test 2>&1 | tail -3
```

Expected: 124 passed (some test fixtures may render label HTML — verify they don't have hard-coded assertions on the literal `*` text or the `text-transform: uppercase` style. If any test fails on a label assertion, update the test to match the new markup).

- [ ] **Step 6: Type-check**

```bash
cd extension && bunx tsc --noEmit
```

Expected: zero errors.

- [ ] **Step 7: Commit**

```bash
cd /home/alee/Sources/relicario
git add extension/src/popup/styles.css \
        extension/src/popup/components/types/login.ts \
        extension/src/popup/components/types/identity.ts \
        extension/src/popup/components/types/card.ts \
        extension/src/popup/components/types/key.ts \
        extension/src/popup/components/types/totp.ts \
        extension/src/popup/components/types/secure-note.ts
git commit -m "$(cat <<'EOF'
feat(ext/popup): lowercase form labels + gold required marker

.label drops text-transform: uppercase and tightens letter-spacing.
The `*` required marker gets wrapped in <span class="req"> so it
picks up the gold accent color (matches palette refresh).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
EOF
)"
```

---

## Task 2: Rename module — `generator-popover` → `generator-panel`

**Files (rename via git-mv):**
- Rename: `extension/src/popup/components/generator-popover.ts` → `generator-panel.ts`
- Rename: `extension/src/popup/components/__tests__/generator-popover.test.ts` → `generator-panel.test.ts`

**Files modified (import path update only — function names stay the same in this task):**
- `extension/src/popup/components/types/login.ts` (line 17 import)
- `extension/src/popup/components/settings-vault.ts` (line 9 import)

Working dir: `/home/alee/Sources/relicario`. Branch: main. Do NOT push.

- [ ] **Step 1: git-mv source + test**

```bash
cd /home/alee/Sources/relicario
git mv extension/src/popup/components/generator-popover.ts \
       extension/src/popup/components/generator-panel.ts
git mv extension/src/popup/components/__tests__/generator-popover.test.ts \
       extension/src/popup/components/__tests__/generator-panel.test.ts
```

- [ ] **Step 2: Update the test file's import path**

Edit `extension/src/popup/components/__tests__/generator-panel.test.ts` line 8:

Old:
```ts
import { openGeneratorPopover, closeGeneratorPopover } from '../generator-popover';
```

New:
```ts
import { openGeneratorPopover, closeGeneratorPopover } from '../generator-panel';
```

(Only the path string changes; function names stay untouched in this task.)

- [ ] **Step 3: Update login.ts import path**

Edit `extension/src/popup/components/types/login.ts` line 17:

Old:
```ts
import { openGeneratorPopover, closeGeneratorPopover } from '../generator-popover';
```

New:
```ts
import { openGeneratorPopover, closeGeneratorPopover } from '../generator-panel';
```

- [ ] **Step 4: Update settings-vault.ts import path**

Edit `extension/src/popup/components/settings-vault.ts` line 9:

Old:
```ts
import { openGeneratorPopover } from './generator-popover';
```

New:
```ts
import { openGeneratorPopover } from './generator-panel';
```

- [ ] **Step 5: Verify no stale references to `generator-popover` exist**

```bash
grep -rn "generator-popover" extension/src/
```

Expected: no output (all imports updated).

- [ ] **Step 6: Run vitest**

```bash
cd extension && bun run test 2>&1 | tail -3
```

Expected: 124 passed (no behavioral change — just file rename).

- [ ] **Step 7: Type-check**

```bash
cd extension && bunx tsc --noEmit
```

Expected: zero errors.

- [ ] **Step 8: Commit**

```bash
cd /home/alee/Sources/relicario
git add extension/src/popup/components/generator-panel.ts \
        extension/src/popup/components/generator-popover.ts \
        extension/src/popup/components/__tests__/generator-panel.test.ts \
        extension/src/popup/components/__tests__/generator-popover.test.ts \
        extension/src/popup/components/types/login.ts \
        extension/src/popup/components/settings-vault.ts
git commit -m "$(cat <<'EOF'
refactor(ext/popup): rename generator-popover module to generator-panel

Pure rename via git-mv (preserves history). Function names and behavior
unchanged. Sets up the API rewrite in the next commit.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
EOF
)"
```

---

## Task 3: Rewrite panel module + new CSS + caller updates + new tests

**Files:**
- Modify: `extension/src/popup/components/generator-panel.ts` (major rewrite — new API, inline mount, escape handler)
- Modify: `extension/src/popup/components/__tests__/generator-panel.test.ts` (function rename + parent mount + 3 new tests)
- Modify: `extension/src/popup/styles.css` (delete `.generator-popover` rules; add `.gen-trigger` + `.gen-panel` rules)
- Modify: `extension/src/popup/components/types/login.ts` (✨ trigger button + new openGeneratorPanel call with `context: 'fill-field'`)
- Modify: `extension/src/popup/components/settings-vault.ts` (✨ trigger button + new openGeneratorPanel call with `context: 'configure-defaults'`)

Working dir: `/home/alee/Sources/relicario`. Branch: main. Do NOT push.

This is the largest task. Steps walk through each file.

### Step 1: Rewrite `generator-panel.ts`

Read the current file first (Read tool) to understand the existing helper functions (`knobsFromRequest`, `requestFromKnobs`, `buildInnerHtml`, `wireInner`, `updateValidation`). KEEP those helpers AS-IS — they encode the knob→GeneratorRequest mapping which is correct. The rewrite only changes:

1. Function rename: `openGeneratorPopover` → `openGeneratorPanel`. Same for `closeGeneratorPopover` → `closeGeneratorPanel`.
2. New options interface (replaces `OpenPopoverOpts`):

```ts
export type GeneratorPanelContext = 'fill-field' | 'configure-defaults';

export interface OpenPanelOpts {
  parent: HTMLElement;       // mount target (form root or settings section)
  trigger: HTMLElement;      // ✨ button (aria-expanded gets toggled here)
  initial: GeneratorRequest;
  context: GeneratorPanelContext;
  onPicked?: (value: string) => void;  // required when context === 'fill-field'
}
```

3. The `host` div is appended to `opts.parent` instead of `document.body`. Drop the `position: absolute / top / left` styling — just `parent.appendChild(host)`.
4. The trigger gets `aria-expanded="true"` on open, `"false"` on close.
5. Escape key closes the panel. Add a `document.addEventListener('keydown', escHandler)` on open; remove on close. Handler:
   ```ts
   const escHandler = (e: KeyboardEvent): void => {
     if (e.key === 'Escape') closeGeneratorPanel();
   };
   ```
6. Auto-generate on open: call `render()` then immediately `refreshPreview()` (the existing render does this already in the current popover — confirm it still does in the rewrite).
7. Action row varies by context. Two HTML branches:
   - `context === 'fill-field'`: `<button class="save-link" id="gen-save-default">↑ save these as default</button> <button class="btn" id="gen-cancel">cancel</button> <button class="btn btn-primary" id="gen-use">use</button>`
   - `context === 'configure-defaults'`: `<button class="save-link" id="gen-save-default">↑ save these as default</button>` (no cancel/use)
8. Clicking ✨ while panel open should close it. The trigger's click handler in the caller (login.ts / settings-vault.ts) checks `if (isGeneratorPanelOpen()) closeGeneratorPanel(); else openGeneratorPanel(...)`. Add `export function isGeneratorPanelOpen(): boolean { return activePanel !== null; }`.
9. The "more ▾" disclosure: render only for `random` mode (BIP39 has no advanced knobs after the redesign). For `random`, advanced contains the `symbolCharset` toggle. Use `<details>` element for natural disclosure semantics:
   ```html
   <details class="more">
     <summary>more ▾</summary>
     <div class="more__advanced">
       <!-- knobs go here -->
     </div>
   </details>
   ```
10. Element IDs that the existing tests assert on MUST be preserved verbatim: `#gen-kind-random`, `#gen-kind-bip39`, `#gen-length`, `#gen-lower`, `#gen-upper`, `#gen-digits`, `#gen-symbols`, `#gen-use`, `#gen-save-default`. The HTML structure can change, but these IDs stay.
11. The `closeGeneratorPanel` function must clear:
    - `activePanel = null`
    - The `host` element from its parent (host.remove())
    - `aria-expanded="false"` on the trigger
    - `document.removeEventListener('keydown', escHandler)`
    - Any pending debounce timer

The full new `openGeneratorPanel` skeleton (use this as the structure; fill in the helper-function calls from the existing module which you keep unchanged):

```ts
let activePanel: {
  host: HTMLElement;
  trigger: HTMLElement;
  cleanup: () => void;
} | null = null;

let debounceTimer: ReturnType<typeof setTimeout> | null = null;

export function openGeneratorPanel(opts: OpenPanelOpts): void {
  closeGeneratorPanel();

  const knobs = knobsFromRequest(opts.initial);
  let currentPreview = '';

  const host = document.createElement('div');
  host.className = 'gen-panel';
  opts.parent.appendChild(host);

  opts.trigger.setAttribute('aria-expanded', 'true');

  const escHandler = (e: KeyboardEvent): void => {
    if (e.key === 'Escape') closeGeneratorPanel();
  };
  document.addEventListener('keydown', escHandler);

  const cleanup = (): void => {
    document.removeEventListener('keydown', escHandler);
    if (debounceTimer !== null) {
      clearTimeout(debounceTimer);
      debounceTimer = null;
    }
    opts.trigger.setAttribute('aria-expanded', 'false');
    host.remove();
  };

  activePanel = { host, trigger: opts.trigger, cleanup };

  const render = (): void => {
    host.innerHTML = buildInnerHtml(knobs, opts.context);
    wireInner(opts);
    refreshPreview();
  };

  const refreshPreview = (): void => {
    /* existing debounced refresh logic — copy from current module */
  };

  /* wireInner needs `opts` for context (action row composition) and onPicked callback */

  render();
}

export function closeGeneratorPanel(): void {
  if (activePanel === null) return;
  activePanel.cleanup();
  activePanel = null;
}

export function isGeneratorPanelOpen(): boolean {
  return activePanel !== null;
}
```

Update `buildInnerHtml(knobs, context)` to:
- Use `<details class="more">` for the disclosure
- Render the action row based on `context`
- Use the new `.gen-panel` child class names (no more `.gen-row`, `.gen-row__label`, etc. — see new CSS in Step 2)

Keep `wireInner` as a closure-scoped helper inside `openGeneratorPanel` (NOT a parameter-taking function — it gets direct access to `opts`, `knobs`, `host`, `currentPreview` via the parent scope, just like the current popover does). Update its body to wire:
- `#gen-use` click → `opts.onPicked?.(currentPreview); closeGeneratorPanel();`
- `#gen-cancel` click → `closeGeneratorPanel();`
- `#gen-save-default` click → existing logic (fetch settings, update with new defaults, send `update_vault_settings`); on success append a `<span class="save-link__toast">✓ saved</span>` to the save-link button and remove it after 1500 ms via `setTimeout`. Skeleton:

```ts
document.getElementById('gen-save-default')?.addEventListener('click', async () => {
  const link = host.querySelector('#gen-save-default') as HTMLElement;
  /* fetch settings, write generator_defaults, send update_vault_settings */
  const settingsResp = await sendMessage({ type: 'get_vault_settings' });
  if (!settingsResp.ok) return;
  const settings = (settingsResp.data as { settings: VaultSettings }).settings;
  settings.generator_defaults = requestFromKnobs(knobs);
  const updateResp = await sendMessage({ type: 'update_vault_settings', settings });
  if (!updateResp.ok) return;
  /* append + auto-remove toast */
  link.querySelector('.save-link__toast')?.remove();
  const toast = document.createElement('span');
  toast.className = 'save-link__toast';
  toast.textContent = '✓ saved';
  link.appendChild(toast);
  setTimeout(() => toast.remove(), 1500);
});
```

Apply this rewrite. The full file should still be ~250-350 lines; structure stays similar to the current popover.

### Step 2: Replace popover CSS with panel CSS in `styles.css`

Find the current `/* --- generator popover (β₂ slice 4) --- */` section (around line 592) and the `.gen-preview-line` rule below it. DELETE the entire block of `.generator-popover` rules (~80 lines).

Add this new block in the same location:

```css
/* --- generator panel (gen-UX redesign) --- */

.gen-trigger {
  background: #7c5719;
  color: #fff3cf;
  border: none;
  border-radius: 4px;
  padding: 0 12px;
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
  min-width: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.gen-trigger:hover { background: #aa812a; }
.gen-trigger[aria-expanded="true"] { background: #aa812a; }

.gen-panel {
  background: #161b22;
  border: 1px solid #aa812a;
  border-radius: 6px;
  padding: 11px;
  margin: 6px 0;
  font-size: 11px;
  color: #c9d1d9;
}
.gen-panel .panel-toggle {
  display: flex;
  gap: 4px;
  background: #21262d;
  border-radius: 4px;
  padding: 2px;
  margin-bottom: 8px;
}
.gen-panel .panel-toggle button {
  flex: 1;
  background: transparent;
  border: 0;
  color: #8b949e;
  padding: 5px;
  font-size: 11px;
  cursor: pointer;
  border-radius: 3px;
  font-weight: 600;
}
.gen-panel .panel-toggle button.active {
  background: #aa812a;
  color: #fff3cf;
}
.gen-panel .knob {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
}
.gen-panel .knob__label {
  color: #8b949e;
  width: 56px;
  flex-shrink: 0;
  font-size: 10px;
}
.gen-panel .knob__slider { flex: 1; }
.gen-panel .knob__value {
  font-family: ui-monospace, monospace;
  min-width: 24px;
  text-align: right;
  color: #c9d1d9;
}
.gen-panel .classes {
  display: flex;
  gap: 8px;
  font-size: 10px;
  margin: 6px 0;
  flex-wrap: wrap;
  color: #8b949e;
}
.gen-panel .classes label {
  display: flex;
  align-items: center;
  gap: 3px;
  user-select: none;
  cursor: pointer;
}
.gen-panel .preview {
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 4px;
  padding: 8px 10px;
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.gen-panel .preview__value {
  flex: 1;
  color: #f1cf6e;
  font-family: ui-monospace, monospace;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gen-panel .preview__regen {
  background: transparent;
  border: 0;
  color: #8b949e;
  cursor: pointer;
  padding: 0 4px;
  font-size: 14px;
}
.gen-panel .more {
  color: #8b949e;
  font-size: 10px;
  margin-top: 6px;
  cursor: pointer;
  user-select: none;
  padding: 2px 0;
}
.gen-panel .more summary {
  list-style: none;
  outline: none;
}
.gen-panel .more summary::-webkit-details-marker { display: none; }
.gen-panel .more:hover { color: #d2ab43; }
.gen-panel .more__advanced { margin-top: 6px; }
.gen-panel .actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  align-items: center;
}
.gen-panel .actions .save-link {
  flex: 1;
  background: transparent;
  border: 0;
  color: #8b949e;
  cursor: pointer;
  font-size: 10px;
  text-align: left;
  padding: 4px 0;
  text-decoration: underline;
  text-decoration-color: #30363d;
  text-underline-offset: 2px;
}
.gen-panel .actions .save-link:hover {
  color: #d2ab43;
  text-decoration-color: #d2ab43;
}
.gen-panel .actions .save-link__toast {
  color: #3fb950;
  margin-left: 6px;
  font-size: 10px;
}

/* keep .gen-preview-line — it's the summary-text in vault settings, separate from panel */
```

The pre-existing `.gen-preview-line` rule (around line 674) must stay — it's used by the vault-settings summary text, not the panel itself.

### Step 3: Update `login.ts`

Find the `gen-btn` markup (around line 243):

Old:
```ts
<button class="btn" id="gen-btn" title="generate">gen</button>
```

New:
```ts
<button class="gen-trigger" id="gen-btn" type="button" title="generate password" aria-expanded="false">✨</button>
```

Find the click handler (around line 268):

Old:
```ts
document.getElementById('gen-btn')?.addEventListener('click', (e) => {
  const anchor = e.currentTarget as HTMLElement;
  const initial = getState().generatorDefaults ?? DEFAULT_PASSWORD_REQUEST;
  openGeneratorPopover({
    anchor,
    initial,
    onPicked: (value) => {
      const pw = document.getElementById('f-password') as HTMLInputElement | null;
      if (pw) { pw.value = value; pw.type = 'text'; }
    },
  });
});
```

New:
```ts
document.getElementById('gen-btn')?.addEventListener('click', (e) => {
  const trigger = e.currentTarget as HTMLElement;
  if (isGeneratorPanelOpen()) {
    closeGeneratorPanel();
    return;
  }
  const passwordRow = trigger.closest('.form-group') as HTMLElement | null;
  if (!passwordRow) return;
  const initial = getState().generatorDefaults ?? DEFAULT_PASSWORD_REQUEST;
  openGeneratorPanel({
    parent: passwordRow,  // panel mounts inside the password form-group
    trigger,
    initial,
    context: 'fill-field',
    onPicked: (value) => {
      const pw = document.getElementById('f-password') as HTMLInputElement | null;
      if (pw) { pw.value = value; pw.type = 'text'; }
    },
  });
});
```

Update the import on line 17:

Old:
```ts
import { openGeneratorPopover, closeGeneratorPopover } from '../generator-panel';
```

New:
```ts
import { openGeneratorPanel, closeGeneratorPanel, isGeneratorPanelOpen } from '../generator-panel';
```

### Step 4: Update `settings-vault.ts`

Find the `configure-gen` button (around line 131):

Old:
```ts
<button class="btn" id="configure-gen">configure ▾</button>
```

New:
```ts
<button class="gen-trigger" id="configure-gen" type="button" title="configure generator defaults" aria-expanded="false">✨</button>
```

Find the click handler (around line 196):

Old:
```ts
document.getElementById('configure-gen')?.addEventListener('click', (e) => {
  /* current popover open with onPicked that writes to vault settings */
  ...
  openGeneratorPopover({
    anchor: e.currentTarget as HTMLElement,
    initial: pendingSettings.generator_defaults,
    /* ... onPicked writes to settings ... */
  });
});
```

New:
```ts
document.getElementById('configure-gen')?.addEventListener('click', (e) => {
  const trigger = e.currentTarget as HTMLElement;
  if (isGeneratorPanelOpen()) {
    closeGeneratorPanel();
    return;
  }
  const generatorSection = trigger.closest('.settings-section') as HTMLElement | null;
  if (!generatorSection || pendingSettings === null) return;
  openGeneratorPanel({
    parent: generatorSection,
    trigger,
    initial: pendingSettings.generator_defaults,
    context: 'configure-defaults',
  });
});
```

Update the import on line 9:

Old:
```ts
import { openGeneratorPopover } from './generator-panel';
```

New:
```ts
import { openGeneratorPanel, closeGeneratorPanel, isGeneratorPanelOpen } from './generator-panel';
```

### Step 5: Update tests

In `extension/src/popup/components/__tests__/generator-panel.test.ts`, multiple changes:

1. Update import at line 8:
```ts
import { openGeneratorPanel, closeGeneratorPanel, isGeneratorPanelOpen } from '../generator-panel';
```

2. Update `setupAnchor()` to set up a parent + trigger in a way that matches the new API:
```ts
function setupMount(): { parent: HTMLElement; trigger: HTMLElement } {
  document.body.innerHTML = `
    <div id="parent">
      <button id="trigger" aria-expanded="false">✨</button>
    </div>
  `;
  return {
    parent: document.getElementById('parent')!,
    trigger: document.getElementById('trigger')!,
  };
}
```

3. Update each test's `openGeneratorPopover({ anchor, ... })` to `openGeneratorPanel({ parent, trigger, context: 'fill-field', onPicked, ...})`. For the `save-as-default` test, use `context: 'fill-field'` (the save-link is shown in both contexts). For tests that don't care about onPicked, pass `vi.fn()`.

4. Update the selector `.generator-popover` → `.gen-panel` in tests that query for the panel host element (e.g., the "opens a popover" test asserts `document.querySelector('.generator-popover')` — change to `.gen-panel`).

5. Add 3 new tests at the end of the `describe` block:

```ts
it('sets aria-expanded on the trigger when opened', async () => {
  const { parent, trigger } = setupMount();
  expect(trigger.getAttribute('aria-expanded')).toBe('false');
  openGeneratorPanel({ parent, trigger, initial: DEFAULT_REQ, context: 'fill-field', onPicked: vi.fn() });
  expect(trigger.getAttribute('aria-expanded')).toBe('true');
  closeGeneratorPanel();
  expect(trigger.getAttribute('aria-expanded')).toBe('false');
});

it('auto-generates a preview on open', async () => {
  const { parent, trigger } = setupMount();
  openGeneratorPanel({ parent, trigger, initial: DEFAULT_REQ, context: 'fill-field', onPicked: vi.fn() });
  await new Promise((r) => setTimeout(r, 200));
  const calls = vi.mocked(sendMessage).mock.calls.filter(
    ([msg]) => (msg as { type: string }).type === 'generate_password',
  );
  expect(calls.length).toBeGreaterThan(0);
});

it('Escape key closes the panel', async () => {
  const { parent, trigger } = setupMount();
  openGeneratorPanel({ parent, trigger, initial: DEFAULT_REQ, context: 'fill-field', onPicked: vi.fn() });
  await new Promise((r) => setTimeout(r, 50));
  expect(isGeneratorPanelOpen()).toBe(true);
  document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
  expect(isGeneratorPanelOpen()).toBe(false);
  expect(document.querySelector('.gen-panel')).toBeNull();
});
```

### Step 6: Run the tests

```bash
cd extension && bun run test 2>&1 | tail -10
```

Expected: 127 passed (was 124, added 3 new tests). If a test fails:
- Selector mismatch: confirm `.gen-panel` is the new host class and tests query that, not `.generator-popover`.
- Mount target mismatch: confirm tests pass `parent`+`trigger` not `anchor`.
- Save-link selector: still `#gen-save-default` (preserved per Step 1, item 10).

### Step 7: Type-check

```bash
cd extension && bunx tsc --noEmit
```

Expected: zero errors. If errors:
- `OpenPopoverOpts` is gone; tests/callers reference must use `OpenPanelOpts`. Should be caught by the import update.
- `onPicked` is now optional in `OpenPanelOpts` — TS may complain at the call site if not passed. The `fill-field` context needs `onPicked`; configure-defaults doesn't.

### Step 8: Build both bundles

```bash
cd extension && bun run build:all 2>&1 | tail -10
```

Expected: "compiled with 2 warnings" (WASM size only) for each of Chrome and Firefox.

### Step 9: Commit

```bash
cd /home/alee/Sources/relicario
git add extension/src/popup/components/generator-panel.ts \
        extension/src/popup/components/__tests__/generator-panel.test.ts \
        extension/src/popup/styles.css \
        extension/src/popup/components/types/login.ts \
        extension/src/popup/components/settings-vault.ts
git commit -m "$(cat <<'EOF'
feat(ext/popup): rewrite generator as inline panel with ✨ trigger

The popover (which clipped off the popup edge) becomes an inline panel
that mounts inside the form (login.ts) or settings section
(settings-vault.ts). Trigger button is ✨ with aria-expanded toggling.
Action row varies by context: fill-field has cancel+use; configure-
defaults has only the save-default link. Escape key closes the panel.
Tests adapted to new API; 3 new tests for aria-expanded, auto-generate,
and Escape behavior.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
EOF
)"
```

---

## Task 4: Build, full verification, manual smoke

Working dir: `/home/alee/Sources/relicario`. Branch: main.

- [ ] **Step 1: Run all test suites end to end**

```bash
cd /home/alee/Sources/relicario && cargo test --workspace 2>&1 | grep -E "test result" | tail -20
cd /home/alee/Sources/relicario/extension && bun run test 2>&1 | tail -5
cd /home/alee/Sources/relicario/extension && bunx tsc --noEmit 2>&1 | tail -5
```

Expected:
- Cargo: every "test result" line shows `0 failed`. Total ~155.
- Vitest: `Tests  127 passed (127)` (was 124; added 3 new generator-panel tests).
- tsc: zero output (no errors).

- [ ] **Step 2: Build both bundles**

```bash
cd /home/alee/Sources/relicario/extension && bun run build:all 2>&1 | tail -10
```

Expected: "compiled with 2 warnings" (WASM size only) for both Chrome and Firefox bundles.

- [ ] **Step 3: Final lint sweep — confirm no stale references to popover**

```bash
cd /home/alee/Sources/relicario && git grep -nE 'generator-popover|generatorPopover|openGeneratorPopover|closeGeneratorPopover|\.generator-popover' -- 'extension/src/' 'extension/setup.html'
```

Expected: zero output. The only remaining occurrences allowed are inside markdown specs/plans (`docs/`) — these document the historical name and should NOT be modified.

- [ ] **Step 4: Manual smoke test (relay these instructions to the user)**

Have the user reload the extension and walk through:

  - **Login form:** Open popup → New → Login. Click ✨ button next to password input. Verify:
    - Inline panel appears below the password row (not a clipped popover)
    - Panel auto-fills with a generated preview immediately
    - ✨ button shows gold-active state (`aria-expanded="true"`)
    - Clicking length slider regenerates the preview after a brief debounce
    - Toggling kind to "passphrase" switches knobs and regenerates
    - "more ▾" disclosure expands to reveal symbol charset (random mode only)
    - "use" button fills the password input and closes the panel
    - "cancel" button closes the panel without committing
    - Escape key closes the panel
    - Clicking ✨ again while open closes the panel
    - "↑ save these as default" link writes to vault settings (verify by reopening)
  - **Vault settings:** Open ⚙ → vault settings → ✨ button next to generator preview. Verify:
    - Inline panel appears inside the generator section
    - No use/cancel buttons (configure-defaults context)
    - "↑ save these as default" link works
    - ✨ closes the panel
  - **Polish:** All form labels are lowercase across all type forms. Required-field `*` markers are gold (`#aa812a`). Run through Login, SecureNote, Identity, Card, Key, TOTP forms briefly.

- [ ] **Step 5: No close-out commit needed if all green**

If steps 1-3 passed, the slice is complete via the prior 3 commits (label polish, rename, panel rewrite). If any fix was needed, commit as `fix(ext/popup): <description>`.

---

## Verification summary

```bash
cd /home/alee/Sources/relicario/extension && bun run build:all
cd /home/alee/Sources/relicario && cargo test --workspace
cd /home/alee/Sources/relicario/extension && bun run test
cd /home/alee/Sources/relicario/extension && bunx tsc --noEmit
git grep -nE 'generator-popover|generatorPopover|openGeneratorPopover|closeGeneratorPopover|\.generator-popover' -- 'extension/src/' 'extension/setup.html'
```

All five must succeed (grep returns nothing) for the slice to be complete.

---

## Notes for the implementer

- **No worktree** — direct commits to main per project's single-maintainer flow.
- **Order matters:** Task 1 (label polish) is independent and ships first because it's harmless and doesn't depend on the panel rewrite. Task 2 (rename) MUST come before Task 3 because Task 3's commit message references `generator-panel.ts`. Task 3 must come before Task 4.
- **The `<details>` element** is the cleanest way to implement the "more ▾" disclosure — it's natively accessible and the CSS hides the default disclosure marker. Make sure the disclosure is conditionally rendered (only for random mode).
- **Test ID preservation:** the existing test asserts on specific element IDs (`#gen-kind-random`, `#gen-length`, `#gen-use`, `#gen-save-default`, `#gen-lower` etc.). The rewrite must keep those IDs intact, even if surrounding markup changes. Check the test file before completing the rewrite.
- **Don't add animation/transitions** — the spec explicitly defers those. Panel appears/disappears instantly.
- **Don't add click-outside-to-close** — the spec explicitly excludes it.