relicario/docs/superpowers/plans/2026-04-22-relicario-extension-1c-beta1.md

relicario Extension 1C-β₁ (Typed-Item Forms) 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: Add the 5 remaining typed-item forms (SecureNote, Identity, Card, Key, Totp incl. Steam Guard) so the relicario extension can daily-drive every typed item the Rust core supports except Document.

Architecture: 5-slice bottom-up sequencing. Slice 1 patches the Rust core's compute_totp_code to emit Steam's 5-char alphabet output. Slice 2 extracts a shared popup/components/fields.ts helper module (row / concealed-row / signature-block primitives) and refactors Login onto it as the reference implementation. Slices 3-5 land the 5 new types in pairs: SecureNote+Identity (no signature block), Card+Key (signature block, no live state), Totp (signature block + countdown + Steam toggle).

Tech Stack: Rust (relicario-core), TypeScript (extension popup), Vitest + happy-dom (existing test harness from α), Bun (package manager).

Reference spec: docs/superpowers/specs/2026-04-22-relicario-extension-1c-beta1-design.md (commit 1b51b7d)

Branch: Create feature/typed-items-1c-beta1 off main (1C-α merged at 2b83105, tag plan-1c-alpha-complete).

---

Pre-flight

• P1: Verify main is clean and tests are green

cd /home/alee/Sources/relicario
git status
git checkout main && git pull
cargo test --workspace 2>&1 | tail -3

Expected: working tree clean, on main, all Rust tests pass.

• P2: Create the feature worktree

cd /home/alee/Sources/relicario
git worktree add .worktrees/typed-items-1c-beta1 -b feature/typed-items-1c-beta1
cd .worktrees/typed-items-1c-beta1/extension
bun install
bun run test 2>&1 | tail -3

Expected: 55 Vitest tests pass (the α baseline).

---

Slice 1 — Rust Steam encoding fix

Goal: compute_totp_code in crates/relicario-core/src/item_types/totp.rs learns to emit Steam Guard's 5-character alphabet output for kind: 'steam'. Standard TOTP/HOTP outputs unchanged.

Task 1: Add Steam alphabet to compute_totp_code

Files:

• Modify: crates/relicario-core/src/item_types/totp.rs

• Step 1: Read the current implementation

Read crates/relicario-core/src/item_types/totp.rs. The file already has compute_totp_code taking a &TotpConfig and returning Result<String>. Locate the format!("{:0width$}", ...) final line — that's where the decimal-only output happens.

• Step 2: Write failing tests

Add the following test module at the bottom of crates/relicario-core/src/item_types/totp.rs, alongside the existing #[cfg(test)] mod compute_tests and #[cfg(test)] mod tests:

#[cfg(test)]
mod steam_tests {
    use super::*;

    /// Reference implementation of the Steam 5-character output, per the
    /// Steam Mobile Authenticator (and WinAuth's Steam-Guard adapter).
    /// Used by tests below to cross-check the production impl without
    /// requiring a third-party vector. The algorithm is short enough to
    /// be reproduced here in isolation.
    fn steam_output_reference(truncated: u32) -> String {
        const ALPHA: &[u8] = b"23456789BCDFGHJKMNPQRTVWXY";
        let mut t = truncated;
        let mut out = String::with_capacity(5);
        for _ in 0..5 {
            out.push(ALPHA[(t % 26) as usize] as char);
            t /= 26;
        }
        out
    }

    /// Compute the dynamic-truncated u32 the same way `compute_totp_code`
    /// does internally — used to drive the reference impl.
    fn truncated_for(secret: &[u8], counter: u64) -> u32 {
        use hmac::{Hmac, Mac};
        use sha1::Sha1;
        let mut mac = Hmac::<Sha1>::new_from_slice(secret).unwrap();
        mac.update(&counter.to_be_bytes());
        let bytes = mac.finalize().into_bytes();
        let offset = (bytes[bytes.len() - 1] & 0x0F) as usize;
        ((bytes[offset]     as u32 & 0x7F) << 24)
        | ((bytes[offset + 1] as u32)        << 16)
        | ((bytes[offset + 2] as u32)        << 8)
        |  (bytes[offset + 3] as u32)
    }

    #[test]
    fn steam_output_matches_reference_impl() {
        let secret = b"12345678901234567890".to_vec();
        let cfg = TotpConfig {
            secret: Zeroizing::new(secret.clone()),
            algorithm: TotpAlgorithm::Sha1,
            digits: 5,
            period_seconds: 30,
            kind: TotpKind::Steam,
        };
        let code_at_30  = compute_totp_code(&cfg, 30).unwrap();
        let code_at_60  = compute_totp_code(&cfg, 60).unwrap();
        let code_at_120 = compute_totp_code(&cfg, 120).unwrap();
        assert_eq!(code_at_30,  steam_output_reference(truncated_for(&secret, 1)));
        assert_eq!(code_at_60,  steam_output_reference(truncated_for(&secret, 2)));
        assert_eq!(code_at_120, steam_output_reference(truncated_for(&secret, 4)));
    }

    #[test]
    fn steam_output_is_exactly_5_chars_regardless_of_digits() {
        let secret = b"hello world!".to_vec();
        for digits in [4u8, 5, 6, 7, 8] {
            let cfg = TotpConfig {
                secret: Zeroizing::new(secret.clone()),
                algorithm: TotpAlgorithm::Sha1,
                digits,
                period_seconds: 30,
                kind: TotpKind::Steam,
            };
            let code = compute_totp_code(&cfg, 0).unwrap();
            assert_eq!(code.len(), 5, "Steam output must be 5 chars (digits={})", digits);
        }
    }

    #[test]
    fn steam_output_uses_only_alphabet_chars() {
        const ALPHA: &str = "23456789BCDFGHJKMNPQRTVWXY";
        let secret = b"hello world!".to_vec();
        let cfg = TotpConfig {
            secret: Zeroizing::new(secret),
            algorithm: TotpAlgorithm::Sha1,
            digits: 5,
            period_seconds: 30,
            kind: TotpKind::Steam,
        };
        for t in 0u64..1000 {
            let code = compute_totp_code(&cfg, t * 30).unwrap();
            for ch in code.chars() {
                assert!(ALPHA.contains(ch), "char {ch:?} not in Steam alphabet (t={t})");
            }
        }
    }

    #[test]
    fn steam_alphabet_excludes_ambiguous_glyphs() {
        const ALPHA: &str = "23456789BCDFGHJKMNPQRTVWXY";
        for ch in ['0', 'O', '1', 'I', 'L', 'S', '5', 'A', 'Z'] {
            assert!(!ALPHA.contains(ch), "ambiguous glyph {ch:?} must not be in alphabet");
        }
    }
}

• Step 3: Run the new tests — they should fail

Run: cargo test -p relicario-core --lib item_types::totp::steam_tests 2>&1 | tail -20 Expected: 3-4 failures (the alphabet-exclusion test passes trivially since it doesn't call the impl; the others all fail because Steam currently returns decimal output).

• Step 4: Implement the Steam alphabet output in compute_totp_code

In crates/relicario-core/src/item_types/totp.rs, near the top (after the use block), add the constant:

/// Steam Mobile Authenticator's 5-character output alphabet.
/// Deliberately excludes ambiguous glyphs (0/O, 1/I/L, S/5, A/Z).
const STEAM_ALPHABET: &[u8] = b"23456789BCDFGHJKMNPQRTVWXY";

Then in compute_totp_code, replace the final let modulus = ...; Ok(format!(...)) block with:

    if matches!(config.kind, TotpKind::Steam) {
        let mut t = truncated;
        let mut out = String::with_capacity(5);
        for _ in 0..5 {
            out.push(STEAM_ALPHABET[(t % 26) as usize] as char);
            t /= 26;
        }
        return Ok(out);
    }

    let modulus = 10u32.pow(config.digits as u32);
    Ok(format!("{:0width$}", truncated % modulus, width = config.digits as usize))

(Where truncated is the u32 already computed by the existing dynamic-truncation logic above. If the existing code uses a different variable name, adapt accordingly — the variable representing the 31-bit truncated HMAC output.)

• Step 5: Re-run all totp tests — Steam tests pass, decimal tests still pass

Run: cargo test -p relicario-core --lib item_types::totp 2>&1 | tail -10 Expected: all tests in compute_tests, tests, and steam_tests modules pass. The pre-existing rfc6238_sha1_vector_59 decimal test must still pass (assertion code == "94287082").

• Step 6: Run the whole workspace — no regressions

Run: cargo test --workspace 2>&1 | grep -E "test result" Expected: every line ends with 0 failed. New tests bump total by 4.

• Step 7: Commit

cd /home/alee/Sources/relicario/.worktrees/typed-items-1c-beta1
git add crates/relicario-core/src/item_types/totp.rs
git commit -m "$(cat <<'EOF'
feat(core/totp): emit Steam Guard alphabet for kind=Steam

compute_totp_code previously produced decimal output for all three
TotpKind variants. Steam Guard requires a 5-character output drawn
from a 26-char alphabet (23456789BCDFGHJKMNPQRTVWXY) — deliberately
excluding ambiguous glyphs (0/O, 1/I/L, S/5, A/Z).

Implementation:
- Iterate the 31-bit truncated HMAC value 5 times: push
  STEAM_ALPHABET[t % 26] then divide by 26.
- TOTP / HOTP decimal output paths unchanged.

Tests:
- steam_output_matches_reference_impl: cross-checks the production
  impl against a separate reference implementation in the test
  module (the algorithm is short enough that a parallel impl is the
  cleanest spec).
- steam_output_is_exactly_5_chars_regardless_of_digits: Steam
  ignores the `digits` field; output always 5 chars.
- steam_output_uses_only_alphabet_chars: 1000-iteration sweep
  confirms no character outside the alphabet ever appears.
- steam_alphabet_excludes_ambiguous_glyphs.
- Existing RFC 6238 SHA1 test vector for kind=Totp still passes
  byte-for-byte.
EOF
)"

---

Slice 2 — Shared field helpers + Login refactor

Goal: introduce popup/components/fields.ts with renderRow / renderConcealedRow / renderSignatureBlock / wireFieldHandlers, add the supporting CSS, write helper unit tests, then refactor the existing Login detail/form code onto the helpers as the reference implementation.

Task 2: Add the field helpers module + tests + CSS

Files:

• Create: extension/src/popup/components/fields.ts

• Create: extension/src/popup/components/__tests__/fields.test.ts

• Modify: extension/src/popup/styles.css

• Step 1: Write the failing helper tests

Create extension/src/popup/components/__tests__/fields.test.ts:

import { describe, expect, it, vi } from 'vitest';
import {
  renderRow,
  renderConcealedRow,
  renderSignatureBlock,
  wireFieldHandlers,
} from '../fields';

describe('renderRow', () => {
  it('plain row contains label + value', () => {
    const html = renderRow({ label: 'username', value: 'alice' });
    expect(html).toContain('username');
    expect(html).toContain('alice');
    expect(html).toContain('field-row');
  });

  it('copyable row exposes a copy action', () => {
    const html = renderRow({ label: 'email', value: 'alice@example.com', copyable: true });
    expect(html).toContain('data-field-action="copy"');
  });

  it('href row wraps value in an external anchor', () => {
    const html = renderRow({ label: 'url', value: 'https://example.com', href: 'https://example.com' });
    expect(html).toContain('href="https://example.com"');
    expect(html).toContain('target="_blank"');
    expect(html).toContain('rel="noopener noreferrer"');
  });

  it('monospace flag toggles the monospace class', () => {
    const html = renderRow({ label: 'fingerprint', value: 'AB:CD', monospace: true });
    expect(html).toContain('monospace');
  });

  it('multiline value renders inside a <pre>', () => {
    const html = renderRow({ label: 'address', value: '1 Main\n2 Main', multiline: true });
    expect(html).toContain('<pre');
  });

  it('escapes HTML in value and label', () => {
    const html = renderRow({ label: '<script>x</script>', value: '"&<>' });
    expect(html).not.toContain('<script>');
    expect(html).toContain('&amp;');
    expect(html).toContain('&lt;');
  });
});

describe('renderConcealedRow', () => {
  it('initial state hides the value behind a placeholder', () => {
    const html = renderConcealedRow({ id: 'pw1', label: 'password', value: 'hunter2' });
    expect(html).toContain('data-field-id="pw1"');
    expect(html).toContain('data-revealed="false"');
    expect(html).toContain('••••');
    // Plaintext is in a data attribute on the row, NOT in the visible textContent.
    expect(html).not.toMatch(/>hunter2</);
  });

  it('exposes show + copy actions', () => {
    const html = renderConcealedRow({ id: 'pw1', label: 'password', value: 'hunter2' });
    expect(html).toContain('data-field-action="reveal"');
    expect(html).toContain('data-field-action="copy"');
  });

  it('multiline concealed shows char count when hidden', () => {
    const html = renderConcealedRow({ id: 'k1', label: 'key', value: 'abcdefghij', multiline: true });
    expect(html).toContain('•••• (10 chars)');
  });
});

describe('renderSignatureBlock', () => {
  it('default accent is blue', () => {
    const html = renderSignatureBlock({ children: '<p>hi</p>' });
    expect(html).toContain('sig-block--blue');
    expect(html).toContain('<p>hi</p>');
  });

  it('honors accent prop', () => {
    expect(renderSignatureBlock({ accent: 'green', children: '' })).toContain('sig-block--green');
    expect(renderSignatureBlock({ accent: 'amber', children: '' })).toContain('sig-block--amber');
    expect(renderSignatureBlock({ accent: 'red',   children: '' })).toContain('sig-block--red');
  });
});

describe('wireFieldHandlers', () => {
  it('reveal toggle flips data-revealed and swaps placeholder for plaintext', () => {
    document.body.innerHTML = renderConcealedRow({
      id: 'pw1',
      label: 'password',
      value: 'hunter2',
    });
    wireFieldHandlers(document.body);
    const row = document.querySelector('[data-field-id="pw1"]') as HTMLElement;
    const revealBtn = row.querySelector('[data-field-action="reveal"]') as HTMLButtonElement;
    const valueEl = row.querySelector('[data-field-role="value"]') as HTMLElement;
    expect(row.getAttribute('data-revealed')).toBe('false');
    expect(valueEl.textContent).toContain('••••');
    revealBtn.click();
    expect(row.getAttribute('data-revealed')).toBe('true');
    expect(valueEl.textContent).toBe('hunter2');
  });

  it('copy button writes the row value to the clipboard', async () => {
    const writeText = vi.fn().mockResolvedValue(undefined);
    Object.defineProperty(navigator, 'clipboard', {
      configurable: true,
      value: { writeText },
    });
    document.body.innerHTML = renderRow({
      label: 'email',
      value: 'alice@example.com',
      copyable: true,
    });
    wireFieldHandlers(document.body);
    const copyBtn = document.querySelector('[data-field-action="copy"]') as HTMLButtonElement;
    copyBtn.click();
    expect(writeText).toHaveBeenCalledWith('alice@example.com');
  });
});

• Step 2: Run — tests fail because fields.ts doesn't exist yet

Run: cd extension && bun run test 2>&1 | tail -10 Expected: import errors / module-not-found for ../fields.

• Step 3: Create the helper module

Create extension/src/popup/components/fields.ts:

/// Field rendering primitives used by every typed-item detail view.
///
/// Pure functions that return HTML strings. Caller is responsible for
/// mounting the strings into the DOM (typically via `app.innerHTML = ...`).
/// After mounting, call `wireFieldHandlers(scope)` once to bind reveal +
/// copy click handlers on any rendered rows.

import { escapeHtml } from '../popup';

export interface RowOpts {
  label: string;
  value: string;
  copyable?: boolean;
  href?: string;
  monospace?: boolean;
  multiline?: boolean;
}

/// Plain label/value row. Optional copy button, optional anchor wrap,
/// optional monospace styling, optional multiline (renders in a <pre>).
export function renderRow(opts: RowOpts): string {
  const { label, value, copyable, href, monospace, multiline } = opts;
  const valueClass = `field-row__value${monospace ? ' monospace' : ''}`;
  let valueHtml: string;
  if (multiline) {
    valueHtml = `<pre>${escapeHtml(value)}</pre>`;
  } else if (href) {
    valueHtml = `<a href="${escapeHtml(href)}" target="_blank" rel="noopener noreferrer">${escapeHtml(value)}</a>`;
  } else {
    valueHtml = escapeHtml(value);
  }
  const actions = copyable
    ? `<button type="button" data-field-action="copy" data-field-value="${escapeHtml(value)}">copy</button>`
    : '';
  return `
    <div class="field-row">
      <span class="field-row__label">${escapeHtml(label)}</span>
      <span class="${valueClass}" data-field-role="value">${valueHtml}</span>
      <span class="field-row__actions">${actions}</span>
    </div>
  `;
}

export interface ConcealedRowOpts {
  id: string;
  label: string;
  value: string;
  monospace?: boolean;
  multiline?: boolean;
}

/// Concealed row — value rendered hidden until the user clicks "show".
/// Plaintext is stored in `data-field-value` on the row element and copied
/// to the visible value span on reveal. Copy button always copies plaintext.
export function renderConcealedRow(opts: ConcealedRowOpts): string {
  const { id, label, value, monospace, multiline } = opts;
  const placeholder = multiline ? `•••• (${value.length} chars)` : '••••';
  const valueClass = `field-row__value${monospace ? ' monospace' : ''}`;
  // Plaintext lives in the row's data-field-value attribute, not in the
  // visible <span> textContent — the reveal handler swaps it in on click.
  return `
    <div class="field-row" data-field-id="${escapeHtml(id)}" data-revealed="false" data-field-value="${escapeHtml(value)}" data-field-multiline="${multiline ? 'true' : 'false'}">
      <span class="field-row__label">${escapeHtml(label)}</span>
      <span class="${valueClass}" data-field-role="value">${escapeHtml(placeholder)}</span>
      <span class="field-row__actions">
        <button type="button" data-field-action="reveal">show</button>
        <button type="button" data-field-action="copy" data-field-value="${escapeHtml(value)}">copy</button>
      </span>
    </div>
  `;
}

export interface SignatureBlockOpts {
  accent?: 'blue' | 'green' | 'amber' | 'red';
  children: string;
}

/// Container for the type-specific signature panel. `children` is HTML
/// the caller has already produced (and escaped where needed).
export function renderSignatureBlock(opts: SignatureBlockOpts): string {
  const accent = opts.accent ?? 'blue';
  return `
    <div class="sig-block sig-block--${accent}">${opts.children}</div>
  `;
}

/// Wire reveal-toggle + copy click handlers within `scope`. Idempotent —
/// safe to call multiple times against the same scope; existing handlers
/// are replaced by Element.addEventListener semantics on re-render.
export function wireFieldHandlers(scope: HTMLElement): void {
  scope.querySelectorAll<HTMLButtonElement>('[data-field-action="reveal"]').forEach((btn) => {
    btn.addEventListener('click', () => {
      const row = btn.closest('[data-field-id]') as HTMLElement | null;
      if (!row) return;
      const valueEl = row.querySelector('[data-field-role="value"]') as HTMLElement | null;
      if (!valueEl) return;
      const revealed = row.getAttribute('data-revealed') === 'true';
      const plaintext = row.getAttribute('data-field-value') ?? '';
      const multiline = row.getAttribute('data-field-multiline') === 'true';
      if (revealed) {
        const placeholder = multiline ? `•••• (${plaintext.length} chars)` : '••••';
        valueEl.textContent = placeholder;
        row.setAttribute('data-revealed', 'false');
        btn.textContent = 'show';
      } else {
        valueEl.textContent = plaintext;
        row.setAttribute('data-revealed', 'true');
        btn.textContent = 'hide';
      }
    });
  });

  scope.querySelectorAll<HTMLButtonElement>('[data-field-action="copy"]').forEach((btn) => {
    btn.addEventListener('click', async () => {
      const value = btn.getAttribute('data-field-value') ?? '';
      try { await navigator.clipboard.writeText(value); } catch { /* swallow — UX is the visual flash below */ }
      const original = btn.textContent;
      btn.textContent = 'copied';
      setTimeout(() => { if (btn.textContent === 'copied') btn.textContent = original; }, 1500);
    });
  });
}

• Step 4: Add the supporting CSS

Append to extension/src/popup/styles.css:

/* --- field-row + signature-block helpers (β₁) --- */

.field-row {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: 8px 10px;
  align-items: baseline;
  padding: 4px 0;
  font-size: 12px;
}

.field-row__label   { color: #8b949e; }
.field-row__value   { color: #c9d1d9; word-break: break-word; }
.field-row__value.monospace { font-family: "SF Mono", "JetBrains Mono", monospace; }
.field-row__value pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: "SF Mono", "JetBrains Mono", monospace;
}
.field-row__actions {
  display: flex;
  gap: 6px;
  font-size: 11px;
  color: #8b949e;
}
.field-row__actions button {
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  padding: 0;
  font: inherit;
}
.field-row__actions button:hover { color: #c9d1d9; }

.sig-block {
  background: #161b22;
  border: 1px solid #30363d;
  border-left: 3px solid #1f6feb;
  border-radius: 5px;
  padding: 14px;
  margin-bottom: 10px;
}
.sig-block--blue  { border-left-color: #1f6feb; }
.sig-block--green { border-left-color: #3fb950; }
.sig-block--amber { border-left-color: #d29922; }
.sig-block--red   { border-left-color: #f85149; }

• Step 5: Re-run helper tests — should pass

Run: cd extension && bun run test src/popup/components/__tests__/fields.test.ts 2>&1 | tail -10 Expected: all 14 helper tests pass.

• Step 6: Verify build still passes

Run: cd extension && bun run build 2>&1 | tail -3 Expected: compiled with 2 warnings (existing WASM size warnings only).

• Step 7: Commit

cd /home/alee/Sources/relicario/.worktrees/typed-items-1c-beta1
git add extension/src/popup/components/fields.ts \
        extension/src/popup/components/__tests__/fields.test.ts \
        extension/src/popup/styles.css
git commit -m "feat(ext/popup): field-row + concealed-row + signature-block helpers"

Task 3: Extract Login to types/login.ts using the helpers

Files:

• Create: extension/src/popup/components/types/login.ts

• Modify: extension/src/popup/components/item-detail.ts

• Modify: extension/src/popup/components/item-form.ts

• Step 1: Read the existing Login branches

Read extension/src/popup/components/item-detail.ts and item-form.ts. Identify the Login-rendering code in each (search for case 'login': or renderLoginDetail / renderLoginForm / saveLogin).

• Step 2: Create the Login type module

Create extension/src/popup/components/types/login.ts. The body has three exported functions; the bodies are the existing Login-branch code from item-detail.ts and item-form.ts, lifted verbatim BUT with the row-rendering replaced by renderRow / renderConcealedRow / renderSignatureBlock calls.

/// Login type detail + form. Reference implementation for the shared
/// field helpers introduced in Slice 2.

import { getState, setState, sendMessage, navigate, escapeHtml } from '../../popup';
import type { Item, ItemId, LoginCore, ManifestEntry, TotpConfig } from '../../../shared/types';
import { DEFAULT_PASSWORD_REQUEST } from '../../../shared/types';
import { base32Decode, base32Encode } from '../../../shared/base32';
import {
  renderRow,
  renderConcealedRow,
  renderSignatureBlock,
  wireFieldHandlers,
} from '../fields';

// ----------------------------------------------------------------------
// Detail view
// ----------------------------------------------------------------------

export async function renderDetail(app: HTMLElement, item: Item): Promise<void> {
  if (item.core.type !== 'login') return;
  const core = item.core as LoginCore & { type: 'login' };
  const password = core.password ?? '';
  const username = core.username ?? '';
  const url = core.url ?? '';
  const hasTotp = core.totp !== undefined;

  const sigInner = `
    <div style="display:flex;justify-content:space-between;align-items:center;">
      <div style="font-size:14px;font-weight:600;color:#c9d1d9;">${escapeHtml(item.title)}</div>
      ${url ? `<a href="${escapeHtml(url)}" target="_blank" rel="noopener noreferrer" style="font-size:11px;color:#58a6ff;">open ↗</a>` : ''}
    </div>
  `;

  app.innerHTML = `
    <div class="pad">
      <div style="margin-bottom:12px;">
        ${renderSignatureBlock({ accent: 'blue', children: sigInner })}
      </div>
      ${username ? renderRow({ label: 'username', value: username, copyable: true }) : ''}
      ${renderConcealedRow({ id: 'login-password', label: 'password', value: password })}
      ${url ? renderRow({ label: 'url', value: url, href: url }) : ''}
      ${hasTotp ? `
        <div class="field-row">
          <span class="field-row__label">totp</span>
          <span class="field-row__value monospace" id="totp-code">…</span>
          <span class="field-row__actions"><span id="totp-countdown" style="font-variant-numeric:tabular-nums;">…</span></span>
        </div>
      ` : ''}
      ${item.notes ? renderRow({ label: 'notes', value: item.notes, multiline: true }) : ''}
      <div class="form-actions" style="margin-top:14px;">
        <button class="btn" id="back-btn">back</button>
        <button class="btn" id="edit-btn">edit</button>
        <button class="btn" id="fill-btn">autofill</button>
        <button class="btn danger" id="trash-btn">trash</button>
      </div>
    </div>
  `;

  wireFieldHandlers(app);

  document.getElementById('back-btn')?.addEventListener('click', () => navigate('list'));
  document.getElementById('edit-btn')?.addEventListener('click', () => navigate('edit'));
  document.getElementById('trash-btn')?.addEventListener('click', async () => {
    if (!confirm(`Move "${item.title}" to trash?`)) return;
    const resp = await sendMessage({ type: 'delete_item', id: item.id });
    if (!resp.ok) { setState({ error: resp.error }); return; }
    const listResp = await sendMessage({ type: 'list_items' });
    if (listResp.ok) {
      const data = listResp.data as { items: Array<[ItemId, ManifestEntry]> };
      navigate('list', { entries: data.items, selectedId: null, selectedItem: null });
    } else navigate('list');
  });
  document.getElementById('fill-btn')?.addEventListener('click', async () => {
    const { capturedTabId, capturedUrl } = getState();
    if (capturedTabId === null) { setState({ error: 'No active tab captured' }); return; }
    const resp = await sendMessage({
      type: 'fill_credentials', id: item.id, capturedTabId, capturedUrl,
    });
    if (!resp.ok) setState({ error: resp.error });
    else window.close();
  });

  if (hasTotp) startTotpTicker(item.id);

  const handler = (e: KeyboardEvent) => {
    const t = e.target;
    if (t instanceof HTMLElement) {
      const tag = t.tagName;
      if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || t.isContentEditable) return;
    }
    if (e.key === 'Escape') {
      document.removeEventListener('keydown', handler);
      stopTotpTicker();
      navigate('list');
    }
  };
  document.addEventListener('keydown', handler);
}

// ----------------------------------------------------------------------
// TOTP ticker
// ----------------------------------------------------------------------

let totpTickerId: ReturnType<typeof setInterval> | null = null;
function stopTotpTicker(): void {
  if (totpTickerId !== null) { clearInterval(totpTickerId); totpTickerId = null; }
}
function startTotpTicker(id: ItemId): void {
  stopTotpTicker();
  const tick = async () => {
    const r = await sendMessage({ type: 'get_totp', id });
    if (!r.ok) return;
    const { code, expires_at } = r.data as { code: string; expires_at: number };
    const codeEl = document.getElementById('totp-code');
    const cdEl = document.getElementById('totp-countdown');
    if (codeEl) codeEl.textContent = code;
    if (cdEl) cdEl.textContent = `${Math.max(0, expires_at - Math.floor(Date.now() / 1000))}s`;
  };
  void tick();
  totpTickerId = setInterval(() => void tick(), 1000);
}

// ----------------------------------------------------------------------
// Form (add / edit)
// ----------------------------------------------------------------------

export function renderForm(app: HTMLElement, mode: 'add' | 'edit', existing: Item | null): void {
  const state = getState();
  const existingCore = (existing?.core.type === 'login')
    ? (existing.core as LoginCore & { type: 'login' })
    : null;

  const title = existing?.title ?? '';
  const url = existingCore?.url ?? '';
  const username = existingCore?.username ?? '';
  const password = existingCore?.password ?? '';
  const totpStr = existingCore?.totp ? base32Encode(new Uint8Array(existingCore.totp.secret)) : '';
  const group = existing?.group ?? '';
  const notes = existing?.notes ?? '';

  app.innerHTML = `
    <div class="pad">
      <div class="detail-title" style="margin-bottom:16px;">${mode === 'add' ? 'new login' : 'edit login'}</div>
      ${state.error ? `<div class="error">${escapeHtml(state.error)}</div>` : ''}
      <div class="form-group"><label class="label" for="f-title">title *</label>
        <input id="f-title" type="text" value="${escapeHtml(title)}" placeholder="GitHub"></div>
      <div class="form-group"><label class="label" for="f-url">url</label>
        <input id="f-url" type="text" value="${escapeHtml(url)}" placeholder="https://github.com/login"></div>
      <div class="form-group"><label class="label" for="f-username">username</label>
        <input id="f-username" type="text" value="${escapeHtml(username)}" placeholder="alice@example.com"></div>
      <div class="form-group"><label class="label" for="f-password">password</label>
        <div class="inline-row">
          <input id="f-password" type="password" value="${escapeHtml(password)}">
          <button class="btn" id="gen-btn" title="generate">gen</button>
        </div></div>
      <div class="form-group"><label class="label" for="f-totp">totp secret (base32)</label>
        <input id="f-totp" type="text" value="${escapeHtml(totpStr)}" placeholder="JBSWY3DPEHPK3PXP"></div>
      <div class="form-group"><label class="label" for="f-group">group</label>
        <input id="f-group" type="text" value="${escapeHtml(group)}" placeholder="work"></div>
      <div class="form-group"><label class="label" for="f-notes">notes</label>
        <textarea id="f-notes" placeholder="recovery codes, security questions...">${escapeHtml(notes)}</textarea></div>
      <div class="form-actions">
        <button class="btn" id="cancel-btn">cancel</button>
        <button class="btn btn-primary" id="save-btn">${state.loading ? '<span class="spinner"></span>' : 'save'}</button>
      </div>
    </div>
  `;

  document.getElementById('gen-btn')?.addEventListener('click', async () => {
    const resp = await sendMessage({ type: 'generate_password', request: DEFAULT_PASSWORD_REQUEST });
    if (resp.ok) {
      const data = resp.data as { password: string };
      const pw = document.getElementById('f-password') as HTMLInputElement;
      pw.value = data.password;
      pw.type = 'text';
    } else setState({ error: resp.error });
  });

  document.getElementById('cancel-btn')?.addEventListener('click', () => {
    setState({ error: null });
    navigate(mode === 'edit' ? 'detail' : 'list');
  });

  document.getElementById('save-btn')?.addEventListener('click', async () => {
    await saveLogin(mode, existing);
  });

  const escHandler = (e: KeyboardEvent) => {
    if (e.key === 'Escape') {
      document.removeEventListener('keydown', escHandler);
      setState({ error: null });
      navigate(mode === 'edit' ? 'detail' : 'list');
    }
  };
  document.addEventListener('keydown', escHandler);

  (document.getElementById('f-title') as HTMLInputElement | null)?.focus();
}

function normalizeUrl(raw: string): { ok: true; value: string } | { ok: false; error: string } {
  if (!raw) return { ok: true, value: '' };
  const trimmed = raw.trim();
  const candidate = /^[a-zA-Z][a-zA-Z0-9+.-]*:\/\//.test(trimmed) ? trimmed : `https://${trimmed}`;
  try {
    const u = new URL(candidate);
    if (!u.host) return { ok: false, error: 'URL must include a host (e.g. https://example.com)' };
    return { ok: true, value: u.toString() };
  } catch {
    return { ok: false, error: 'URL is not valid — try something like https://example.com' };
  }
}

async function saveLogin(mode: 'add' | 'edit', existing: Item | null): Promise<void> {
  const state = getState();
  const title = (document.getElementById('f-title') as HTMLInputElement).value.trim();
  const rawUrl = (document.getElementById('f-url') as HTMLInputElement).value;
  const username = (document.getElementById('f-username') as HTMLInputElement).value.trim();
  const password = (document.getElementById('f-password') as HTMLInputElement).value;
  const totpStr = (document.getElementById('f-totp') as HTMLInputElement).value.trim();
  const group = (document.getElementById('f-group') as HTMLInputElement).value.trim();
  const notes = (document.getElementById('f-notes') as HTMLTextAreaElement).value;

  if (!title) { setState({ error: 'Title is required' }); return; }

  const urlResult = normalizeUrl(rawUrl);
  if (!urlResult.ok) { setState({ error: urlResult.error }); return; }
  const url = urlResult.value;

  let totp: TotpConfig | undefined;
  if (totpStr) {
    try {
      const bytes = base32Decode(totpStr);
      totp = {
        secret: Array.from(bytes),
        algorithm: 'sha1', digits: 6, period_seconds: 30, kind: 'totp',
      };
    } catch (err) {
      setState({ error: `Invalid TOTP secret: ${err instanceof Error ? err.message : String(err)}` });
      return;
    }
  }

  const now = Math.floor(Date.now() / 1000);
  const core: LoginCore & { type: 'login' } = {
    type: 'login',
    username: username || undefined,
    password: password || undefined,
    url: url || undefined,
    totp,
  };

  const item: Item = {
    id: existing?.id ?? '',
    title, type: 'login',
    tags: existing?.tags ?? [],
    favorite: existing?.favorite ?? false,
    group: group || undefined,
    notes: notes || undefined,
    created: existing?.created ?? now,
    modified: now,
    trashed_at: undefined,
    core,
    sections: existing?.sections ?? [],
    attachments: existing?.attachments ?? [],
    field_history: existing?.field_history ?? {},
  };

  setState({ loading: true, error: null });

  const resp = mode === 'add'
    ? await sendMessage({ type: 'add_item', item })
    : await sendMessage({ type: 'update_item', id: state.selectedId!, item });

  if (resp.ok) {
    const listResp = await sendMessage({ type: 'list_items' });
    if (listResp.ok) {
      const data = listResp.data as { items: Array<[ItemId, ManifestEntry]> };
      navigate('list', { entries: data.items, selectedId: null, selectedItem: null });
    } else navigate('list');
  } else {
    setState({ loading: false, error: resp.error });
  }
}

• Step 3: Update item-detail.ts to dispatch into types/login

Replace the body of extension/src/popup/components/item-detail.ts with:

/// Typed-item detail view dispatcher. Each type's renderDetail lives in
/// its own module under ./types/. Document stays "coming soon" until γ.

import { navigate } from '../popup';
import type { Item } from '../../shared/types';
import { getState } from '../popup';
import * as login from './types/login';

export async function renderItemDetail(app: HTMLElement): Promise<void> {
  const item = getState().selectedItem;
  if (!item) { navigate('list'); return; }

  switch (item.type) {
    case 'login':       return login.renderDetail(app, item);
    case 'secure_note':
    case 'identity':
    case 'card':
    case 'key':
    case 'totp':
    case 'document':    return renderComingSoon(app, item);
  }
}

function renderComingSoon(app: HTMLElement, item: Item): void {
  app.innerHTML = `
    <div class="pad">
      <div class="detail-title" style="margin-bottom:16px;">${item.title}</div>
      <p class="muted">The <strong>${item.type}</strong> item type is not editable in the extension yet.</p>
      <div class="form-actions"><button class="btn" id="back-btn">back</button></div>
    </div>
  `;
  document.getElementById('back-btn')?.addEventListener('click', () => navigate('list'));
}

• Step 4: Update item-form.ts to dispatch into types/login

Replace the body of extension/src/popup/components/item-form.ts with:

/// Typed-item add/edit form dispatcher. Each type's renderForm lives in
/// its own module under ./types/. Document stays "coming soon" until γ.

import { navigate, getState } from '../popup';
import type { Item, ItemType } from '../../shared/types';
import * as login from './types/login';

export function renderItemForm(app: HTMLElement, mode: 'add' | 'edit'): void {
  const state = getState();
  const existing = mode === 'edit' ? state.selectedItem : null;
  const type: ItemType = existing?.type ?? state.newType ?? 'login';

  switch (type) {
    case 'login':       return login.renderForm(app, mode, existing);
    case 'secure_note':
    case 'identity':
    case 'card':
    case 'key':
    case 'totp':
    case 'document':    return renderComingSoon(app, type);
  }
}

function renderComingSoon(app: HTMLElement, type: ItemType): void {
  app.innerHTML = `
    <div class="pad">
      <div class="detail-title" style="margin-bottom:16px;">${type.replace('_', ' ')}</div>
      <p class="muted">Editing <strong>${type}</strong> items is not available yet.</p>
      <div class="form-actions"><button class="btn" id="back-btn">back</button></div>
    </div>
  `;
  document.getElementById('back-btn')?.addEventListener('click', () => navigate('list'));
}

• Step 5: Add newType to PopupState

In extension/src/popup/popup.ts, find the PopupState interface and add:

  newType: import('../shared/types').ItemType | null;

Find the currentState initializer and add:

  newType: null,

(The "+ New" picker in Task 13 will set this; until then it stays null and the form defaults to 'login' as before.)

• Step 6: Verify build + existing tests still pass

cd extension
bun run build 2>&1 | tail -3
bun run test 2>&1 | tail -10

Expected: both green; test count is now 55 + 14 = 69.

• Step 7: Commit

cd /home/alee/Sources/relicario/.worktrees/typed-items-1c-beta1
git add extension/src/popup/components/types/login.ts \
        extension/src/popup/components/item-detail.ts \
        extension/src/popup/components/item-form.ts \
        extension/src/popup/popup.ts
git commit -m "refactor(ext/popup): extract Login to types/login.ts on shared helpers"

---

Slice 3 — SecureNote + Identity

Task 4: SecureNote — view + form + tests

Files:

• Create: extension/src/popup/components/types/secure-note.ts

• Create: extension/src/popup/components/types/__tests__/secure-note.save.test.ts

• Modify: extension/src/popup/components/item-detail.ts

• Modify: extension/src/popup/components/item-form.ts

• Step 1: Write the failing save-shape test

Create extension/src/popup/components/types/__tests__/secure-note.save.test.ts:

import { beforeEach, describe, expect, it, vi } from 'vitest';

// Hoisted mocks — vitest hoists vi.mock above imports.
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: 'secure_note',
  }));
  const escapeHtml = (s: string) => s
    .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
  return { navigate, setState, sendMessage, getState, escapeHtml };
});

import { renderForm } from '../secure-note';
import { sendMessage } from '../../../popup';

describe('SecureNote save shape', () => {
  beforeEach(() => {
    document.body.innerHTML = '<div id="app"></div>';
    vi.mocked(sendMessage).mockReset();
    vi.mocked(sendMessage).mockResolvedValue({ ok: true, data: { id: 'fakeid0000000000', items: [] } });
  });

  it('builds an Item with type=secure_note and the body in core', async () => {
    const app = document.getElementById('app')!;
    renderForm(app, 'add', null);

    (document.getElementById('f-title') as HTMLInputElement).value = 'My Secret Note';
    (document.getElementById('f-body') as HTMLTextAreaElement).value = 'hello\nworld';

    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');
    expect(addCall).toBeDefined();
    const msg = addCall![0] as { type: 'add_item'; item: any };
    expect(msg.item.title).toBe('My Secret Note');
    expect(msg.item.type).toBe('secure_note');
    expect(msg.item.core).toEqual({ type: 'secure_note', body: 'hello\nworld' });
    expect(msg.item.trashed_at).toBeUndefined();
    expect(msg.item.sections).toEqual([]);
    expect(msg.item.attachments).toEqual([]);
  });
});

• Step 2: Run — fails (module missing)

Run: cd extension && bun run test src/popup/components/types/__tests__/secure-note.save.test.ts 2>&1 | tail -10 Expected: import error for ../secure-note.

• Step 3: Implement secure-note.ts

Create extension/src/popup/components/types/secure-note.ts:

/// SecureNote: a single multiline body field. Concealed by default in the
/// detail view; the form is just a big <textarea>.

import { getState, setState, sendMessage, navigate, escapeHtml } from '../../popup';
import type { Item, ItemId, ManifestEntry } from '../../../shared/types';
import {
  renderConcealedRow,
  renderSignatureBlock,
  wireFieldHandlers,
} from '../fields';

export async function renderDetail(app: HTMLElement, item: Item): Promise<void> {
  if (item.core.type !== 'secure_note') return;
  const body = item.core.body ?? '';

  const sigInner = `
    <div style="font-size:14px;font-weight:600;color:#c9d1d9;">${escapeHtml(item.title)}</div>
  `;

  app.innerHTML = `
    <div class="pad">
      <div style="margin-bottom:12px;">
        ${renderSignatureBlock({ accent: 'green', children: sigInner })}
      </div>
      ${renderConcealedRow({ id: 'note-body', label: 'body', value: body, multiline: true })}
      <div class="form-actions" style="margin-top:14px;">
        <button class="btn" id="back-btn">back</button>
        <button class="btn" id="edit-btn">edit</button>
        <button class="btn danger" id="trash-btn">trash</button>
      </div>
    </div>
  `;

  wireFieldHandlers(app);
  document.getElementById('back-btn')?.addEventListener('click', () => navigate('list'));
  document.getElementById('edit-btn')?.addEventListener('click', () => navigate('edit'));
  document.getElementById('trash-btn')?.addEventListener('click', async () => {
    if (!confirm(`Move "${item.title}" to trash?`)) return;
    const resp = await sendMessage({ type: 'delete_item', id: item.id });
    if (!resp.ok) { setState({ error: resp.error }); return; }
    const listResp = await sendMessage({ type: 'list_items' });
    if (listResp.ok) {
      const data = listResp.data as { items: Array<[ItemId, ManifestEntry]> };
      navigate('list', { entries: data.items, selectedId: null, selectedItem: null });
    } else navigate('list');
  });
}

export function renderForm(app: HTMLElement, mode: 'add' | 'edit', existing: Item | null): void {
  const state = getState();
  const title = existing?.title ?? '';
  const body = (existing?.core.type === 'secure_note') ? existing.core.body ?? '' : '';

  app.innerHTML = `
    <div class="pad">
      <div class="detail-title" style="margin-bottom:16px;">${mode === 'add' ? 'new secure note' : 'edit secure note'}</div>
      ${state.error ? `<div class="error">${escapeHtml(state.error)}</div>` : ''}
      <div class="form-group"><label class="label" for="f-title">title *</label>
        <input id="f-title" type="text" value="${escapeHtml(title)}" placeholder="My recovery codes"></div>
      <div class="form-group"><label class="label" for="f-body">body</label>
        <textarea id="f-body" rows="10" placeholder="paste secrets here">${escapeHtml(body)}</textarea></div>
      <div class="form-actions">
        <button class="btn" id="cancel-btn">cancel</button>
        <button class="btn btn-primary" id="save-btn">save</button>
      </div>
    </div>
  `;

  document.getElementById('cancel-btn')?.addEventListener('click', () => {
    setState({ error: null });
    navigate(mode === 'edit' ? 'detail' : 'list');
  });
  document.getElementById('save-btn')?.addEventListener('click', async () => {
    await saveSecureNote(mode, existing);
  });

  (document.getElementById('f-title') as HTMLInputElement | null)?.focus();
}

async function saveSecureNote(mode: 'add' | 'edit', existing: Item | null): Promise<void> {
  const state = getState();
  const title = (document.getElementById('f-title') as HTMLInputElement).value.trim();
  const body = (document.getElementById('f-body') as HTMLTextAreaElement).value;
  if (!title) { setState({ error: 'Title is required' }); return; }

  const now = Math.floor(Date.now() / 1000);
  const item: Item = {
    id: existing?.id ?? '',
    title, type: 'secure_note',
    tags: existing?.tags ?? [],
    favorite: existing?.favorite ?? false,
    group: existing?.group,
    notes: existing?.notes,
    created: existing?.created ?? now,
    modified: now,
    trashed_at: undefined,
    core: { type: 'secure_note', body },
    sections: existing?.sections ?? [],
    attachments: existing?.attachments ?? [],
    field_history: existing?.field_history ?? {},
  };

  setState({ loading: true, error: null });
  const resp = mode === 'add'
    ? await sendMessage({ type: 'add_item', item })
    : await sendMessage({ type: 'update_item', id: state.selectedId!, item });
  if (resp.ok) {
    const listResp = await sendMessage({ type: 'list_items' });
    if (listResp.ok) {
      const data = listResp.data as { items: Array<[ItemId, ManifestEntry]> };
      navigate('list', { entries: data.items, selectedId: null, selectedItem: null });
    } else navigate('list');
  } else {
    setState({ loading: false, error: resp.error });
  }
}

• Step 4: Wire SecureNote into the dispatchers

In extension/src/popup/components/item-detail.ts:

• Add import * as secureNote from './types/secure-note'; after the login import.
• Replace case 'secure_note': (currently falls through to coming-soon) with return secureNote.renderDetail(app, item);.

In extension/src/popup/components/item-form.ts:

• Add import * as secureNote from './types/secure-note'; after the login import.

• Replace case 'secure_note': with return secureNote.renderForm(app, mode, existing);.

• Step 5: Run tests — should pass

cd extension && bun run test 2>&1 | tail -5

Expected: count = 69 + 1 = 70 passing.

• Step 6: Verify build

Run: cd extension && bun run build 2>&1 | tail -3 Expected: clean.

• Step 7: Commit

git add extension/src/popup/components/types/secure-note.ts \
        extension/src/popup/components/types/__tests__/secure-note.save.test.ts \
        extension/src/popup/components/item-detail.ts \
        extension/src/popup/components/item-form.ts
git commit -m "feat(ext/popup): SecureNote view + form on shared helpers"

Task 5: Identity — view + form + tests

Files:

• Create: extension/src/popup/components/types/identity.ts

• Create: extension/src/popup/components/types/__tests__/identity.save.test.ts

• Modify: extension/src/popup/components/item-detail.ts

• Modify: extension/src/popup/components/item-form.ts

• Step 1: Write the failing save-shape test

Create extension/src/popup/components/types/__tests__/identity.save.test.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: 'identity',
  }));
  const escapeHtml = (s: string) => s
    .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
  return { navigate, setState, sendMessage, getState, escapeHtml };
});

import { renderForm } from '../identity';
import { sendMessage } from '../../../popup';

describe('Identity save shape', () => {
  beforeEach(() => {
    document.body.innerHTML = '<div id="app"></div>';
    vi.mocked(sendMessage).mockReset();
    vi.mocked(sendMessage).mockResolvedValue({ ok: true, data: { id: 'fakeid0000000000', items: [] } });
  });

  it('builds an Item with all populated fields and undefined for blanks', async () => {
    const app = document.getElementById('app')!;
    renderForm(app, 'add', null);

    (document.getElementById('f-title') as HTMLInputElement).value = 'Aaron Lee · personal';
    (document.getElementById('f-full-name') as HTMLInputElement).value = 'Aaron Lee';
    (document.getElementById('f-email') as HTMLInputElement).value = 'aaron@example.com';
    (document.getElementById('f-phone') as HTMLInputElement).value = '+1 555 0100';
    (document.getElementById('f-address') as HTMLTextAreaElement).value = '1 Main St\nSpringfield';
    (document.getElementById('f-dob') as HTMLInputElement).value = '1985-05-23';

    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.type).toBe('identity');
    expect(msg.item.core).toEqual({
      type: 'identity',
      full_name: 'Aaron Lee',
      email: 'aaron@example.com',
      phone: '+1 555 0100',
      address: '1 Main St\nSpringfield',
      date_of_birth: '1985-05-23',
    });
  });

  it('leaves empty fields out of core entirely', async () => {
    const app = document.getElementById('app')!;
    renderForm(app, 'add', null);

    (document.getElementById('f-title') as HTMLInputElement).value = 'name only';
    (document.getElementById('f-full-name') as HTMLInputElement).value = 'Bob';
    // Other fields left blank.

    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.core.full_name).toBe('Bob');
    expect(msg.item.core.email).toBeUndefined();
    expect(msg.item.core.phone).toBeUndefined();
    expect(msg.item.core.address).toBeUndefined();
    expect(msg.item.core.date_of_birth).toBeUndefined();
  });
});

• Step 2: Run — fails (module missing)

Run: cd extension && bun run test src/popup/components/types/__tests__/identity.save.test.ts 2>&1 | tail -5 Expected: import error.

• Step 3: Implement identity.ts

Create extension/src/popup/components/types/identity.ts:

/// Identity: full_name, address (multiline), phone, email, date_of_birth.
/// Detail view shows a "profile card" signature block + plain rows.

import { getState, setState, sendMessage, navigate, escapeHtml } from '../../popup';
import type { Item, ItemId, ManifestEntry } from '../../../shared/types';
import {
  renderRow, renderSignatureBlock, wireFieldHandlers,
} from '../fields';

function initials(name: string | undefined): string {
  if (!name) return '?';
  const parts = name.trim().split(/\s+/).slice(0, 2);
  return parts.map((p) => p.charAt(0).toUpperCase()).join('') || '?';
}

function formatDate(iso: string | undefined): string {
  if (!iso) return '';
  const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(iso);
  if (!m) return iso;
  const d = new Date(Date.UTC(Number(m[1]), Number(m[2]) - 1, Number(m[3])));
  return d.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric', timeZone: 'UTC' });
}

export async function renderDetail(app: HTMLElement, item: Item): Promise<void> {
  if (item.core.type !== 'identity') return;
  const c = item.core;
  const sigInner = `
    <div style="display:flex;align-items:center;gap:12px;">
      <div style="width:36px;height:36px;border-radius:50%;background:#d29922;color:#0d1117;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;">${escapeHtml(initials(c.full_name))}</div>
      <div>
        <div style="font-size:14px;font-weight:600;color:#c9d1d9;">${escapeHtml(c.full_name ?? item.title)}</div>
        ${c.email ? `<div style="font-size:11px;color:#8b949e;">${escapeHtml(c.email)}</div>` : ''}
      </div>
    </div>
  `;

  app.innerHTML = `
    <div class="pad">
      <div style="margin-bottom:12px;">
        ${renderSignatureBlock({ accent: 'amber', children: sigInner })}
      </div>
      ${c.phone   ? renderRow({ label: 'phone',   value: c.phone,   copyable: true }) : ''}
      ${c.email   ? renderRow({ label: 'email',   value: c.email,   copyable: true }) : ''}
      ${c.address ? renderRow({ label: 'address', value: c.address, multiline: true })  : ''}
      ${c.date_of_birth ? renderRow({ label: 'born', value: formatDate(c.date_of_birth) }) : ''}
      <div class="form-actions" style="margin-top:14px;">
        <button class="btn" id="back-btn">back</button>
        <button class="btn" id="edit-btn">edit</button>
        <button class="btn danger" id="trash-btn">trash</button>
      </div>
    </div>
  `;

  wireFieldHandlers(app);
  document.getElementById('back-btn')?.addEventListener('click', () => navigate('list'));
  document.getElementById('edit-btn')?.addEventListener('click', () => navigate('edit'));
  document.getElementById('trash-btn')?.addEventListener('click', async () => {
    if (!confirm(`Move "${item.title}" to trash?`)) return;
    const resp = await sendMessage({ type: 'delete_item', id: item.id });
    if (!resp.ok) { setState({ error: resp.error }); return; }
    const listResp = await sendMessage({ type: 'list_items' });
    if (listResp.ok) {
      const data = listResp.data as { items: Array<[ItemId, ManifestEntry]> };
      navigate('list', { entries: data.items, selectedId: null, selectedItem: null });
    } else navigate('list');
  });
}

export function renderForm(app: HTMLElement, mode: 'add' | 'edit', existing: Item | null): void {
  const state = getState();
  const title = existing?.title ?? '';
  const c = (existing?.core.type === 'identity') ? existing.core : null;

  app.innerHTML = `
    <div class="pad">
      <div class="detail-title" style="margin-bottom:16px;">${mode === 'add' ? 'new identity' : 'edit identity'}</div>
      ${state.error ? `<div class="error">${escapeHtml(state.error)}</div>` : ''}
      <div class="form-group"><label class="label" for="f-title">title *</label>
        <input id="f-title" type="text" value="${escapeHtml(title)}" placeholder="Aaron Lee · personal"></div>
      <div class="form-group"><label class="label" for="f-full-name">full name</label>
        <input id="f-full-name" type="text" value="${escapeHtml(c?.full_name ?? '')}" placeholder="Aaron Lee"></div>
      <div class="form-group"><label class="label" for="f-email">email</label>
        <input id="f-email" type="email" value="${escapeHtml(c?.email ?? '')}" placeholder="aaron@example.com"></div>
      <div class="form-group"><label class="label" for="f-phone">phone</label>
        <input id="f-phone" type="tel" value="${escapeHtml(c?.phone ?? '')}" placeholder="+1 555 0100"></div>
      <div class="form-group"><label class="label" for="f-address">address</label>
        <textarea id="f-address" rows="3" placeholder="street, city, postcode...">${escapeHtml(c?.address ?? '')}</textarea></div>
      <div class="form-group"><label class="label" for="f-dob">date of birth</label>
        <input id="f-dob" type="date" value="${escapeHtml(c?.date_of_birth ?? '')}"></div>
      <div class="form-actions">
        <button class="btn" id="cancel-btn">cancel</button>
        <button class="btn btn-primary" id="save-btn">save</button>
      </div>
    </div>
  `;

  document.getElementById('cancel-btn')?.addEventListener('click', () => {
    setState({ error: null });
    navigate(mode === 'edit' ? 'detail' : 'list');
  });
  document.getElementById('save-btn')?.addEventListener('click', async () => {
    await saveIdentity(mode, existing);
  });
  (document.getElementById('f-title') as HTMLInputElement | null)?.focus();
}

async function saveIdentity(mode: 'add' | 'edit', existing: Item | null): Promise<void> {
  const state = getState();
  const title = (document.getElementById('f-title') as HTMLInputElement).value.trim();
  if (!title) { setState({ error: 'Title is required' }); return; }

  const get = (id: string) => (document.getElementById(id) as HTMLInputElement | HTMLTextAreaElement).value.trim();

  const core = {
    type: 'identity' as const,
    full_name: get('f-full-name') || undefined,
    email:     get('f-email')     || undefined,
    phone:     get('f-phone')     || undefined,
    address:   get('f-address')   || undefined,
    date_of_birth: get('f-dob')   || undefined,
  };

  const now = Math.floor(Date.now() / 1000);
  const item: Item = {
    id: existing?.id ?? '',
    title, type: 'identity',
    tags: existing?.tags ?? [],
    favorite: existing?.favorite ?? false,
    group: existing?.group, notes: existing?.notes,
    created: existing?.created ?? now,
    modified: now, trashed_at: undefined,
    core,
    sections: existing?.sections ?? [],
    attachments: existing?.attachments ?? [],
    field_history: existing?.field_history ?? {},
  };

  setState({ loading: true, error: null });
  const resp = mode === 'add'
    ? await sendMessage({ type: 'add_item', item })
    : await sendMessage({ type: 'update_item', id: state.selectedId!, item });
  if (resp.ok) {
    const listResp = await sendMessage({ type: 'list_items' });
    if (listResp.ok) {
      const data = listResp.data as { items: Array<[ItemId, ManifestEntry]> };
      navigate('list', { entries: data.items, selectedId: null, selectedItem: null });
    } else navigate('list');
  } else {
    setState({ loading: false, error: resp.error });
  }
}

• Step 2 alt: Wire Identity into the dispatchers

In item-detail.ts: add import * as identity from './types/identity'; and replace case 'identity': with return identity.renderDetail(app, item);. In item-form.ts: same — add the import, replace case 'identity': with return identity.renderForm(app, mode, existing);.

• Step 3: Run tests + build

cd extension && bun run test 2>&1 | tail -5
cd extension && bun run build 2>&1 | tail -3

Expected: 72 tests pass; build clean.

• Step 4: Commit

git add extension/src/popup/components/types/identity.ts \
        extension/src/popup/components/types/__tests__/identity.save.test.ts \
        extension/src/popup/components/item-detail.ts \
        extension/src/popup/components/item-form.ts
git commit -m "feat(ext/popup): Identity view + form (profile-card signature block)"

---

Slice 4 — Card + Key

Task 6: Card — view + form + tests

Files:

• Create: extension/src/popup/components/types/card.ts

• Create: extension/src/popup/components/types/__tests__/card.save.test.ts

• Modify: extension/src/popup/components/item-detail.ts

• Modify: extension/src/popup/components/item-form.ts

• Step 1: Write the failing save-shape test

Create extension/src/popup/components/types/__tests__/card.save.test.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: 'card',
  }));
  const escapeHtml = (s: string) => s
    .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
  return { navigate, setState, sendMessage, getState, escapeHtml };
});

import { renderForm } from '../card';
import { sendMessage } from '../../../popup';

describe('Card save shape', () => {
  beforeEach(() => {
    document.body.innerHTML = '<div id="app"></div>';
    vi.mocked(sendMessage).mockReset();
    vi.mocked(sendMessage).mockResolvedValue({ ok: true, data: { id: 'fakeid0000000000', items: [] } });
  });

  it('builds an Item with expiry as { month, year } and kind from select', async () => {
    const app = document.getElementById('app')!;
    renderForm(app, 'add', null);

    (document.getElementById('f-title') as HTMLInputElement).value = 'Amex Gold';
    (document.getElementById('f-number') as HTMLInputElement).value = '378282246310005';
    (document.getElementById('f-holder') as HTMLInputElement).value = 'AARON LEE';
    (document.getElementById('f-expiry-month') as HTMLSelectElement).value = '08';
    (document.getElementById('f-expiry-year') as HTMLSelectElement).value = '2029';
    (document.getElementById('f-cvv') as HTMLInputElement).value = '1234';
    (document.getElementById('f-pin') as HTMLInputElement).value = '5678';
    (document.getElementById('f-kind') as HTMLSelectElement).value = 'credit';

    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.type).toBe('card');
    expect(msg.item.core).toMatchObject({
      type: 'card',
      number: '378282246310005',
      holder: 'AARON LEE',
      expiry: { month: 8, year: 2029 },
      cvv: '1234',
      pin: '5678',
      kind: 'credit',
    });
  });

  it('omits expiry entirely when month or year is empty', async () => {
    const app = document.getElementById('app')!;
    renderForm(app, 'add', null);

    (document.getElementById('f-title') as HTMLInputElement).value = 'Loyalty card';
    (document.getElementById('f-kind') as HTMLSelectElement).value = 'loyalty';
    // expiry-month + expiry-year left empty.

    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.core.expiry).toBeUndefined();
    expect(msg.item.core.kind).toBe('loyalty');
  });
});

• Step 2: Run — fails (module missing)

Run: cd extension && bun run test src/popup/components/types/__tests__/card.save.test.ts 2>&1 | tail -5

• Step 3: Implement card.ts

Create extension/src/popup/components/types/card.ts:

/// Card: number / holder / expiry MonthYear / cvv / pin / kind.
/// Detail view has a styled card-silhouette signature block.

import { getState, setState, sendMessage, navigate, escapeHtml } from '../../popup';
import type { Item, ItemId, ManifestEntry, CardKind } from '../../../shared/types';
import {
  renderConcealedRow, renderSignatureBlock, wireFieldHandlers,
} from '../fields';

const CARD_KINDS: CardKind[] = ['credit', 'debit', 'gift', 'loyalty', 'other'];

function brandFromNumber(num: string): string {
  if (/^3[47]/.test(num))  return 'AMEX';
  if (/^4/.test(num))      return 'VISA';
  if (/^5[1-5]/.test(num)) return 'MASTERCARD';
  if (/^6/.test(num))      return 'DISCOVER';
  return '';
}

function maskedNumber(num: string): string {
  if (!num) return '';
  const last4 = num.slice(-4);
  const groups = num.length > 4 ? '•••• •••• •••• ' : '';
  return `${groups}${last4}`;
}

function formatExpiry(e: { month: number; year: number } | undefined): string {
  if (!e) return '';
  const mm = String(e.month).padStart(2, '0');
  const yy = String(e.year).slice(-2);
  return `${mm}/${yy}`;
}

export async function renderDetail(app: HTMLElement, item: Item): Promise<void> {
  if (item.core.type !== 'card') return;
  const c = item.core;
  const number = c.number ?? '';
  const brand = brandFromNumber(number);
  const kindLabel = (c.kind ?? 'other').toUpperCase();
  const bandLabel = brand ? `${brand} · ${kindLabel}` : kindLabel;

  const sigInner = `
    <div style="font-size:9px;letter-spacing:0.1em;color:#6e7681;margin-bottom:6px;">${escapeHtml(bandLabel)}</div>
    <div style="font-family:monospace;font-size:14px;letter-spacing:0.08em;color:#c9d1d9;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center;" data-field-id="card-number" data-revealed="false" data-field-value="${escapeHtml(number)}" data-field-multiline="false">
      <span data-field-role="value">${escapeHtml(maskedNumber(number))}</span>
      ${number ? '<button type="button" data-field-action="reveal" style="font-size:10px;color:#8b949e;cursor:pointer;font-family:system-ui,sans-serif;letter-spacing:0;background:transparent;border:0;">show</button>' : ''}
    </div>
    <div style="display:flex;justify-content:space-between;align-items:flex-end;">
      <div>
        <div style="font-size:9px;color:#6e7681;letter-spacing:0.08em;">HOLDER</div>
        <div style="font-size:11px;color:#c9d1d9;">${escapeHtml(c.holder ?? '')}</div>
      </div>
      <div style="text-align:right;">
        <div style="font-size:9px;color:#6e7681;letter-spacing:0.08em;">EXPIRES</div>
        <div style="font-family:monospace;font-size:11px;color:#c9d1d9;">${escapeHtml(formatExpiry(c.expiry))}</div>
      </div>
    </div>
  `;

  app.innerHTML = `
    <div class="pad">
      <div style="margin-bottom:12px;">
        <div class="detail-title" style="margin-bottom:8px;">${escapeHtml(item.title)}</div>
        ${renderSignatureBlock({ accent: 'blue', children: sigInner })}
      </div>
      ${c.cvv ? renderConcealedRow({ id: 'card-cvv', label: 'cvv', value: c.cvv, monospace: true }) : ''}
      ${c.pin ? renderConcealedRow({ id: 'card-pin', label: 'pin', value: c.pin, monospace: true }) : ''}
      <div class="form-actions" style="margin-top:14px;">
        <button class="btn" id="back-btn">back</button>
        <button class="btn" id="edit-btn">edit</button>
        <button class="btn danger" id="trash-btn">trash</button>
      </div>
    </div>
  `;

  // The card-number reveal lives inside the signature block, so wireFieldHandlers
  // picks it up alongside the cvv/pin rows.
  wireFieldHandlers(app);
  document.getElementById('back-btn')?.addEventListener('click', () => navigate('list'));
  document.getElementById('edit-btn')?.addEventListener('click', () => navigate('edit'));
  document.getElementById('trash-btn')?.addEventListener('click', async () => {
    if (!confirm(`Move "${item.title}" to trash?`)) return;
    const resp = await sendMessage({ type: 'delete_item', id: item.id });
    if (!resp.ok) { setState({ error: resp.error }); return; }
    const listResp = await sendMessage({ type: 'list_items' });
    if (listResp.ok) {
      const data = listResp.data as { items: Array<[ItemId, ManifestEntry]> };
      navigate('list', { entries: data.items, selectedId: null, selectedItem: null });
    } else navigate('list');
  });
}

export function renderForm(app: HTMLElement, mode: 'add' | 'edit', existing: Item | null): void {
  const state = getState();
  const title = existing?.title ?? '';
  const c = (existing?.core.type === 'card') ? existing.core : null;
  const currentYear = new Date().getFullYear();

  const monthOptions = Array.from({ length: 12 }, (_, i) => {
    const m = String(i + 1).padStart(2, '0');
    const sel = c?.expiry?.month === i + 1 ? 'selected' : '';
    return `<option value="${m}" ${sel}>${m}</option>`;
  }).join('');
  const yearOptions = Array.from({ length: 51 }, (_, i) => {
    const y = currentYear - 25 + i;
    const sel = c?.expiry?.year === y ? 'selected' : '';
    return `<option value="${y}" ${sel}>${y}</option>`;
  }).join('');
  const kindOptions = CARD_KINDS.map((k) => {
    const sel = (c?.kind ?? 'credit') === k ? 'selected' : '';
    return `<option value="${k}" ${sel}>${k}</option>`;
  }).join('');

  app.innerHTML = `
    <div class="pad">
      <div class="detail-title" style="margin-bottom:16px;">${mode === 'add' ? 'new card' : 'edit card'}</div>
      ${state.error ? `<div class="error">${escapeHtml(state.error)}</div>` : ''}
      <div class="form-group"><label class="label" for="f-title">title *</label>
        <input id="f-title" type="text" value="${escapeHtml(title)}" placeholder="Amex Gold"></div>
      <div class="form-group"><label class="label" for="f-number">number</label>
        <input id="f-number" type="text" inputmode="numeric" value="${escapeHtml(c?.number ?? '')}" placeholder="378282246310005"></div>
      <div class="form-group"><label class="label" for="f-holder">holder</label>
        <input id="f-holder" type="text" value="${escapeHtml(c?.holder ?? '')}" placeholder="AARON LEE"></div>
      <div class="form-group"><label class="label">expiry</label>
        <div class="inline-row">
          <select id="f-expiry-month"><option value="">mm</option>${monthOptions}</select>
          <select id="f-expiry-year"><option value="">yyyy</option>${yearOptions}</select>
        </div></div>
      <div class="form-group"><label class="label" for="f-cvv">cvv</label>
        <input id="f-cvv" type="password" inputmode="numeric" maxlength="4" value="${escapeHtml(c?.cvv ?? '')}"></div>
      <div class="form-group"><label class="label" for="f-pin">pin</label>
        <input id="f-pin" type="password" inputmode="numeric" maxlength="8" value="${escapeHtml(c?.pin ?? '')}"></div>
      <div class="form-group"><label class="label" for="f-kind">kind</label>
        <select id="f-kind">${kindOptions}</select></div>
      <div class="form-actions">
        <button class="btn" id="cancel-btn">cancel</button>
        <button class="btn btn-primary" id="save-btn">save</button>
      </div>
    </div>
  `;

  document.getElementById('cancel-btn')?.addEventListener('click', () => {
    setState({ error: null });
    navigate(mode === 'edit' ? 'detail' : 'list');
  });
  document.getElementById('save-btn')?.addEventListener('click', async () => {
    await saveCard(mode, existing);
  });
  (document.getElementById('f-title') as HTMLInputElement | null)?.focus();
}

async function saveCard(mode: 'add' | 'edit', existing: Item | null): Promise<void> {
  const state = getState();
  const title = (document.getElementById('f-title') as HTMLInputElement).value.trim();
  if (!title) { setState({ error: 'Title is required' }); return; }

  const get = (id: string) => (document.getElementById(id) as HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement).value.trim();
  const number = get('f-number');
  const holder = get('f-holder');
  const expMonth = get('f-expiry-month');
  const expYear  = get('f-expiry-year');
  const cvv = get('f-cvv');
  const pin = get('f-pin');
  const kind = (get('f-kind') as CardKind) || 'credit';

  const expiry = (expMonth && expYear)
    ? { month: Number(expMonth), year: Number(expYear) }
    : undefined;

  const core = {
    type: 'card' as const,
    number: number || undefined,
    holder: holder || undefined,
    expiry,
    cvv: cvv || undefined,
    pin: pin || undefined,
    kind,
  };

  const now = Math.floor(Date.now() / 1000);
  const item: Item = {
    id: existing?.id ?? '',
    title, type: 'card',
    tags: existing?.tags ?? [],
    favorite: existing?.favorite ?? false,
    group: existing?.group, notes: existing?.notes,
    created: existing?.created ?? now,
    modified: now, trashed_at: undefined,
    core,
    sections: existing?.sections ?? [],
    attachments: existing?.attachments ?? [],
    field_history: existing?.field_history ?? {},
  };

  setState({ loading: true, error: null });
  const resp = mode === 'add'
    ? await sendMessage({ type: 'add_item', item })
    : await sendMessage({ type: 'update_item', id: state.selectedId!, item });
  if (resp.ok) {
    const listResp = await sendMessage({ type: 'list_items' });
    if (listResp.ok) {
      const data = listResp.data as { items: Array<[ItemId, ManifestEntry]> };
      navigate('list', { entries: data.items, selectedId: null, selectedItem: null });
    } else navigate('list');
  } else {
    setState({ loading: false, error: resp.error });
  }
}

• Step 4: Wire Card into the dispatchers

In item-detail.ts: add import * as card from './types/card'; and replace case 'card': with return card.renderDetail(app, item);. In item-form.ts: same — replace case 'card': with return card.renderForm(app, mode, existing);.

• Step 5: Run tests + build

cd extension && bun run test 2>&1 | tail -5
cd extension && bun run build 2>&1 | tail -3

Expected: 74 tests; build clean.

• Step 6: Commit

git add extension/src/popup/components/types/card.ts \
        extension/src/popup/components/types/__tests__/card.save.test.ts \
        extension/src/popup/components/item-detail.ts \
        extension/src/popup/components/item-form.ts
git commit -m "feat(ext/popup): Card view + form (card-silhouette signature, MM/YY selects)"

Task 7: Key — view + form + tests

Files:

• Create: extension/src/popup/components/types/key.ts

• Create: extension/src/popup/components/types/__tests__/key.save.test.ts

• Modify: extension/src/popup/components/item-detail.ts

• Modify: extension/src/popup/components/item-form.ts

• Step 1: Write the failing save-shape test

Create extension/src/popup/components/types/__tests__/key.save.test.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: 'key',
  }));
  const escapeHtml = (s: string) => s
    .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
  return { navigate, setState, sendMessage, getState, escapeHtml };
});

import { renderForm } from '../key';
import { sendMessage } from '../../../popup';

describe('Key save shape', () => {
  beforeEach(() => {
    document.body.innerHTML = '<div id="app"></div>';
    vi.mocked(sendMessage).mockReset();
    vi.mocked(sendMessage).mockResolvedValue({ ok: true, data: { id: 'fakeid0000000000', items: [] } });
  });

  it('requires key_material and emits all populated fields', async () => {
    const app = document.getElementById('app')!;
    renderForm(app, 'add', null);

    (document.getElementById('f-title') as HTMLInputElement).value = 'github ssh';
    (document.getElementById('f-key-material') as HTMLTextAreaElement).value = '-----BEGIN OPENSSH PRIVATE KEY-----\nfoo\n-----END...';
    (document.getElementById('f-label') as HTMLInputElement).value = 'work laptop';
    (document.getElementById('f-public-key') as HTMLTextAreaElement).value = 'ssh-ed25519 AAAA...';
    (document.getElementById('f-algorithm') as HTMLInputElement).value = 'ed25519';

    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.type).toBe('key');
    expect(msg.item.core).toEqual({
      type: 'key',
      key_material: '-----BEGIN OPENSSH PRIVATE KEY-----\nfoo\n-----END...',
      label: 'work laptop',
      public_key: 'ssh-ed25519 AAAA...',
      algorithm: 'ed25519',
    });
  });

  it('rejects empty key_material', async () => {
    const app = document.getElementById('app')!;
    renderForm(app, 'add', null);
    (document.getElementById('f-title') as HTMLInputElement).value = 'no key';
    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');
    expect(addCall).toBeUndefined();
  });
});

• Step 2: Run — fails (module missing)

• Step 3: Implement key.ts

Create extension/src/popup/components/types/key.ts:

/// Key: key_material (required, concealed multiline) + label/algorithm/public_key.
/// Form's key_material textarea uses CSS text-security to mask characters
/// since <textarea type="password"> isn't a thing.

import { getState, setState, sendMessage, navigate, escapeHtml } from '../../popup';
import type { Item, ItemId, ManifestEntry } from '../../../shared/types';
import {
  renderRow, renderConcealedRow, renderSignatureBlock, wireFieldHandlers,
} from '../fields';

export async function renderDetail(app: HTMLElement, item: Item): Promise<void> {
  if (item.core.type !== 'key') return;
  const c = item.core;

  const sigInner = `
    <div style="display:flex;justify-content:space-between;align-items:center;">
      <div style="font-size:14px;font-weight:600;color:#c9d1d9;">${escapeHtml(item.title)}</div>
      ${c.algorithm ? `<div style="font-size:10px;color:#8b949e;font-family:monospace;">${escapeHtml(c.algorithm)}</div>` : ''}
    </div>
  `;

  app.innerHTML = `
    <div class="pad">
      <div style="margin-bottom:12px;">
        ${renderSignatureBlock({ accent: 'green', children: sigInner })}
      </div>
      ${renderConcealedRow({ id: 'key-material', label: 'private', value: c.key_material, multiline: true, monospace: true })}
      ${c.label      ? renderRow({ label: 'label',      value: c.label }) : ''}
      ${c.algorithm  ? renderRow({ label: 'algorithm',  value: c.algorithm }) : ''}
      ${c.public_key ? renderRow({ label: 'public', value: c.public_key, multiline: true, monospace: true, copyable: true }) : ''}
      <div class="form-actions" style="margin-top:14px;">
        <button class="btn" id="back-btn">back</button>
        <button class="btn" id="edit-btn">edit</button>
        <button class="btn danger" id="trash-btn">trash</button>
      </div>
    </div>
  `;

  wireFieldHandlers(app);
  document.getElementById('back-btn')?.addEventListener('click', () => navigate('list'));
  document.getElementById('edit-btn')?.addEventListener('click', () => navigate('edit'));
  document.getElementById('trash-btn')?.addEventListener('click', async () => {
    if (!confirm(`Move "${item.title}" to trash?`)) return;
    const resp = await sendMessage({ type: 'delete_item', id: item.id });
    if (!resp.ok) { setState({ error: resp.error }); return; }
    const listResp = await sendMessage({ type: 'list_items' });
    if (listResp.ok) {
      const data = listResp.data as { items: Array<[ItemId, ManifestEntry]> };
      navigate('list', { entries: data.items, selectedId: null, selectedItem: null });
    } else navigate('list');
  });
}

export function renderForm(app: HTMLElement, mode: 'add' | 'edit', existing: Item | null): void {
  const state = getState();
  const title = existing?.title ?? '';
  const c = (existing?.core.type === 'key') ? existing.core : null;

  app.innerHTML = `
    <div class="pad">
      <div class="detail-title" style="margin-bottom:16px;">${mode === 'add' ? 'new key' : 'edit key'}</div>
      ${state.error ? `<div class="error">${escapeHtml(state.error)}</div>` : ''}
      <div class="form-group"><label class="label" for="f-title">title *</label>
        <input id="f-title" type="text" value="${escapeHtml(title)}" placeholder="github ssh"></div>
      <div class="form-group"><label class="label" for="f-key-material">key material *</label>
        <div style="position:relative;">
          <textarea id="f-key-material" rows="8" style="font-family:monospace;-webkit-text-security:disc;" placeholder="paste key here">${escapeHtml(c?.key_material ?? '')}</textarea>
          <button type="button" id="key-show-btn" class="btn" style="position:absolute;right:6px;top:6px;font-size:10px;padding:2px 8px;">show</button>
        </div></div>
      <div class="form-group"><label class="label" for="f-label">label</label>
        <input id="f-label" type="text" value="${escapeHtml(c?.label ?? '')}" placeholder="work laptop"></div>
      <div class="form-group"><label class="label" for="f-algorithm">algorithm</label>
        <input id="f-algorithm" type="text" value="${escapeHtml(c?.algorithm ?? '')}" placeholder="ed25519"></div>
      <div class="form-group"><label class="label" for="f-public-key">public key</label>
        <textarea id="f-public-key" rows="4" style="font-family:monospace;" placeholder="ssh-ed25519 AAAA...">${escapeHtml(c?.public_key ?? '')}</textarea></div>
      <div class="form-actions">
        <button class="btn" id="cancel-btn">cancel</button>
        <button class="btn btn-primary" id="save-btn">save</button>
      </div>
    </div>
  `;

  // Show/hide toggle for the key_material textarea.
  let revealed = false;
  document.getElementById('key-show-btn')?.addEventListener('click', () => {
    revealed = !revealed;
    const ta = document.getElementById('f-key-material') as HTMLTextAreaElement;
    ta.style.webkitTextSecurity = revealed ? 'none' : 'disc';
    (document.getElementById('key-show-btn') as HTMLButtonElement).textContent = revealed ? 'hide' : 'show';
  });

  document.getElementById('cancel-btn')?.addEventListener('click', () => {
    setState({ error: null });
    navigate(mode === 'edit' ? 'detail' : 'list');
  });
  document.getElementById('save-btn')?.addEventListener('click', async () => {
    await saveKey(mode, existing);
  });
  (document.getElementById('f-title') as HTMLInputElement | null)?.focus();
}

async function saveKey(mode: 'add' | 'edit', existing: Item | null): Promise<void> {
  const state = getState();
  const title = (document.getElementById('f-title') as HTMLInputElement).value.trim();
  if (!title) { setState({ error: 'Title is required' }); return; }

  const keyMaterial = (document.getElementById('f-key-material') as HTMLTextAreaElement).value;
  if (!keyMaterial) { setState({ error: 'Key material is required' }); return; }

  const get = (id: string) => (document.getElementById(id) as HTMLInputElement | HTMLTextAreaElement).value.trim();

  const core = {
    type: 'key' as const,
    key_material: keyMaterial,
    label:      get('f-label')      || undefined,
    public_key: get('f-public-key') || undefined,
    algorithm:  get('f-algorithm')  || undefined,
  };

  const now = Math.floor(Date.now() / 1000);
  const item: Item = {
    id: existing?.id ?? '',
    title, type: 'key',
    tags: existing?.tags ?? [],
    favorite: existing?.favorite ?? false,
    group: existing?.group, notes: existing?.notes,
    created: existing?.created ?? now,
    modified: now, trashed_at: undefined,
    core,
    sections: existing?.sections ?? [],
    attachments: existing?.attachments ?? [],
    field_history: existing?.field_history ?? {},
  };

  setState({ loading: true, error: null });
  const resp = mode === 'add'
    ? await sendMessage({ type: 'add_item', item })
    : await sendMessage({ type: 'update_item', id: state.selectedId!, item });
  if (resp.ok) {
    const listResp = await sendMessage({ type: 'list_items' });
    if (listResp.ok) {
      const data = listResp.data as { items: Array<[ItemId, ManifestEntry]> };
      navigate('list', { entries: data.items, selectedId: null, selectedItem: null });
    } else navigate('list');
  } else {
    setState({ loading: false, error: resp.error });
  }
}

• Step 4: Wire Key into the dispatchers

In item-detail.ts: add import * as key from './types/key'; and replace case 'key': with return key.renderDetail(app, item);. In item-form.ts: same — replace case 'key': with return key.renderForm(app, mode, existing);.

• Step 5: Run tests + build

cd extension && bun run test 2>&1 | tail -5
cd extension && bun run build 2>&1 | tail -3

Expected: 76 tests pass; build clean.

• Step 6: Commit

git add extension/src/popup/components/types/key.ts \
        extension/src/popup/components/types/__tests__/key.save.test.ts \
        extension/src/popup/components/item-detail.ts \
        extension/src/popup/components/item-form.ts
git commit -m "feat(ext/popup): Key view + form (concealed monospace signature block)"

---

Slice 5 — Totp (incl. Steam toggle)

Task 8: Totp — view + form + tests

Files:

• Create: extension/src/popup/components/types/totp.ts

• Create: extension/src/popup/components/types/__tests__/totp.save.test.ts

• Modify: extension/src/popup/components/item-detail.ts

• Modify: extension/src/popup/components/item-form.ts

• Step 1: Write the failing save-shape test (covers TOTP and Steam)

Create extension/src/popup/components/types/__tests__/totp.save.test.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: 'totp',
  }));
  const escapeHtml = (s: string) => s
    .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
  return { navigate, setState, sendMessage, getState, escapeHtml };
});

import { renderForm } from '../totp';
import { sendMessage } from '../../../popup';
import { base32Decode } from '../../../../shared/base32';

describe('Totp save shape', () => {
  beforeEach(() => {
    document.body.innerHTML = '<div id="app"></div>';
    vi.mocked(sendMessage).mockReset();
    vi.mocked(sendMessage).mockResolvedValue({ ok: true, data: { id: 'fakeid0000000000', items: [] } });
  });

  it('TOTP kind: secret round-trips via base32, defaults applied', async () => {
    const app = document.getElementById('app')!;
    renderForm(app, 'add', null);

    (document.getElementById('f-title') as HTMLInputElement).value = 'GitHub';
    (document.getElementById('f-secret') as HTMLInputElement).value = 'JBSWY3DPEHPK3PXP';
    (document.getElementById('f-issuer') as HTMLInputElement).value = 'GitHub';
    (document.getElementById('f-label') as HTMLInputElement).value = 'alice';
    // Default kind is 'totp', no toggle click needed.

    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.type).toBe('totp');
    expect(msg.item.core).toMatchObject({
      type: 'totp',
      issuer: 'GitHub',
      label: 'alice',
      config: {
        secret: Array.from(base32Decode('JBSWY3DPEHPK3PXP')),
        algorithm: 'sha1',
        digits: 6,
        period_seconds: 30,
        kind: 'totp',
      },
    });
  });

  it('Steam kind: digits set to 5, kind set to steam', async () => {
    const app = document.getElementById('app')!;
    renderForm(app, 'add', null);

    (document.getElementById('f-title') as HTMLInputElement).value = 'Steam';
    (document.getElementById('f-secret') as HTMLInputElement).value = 'JBSWY3DPEHPK3PXP';
    // Click the Steam toggle button.
    (document.getElementById('kind-steam') as HTMLButtonElement).click();

    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.core.config).toMatchObject({
      digits: 5,
      kind: 'steam',
      algorithm: 'sha1',
      period_seconds: 30,
    });
  });

  it('rejects empty secret', async () => {
    const app = document.getElementById('app')!;
    renderForm(app, 'add', null);
    (document.getElementById('f-title') as HTMLInputElement).value = 'no secret';
    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');
    expect(addCall).toBeUndefined();
  });
});

• Step 2: Run — fails (module missing)

• Step 3: Implement totp.ts

Create extension/src/popup/components/types/totp.ts:

/// Totp standalone item type. Detail view shows the rotating code in a
/// signature block with a thin SVG countdown ring; form has a kind toggle
/// (TOTP vs Steam Guard) and a single secret input.

import { getState, setState, sendMessage, navigate, escapeHtml } from '../../popup';
import type { Item, ItemId, ManifestEntry, TotpKind } from '../../../shared/types';
import { base32Decode, base32Encode } from '../../../shared/base32';
import {
  renderRow, renderConcealedRow, renderSignatureBlock, wireFieldHandlers,
} from '../fields';

let totpTickerId: ReturnType<typeof setInterval> | null = null;
function stopTotpTicker(): void {
  if (totpTickerId !== null) { clearInterval(totpTickerId); totpTickerId = null; }
}

export async function renderDetail(app: HTMLElement, item: Item): Promise<void> {
  if (item.core.type !== 'totp') return;
  const c = item.core;
  const secretB32 = base32Encode(new Uint8Array(c.config.secret));
  const isSteam = c.config.kind === 'steam';

  const headerLine = c.issuer
    ? `${escapeHtml(c.issuer)}${c.label ? ` · ${escapeHtml(c.label)}` : ''}`
    : escapeHtml(item.title);

  // Countdown ring SVG. Stroke-dashoffset animates per tick.
  const ringSvg = `
    <svg width="32" height="32" viewBox="0 0 32 32" style="display:block;">
      <circle cx="16" cy="16" r="14" stroke="#30363d" stroke-width="2" fill="none"/>
      <circle id="totp-ring-arc" cx="16" cy="16" r="14" stroke="#58a6ff" stroke-width="2" fill="none"
              stroke-linecap="round" stroke-dasharray="87.96"
              transform="rotate(-90 16 16)" style="transition:stroke-dashoffset 1s linear;"/>
    </svg>
  `;

  const sigInner = `
    <div style="display:flex;justify-content:space-between;align-items:center;">
      <div>
        <div style="font-size:11px;color:#8b949e;letter-spacing:0.04em;">${headerLine}</div>
        <div id="totp-code" style="font-family:monospace;font-size:28px;letter-spacing:0.12em;color:#c9d1d9;margin-top:4px;">${isSteam ? '·····' : '······'}</div>
      </div>
      <div style="display:flex;flex-direction:column;align-items:center;gap:4px;">
        ${ringSvg}
        <span id="totp-countdown" style="font-size:10px;color:#8b949e;font-variant-numeric:tabular-nums;">…</span>
      </div>
    </div>
  `;

  app.innerHTML = `
    <div class="pad">
      <div style="margin-bottom:12px;">
        <div class="detail-title" style="margin-bottom:8px;">${escapeHtml(item.title)}</div>
        ${renderSignatureBlock({ accent: 'blue', children: sigInner })}
      </div>
      ${c.issuer ? renderRow({ label: 'issuer', value: c.issuer }) : ''}
      ${c.label  ? renderRow({ label: 'label',  value: c.label  }) : ''}
      ${renderRow({ label: 'kind', value: isSteam ? 'Steam Guard' : 'TOTP' })}
      ${renderConcealedRow({ id: 'totp-secret', label: 'secret', value: secretB32, monospace: true })}
      <div class="form-actions" style="margin-top:14px;">
        <button class="btn" id="back-btn">back</button>
        <button class="btn" id="edit-btn">edit</button>
        <button class="btn danger" id="trash-btn">trash</button>
      </div>
    </div>
  `;

  wireFieldHandlers(app);

  // Start the ticker — re-fetches code + countdown every second from the SW.
  stopTotpTicker();
  const tick = async () => {
    const r = await sendMessage({ type: 'get_totp', id: item.id });
    if (!r.ok) return;
    const { code, expires_at } = r.data as { code: string; expires_at: number };
    const codeEl = document.getElementById('totp-code');
    const cdEl = document.getElementById('totp-countdown');
    const ring = document.getElementById('totp-ring-arc') as SVGCircleElement | null;
    if (codeEl) codeEl.textContent = code;
    const remaining = Math.max(0, expires_at - Math.floor(Date.now() / 1000));
    const period = c.config.period_seconds || 30;
    if (cdEl) cdEl.textContent = `${remaining}s`;
    if (ring) {
      const circumference = 2 * Math.PI * 14;
      const offset = circumference * (1 - remaining / period);
      ring.style.strokeDashoffset = String(offset);
    }
  };
  void tick();
  totpTickerId = setInterval(() => void tick(), 1000);

  document.getElementById('back-btn')?.addEventListener('click', () => {
    stopTotpTicker();
    navigate('list');
  });
  document.getElementById('edit-btn')?.addEventListener('click', () => {
    stopTotpTicker();
    navigate('edit');
  });
  document.getElementById('trash-btn')?.addEventListener('click', async () => {
    if (!confirm(`Move "${item.title}" to trash?`)) return;
    stopTotpTicker();
    const resp = await sendMessage({ type: 'delete_item', id: item.id });
    if (!resp.ok) { setState({ error: resp.error }); return; }
    const listResp = await sendMessage({ type: 'list_items' });
    if (listResp.ok) {
      const data = listResp.data as { items: Array<[ItemId, ManifestEntry]> };
      navigate('list', { entries: data.items, selectedId: null, selectedItem: null });
    } else navigate('list');
  });
}

let formKind: TotpKind = 'totp';

export function renderForm(app: HTMLElement, mode: 'add' | 'edit', existing: Item | null): void {
  const state = getState();
  const title = existing?.title ?? '';
  const c = (existing?.core.type === 'totp') ? existing.core : null;
  formKind = c?.config.kind === 'steam' ? 'steam' : 'totp';
  const secretB32 = c?.config.secret ? base32Encode(new Uint8Array(c.config.secret)) : '';

  const renderInner = () => `
    <div class="pad">
      <div class="detail-title" style="margin-bottom:16px;">${mode === 'add' ? 'new totp' : 'edit totp'}</div>
      ${state.error ? `<div class="error">${escapeHtml(state.error)}</div>` : ''}
      <div class="form-group"><label class="label" for="f-title">title *</label>
        <input id="f-title" type="text" value="${escapeHtml(title)}" placeholder="GitHub"></div>
      <div class="form-group"><label class="label">kind</label>
        <div class="inline-row">
          <button type="button" id="kind-totp" class="btn ${formKind === 'totp' ? 'btn-primary' : ''}" style="flex:1;">TOTP</button>
          <button type="button" id="kind-steam" class="btn ${formKind === 'steam' ? 'btn-primary' : ''}" style="flex:1;">Steam Guard</button>
        </div>
        <p class="muted" style="font-size:11px;margin-top:4px;" id="kind-blurb">${formKind === 'steam' ? 'Steam Mobile Authenticator (5-char alphanumeric)' : 'Standard time-based codes (6 digits)'}</p>
      </div>
      <div class="form-group"><label class="label" for="f-secret">secret (base32) *</label>
        <input id="f-secret" type="text" value="${escapeHtml(secretB32)}" placeholder="JBSWY3DPEHPK3PXP"></div>
      <div class="form-group"><label class="label" for="f-issuer">issuer</label>
        <input id="f-issuer" type="text" value="${escapeHtml(c?.issuer ?? '')}" placeholder="GitHub"></div>
      <div class="form-group"><label class="label" for="f-label">label</label>
        <input id="f-label" type="text" value="${escapeHtml(c?.label ?? '')}" placeholder="alice@github.com"></div>
      <div class="form-actions">
        <button class="btn" id="cancel-btn">cancel</button>
        <button class="btn btn-primary" id="save-btn">save</button>
      </div>
    </div>
  `;

  app.innerHTML = renderInner();

  const wireKindToggle = (): void => {
    document.getElementById('kind-totp')?.addEventListener('click', () => {
      formKind = 'totp';
      // Re-render in place so the highlighted button + blurb update.
      const titleVal = (document.getElementById('f-title') as HTMLInputElement).value;
      const secretVal = (document.getElementById('f-secret') as HTMLInputElement).value;
      const issuerVal = (document.getElementById('f-issuer') as HTMLInputElement).value;
      const labelVal = (document.getElementById('f-label') as HTMLInputElement).value;
      app.innerHTML = renderInner();
      (document.getElementById('f-title')  as HTMLInputElement).value = titleVal;
      (document.getElementById('f-secret') as HTMLInputElement).value = secretVal;
      (document.getElementById('f-issuer') as HTMLInputElement).value = issuerVal;
      (document.getElementById('f-label')  as HTMLInputElement).value = labelVal;
      wireKindToggle();
      wireFormButtons(mode, existing);
    });
    document.getElementById('kind-steam')?.addEventListener('click', () => {
      formKind = 'steam';
      const titleVal = (document.getElementById('f-title') as HTMLInputElement).value;
      const secretVal = (document.getElementById('f-secret') as HTMLInputElement).value;
      const issuerVal = (document.getElementById('f-issuer') as HTMLInputElement).value;
      const labelVal = (document.getElementById('f-label') as HTMLInputElement).value;
      app.innerHTML = renderInner();
      (document.getElementById('f-title')  as HTMLInputElement).value = titleVal;
      (document.getElementById('f-secret') as HTMLInputElement).value = secretVal;
      (document.getElementById('f-issuer') as HTMLInputElement).value = issuerVal;
      (document.getElementById('f-label')  as HTMLInputElement).value = labelVal;
      wireKindToggle();
      wireFormButtons(mode, existing);
    });
  };

  wireKindToggle();
  wireFormButtons(mode, existing);
  (document.getElementById('f-title') as HTMLInputElement | null)?.focus();
}

function wireFormButtons(mode: 'add' | 'edit', existing: Item | null): void {
  document.getElementById('cancel-btn')?.addEventListener('click', () => {
    setState({ error: null });
    navigate(mode === 'edit' ? 'detail' : 'list');
  });
  document.getElementById('save-btn')?.addEventListener('click', async () => {
    await saveTotp(mode, existing);
  });
}

async function saveTotp(mode: 'add' | 'edit', existing: Item | null): Promise<void> {
  const state = getState();
  const title = (document.getElementById('f-title') as HTMLInputElement).value.trim();
  if (!title) { setState({ error: 'Title is required' }); return; }

  const secretStr = (document.getElementById('f-secret') as HTMLInputElement).value.trim();
  if (!secretStr) { setState({ error: 'Secret is required' }); return; }

  let secretBytes: Uint8Array;
  try {
    secretBytes = base32Decode(secretStr);
  } catch (err) {
    setState({ error: `Invalid TOTP secret: ${err instanceof Error ? err.message : String(err)}` });
    return;
  }
  if (secretBytes.length === 0) { setState({ error: 'Secret decoded to zero bytes' }); return; }

  const get = (id: string) => (document.getElementById(id) as HTMLInputElement).value.trim();

  const isSteam = formKind === 'steam';
  const core = {
    type: 'totp' as const,
    config: {
      secret: Array.from(secretBytes),
      algorithm: 'sha1' as const,
      digits: isSteam ? 5 : 6,
      period_seconds: 30,
      kind: (isSteam ? 'steam' : 'totp') as TotpKind,
    },
    issuer: get('f-issuer') || undefined,
    label:  get('f-label')  || undefined,
  };

  const now = Math.floor(Date.now() / 1000);
  const item: Item = {
    id: existing?.id ?? '',
    title, type: 'totp',
    tags: existing?.tags ?? [],
    favorite: existing?.favorite ?? false,
    group: existing?.group, notes: existing?.notes,
    created: existing?.created ?? now,
    modified: now, trashed_at: undefined,
    core,
    sections: existing?.sections ?? [],
    attachments: existing?.attachments ?? [],
    field_history: existing?.field_history ?? {},
  };

  setState({ loading: true, error: null });
  const resp = mode === 'add'
    ? await sendMessage({ type: 'add_item', item })
    : await sendMessage({ type: 'update_item', id: state.selectedId!, item });
  if (resp.ok) {
    const listResp = await sendMessage({ type: 'list_items' });
    if (listResp.ok) {
      const data = listResp.data as { items: Array<[ItemId, ManifestEntry]> };
      navigate('list', { entries: data.items, selectedId: null, selectedItem: null });
    } else navigate('list');
  } else {
    setState({ loading: false, error: resp.error });
  }
}

• Step 4: Wire Totp into the dispatchers

In item-detail.ts: add import * as totp from './types/totp'; and replace case 'totp': with return totp.renderDetail(app, item);. In item-form.ts: same — replace case 'totp': with return totp.renderForm(app, mode, existing);.

• Step 5: Run tests + build

cd extension && bun run test 2>&1 | tail -5
cd extension && bun run build 2>&1 | tail -3

Expected: 79 tests pass; build clean.

• Step 6: Commit

git add extension/src/popup/components/types/totp.ts \
        extension/src/popup/components/types/__tests__/totp.save.test.ts \
        extension/src/popup/components/item-detail.ts \
        extension/src/popup/components/item-form.ts
git commit -m "feat(ext/popup): Totp view + form (countdown ring, Steam toggle)"

---

Slice 6 — "New…" picker + acceptance

Task 9: New-item type picker on the toolbar

Files:

• Modify: extension/src/popup/components/item-list.ts

• Step 1: Find the existing "+ New" button handler

Read extension/src/popup/components/item-list.ts. The toolbar handler for + New likely calls navigate('add') directly, defaulting to state.newType ?? 'login'.

• Step 2: Replace the direct navigate with a popover

Locate the + New button's click handler in the toolbar and replace with:

document.getElementById('new-btn')?.addEventListener('click', (e) => {
  e.stopPropagation();
  showNewTypePicker(e.currentTarget as HTMLElement);
});

Then add this helper at the bottom of item-list.ts:

const NEW_TYPE_OPTIONS: Array<{ type: import('../../shared/types').ItemType; icon: string; label: string; disabled?: boolean; tooltip?: string }> = [
  { type: 'login',       icon: '🔑', label: 'login' },
  { type: 'secure_note', icon: '📝', label: 'secure note' },
  { type: 'identity',    icon: '🪪', label: 'identity' },
  { type: 'card',        icon: '💳', label: 'card' },
  { type: 'key',         icon: '🗝',  label: 'key' },
  { type: 'totp',        icon: '⏱',  label: 'totp' },
  { type: 'document',    icon: '📄', label: 'document', disabled: true, tooltip: 'coming in γ — needs attachment upload' },
];

function showNewTypePicker(anchor: HTMLElement): void {
  // Remove any existing picker.
  document.querySelectorAll('.new-type-picker').forEach((el) => el.remove());

  const picker = document.createElement('div');
  picker.className = 'new-type-picker';
  Object.assign(picker.style, {
    position: 'absolute',
    background: '#161b22',
    border: '1px solid #30363d',
    borderRadius: '6px',
    boxShadow: '0 4px 12px rgba(0,0,0,0.4)',
    padding: '4px',
    minWidth: '160px',
    zIndex: '999999',
    fontSize: '12px',
  });

  const rect = anchor.getBoundingClientRect();
  picker.style.top = `${rect.bottom + 4}px`;
  picker.style.left = `${rect.left}px`;

  for (const opt of NEW_TYPE_OPTIONS) {
    const row = document.createElement('div');
    Object.assign(row.style, {
      padding: '6px 10px',
      cursor: opt.disabled ? 'not-allowed' : 'pointer',
      color: opt.disabled ? '#484f58' : '#c9d1d9',
      borderRadius: '4px',
      display: 'flex', alignItems: 'center', gap: '8px',
    });
    if (opt.tooltip) row.title = opt.tooltip;
    row.innerHTML = `<span style="font-size:14px;width:16px;display:inline-block;text-align:center;">${opt.icon}</span><span>${opt.label}</span>`;
    if (!opt.disabled) {
      row.addEventListener('mouseenter', () => { row.style.background = '#21262d'; });
      row.addEventListener('mouseleave', () => { row.style.background = 'transparent'; });
      row.addEventListener('click', (ev) => {
        ev.stopPropagation();
        picker.remove();
        document.removeEventListener('click', closeOnOutside);
        document.removeEventListener('keydown', closeOnEsc);
        setState({ newType: opt.type });
        navigate('add');
      });
    }
    picker.appendChild(row);
  }

  document.body.appendChild(picker);

  const closeOnOutside = (ev: MouseEvent) => {
    if (!picker.contains(ev.target as Node)) {
      picker.remove();
      document.removeEventListener('click', closeOnOutside);
      document.removeEventListener('keydown', closeOnEsc);
    }
  };
  const closeOnEsc = (ev: KeyboardEvent) => {
    if (ev.key === 'Escape') {
      picker.remove();
      document.removeEventListener('click', closeOnOutside);
      document.removeEventListener('keydown', closeOnEsc);
    }
  };
  setTimeout(() => {
    document.addEventListener('click', closeOnOutside);
    document.addEventListener('keydown', closeOnEsc);
  }, 0);
}

Make sure setState and navigate are imported at the top — they already are (used by other handlers).

• Step 3: Verify build

Run: cd extension && bun run build 2>&1 | tail -3 Expected: clean.

• Step 4: Commit

git add extension/src/popup/components/item-list.ts
git commit -m "feat(ext/popup): + New picker with all 7 item types (Document disabled)"

Task 10: Final acceptance — manual matrix + lint greps + tag

Files: none (verification + tag).

• Step 1: Rust workspace + WASM target green

cd /home/alee/Sources/relicario/.worktrees/typed-items-1c-beta1
cargo test --workspace 2>&1 | grep "test result"
cargo build -p relicario-wasm --target wasm32-unknown-unknown 2>&1 | tail -3

Expected: every line ends 0 failed; WASM build clean.

• Step 2: Extension build + tests green

cd extension
bun run test 2>&1 | tail -5
bun run build:all 2>&1 | grep -E "warning|error|compiled" | tail -5

Expected: ~79 tests pass; both Chrome and Firefox compile with 2 warnings each.

• Step 3: Lint greps

cd /home/alee/Sources/relicario/.worktrees/typed-items-1c-beta1
git grep -n 'coming-soon\|Coming in' extension/src/popup/components/ | grep -v document && echo "FAIL: non-document coming-soon hit" || echo "PASS: only document is coming-soon"
git grep -n '@ts-nocheck' extension/src/ && echo "FAIL: @ts-nocheck remains" || echo "PASS: no @ts-nocheck"
git grep -n 'idfoto' extension/ && echo "FAIL: idfoto refs" || echo "PASS: no idfoto refs"

Expected: all three say PASS.

• Step 4: Manual matrix on Chrome and Firefox

Build then load:

cd extension && bun run build:all

Chrome: chrome://extensions → reload the relicario card; or load unpacked from extension/dist. Firefox: about:debugging#/runtime/this-firefox → reload or re-load extension/dist-firefox/manifest.json.

For each of the 5 new types (SecureNote, Identity, Card, Key, Totp):

1. Click the toolbar + New → picker appears with all 7 types; Document is greyed.
2. Pick the type → form opens with the right title, fields visible, save disabled if required field empty.
3. Fill required fields, save → list shows the new item with the right type-icon.
4. Open the item → detail view renders correctly (signature block + rows; reveal works on concealed fields; copy works via clipboard).
5. Edit → save → detail reflects changes; list "modified" updates.
6. Trash → row disappears from list; relicario list --trashed (CLI) shows it.

For Totp specifically:

• Default kind is TOTP; produces a 6-digit code that ticks every second.

• Switch to Steam Guard via the kind toggle, save → detail shows a 5-char alphanumeric code (A/Z/0/O/1/I/L/S/5 never appear).

• Edit a TOTP item, switch its kind to Steam, save → detail re-fetches with the new kind (the get_totp SW handler picks up the saved kind).

• Step 5: Tag the branch tip

After the matrix passes:

git tag plan-1c-beta1-complete

Confirm with git log --oneline -1 that the tag points at the final commit.

---

Self-review

Spec coverage check

• 5 typed-item forms (SecureNote, Identity, Card, Key, Totp): Tasks 4-8.
• Totp + Steam: Task 8 (covers both kinds via toggle); Steam encoding in core: Task 1.
• Concealed-with-reveal+copy: Task 2 (renderConcealedRow), used by all 5 types where applicable.
• Shared fields.ts helpers: Task 2 + Task 3 refactors Login onto them.
• Item-detail / item-form dispatcher updates: each per-type task includes the dispatcher edit.
• "New…" picker: Task 9.
• Per-type Vitest save-shape tests: each per-type task includes its test.
• Helper unit tests: Task 2.
• Document remains coming-soon: dispatchers in Task 3 keep the coming-soon branch only for 'document'.

Placeholder scan

No TBD / TODO / implement later / "similar to task N". Every code-bearing step has the actual code.

Type consistency

• renderRow / renderConcealedRow / renderSignatureBlock signatures defined in Task 2 are used identically in Tasks 3-8.
• wireFieldHandlers(scope) consistent across all consumers.
• state.newType declared in Task 3 (Step 5), set in Task 9 (Step 2), read in item-form.ts dispatcher in Task 3 (Step 4).
• formKind module-level state in Task 8's totp.ts is initialized in renderForm and read in saveTotp — consistent within the file.
• TotpKind from shared/types.ts matches what α already exports (string literal 'totp' | 'steam' | { hotp: { counter: number } }). Steam kind serializes as "steam" per the Rust #[serde(rename_all = "snake_case")] on TotpKind — consistent with the test mocks.