feat: add account node type, recovery root modal, and developer derivation tool

- Add IdentityNodeType union (persona | account) with helper functions
- Add recovery root modal for creating/restoring mnemonic-backed roots
- Add developer derivation tool in identities view
- Improve export modal styling (CSS classes instead of inline styles)
- Add persona test coverage for derivation, account type, and validation
- Fix createPersona to correctly pass nodeType through toAppPersona
- Validate inputs in recovery root modal before dispatching events
- Zero private key bytes after hex conversion for security hygiene
- Use bytesToHex helper instead of inline Array.from patterns
- Remove broken README links to nonexistent nsec-tree docs
- Remove unused escapeHtml import from recovery-root-modal

Author: TheCryptoDonkey

app/components/export-modal.ts

@@ -1,129 +1,135 @@
 // app/components/export-modal.ts — Export modal: reveal nsec, copy, QR, relay info
-
 import { getPersona } from '../persona.js'
 import { personaColour } from './persona-picker.js'
 import { escapeHtml } from '../utils/escape.js'
 import { getState } from '../state.js'
 import { generateQR } from './qr.js'
+import { identityNodeLabel, identityNodeType } from '../types.js'
 import type { AppPersona } from '../types.js'
-
 // ── Constants ──────────────────────────────────────────────────
-
 const CLIPBOARD_WIPE_MS = 30_000
 const MODAL_ID = 'export-modal'
-
+const STYLE_ID = 'export-modal-styles'
+const STYLES = `
+  .export-modal::backdrop { background: rgba(0, 0, 0, 0.72); }
+  .export-modal {
+    width: min(42rem, calc(100vw - 2rem));
+    max-width: 42rem;
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    background: var(--bg-surface);
+    color: var(--text-primary);
+    padding: 0;
+    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
+  }
+  .export-modal__content { padding: 1rem; display: grid; gap: 0.875rem; }
+  .export-modal__close {
+    justify-self: end; background: none; border: none; color: var(--text-muted);
+    font-size: 1.5rem; cursor: pointer; line-height: 1; padding: 0;
+  }
+  .export-modal__title { margin: 0; font-size: 1.1rem; color: var(--text-bright); line-height: 1.4; }
+  .export-modal__badge {
+    display: inline-flex; width: 1.5rem; height: 1.5rem; border-radius: 999px;
+    align-items: center; justify-content: center; color: #fff; font-size: 0.75rem; margin: 0 0.35rem;
+  }
+  .export-modal__context { display: grid; gap: 0.45rem; }
+  .export-modal__context p, .export-modal__relays {
+    margin: 0; font-size: 0.78rem; color: var(--text-secondary); line-height: 1.55;
+  }
+  .export-modal__nsec-wrap {
+    position: relative; border: 1px solid var(--border); border-radius: 8px;
+    background: var(--bg-deep); padding: 0.9rem; overflow: hidden;
+  }
+  .export-modal__label {
+    display: block; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
+    color: var(--text-muted); margin-bottom: 0.5rem;
+  }
+  .export-modal__nsec {
+    display: block; font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.55;
+    word-break: break-all; white-space: pre-wrap; padding-right: 0.25rem;
+  }
+  .export-modal__reveal-overlay {
+    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
+    background: rgba(10, 13, 18, 0.72); color: var(--text-bright); font-size: 0.82rem; cursor: pointer;
+  }
+  .export-modal__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
+  .export-modal__qr { border: 1px solid var(--border); border-radius: 8px; padding: 0.75rem; background: #fff; justify-self: center; }
+`
 // ── Public API ─────────────────────────────────────────────────
-
 /**
  * Show an export modal for a persona's nsec, with context, reveal,
  * copy (nsec + npub), QR (npub only), and relay info.
  */
 export function showExportModal(persona: AppPersona): void {
-  // Remove any existing export modal
   document.getElementById(MODAL_ID)?.remove()
-
+  ensureStyles()
   const colour = personaColour(persona.name)
   const displayName = persona.displayName ?? persona.name
   const settings = getState().settings
-
-  // Derive the full persona (with private key material)
+  const nodeLabel = identityNodeLabel(persona).toLowerCase()
+  const isAccount = identityNodeType(persona) === 'account'
   const fullPersona = getPersona(persona.name, persona.index)
   const nsec = fullPersona.identity.nsec
   const npub = fullPersona.identity.npub
-
-  // Relay info
   const relays = persona.writeRelays?.length
     ? persona.writeRelays
     : settings.defaultWriteRelays
-
-  // ── Build dialog ───────────────────────────────────────────
-
   const dialog = document.createElement('dialog')
   dialog.id = MODAL_ID
   dialog.className = 'modal export-modal'
-
-  // All interpolated values are escaped via escapeHtml() — safe innerHTML usage
-  // consistent with the rest of the codebase (header.ts, persona-picker.ts, modal.ts)
   dialog.innerHTML = `
     <div class="export-modal__content">
       <button class="export-modal__close" type="button" aria-label="Close">&times;</button>
-
       <h2 class="export-modal__title">
         Export nsec for
         <span class="export-modal__badge" style="background-color:${colour}">${escapeHtml(displayName.slice(0, 1).toUpperCase())}</span>
         ${escapeHtml(displayName)}
       </h2>
-
       <div class="export-modal__context">
-        <p>This key gives full control of this persona. Only paste it into Nostr clients you trust.</p>
-        <p>If this key is compromised, you can rotate the persona from here &mdash; your other personas are unaffected.</p>
+        <p>This key gives full control of this ${escapeHtml(nodeLabel)}. Only paste it into Nostr clients you trust.</p>
+        <p>${isAccount ? 'Anonymous accounts are unlinkable by default unless you later choose to generate a proof.' : 'If this key is compromised, you can rotate this persona without affecting your other branches.'}</p>
         <p>Clipboard auto-clears after 30 seconds.</p>
       </div>
-
       <div class="export-modal__nsec-wrap" id="export-nsec-wrap">
+        <span class="export-modal__label">${escapeHtml(nodeLabel)} nsec</span>
         <code class="export-modal__nsec" id="export-nsec-code" style="filter:blur(5px);user-select:none;">${escapeHtml(nsec)}</code>
         <div class="export-modal__reveal-overlay" id="export-reveal-overlay">Click to reveal</div>
       </div>
-
       <div class="export-modal__actions">
         <button class="btn btn--sm" id="export-copy-nsec" type="button">Copy nsec</button>
         <button class="btn btn--sm" id="export-copy-npub" type="button">Copy npub</button>
         <button class="btn btn--sm" id="export-toggle-qr" type="button">Show QR</button>
       </div>
-
       <div class="export-modal__qr" id="export-qr-area" hidden></div>
-
       <div class="export-modal__relays">
-        This persona publishes to: ${relays.map((r) => `<code>${escapeHtml(r)}</code>`).join(', ') || '<em>default relays</em>'}
+        This ${escapeHtml(nodeLabel)} publishes to: ${relays.map((r) => `<code>${escapeHtml(r)}</code>`).join(', ') || '<em>default relays</em>'}
       </div>
     </div>
   `
-
   document.body.appendChild(dialog)
-
-  // ── Wire: close ────────────────────────────────────────────
-
-  const closeBtn = dialog.querySelector<HTMLButtonElement>('.export-modal__close')
-  closeBtn?.addEventListener('click', () => closeExportModal(dialog))
-
+  dialog.querySelector<HTMLButtonElement>('.export-modal__close')?.addEventListener('click', () => closeExportModal(dialog))
   dialog.addEventListener('click', (e) => {
     if (e.target === dialog) closeExportModal(dialog)
   })
-
   dialog.addEventListener('cancel', () => closeExportModal(dialog))
-
-  // ── Wire: reveal ───────────────────────────────────────────
-
   const nsecWrap = dialog.querySelector<HTMLElement>('#export-nsec-wrap')
   const nsecCode = dialog.querySelector<HTMLElement>('#export-nsec-code')
   const overlay = dialog.querySelector<HTMLElement>('#export-reveal-overlay')
-
   nsecWrap?.addEventListener('click', () => {
     if (!nsecCode || !overlay) return
     nsecCode.style.filter = 'none'
     nsecCode.style.userSelect = 'all'
     overlay.hidden = true
   })
-
-  // ── Wire: copy nsec ────────────────────────────────────────
-
   wireClipboardButton(dialog, '#export-copy-nsec', nsec, 'Copy nsec')
-
-  // ── Wire: copy npub ────────────────────────────────────────
-
   wireClipboardButton(dialog, '#export-copy-npub', npub, 'Copy npub')
-
-  // ── Wire: QR toggle ────────────────────────────────────────
-
   const qrBtn = dialog.querySelector<HTMLButtonElement>('#export-toggle-qr')
   const qrArea = dialog.querySelector<HTMLElement>('#export-qr-area')
   let qrVisible = false
-
   qrBtn?.addEventListener('click', () => {
     if (!qrArea || !qrBtn) return
     qrVisible = !qrVisible
     if (qrVisible) {
-      // generateQR returns sanitised SVG from qrcode-generator — safe innerHTML
       qrArea.innerHTML = generateQR(npub)
       qrArea.hidden = false
       qrBtn.textContent = 'Hide QR'
@@ -133,15 +139,9 @@ export function showExportModal(persona: AppPersona): void {
       qrBtn.textContent = 'Show QR'
     }
   })
-
-  // ── Show ───────────────────────────────────────────────────
-
   dialog.showModal()
 }
-
 // ── Internal helpers ───────────────────────────────────────────
-
-/** Wire a clipboard-copy button with 30 s auto-wipe. */
 function wireClipboardButton(
   dialog: HTMLElement,
   selector: string,
@@ -158,9 +158,14 @@ function wireClipboardButton(
     } catch { /* clipboard may be blocked */ }
   })
 }
-
-/** Close and remove the dialog from the DOM. */
 function closeExportModal(dialog: HTMLDialogElement): void {
   dialog.close()
   dialog.remove()
 }
+function ensureStyles(): void {
+  if (document.getElementById(STYLE_ID)) return
+  const style = document.createElement('style')
+  style.id = STYLE_ID
+  style.textContent = STYLES
+  document.head.appendChild(style)
+}

app/components/identity-tree.ts

@@ -5,7 +5,8 @@ import { walkTree, findById } from '../persona-tree.js'
 import { createChildPersona } from '../persona.js'
 import { personaColour } from './persona-picker.js'
 import { escapeHtml } from '../utils/escape.js'
-import type { AppPersona, AppGroup } from '../types.js'
+import { identityNodeLabel } from '../types.js'
+import type { AppPersona, AppGroup, IdentityNodeType } from '../types.js'
 
 // ── Styles ─────────────────────────────────────────────────────
 
@@ -78,6 +79,16 @@ const TREE_STYLES = `
     font-size: 0.75rem;
   }
 
+  .id-tree__type {
+    font-size: 0.625rem;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--text-muted);
+    border: 1px solid var(--border);
+    border-radius: 999px;
+    padding: 0.05rem 0.35rem;
+  }
+
   .id-tree__groups {
     margin-left: auto;
     font-size: 0.6875rem;
@@ -179,6 +190,7 @@ function renderNode(
   const displayNameHtml = persona.displayName && persona.displayName !== persona.name
     ? ` <span class="id-tree__display-name">(${escapeHtml(persona.displayName)})</span>`
     : ''
+  const typeHtml = `<span class="id-tree__type">${escapeHtml(identityNodeLabel(persona))}</span>`
 
   const paddingLeft = depth * 1.5
   const isSelected = persona.id === selectedId
@@ -189,7 +201,8 @@ function renderNode(
       <span class="id-tree__connector">${parentPrefixes}${connector}</span>
       <span class="id-tree__badge" style="background: ${colour};">${letter}</span>
       <span class="id-tree__name">${escapeHtml(persona.name)}</span>${displayNameHtml}
-      <button class="id-tree__add-btn" data-tree-add-child="${escapeHtml(persona.id)}" title="Add child persona">+</button>
+      ${typeHtml}
+      <button class="id-tree__add-btn" data-tree-add-child="${escapeHtml(persona.id)}" title="Add child persona or account">+</button>
       ${groupLabel ? `<span class="id-tree__groups" data-tree-groups-persona="${escapeHtml(persona.id)}">${groupLabel}</span>` : ''}
     </div>
   `
@@ -320,7 +333,16 @@ function showInlineInput(tree: HTMLElement, addBtn: HTMLElement, parentId: strin
   input.maxLength = 32
   input.autocomplete = 'off'
 
+  const typeSelect = document.createElement('select')
+  typeSelect.className = 'input'
+  typeSelect.style.cssText = 'font-size:0.75rem;padding:0.125rem 0.375rem;max-width:8rem;'
+  typeSelect.innerHTML = `
+    <option value="account">Account</option>
+    <option value="persona">Persona</option>
+  `
+
   inputRow.appendChild(input)
+  inputRow.appendChild(typeSelect)
   nodeRow.insertAdjacentElement('afterend', inputRow)
   input.focus()
 
@@ -336,7 +358,8 @@ function showInlineInput(tree: HTMLElement, addBtn: HTMLElement, parentId: strin
     }
 
     try {
-      const newChild = createChildPersona(parentId, name)
+      const nodeType = (typeSelect.value === 'persona' ? 'persona' : 'account') as IdentityNodeType
+      const newChild = createChildPersona(parentId, name, nodeType)
       const { personas } = getState()
 
       // Insert child into parent's children

app/components/linkage-proof.ts

@@ -8,6 +8,7 @@ import { getState } from '../state.js'
 import { findById } from '../persona-tree.js'
 import { escapeHtml } from '../utils/escape.js'
 import { personaColour } from './persona-picker.js'
+import { identityNodeLabel } from '../types.js'
 import { fromNsec } from 'nsec-tree/core'
 import { createBlindProof, createFullProof, verifyProof } from 'nsec-tree/proof'
 import type { LinkageProof } from 'nsec-tree/core'
@@ -88,6 +89,7 @@ export function showProveOwnershipModal(personaId: string): void {
 
   const { persona, ancestors } = found
   const personaName = persona.name
+  const nodeLabel = identityNodeLabel(persona).toLowerCase()
   // All values below are escaped before interpolation
   const pathStr = escapeHtml([...ancestors.map(a => a.name), personaName].join(' / '))
   const badgeHtml = badge(personaName)
@@ -99,29 +101,33 @@ export function showProveOwnershipModal(personaId: string): void {
   dialog.innerHTML = `
     <div class="modal__form" style="max-width:32rem;">
       <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;">
-        <h2 style="margin:0;font-size:1.125rem;">Prove Ownership</h2>
+        <h2 style="margin:0;font-size:1.125rem;">Prove continuity</h2>
         <button data-close style="background:none;border:none;cursor:pointer;font-size:1.25rem;color:var(--text,#e0e0e0);">&times;</button>
       </div>
 
       <p style="margin:0 0 1rem;color:var(--text-secondary,#aaa);font-size:0.875rem;">
-        Prove ${badgeHtml}<strong>${nameHtml}</strong> derives from your master key.
+        Show that ${badgeHtml}<strong>${nameHtml}</strong> comes from the same root as your master identity.
+      </p>
+
+      <p style="margin:0 0 1rem;color:var(--text-secondary,#aaa);font-size:0.8125rem;line-height:1.5;">
+        Use this when you want to prove a ${escapeHtml(nodeLabel)} is yours without handing over your seed phrase or raw master key.
       </p>
 
       <div style="margin-bottom:1rem;font-family:var(--font-mono,monospace);font-size:0.75rem;color:var(--text-muted,#999);">
         Path: ${pathStr}
       </div>
 
       <fieldset style="border:1px solid var(--border,#444);border-radius:6px;padding:0.75rem;margin-bottom:1rem;">
-        <legend style="font-size:0.8125rem;color:var(--text-secondary,#aaa);padding:0 0.25rem;">Proof type</legend>
+        <legend style="font-size:0.8125rem;color:var(--text-secondary,#aaa);padding:0 0.25rem;">How much should the proof reveal?</legend>
         <label style="display:block;margin-bottom:0.5rem;cursor:pointer;">
           <input type="radio" name="lp-type" value="blind" checked />
-          <strong>Blind</strong>
-          <span style="display:block;margin-left:1.25rem;font-size:0.75rem;color:var(--text-secondary,#aaa);">Proves ownership without revealing your master identity.</span>
+          <strong>Private proof (recommended)</strong>
+          <span style="display:block;margin-left:1.25rem;font-size:0.75rem;color:var(--text-secondary,#aaa);">Proves both identities share a root, while keeping derivation details hidden.</span>
         </label>
         <label style="display:block;cursor:pointer;">
           <input type="radio" name="lp-type" value="full" />
-          <strong>Full</strong>
-          <span style="display:block;margin-left:1.25rem;font-size:0.75rem;color:var(--text-secondary,#aaa);">Reveals your master identity and derivation path. For legal/compliance only.</span>
+          <strong>Debug / compliance proof</strong>
+          <span style="display:block;margin-left:1.25rem;font-size:0.75rem;color:var(--text-secondary,#aaa);">Also reveals the exact derivation context. Useful for audits, recovery debugging, or compliance workflows.</span>
         </label>
       </fieldset>
 
@@ -198,12 +204,12 @@ export function showVerifyProofModal(): void {
   dialog.innerHTML = `
     <div class="modal__form" style="max-width:32rem;">
       <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;">
-        <h2 style="margin:0;font-size:1.125rem;">Verify Linkage Proof</h2>
+        <h2 style="margin:0;font-size:1.125rem;">Verify continuity proof</h2>
         <button data-close style="background:none;border:none;cursor:pointer;font-size:1.25rem;color:var(--text,#e0e0e0);">&times;</button>
       </div>
 
       <label style="display:block;margin-bottom:0.75rem;">
-        <span style="font-size:0.8125rem;color:var(--text-secondary,#aaa);">Paste a linkage proof JSON</span>
+        <span style="font-size:0.8125rem;color:var(--text-secondary,#aaa);">Paste a proof JSON to confirm two identities share the same root.</span>
         <textarea id="vp-input" rows="8" style="display:block;width:100%;margin-top:0.25rem;padding:0.5rem;border-radius:6px;border:1px solid var(--border,#444);background:var(--surface,#1e1e2e);color:var(--text,#e0e0e0);font-family:monospace;font-size:0.75rem;resize:vertical;" placeholder='{"masterPubkey":"...","childPubkey":"...","attestation":"...","signature":"..."}'></textarea>
       </label>