path: root/src/app.js

// Bitcoin Wallet — UI controller (vanilla DOM, no framework).
//
// State lives in `ui` + the singleton `wallet`. Mutating handlers call render(),
// which rebuilds the active screen. Text inputs write back into `ui` on `input`
// (without re-rendering) so their values survive structural re-renders.

import { Wallet, newMnemonic, isValidMnemonic, accountXpubFor, cacheKeyFor, utxoId, parseExtendedKey, xpubToZpub, encryptVault, decryptVault } from './wallet.js';
import { qrSvg } from './qr.js';
import { makeSearcher, resultRows, searchable, punkUrl, warmSearch } from './recipient-search.js';
import { npubOf } from './nostr.js';
import { nip98Header } from './nip98.js';
import { NOSTR_MARK } from './features/nostrlogin.js';
import { scanQr } from './scan.js';
import { dataSources, getSource, setSource, getNetwork, setNetwork, NETWORKS } from './api.js';
import { STAGING } from './build-flags.js';
import { buildFeatures, loadDeferredFeatures } from './features/index.js';
import { t, LANGS, getLang, setLang, isRTL, loadLocale } from './i18n.js';
import {
  fmtBtc,
  fmtSats,
  parseAmount,
  shortAddr,
  shortTxid,
  timeAgo,
  SATS,
  BITCOIN_ICON,
  ARK_MARK,
} from './format.js';

const wallet = new Wallet();

// ---- optional features ------------------------------------------------
// Swaps and Ark plug into fixed seams (receive modes, send
// matchers, history entries, balance lines, settings cards, lifecycle hooks).
// FEATURES/ctx are assembled near the bottom of this file, once every helper
// they capture exists; the hooks below are only ever called at runtime.
const featureHook = (name, ...args) => {
  for (const f of FEATURES) {
    if (!f[name]) continue;
    const v = f[name](...args);
    if (v) return v;
  }
  return null;
};
const featureAll = (name, ...args) => FEATURES.flatMap((f) => (f[name] ? f[name](...args) : []));
// `typed` distinguishes keystroke input from paste/scan: some matchers (a
// lightning address) match mid-typing and must not yank the form away.
const featureMatchSend = (text, typed) => FEATURES.some((f) => f.matchSendText && f.matchSendText(text, typed));








const ui = {
  screen: 'unlock', // 'unlock' | 'wallet' | 'claim' | 'howItWorks'
  claimStep: null, // 'welcome' | 'backup' when opening a gift link
  claimChecking: false, // verifying the gift's funding coin is still unspent
  claimTaken: null, // { txid } if the gift was already claimed (coin spent)
  returnScreen: 'unlock', // where 'howItWorks' returns to (Back / logo)
  unlockTab: 'create', // 'create' | 'import' | 'watch'
  watchXpub: '', // watch-only xpub/zpub input
  watchLabel: '', // watch-only account label input
  fromWallet: false, // unlock screen reached as "add wallet" (show a back button)
  pw: null, // { purpose, accId, mode, v1, v2, error } — vault password prompt
  vaultPw: '', // on-open vault unlock input
  vaultError: '',
  confirmClear: false, // "Clear all" confirmation shown
  editId: null, // account being renamed
  editLabel: '',
  createStep: 'gen', // 'gen' | 'confirm'
  draftMnemonic: '',
  confirm: [], // [{ index, value }]
  confirmPass: '', // re-entered passphrase (confirm field, shown once one is typed)
  importText: '',
  passphrase: '',
  showPass: false,
  revealShown: false, // recovery phrase: false | 'masked' (grid, dots) | 'words'
  pubkeyShown: false, // account public key revealed in Settings
  giftMode: false, // gift sub-view active on the Send page
  giftAmount: '', // gift-create amount input
  viewGift: null, // re-viewing a previously created gift's link/QR { code, locked, amount, claimCode }
  claimChoose: null, // opening a gift with existing wallets present: { code } — pick a target
  giftCode: null, // last-created gift PSBT code
  giftError: '',
  giftMax: false, // gift the whole spendable balance (no-change sweep)
  giftSplitOffer: null, // { amt, lock, freed, fee } when offering to split a coin first
  revokeId: null, // outpoint of a gift being revoked (confirm state)
  claimCode: null, // gift code being claimed (opened from a #gift= link)
  claimLocked: null, // npub-locked gift blob opened from a /lg/ link (public fields)
  claimCodeInput: '', // one-time claim code typed on the locked-gift screen
  claimedAmount: 0,
  claimError: '',
  offlineFallback: false, // auto-entered offline because the network was unreachable
  unlockError: '',

  tab: 'receive', // receive | send | history | settings
  receiveSeenIndex: null, // fresh receive index the user has acknowledged
  txDetail: null, // txid being viewed in the history detail view
  txPage: 0, // History: current page of transactions (10 per page)
  addrScan: false, // Settings: showing the per-address rescan list
  addrScanPage: 0, // Settings: current page within the address list
  rescanning: new Set(), // 'chain/index' ids queued/in-flight for rescan
  send: blankSend(),
  draft: null, // built tx summary awaiting review
  broadcastTx: null, // scanned signed tx awaiting broadcast confirmation
  bump: null, // RBF bump in progress: { prep, feeChoice, customFee }
  sendError: '',
  sendResult: null, // { txid } | { signedHex, txid }
  busy: false,
};

function blankSend() {
  return {
    recipients: [{ address: '', amount: '' }],
    unit: 'btc',
    max: false,
    feeChoice: 'halfHourFee',
    customFee: '',
    manual: false,
    coins: new Set(),
  };
}

// ---------------------------------------------------------------- DOM helper
function h(tag, attrs = {}, ...children) {
  const e = document.createElement(tag);
  for (const [k, v] of Object.entries(attrs || {})) {
    if (v == null || v === false) continue;
    if (k === 'class') e.className = v;
    else if (k === 'html') { e.innerHTML = v; e._html = v; }
    else if (k === 'value') e.value = v;
    else if (k === 'checked' || k === 'disabled' || k === 'selected') e[k] = !!v;
    else if (k.startsWith('on') && typeof v === 'function') {
      // assigned as an on* PROPERTY (not addEventListener) so the morph can
      // transplant handlers between renders: assignment replaces, and _evs
      // records which slots this render claimed
      const n = 'on' + k.slice(2).toLowerCase();
      e[n] = v;
      (e._evs || (e._evs = new Set())).add(n);
    } else e.setAttribute(k, v);
  }
  for (const c of children.flat()) {
    if (c == null || c === false || c === true) continue;
    e.append(c.nodeType ? c : document.createTextNode(String(c)));
  }
  return e;
}

// ---------------------------------------------------------------- morphing
// render() builds a fresh tree exactly as before, but instead of replacing
// the document we PATCH the live DOM into its shape. Nodes keep their
// identity across renders, so :hover, focus, text selection, CSS transitions
// and scroll positions survive every background repaint — the strobing that
// full replacement caused (and that focus/scroll bookkeeping only papered
// over) is gone at the root. Escape hatch: a node carrying data-fresh is
// swapped wholesale whenever the new render produced a different one (used
// where a detached node runs its own animation frames).
function morph(a, b) {
  if (a === b) return;
  // A subtree frozen for a gesture (the balance carousel mid-drag/mid-glide)
  // is left exactly as it stands: patching it would strip the drag's inline
  // snap override and yank the scroll. endCarouselDrag unfreezes and runs a
  // syncing render once motion stops.
  if (a.nodeType === 1 && a._skipMorph) return;
  if (a.nodeType === 3 && b.nodeType === 3) {
    if (a.data !== b.data) a.data = b.data;
    return;
  }
  if (a.nodeType !== 1 || b.nodeType !== 1 || a.nodeName !== b.nodeName
    || b.hasAttribute?.('data-fresh')) {
    a.replaceWith(b);
    return;
  }
  // attributes (className and style strings ride along as attributes)
  // A reused BUTTON whose class changes is a different control wearing the
  // same node (screens lining up positionally) — its `transition: background`
  // would visibly crossfade the old style into the new one (a dark filled
  // button melting into a text link read as a black flash). Repaints aren't
  // style animations: snap it, restore the transition after the paint.
  const snap = a.nodeName === 'BUTTON' && a.getAttribute('class') !== b.getAttribute('class');
  for (const at of [...a.attributes]) if (!b.hasAttribute(at.name)) a.removeAttribute(at.name);
  for (const at of [...b.attributes]) if (a.getAttribute(at.name) !== at.value) a.setAttribute(at.name, at.value);
  if (snap) {
    a.style.transition = 'none';
    requestAnimationFrame(() => requestAnimationFrame(() => { a.style.transition = ''; }));
  }
  // event handler slots claimed via h()
  if (a._evs) for (const n of a._evs) if (!(b._evs && b._evs.has(n))) a[n] = null;
  if (b._evs) for (const n of b._evs) a[n] = b[n];
  a._evs = b._evs;
  // live form state: value/checked are properties, not attributes — but never
  // fight the user over a field they're currently editing
  const tag = a.nodeName;
  if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') {
    if (document.activeElement !== a) {
      if (a.value !== b.value) a.value = b.value;
      if (a.checked !== b.checked) a.checked = b.checked;
    }
    if (a.disabled !== b.disabled) a.disabled = b.disabled;
  }
  // innerHTML-authored subtrees (svg icons, QRs): compare source, not nodes
  if (b._html != null) {
    if (a._html !== b._html) a.innerHTML = b._html;
    a._html = b._html;
    return;
  }
  if (a._html != null) {
    // the live node was innerHTML-authored but this render built children —
    // clear and fall through so the child loop rebuilds it (returning here
    // once left a form's field permanently empty)
    a.textContent = '';
    a._html = undefined;
  }
  // children, by position; snapshot first (appending b's children moves them)
  const ac = [...a.childNodes];
  const bc = [...b.childNodes];
  for (let i = 0; i < bc.length; i++) {
    if (!ac[i]) a.append(bc[i]);
    else if (ac[i] !== bc[i]) morph(ac[i], bc[i]);
  }
  for (let i = bc.length; i < ac.length; i++) ac[i].remove();
}

function morphChildren(parent, next) {
  const cur = [...parent.childNodes];
  for (let i = 0; i < next.length; i++) {
    if (!cur[i]) parent.append(next[i]);
    else if (cur[i] !== next[i]) morph(cur[i], next[i]);
  }
  for (let i = next.length; i < cur.length; i++) cur[i].remove();
}

const root = document.getElementById('app');
function footer() {
  return h(
    'div',
    { class: 'footer small muted center' },
    h(
      'div',
      {},
      t('footerMadeBy') + ' ',
      h('a', { href: 'https://adamsoltys.com', target: '_blank', rel: 'noopener' }, 'Adam Soltys'),
      h('span', { class: 'faint' }, ' · '),
      t('footerSourceOn') + ' ',
      h('a', { href: 'https://github.com/coinos/coinosv3', target: '_blank', rel: 'noopener' }, 'GitHub')
    ),
    h(
      'div',
      { style: 'margin-top:4px' },
      h('button', { class: 'linklike', style: 'font-weight:400', onClick: openHowItWorks }, t('howItWorks')),
      // Chrome no longer prompts to install on its own — surface our own link
      // once it reports the app is installable. We render from a persisted flag
      // (not the live event) so the link is present on the first paint after a
      // refresh, avoiding a layout shift when beforeinstallprompt fires late.
      installable()
        ? h('span', {}, h('span', { class: 'faint' }, ' · '),
            h('button', { class: 'linklike', style: 'font-weight:400', onClick: triggerInstall }, t('installApp')))
        : null,
      h('span', { class: 'faint' }, ' · '),
      h('button', { class: 'linklike', style: 'font-weight:400', onClick: toggleTheme }, resolvedTheme() === 'dark' ? t('lightMode') : t('darkMode'))
    ),
    h('div', { style: 'margin-top:8px' }, languagePicker()),
    // The commit stamp settles "is my PWA fresh?" AND "what code is this?" in
    // one glance — its own last line, so it never wraps the credits on mobile.
    h('div', { class: 'faint', style: 'margin-top:6px' },
      'Running git commit ',
      h('a', { class: 'faint', href: 'https://github.com/coinos/coinosv3/commit/{{COMMIT}}', target: '_blank', rel: 'noopener' }, '{{COMMIT}}'))
  );
}

const THEME_KEY = 'btc-wallet-theme';
function resolvedTheme() {
  try {
    const s = localStorage.getItem(THEME_KEY);
    if (s === 'dark' || s === 'light') return s;
  } catch {}
  try { return matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; } catch {}
  return 'light';
}
function applyTheme() {
  try { document.documentElement.dataset.theme = resolvedTheme(); } catch {}
}
function toggleTheme() {
  try { localStorage.setItem(THEME_KEY, resolvedTheme() === 'dark' ? 'light' : 'dark'); } catch {}
  applyTheme();
  render();
}

// PWA install. Chrome fires beforeinstallprompt when the app qualifies; we stash
// the event and reveal an "Install app" link, then replay it on a user tap (the
// browser requires a gesture). The link's visibility is driven by a persisted
// flag rather than the live event so it's present on the first paint after a
// refresh (no layout shift); the event only supplies the prompt to replay.
// We deliberately do NOT call e.preventDefault(): modern Chrome shows no banner
// of its own to suppress, and preventDefault-without-prompt() logs a console
// warning. The event stays usable for our own e.prompt() on tap.
const INSTALLABLE_KEY = 'btc-wallet-installable';
let installPrompt = null;
function isStandalone() {
  try {
    return matchMedia('(display-mode: standalone)').matches || navigator.standalone === true;
  } catch { return false; }
}
function installable() {
  if (isStandalone()) return false;
  try { return localStorage.getItem(INSTALLABLE_KEY) === '1'; } catch { return false; }
}
function setInstallable(v) {
  try {
    if (v) localStorage.setItem(INSTALLABLE_KEY, '1');
    else localStorage.removeItem(INSTALLABLE_KEY);
  } catch {}
}
if (typeof window !== 'undefined') {
  window.addEventListener('beforeinstallprompt', (e) => {
    installPrompt = e;
    // Only re-render if this changes what's on screen; on a refresh the link is
    // already shown from the persisted flag, so nothing moves.
    const wasShown = installable();
    setInstallable(true);
    if (!wasShown) render();
  });
  window.addEventListener('appinstalled', () => {
    installPrompt = null;
    setInstallable(false);
    render();
  });
}
async function triggerInstall() {
  const e = installPrompt;
  // The prompt event may not have fired yet this load even though the link is
  // shown from the persisted flag; bail quietly if so.
  if (!e) return;
  installPrompt = null;
  e.prompt();
  try {
    await e.userChoice;
  } catch {}
}

// Open the How it works page, remembering where to return to.
function openHowItWorks() {
  if (ui.screen === 'howItWorks') return;
  ui.returnScreen = ui.screen;
  ui.screen = 'howItWorks';
  render();
}

// Per-tab session nav (tab + open tx), so a refresh keeps the user's place.
const NAV_KEY = 'btc-wallet-nav';

// Index path from #app down to a node, and back — used to re-find the focused
// field after a full rebuild (a background re-render produces the same structure).
function focusPath(el) {
  const path = [];
  for (let n = el; n && n !== root; n = n.parentNode) {
    const p = n.parentNode;
    if (!p) return null;
    path.unshift(Array.prototype.indexOf.call(p.children, n));
  }
  return path;
}
function nodeAtPath(path) {
  let n = root;
  for (const i of path) n = n && n.children[i];
  return n || null;
}

// ---- one-shot animation gating -------------------------------------------
// The renderer rebuilds the whole DOM on every render, so a CSS mount
// animation would replay on every background repaint (balance ticks, chat
// bursts). These helpers answer "did this change since the last render?" —
// things animate only in the render where they actually happened.
const _uiSeen = new Map();
function uiChanged(key, val) {
  const prev = _uiSeen.get(key);
  _uiSeen.set(key, val);
  return prev !== val;
}
// A background render can land mid-animation and rebuild the node without
// its one-shot class, killing the motion. animWindow answers "how far into
// the animation started by this change are we?" — callers re-apply the class
// with a negative animation-delay so a rebuild RESUMES the animation.
let _navAt = -1e9;
let _swipeDir = null; // set by the swipe handler just before render
// tab switches carousel just the content pane, not the whole page
let _tabAt = -1e9;
let _tabCls = 'anim-tab-left';
let _tabSeen = false; // a tab has rendered before (slides are for CHANGES, not arrivals)
let _prevTabIdx = 0;
const _animAt = new Map();
function animWindow(key, val, durMs) {
  if (uiChanged(key, val)) _animAt.set(key, performance.now());
  const dt = performance.now() - (_animAt.get(key) ?? -1e9);
  return dt < durMs ? dt : -1;
}
function applyAnim(el, cls, dt) {
  if (dt < 0 || !el || !el.classList) return;
  el.classList.add(cls);
  el.style.animationDelay = -Math.round(dt) + 'ms';
}

// A balance that counts to its new value instead of teleporting, with a green
// breath when money arrived. Keyed so background renders don't re-animate.
const _amtLast = new Map();
function animatedAmount(key, sat) {
  const prev = _amtLast.get(key);
  _amtLast.set(key, sat);
  // data-fresh: this node animates itself with its own rAF loop after render,
  // so the morph must install THIS node, not patch text onto last render's
  const el = h('span', { 'data-fresh': '1' }, fmtAmount(sat));
  if (prev !== undefined && prev !== sat) {
    const from = prev, to = sat, t0 = performance.now(), dur = 550;
    const step = (t) => {
      if (!el.isConnected) return; // a newer render owns the number now
      const p = Math.min(1, (t - t0) / dur);
      const e = 1 - Math.pow(1 - p, 3);
      el.textContent = fmtAmount(Math.round(from + (to - from) * e));
      if (p < 1) requestAnimationFrame(step);
    };
    requestAnimationFrame(step);
    if (to > from) el.classList.add('amt-flash');
  }
  return el;
}

let _carDragging = false; // a balance-carousel drag is in progress
let _renderDeferred = false;
// /chat runs the standalone public community view: it owns #app outright,
// and every app render (feature init, emitter ticks) must stand down or the
// onboarding screen paints over the chat moments after it mounts.
let _publicChatMode = false;
function render() {
  if (_publicChatMode) return;
  // A background render mid carousel-drag rebuilds the strip; the morph then
  // strips the drag's inline scroll-snap-type:none, so mandatory snap yanks
  // the card back to its origin — the "jump partway through" stutter (a
  // position jump, not a dropped frame). Hold renders while the FINGER is
  // down (pointermove writes scrollLeft on the main thread — a render there
  // eats frames); after release the strip is morph-frozen (_skipMorph)
  // instead, so the glide runs undisturbed while the history below is
  // already switching to the chosen account.
  if (_carDragging) { _renderDeferred = true; return; }
  // A render that throws must never brick the page silently: stale DOM keeps
  // its handlers, every one of them calls render again, and every tap turns
  // into a no-op. Show the error and offer the way out instead.
  try { renderInner(); } catch (err) { renderCrash(err); }
}
function endCarouselDrag() {
  _carDragging = false;
  // the strip was frozen against the morph for the glide — unfreeze it and
  // make sure one render runs so it catches up with any state committed early
  const strip = document.querySelector('.bal-carousel');
  if (strip && strip._skipMorph) { strip._skipMorph = false; _renderDeferred = true; }
  if (_renderDeferred) { _renderDeferred = false; render(); }
}
function renderCrash(err) {
  console.error('render failed:', err);
  try {
    const div = document.createElement('div');
    div.className = 'card col';
    div.style.cssText = 'margin:20px;gap:10px';
    const h3 = document.createElement('h3');
    h3.textContent = 'Something broke';
    const pre = document.createElement('div');
    pre.className = 'small muted';
    pre.style.cssText = 'word-break:break-word;white-space:pre-wrap';
    pre.textContent = String((err && (err.stack || err.message)) || err).slice(0, 600);
    const btn = document.createElement('button');
    btn.className = 'btn-primary btn-block';
    btn.textContent = 'Reload';
    btn.onclick = () => location.reload();
    div.append(h3, pre, btn);
    root.replaceChildren(div);
  } catch {}
}
function renderInner() {
  // A direct render subsumes any coalesced one queued by a background emit, so
  // drop the pending one (a user action must not trigger a second rebuild).
  if (_renderRaf) { clearTimeout(_renderRaf); _renderRaf = 0; }
  _lastRender = Date.now();
  // Preserve focus + caret across the rebuild, so a background update (poll, a
  // payment push, an SP scan) can't kick the user out of a field they're editing.
  const a = document.activeElement;
  let fpath = null, selStart = null, selEnd = null;
  if (a && root.contains(a) && /^(INPUT|SELECT|TEXTAREA)$/.test(a.tagName)) {
    fpath = focusPath(a);
    try { selStart = a.selectionStart; selEnd = a.selectionEnd; } catch {}
  }
  // Same idea for scrollable strips (the punks carousel): a rebuild must not
  // yank a half-scrolled list back to its start. Anything marked with
  // data-keep-scroll gets its position carried across the swap.
  const scrolls = {};
  for (const el of root.querySelectorAll('[data-keep-scroll]'))
    if (el.scrollLeft || el.scrollTop)
      scrolls[el.getAttribute('data-keep-scroll')] = { l: el.scrollLeft, t: el.scrollTop };
  const screen =
    featureHook('screenView')
    || (ui.screen === 'wallet'
      ? walletScreen()
      : ui.screen === 'accounts'
        ? accountsScreen()
        : ui.screen === 'accountSettings'
          ? accountSettingsScreen()
        : ui.screen === 'vault'
          ? vaultScreen()
          : ui.screen === 'howItWorks'
            ? howItWorksScreen()
            : shouldOnboard() ? onboardScreen() : unlockScreen());
  // Navigation animates; background repaints must not. The key is every
  // ui field that decides which page is on screen.
  const navKey = [ui.screen, ui.tab === 'settings', ui.chatOpen, ui.msgView, ui.msgPeer, ui.msgCommunity,
    ui.profilePk, ui.settingsPage, ui.addrScan, ui.arkExitPage, ui.txDetail, ui.giftMode, ui.claimStep, ui.nameEditOpen,
    ui.noteThread && ui.noteThread.focusId, !!ui.userSearch, !!ui.zapSetup, !!ui.hatShop].join('|');
  // A deep-linked profile landing is ONE page settling, not a chain of
  // navigations: boot screens shuffle beneath the shell (unlock → restored
  // wallet), then the resolved profile replaces the shell in place. The key
  // still updates, but nothing slides or re-animates until the landing ends.
  if (uiChanged('nav', navKey)) {
    // ui.navAnimSkip: a one-shot "this navigation must not animate" — set by
    // sign-in right before the wallet screen takes over, so the handover is
    // an instant swap instead of a fade over a page that's still settling.
    if (!(ui.pubProfPending || ui.pubProfHold || ui.navAnimSkip)) _navAt = performance.now();
    ui.navAnimSkip = false;
  }
  applyAnim(screen, 'anim-page', (performance.now() - _navAt) < 340 ? performance.now() - _navAt : -1);
  morphChildren(root, [screen, footer()]);
  if (fpath) {
    const el = nodeAtPath(fpath);
    if (el && el !== a && /^(INPUT|SELECT|TEXTAREA)$/.test(el.tagName)) {
      try { el.focus({ preventScroll: true }); if (selStart != null && el.setSelectionRange) el.setSelectionRange(selStart, selEnd); } catch {}
    }
  }
  for (const el of root.querySelectorAll('[data-keep-scroll]')) {
    const s = scrolls[el.getAttribute('data-keep-scroll')];
    if (s) { el.scrollLeft = s.l; el.scrollTop = s.t; }
  }
  // Fast-poll the receive address only while the user is actually watching for a
  // payment (wallet screen, Receive tab, online). Idempotent — safe each render.
  wallet.setWatchReceive(ui.screen === 'wallet' && ui.tab === 'receive' && !wallet.offline);
  if (ui.screen === 'wallet') {
    commitAccount(); // entering the wallet (any path) keeps a provisional gift account
    // Remember where we are so a refresh restores it (only meaningful on the wallet).
    try { sessionStorage.setItem(NAV_KEY, JSON.stringify({ tab: ui.tab, txDetail: ui.txDetail })); } catch {}
  }
  syncHistory(); // mirror the current screen into browser history (Back/Forward)
}

// Background state changes (a wake scan, cross-device sync merges, WS payment
// pushes) can fire a burst of emits — especially when the PWA is refocused
// after being backgrounded. Rendering synchronously on each one rebuilds the
// whole screen dozens of times in a row and starves user input, so the app
// feels frozen for a second or two. Coalesce those into at most one render per
// 200ms: one-per-frame still meant a visible strobe during boot bursts (every
// rebuild swaps the node under the cursor, dropping its :hover until the next
// mouse move — buttons flashed under a resting pointer). Direct user actions
// still call render() synchronously and always take priority; render() itself
// stamps the throttle, so a user render pushes the next background one out.
let _renderRaf = 0;
let _lastRender = 0;
const BG_RENDER_MIN_MS = 200;
function scheduleRender() {
  if (_renderRaf) return;
  const wait = Math.max(0, BG_RENDER_MIN_MS - (Date.now() - _lastRender));
  _renderRaf = setTimeout(() => { _renderRaf = 0; render(); }, wait);
}
wallet.subscribe(scheduleRender);

// ---- browser-history navigation ------------------------------------------
// Mirror the app's screen position into the browser history so the Back/Forward
// buttons (and Android/system back) move between screens we've actually viewed.
// We snapshot only the navigation-relevant `ui` fields, so incidental re-renders
// (typing, polling, balance updates) don't create history entries.
// arkMoveDetail/arkExitDetail/giftDetail are the ark and gift rows' detail
// views — most Spending payments open one of these, and leaving them out
// meant the phone's native Back skipped past the history list entirely
// (it landed on whatever tab minted the previous entry).
const NAV_FIELDS = ['screen', 'tab', 'txDetail', 'arkMoveDetail', 'arkReconDetail', 'arkExitDetail', 'giftDetail', 'bump', 'giftMode', 'claimStep', 'chatOpen', 'msgView', 'msgCommunity', 'msgPeer', 'profilePk', 'profOverThread', 'settingsPage', 'nameEditOpen', 'noteThread', 'userSearch', 'zapSetup', 'hatShop'];
function navSnapshot() {
  const s = {};
  for (const f of NAV_FIELDS) s[f] = ui[f] ?? null;
  // Screens with volatile sub-state (a reply draft, typed amounts, search
  // results streaming in) snapshot only what IDENTIFIES the screen — a
  // keystroke must never mint a history entry.
  if (ui.noteThread) s.noteThread = { rootId: ui.noteThread.rootId, focusId: ui.noteThread.focusId, seed: ui.noteThread.seed };
  if (ui.userSearch) s.userSearch = { q: '', rows: null };
  if (ui.zapSetup) s.zapSetup = { pk: ui.zapSetup.pk, npub: ui.zapSetup.npub, eventId: ui.zapSetup.eventId, amount: '21' };
  return s;
}
const navSig = (s) => JSON.stringify(s);
let navStack = []; // in-memory mirror of the history entries (to detect an in-app Back)
let navIndex = -1;
let restoringHistory = false; // true while applying a popstate (suppresses pushing)

function syncHistory() {
  if (restoringHistory) return;
  try {
    const snap = navSnapshot();
    const sig = navSig(snap);
    if (navIndex >= 0 && sig === navSig(navStack[navIndex])) return; // no navigation change
    // Every screen change is a new history entry. (We deliberately don't try to
    // detect in-app "back" navigations — an A→B→A pattern is indistinguishable
    // from a genuine back, so guessing corrupts the stack. An in-app back just
    // adds an entry; Back/Forward still walk the screens correctly.)
    navStack = navStack.slice(0, navIndex + 1); // drop any forward entries
    navStack.push(snap);
    navIndex++;
    const entry = { nav: snap, i: navIndex };
    if (navIndex === 0) history.replaceState(entry, '');
    else history.pushState(entry, '');
  } catch {} // history API failures must never break a render
}

// A refresh must land where the user was — on a profile, a settings page, a
// tab — not back home. history.state survives reload, but any boot-time
// render runs syncHistory and replaceStates a blank snapshot over it — so
// the pre-reload nav is captured HERE, at script load, before any render.
const BOOT_NAV = (() => { try { return (history.state && history.state.nav) || null; } catch { return null; } })();
function restoreNavFromHistory() {
  try {
    const nav = BOOT_NAV;
    if (!nav || ui.screen !== 'wallet') return;
    for (const f of NAV_FIELDS) if (f in nav) ui[f] = nav[f];
    navStack = [nav];
    navIndex = 0;
    history.replaceState({ nav, i: 0 }, ''); // undo any boot-render clobber
    render();
  } catch {}
}

window.addEventListener('popstate', (e) => {
  const st = e.state;
  const snap = (st && st.nav) || navSnapshot();
  restoringHistory = true;
  try {
    for (const f of NAV_FIELDS) ui[f] = f in snap ? snap[f] : null;
    if (st && typeof st.i === 'number') navIndex = st.i;
    else { const i = navStack.findIndex((s) => navSig(s) === navSig(snap)); if (i >= 0) navIndex = i; }
    render();
  } finally {
    restoringHistory = false;
  }
});

// In-app "back" buttons call this instead of mutating ui + render() directly, so
// they POP the history entry they're leaving rather than pushing a duplicate.
// When there's no in-app entry to pop (e.g. the page was reloaded straight into a
// sub-screen), fall back to navigating to the explicit parent.
function goBack(toParent) {
  if (navIndex > 0) history.back();
  else { toParent(); render(); }
}

// ---------------------------------------------------------------- utilities
let toastTimer;
function toast(msg, ms = 1600) {
  let t = document.querySelector('.toast');
  if (!t) {
    t = h('div', { class: 'toast' });
    document.body.append(t);
  }
  t.textContent = msg;
  requestAnimationFrame(() => t.classList.add('show'));
  clearTimeout(toastTimer);
  toastTimer = setTimeout(() => t.classList.remove('show'), ms);
}

async function copy(text) {
  try {
    await navigator.clipboard.writeText(text);
  } catch {
    const ta = h('textarea', { value: text });
    document.body.append(ta);
    ta.select();
    try {
      document.execCommand('copy');
    } catch {}
    ta.remove();
  }
  toast(t('copied'));
}

// Open a URL in a new window/tab. window.open is more reliable than an
// <a target="_blank"> inside an installed PWA (standalone mode), where the link
// can otherwise navigate the app away instead of opening externally.
function openExternal(url) {
  try { window.open(url, '_blank', 'noopener,noreferrer'); } catch {}
}

function download(filename, text, mime = 'application/json') {
  const url = URL.createObjectURL(new Blob([text], { type: mime }));
  const a = h('a', { href: url, download: filename });
  document.body.append(a);
  a.click();
  a.remove();
  setTimeout(() => URL.revokeObjectURL(url), 1000);
}


function copyBtn(text, label = t('copy')) {
  return h('button', { class: 'btn-sm', onClick: () => copy(text) }, label);
}

// A small "paste from clipboard" button; apply(text) receives the trimmed text.
// Returns null where the Clipboard read API isn't available (the catch keeps it
// silent if a browser blocks the read).
function pasteBtn(apply) {
  if (typeof navigator === 'undefined' || !navigator.clipboard || !navigator.clipboard.readText) return null;
  return h('button', {
    type: 'button', class: 'btn-sm', title: t('paste'),
    onClick: async () => { try { const txt = await navigator.clipboard.readText(); if (txt) apply(txt.trim()); } catch {} },
    html: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><rect x="8" y="2" width="8" height="4" rx="1" ry="1"/></svg>',
  });
}

// Paste, for a textarea. Beside a one-line input the button belongs in the
// input-group (see Send); above a textarea it floats next to the label as a
// box heavier than the label itself. So put it inside the field — and only
// while the field is empty, which is the only time it's wanted and the only
// time it can't cover what you typed.
function pasteInto(ta, apply) {
  const btn = pasteBtn((text) => { apply(text); sync(); });
  if (!btn) return ta;
  btn.classList.add('paste-in');
  btn.append(h('span', {}, t('paste')));
  const wrap = h('div', { class: 'paste-wrap' }, ta, btn);
  // Toggled on the node rather than through render(): re-rendering a textarea
  // on every keystroke rebuilds it under the caret.
  const sync = () => wrap.classList.toggle('has-text', !!ta.value);
  ta.addEventListener('input', sync);
  sync();
  return wrap;
}

// ---------------------------------------------------------------- display unit
// Global BTC/sats preference, persisted in localStorage across refreshes and
// logouts. Every unit label on the site is clickable to toggle it.
const UNIT_KEY = 'btc-wallet-unit';
let unit = (() => {
  // Default to sats for first-time users; only an explicit 'btc' choice sticks.
  try {
    return localStorage.getItem(UNIT_KEY) === 'btc' ? 'btc' : 'sats';
  } catch {
    return 'sats';
  }
})();

function toggleUnit() {
  unit = unit === 'btc' ? 'sats' : 'btc';
  try {
    localStorage.setItem(UNIT_KEY, unit);
  } catch {}
  render();
}

const unitLabel = () => (unit === 'sats' ? 'sats' : 'BTC');
const fmtAmount = (sats) => (unit === 'sats' ? fmtSats(sats) : fmtBtc(sats));

// A clickable unit label. cls lets callers inherit surrounding sizing.
function unitTag(cls = '') {
  return h('button', { type: 'button', class: 'unit-tag ' + cls, title: t('switchUnit'), onClick: toggleUnit }, unitLabel());
}

// ================================================================ UNLOCK
// The create/import card on its own — the unlock screen wraps it in the
// classic chrome, the onboarding wizard's "Get started" step shows it bare.
function unlockCard() {
  // The entropy page takes the card over entirely — seed words, tabs and
  // other controls step aside until Submit or Back.
  if (ui.entropyPage) return h('div', { class: 'card col' }, entropyPage());
  return h(
    'div',
    { class: 'card col' },
    h(
      'div',
      { class: 'tabs' },
      tabBtn(t('createNew'), ui.unlockTab === 'create', () => { ui.unlockTab = 'create'; ui.unlockError = ''; render(); }),
      tabBtn(t('importExisting'), ui.unlockTab === 'import', () => { ui.unlockTab = 'import'; ui.unlockError = ''; render(); })
    ),
    ui.unlockTab === 'create' ? createPane() : importPane(),
    ui.unlockError && h('div', { class: 'notice err' }, ui.unlockError)
  );
}

function unlockScreen() {
  return h(
    'div',
    { class: 'col', style: 'gap:16px' },
    brandHeader(false),
    unlockCard(),
    featureHook('unlockExtra'),
    ui.fromWallet && accounts.length && !ui.entropyPage
      ? h('button', { class: 'btn-ghost btn-block', onClick: () => { ui.fromWallet = false; ui.screen = 'wallet'; ui.unlockError = ''; render(); } }, t('back'))
      : null
  );
}

// ================================================================ HOW IT WORKS
function howItWorksScreen() {
  const back = () => {
    ui.screen = ui.returnScreen === 'wallet' ? 'wallet' : 'unlock';
    render();
  };
  const para = (key) => h('p', { class: 'muted', style: 'margin:0' }, ...linkify(t(key)));
  return h(
    'div',
    { class: 'col', style: 'gap:16px' },
    brandHeader(false),
    h(
      'div',
      { class: 'card col', style: 'gap:14px' },
      h('h3', {}, t('hiwBasicsTitle')),
      para('hiwBasics1'),
      para('hiwBasics2'),
      para('hiwBasics3')
    ),
    h('div', { class: 'card col', style: 'gap:14px' },
      h('h3', {}, '⚡ ' + t('hiwLnTitle')),
      para('hiwLn1')),
    h('div', { class: 'card col', style: 'gap:14px' },
      h('h3', {}, '🎁 ' + t('hiwGiftsTitle')),
      para('hiwGifts1')),
    // The standalone file: the whole app inlined into one HTML — the
    // save-and-open-offline story the split build gave up. Only offered when
    // there's a server to download it from (on file:// you already have it).
    location.protocol.startsWith('http')
      ? h('div', { class: 'card col', style: 'gap:14px' },
          h('h3', {}, '💾 ' + t('hiwStandaloneTitle')),
          para('hiwStandalone1'),
          h('a', { href: '/standalone.html', download: 'coinos.html' }, t('hiwStandaloneLink')))
      : null,
    h('button', { class: 'btn-block', onClick: back }, t('back'))
  );
}

// Turn known tokens (e.g. mempool.space) into links within a plain string,
// returning an array of text + anchor nodes. Keeps i18n strings link-free.
const HIW_LINKS = [
  ['mempool.space', 'https://mempool.space'],
];
function linkify(text) {
  const esc = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
  const re = new RegExp('(' + HIW_LINKS.map(([tok]) => esc(tok)).join('|') + ')', 'g');
  const out = [];
  let last = 0;
  let m;
  while ((m = re.exec(text))) {
    if (m.index > last) out.push(text.slice(last, m.index));
    const href = HIW_LINKS.find(([tok]) => tok === m[0])[1];
    out.push(h('a', { href, target: '_blank', rel: 'noopener' }, m[0]));
    last = m.index + m[0].length;
  }
  if (last < text.length) out.push(text.slice(last));
  return out;
}

function tabBtn(label, active, onClick) {
  // Act on POINTERDOWN, not click: on a phone the click event lands
  // 100–250ms after the finger does, and a tab switch has no scroll or
  // long-press ambiguity to wait out — native segmented controls switch on
  // touch-down for exactly this reason. The click handler stays for
  // keyboard/AT activation; re-selecting the current tab is a no-op, so the
  // pair firing together costs nothing.
  //
  // And feedback comes FIRST: the full re-render can take 100ms+ on a
  // phone, and running it synchronously meant even the button's own active
  // state waited for the whole pane to build. Flip the strip's classes with
  // a direct DOM write (paints this frame), then run the real render after
  // that paint — double-rAF is the "after the next paint" idiom.
  // The down-timestamp lives ON THE NODE, not in this closure: the
  // pointerdown's own render replaces these handlers (fresh closure, zero
  // timestamp) before the browser delivers the paired click, and with tabs
  // that TOGGLE, letting that click through un-did the tap it belonged to.
  const select = (btn) => {
    if (btn && btn.parentElement) {
      for (const b of btn.parentElement.children) b.classList.toggle('active', b === btn);
    }
    requestAnimationFrame(() => requestAnimationFrame(onClick));
  };
  return h('button', {
    class: active ? 'active' : '',
    onPointerdown: (e) => {
      if (e.button !== 0) return;
      e.currentTarget._downAt = performance.now();
      select(e.currentTarget);
    },
    onClick: (e) => { if (performance.now() - (e.currentTarget._downAt || 0) > 500) select(e.currentTarget); },
  }, label);
}

function createPane() {
  if (ui.createStep === 'gen') {
    if (!ui.draftMnemonic) {
      return h(
        'div',
        { class: 'col' },
        h('p', { class: 'muted' }, t('genIntro')),
        h(
          'button',
          {
            class: 'btn-primary btn-block',
            onClick: () => {
              ui.draftRandom = ui.draftMnemonic = newMnemonic();
              render();
            },
          },
          t('generateSeed')
        )
      );
    }
    const words = ui.draftMnemonic.split(' ');
    return h(
      'div',
      { class: 'col' },
      h('div', { class: 'warn-box' }, t('writeDownWarn')),
      h(
        'div',
        { class: 'words' },
        words.map((w, i) =>
          h('div', { class: 'w' }, h('span', { class: 'n' }, i + 1), h('span', { class: 't' }, w))
        )
      ),
      h(
        'div',
        { class: 'row gap6' },
        copyBtn(ui.draftMnemonic, t('copyPhrase')),
        // With own entropy the phrase is a pure function of the text —
        // "Regenerate" would hand back the identical words, so it hides.
        (ui.ownEntropy || '').trim() ? null : h(
          'button',
          {
            class: 'btn-ghost btn-sm',
            onClick: () => {
              ui.draftRandom = ui.draftMnemonic = newMnemonic();
              render();
            },
          },
          t('regenerate')
        ),
        h(
          'button',
          {
            class: 'btn-ghost btn-sm',
            onClick: () => { ui.entropyPage = 'create'; ui.entropyEntry = ui.ownEntropy || ''; render(); },
          },
          t('entropyToggle')
        )
      ),
      optionsPanel(),
      h(
        'button',
        {
          class: 'btn-primary btn-block',
          onClick: () => {
            // catch a mistyped passphrase here, while the field to fix it is
            // still on screen — the verify step only samples the words
            if (ui.passphrase && ui.confirmPass !== ui.passphrase) {
              ui.unlockError = t('passphraseMismatch'); render(); return;
            }
            ui.confirm = pickConfirm(words);
            ui.unlockError = '';
            ui.createStep = 'confirm';
            render();
          },
        },
        t('verifyBackup')
      ),
      h(
        'button',
        { class: 'btn-block', onClick: () => openWallet(ui.draftMnemonic, { generated: true }) },
        t('skipVerification')
      )
    );
  }

  // confirm step (optional — reachable via "Verify backup")
  return h(
    'div',
    { class: 'col' },
    h('p', { class: 'muted' }, t('confirmBackupIntro')),
    ...ui.confirm.map((c, i) =>
      h(
        'label',
        { class: 'field' },
        h('span', { class: 'lab' }, t('wordN', { n: c.index + 1 })),
        h('input', {
          type: 'text',
          class: 'mono-input',
          autocapitalize: 'none',
          autocomplete: 'off',
          spellcheck: 'false',
          value: c.value,
          onInput: (e) => (ui.confirm[i].value = e.target.value.trim()),
        })
      )
    ),
    h('div', { class: 'row gap6' },
      h('button', { class: 'btn-ghost', onClick: () => { ui.createStep = 'gen'; render(); } }, t('back')),
      h('button', {
        class: 'btn-primary grow',
        onClick: () => {
          const words = ui.draftMnemonic.split(' ');
          const ok = ui.confirm.every((c) => c.value.toLowerCase() === words[c.index]);
          if (!ok) { ui.unlockError = t('wordsMismatch'); render(); return; }
          openWallet(ui.draftMnemonic, { generated: true });
        },
      }, t('openWallet'))
    ),
    h('button', { class: 'btn-block', onClick: () => openWallet(ui.draftMnemonic, { generated: true }) }, t('skipVerification'))
  );
}

function pickConfirm(words) {
  const idx = new Set();
  while (idx.size < 3) idx.add(Math.floor(Math.random() * words.length));
  return [...idx].sort((a, b) => a - b).map((index) => ({ index, value: '' }));
}

// The BYO-entropy page, shared by Create (re-derives the draft phrase) and
// Import (fills the phrase field): the typed text alone determines the seed,
// so the same text recreates the same wallet anywhere. Nothing derives while
// typing — Submit does it once, then hands back the phrase view.
function entropyPage() {
  const forCreate = ui.entropyPage === 'create';
  return h(
    'div',
    { class: 'col', style: 'gap:10px' },
    h('h3', { style: 'margin:0' }, t('entropyToggle')),
    h('p', { class: 'small muted', style: 'margin:0' }, t('entropyHint')),
    h('div', { class: 'warn-box small' }, t('entropyWarn')),
    h('textarea', {
      rows: '3', style: 'font-family:var(--sans)', placeholder: t('entropyPlaceholder'),
      autocapitalize: 'none', autocomplete: 'off', spellcheck: 'false',
      value: ui.entropyEntry || '',
      onInput: (e) => (ui.entropyEntry = e.target.value),
    }),
    h(
      'div',
      { class: 'row gap6' },
      h('button', { class: 'btn-ghost grow', onClick: () => { ui.entropyPage = null; render(); } }, t('back')),
      h('button', { class: 'btn-primary grow', onClick: () => {
        const txt = (ui.entropyEntry || '').trim();
        if (forCreate) {
          ui.ownEntropy = txt;
          ui.draftMnemonic = txt ? newMnemonic(128, txt) : (ui.draftRandom || ui.draftMnemonic || newMnemonic());
        } else {
          ui.importEntropy = txt;
          // fills the phrase field with its derived words; clearing the text
          // clears only what it filled — a pasted phrase is left alone
          if (txt) ui.importText = ui._entropyFilled = newMnemonic(128, txt);
          else if (ui.importText === ui._entropyFilled) ui.importText = '';
        }
        ui.entropyPage = null;
        render();
      } }, t('entropySubmit'))
    )
  );
}

function importPane() {
  const ta = h('textarea', {
    placeholder: t('importPlaceholder'),
    autocapitalize: 'none',
    autocomplete: 'off',
    spellcheck: 'false',
    value: ui.importText,
    onInput: (e) => (ui.importText = e.target.value),
  });
  return h(
    'div',
    { class: 'col' },
    h(
      'label',
      { class: 'field' },
      h('span', { class: 'lab' }, t('importLabel')),
      pasteInto(ta, (text) => { ta.value = text; ui.importText = text; })
    ),
    // A wallet born from typed entropy comes back the same way: the entropy
    // page fills the phrase field with its derived words, visibly.
    h(
      'button',
      {
        class: 'btn-ghost btn-sm', style: 'align-self:flex-start',
        onClick: () => { ui.entropyPage = 'import'; ui.entropyEntry = ui.importEntropy || ''; render(); },
      },
      t('entropyToggle')
    ),
    optionsPanel(),
    h('button', { class: 'btn-primary btn-block', onClick: () => openWallet(ui.importText) }, t('openWallet'))
  );
}

function optionsPanel() {
  const pass = h(
    'label',
    { class: 'field' },
    h('span', { class: 'lab' },
      t('passphrase'),
      // People assume a password logs in or encrypts; a BIP39 passphrase does
      // neither, and getting that wrong loses money — worth a sentence here.
      h('button', {
        class: 'linklike small', type: 'button', style: 'margin-left:8px',
        onClick: (e) => { e.preventDefault(); ui.passInfoOpen = !ui.passInfoOpen; render(); },
      }, t('passWhatsThis'))),
    ui.passInfoOpen ? h('p', { class: 'small muted', style: 'margin:0 0 6px' }, t('passInfo')) : null,
    h(
      'div',
      { class: 'input-group' },
      h('input', {
        type: ui.showPass ? 'text' : 'password',
        class: 'mono-input',
        autocomplete: 'off',
        value: ui.passphrase,
        // rendering mid-keystroke is safe (focus + caret are preserved), but
        // only the empty↔non-empty flip changes what's on screen (the confirm
        // field below), so only that flip pays for a rebuild
        onInput: (e) => { const had = !!ui.passphrase; ui.passphrase = e.target.value; if (had !== !!ui.passphrase) render(); },
      }),
      h('button', { class: 'btn-sm', type: 'button', onClick: () => { ui.showPass = !ui.showPass; render(); } }, ui.showPass ? t('hide') : t('show'))
    )
  );
  // A typo here IS a different wallet, silently — so once a passphrase is
  // typed, it's typed twice. (Not needed when it's empty, which is most people.)
  const confirm = ui.passphrase
    ? h(
        'label',
        { class: 'field' },
        h('span', { class: 'lab' }, t('reenterPassphrase')),
        h('input', {
          type: ui.showPass ? 'text' : 'password',
          class: 'mono-input',
          autocomplete: 'off',
          value: ui.confirmPass,
          onInput: (e) => (ui.confirmPass = e.target.value),
        })
      )
    : null;
  return [pass, confirm];
}

// Import accepts a recovery phrase, an xpub/zpub (watch-only), or an xprv/zprv
// (full spending). Classify the pasted text and open the right kind of wallet.
async function openWallet(input, opts = {}) {
  ui.unlockError = '';
  const raw = (input || '').trim();
  const m = raw.replace(/\s+/g, ' ');
  if (isValidMnemonic(m)) {
    // last line of defense — the panes with the confirm field on screen also
    // check before handing off, so this error always lands somewhere fixable
    if (ui.passphrase && ui.confirmPass !== ui.passphrase) { ui.unlockError = t('passphraseMismatch'); render(); return; }
    await enterWallet(m, ui.passphrase, { generated: opts.generated });
    ui.draftMnemonic = ''; // discard the used draft so the next "Add wallet" generates a fresh seed
    return;
  }
  let pk;
  try { pk = parseExtendedKey(raw); } catch { ui.unlockError = t('invalidImport'); render(); return; }
  const acc = pk.kind === 'xpub'
    ? addOrGetAccount({ type: 'watch', label: defaultLabel('watch'), xpub: pk.key })
    : addOrGetAccount({ type: 'full', label: defaultLabel('full'), xprv: pk.key });
  ui.fromWallet = false;
  await activateAccount(acc, { fresh: true });
}

// Register a full (seed) wallet as an account and open it.
async function enterWallet(mnemonic, passphrase, opts = {}) {
  const acc = addOrGetAccount({
    type: 'full',
    label: defaultLabel('full'),
    mnemonic: (mnemonic || '').trim().replace(/\s+/g, ' '),
    passphrase: passphrase || '',
  });
  await activateAccount(acc, { ...opts, fresh: true });
}

// Load an account into the wallet and start scanning. Full-account seeds are
// kept in sessionStorage (ephemeral); a refresh restores the open account.
async function activateAccount(acc, opts = {}) {
  // Tear down the previous account's feature runtime BEFORE the wallet
  // switches identity: live relay subscriptions and in-memory state (chat
  // threads, decrypted DMs) belong to the old keys, and surviving into this
  // account they'd both leak the old account's messages on screen and block
  // the new account's own subscriptions from ever starting.
  _featuresInited = false;
  for (const f of FEATURES) { try { f.stop && f.stop(); } catch {} }
  activeId = acc.id;
  // A gift link generates this wallet only to claim into. Keep it provisional
  // until the user commits (claims, or chooses to keep it / enters the wallet),
  // so bailing from an already-claimed gift doesn't leave an empty account.
  if (opts.gift && !opts.existingClaim) acc.provisional = true;
  // The network is a per-wallet property: activating a wallet activates its
  // network. Accounts created before this carried none — they adopt the
  // current global choice once, then keep it. The global setting remains the
  // default for the NEXT new wallet.
  if (!acc.network) acc.network = getNetwork();
  // The relay backup said this wallet has a Spending side: latch it BEFORE
  // the first paint, so a restored wallet doesn't open as savings-only and
  // reflow when the name lookup proves Spending a beat later.
  if (opts.spendingHint && !acc.spendingSetup) { acc.spendingSetup = Date.now(); }
  const netName = acc.network;
  if (netName !== getNetwork()) {
    setNetwork(netName);
    for (const f of FEATURES) { try { f.networkChanged && f.networkChanged(netName); } catch {} }
  }
  if (acc.type === 'watch') wallet.load({ xpub: acc.xpub, netName, offline: false });
  else if (acc.xprv) wallet.load({ xprv: acc.xprv, netName, offline: false });
  else wallet.load({ mnemonic: acc.mnemonic, passphrase: acc.passphrase || '', netName, offline: false, spFresh: !!opts.generated, accountIndex: acc.deriveIndex || 0 });
  // Record the account-level xpub so this wallet survives a session wipe as a
  // watch-only entry (see the durable account directory) — you keep seeing your
  // balance/history and re-enter the seed to spend again.
  if (acc.type !== 'watch' && !acc.provisional) acc.xpub = wallet.accountXpub();
  persistAccounts();
  autoSave(acc);
  // A name fetched during sign-in seeds the names state BEFORE features init
  // and the first paint — the Receive pane opens showing its QR.
  if (opts.nameHint) { try { featureHook('namesSeed', opts.nameHint); } catch {} }
  for (const f of FEATURES) { try { f.init && f.init(); } catch {} } // per-feature wallet lifecycle
  _featuresInited = true; // a deferred feature landing after this point gets its init() on arrival
  // A freshly generated identity provably has no profile yet — let features
  // skip the "is there a kind-0?" wait (avatar would sit blank meanwhile).
  if (opts.generated) featureHook('identityGenerated');
  const hadCache = wallet.restoreCache(); // show last-known balance/history instantly
  // An opened gift link starts on a claim/back-up screen instead of the wallet.
  ui.screen = opts.gift ? 'claim' : 'wallet';
  ui.claimStep = 'welcome';
  ui.claimCode = opts.gift || null;
  ui.claimError = '';
  ui.claimTaken = null;
  ui.claimNotVisible = false;
  ui.claimChecking = !!opts.gift; // gate the Claim button until we've checked
  // Restore the tab / open tx from the last session so a refresh keeps the
  // user's place. A gift link always opens the claim screen instead.
  const nav = (() => { try { return JSON.parse(sessionStorage.getItem(NAV_KEY) || 'null'); } catch { return null; } })();
  ui.tab = (!opts.gift && nav && nav.tab) || 'history';
  ui.txDetail = (!opts.gift && nav && nav.txDetail) || null;
  // Not baselined yet — stays null until the scan + ack logic below sets it,
  // so the celebration never fires for payments that were already there at
  // import (the index only looks "advanced" because the scan hadn't run yet).
  ui.receiveSeenIndex = null;
  ui.arkRecvAddr = null; // the ark receive address belongs to one wallet+network
  ui.send = blankSend();
  ui.draft = null;
  ui.sendResult = null;
  ui.giftMode = false;
  ui.offlineFallback = false;
  render();
  if (ui.txDetail) openTx(ui.txDetail); // restored a tx detail — fill in fee/details if missing

  // No manual offline switch: try to scan, and if the network is unreachable,
  // fall back to offline mode automatically.
  if (typeof navigator !== 'undefined' && navigator.onLine === false) {
    enterOfflineFallback();
    return;
  }
  try {
    // Celebration baseline. Opening/importing/switching a wallet (opts.fresh)
    // baselines to the current frontier, so payments already received before
    // opening never trigger the "payment received" screen. On a same-session
    // refresh we restore the persisted ack — which is advanced the moment the
    // celebration is shown, so a payment celebrates once and never reappears.
    let ack;
    if (opts.fresh) {
      ack = wallet.nextReceiveIndex;
      wallet.setReceiveAck(ack);
    } else {
      ack = wallet.getReceiveAck();
      if (ack == null) {
        ack = wallet.nextReceiveIndex;
        wallet.setReceiveAck(ack);
      }
    }
    // For a fresh open, leave receiveSeenIndex null until the post-scan baseline
    // below. Setting it now (to the pre-scan frontier) lets the socket's reconcile
    // credit a deposit that predates this open and briefly flash the "payment
    // received" screen before the baseline catches up. A same-session refresh
    // uses the persisted ack right away.
    if (!opts.fresh) ui.receiveSeenIndex = ack;

    // Go Live immediately: the socket must not wait on Nostr (up to 6s) or any
    // discovery scan. The cache/Nostr state is already on screen.
    wallet.startRealtime();

    // Opened a gift link? Let the gifts feature verify its funding coin is
    // still unspent before the claim proceeds.
    if (opts.gift) featureHook('giftOpened', opts.gift);

    // Cross-device state in the background. State comes from the local cache or
    // Nostr — both restore the full balance, coins, and history — so a full API
    // scan runs ONLY when we have neither (e.g. a seed imported on a fresh device
    // with no synced state); that's what discovers the used addresses. Otherwise
    // the socket + frontier poll keep us current with no refresh-time burst.
    const hadNostr = wallet.watchOnly || !wallet.syncFromNostr ? false : await wallet.syncFromNostr();
    if (!hadCache && !hadNostr) {
      await wallet.scan({ silent: false });
    }
    // Re-baseline a fresh open against the final frontier (Nostr or the discovery
    // scan may have advanced it) so payments that predate the open don't celebrate.
    if (opts.fresh) { ack = wallet.nextReceiveIndex; wallet.setReceiveAck(ack); ui.receiveSeenIndex = ack; }
    wallet.retrack(); // re-subscribe to the latest frontier (Nostr/scan may have moved it)
  } catch {
    enterOfflineFallback();
  }
}

// --- accounts -------------------------------------------------------------
// The working set of wallets you can switch between. Full (seed-bearing)
// accounts live only in sessionStorage — ephemeral, wiped when the browser
// closes (no seed on disk by default). Watch-only accounts hold just an xpub,
// so they're additionally persisted in localStorage and reload across restarts.
const ACCOUNTS_KEY = 'btc-wallet-accounts'; // sessionStorage: session list + active
const WATCH_KEY = 'btc-wallet-watch'; // localStorage: persisted watch-only accounts

let accounts = [];
let activeId = null;

const genId = () => 'a' + Date.now().toString(36) + Math.random().toString(36).slice(2, 7);
const credId = (a) => (a.type === 'watch' ? 'w:' + a.xpub : a.xprv ? 'x:' + a.xprv : 'f:' + a.mnemonic + '|' + (a.passphrase || '') + (a.deriveIndex ? '|#' + a.deriveIndex : ''));
const activeAccount = () => accounts.find((a) => a.id === activeId) || null;

function defaultLabel(type) {
  const n = accounts.filter((a) => a.type === type).length + 1;
  return t(type === 'watch' ? 'watchLabelN' : 'walletLabelN', { n });
}

// The durable account directory (localStorage): a view-only mirror of every
// account — id, label, and account xpub, never a seed. So a wallet survives a
// session wipe (browser closed without "Save to device") as a watch-only entry:
// you keep seeing balance/history and re-enter the seed to spend again.
function loadWatchAccounts() {
  try {
    const dir = JSON.parse(localStorage.getItem(WATCH_KEY) || '[]');
    return dir.filter((d) => d.xpub).map((d) => ({ id: d.id, label: d.label, type: 'watch', xpub: d.xpub, autoLock: d.autoLock || 0, network: d.network, nostrPk: d.nostrPk }));
  } catch { return []; }
}
function saveDirectory() {
  try {
    // Remember each wallet's nostr identity alongside its xpub: a watch-only
    // reopening still shows WHO this wallet is (avatar, npub, profile) even
    // though nothing can be signed until the keys are back.
    const dir = accounts.filter((a) => a.xpub && !a.provisional).map((a) => {
      if (a.id === activeId && !wallet.watchOnly) {
        // remember the identity the header actually SHOWS — a nostr login
        // outranks the seed-derived key, locked or not
        try {
          a.nostrPk = (featureHook('nostrLoginIdentity') || {}).pubkey
            || (wallet.nostrPubkey && wallet.nostrPubkey()) || a.nostrPk;
        } catch {}
      }
      return { id: a.id, label: a.label, xpub: a.xpub, autoLock: a.autoLock || 0, network: a.network, nostrPk: a.nostrPk };
    });
    localStorage.setItem(WATCH_KEY, JSON.stringify(dir));
  } catch {}
}
function persistAccounts() {
  try { sessionStorage.setItem(ACCOUNTS_KEY, JSON.stringify({ accounts, activeId })); } catch {}
  saveDirectory();
}
function clearAccounts() {
  accounts = [];
  activeId = null;
  try { sessionStorage.removeItem(ACCOUNTS_KEY); } catch {}
}

// Add an account (deduped by credential), returning the stored object.
function addOrGetAccount(partial) {
  const cid = credId(partial);
  let acc = accounts.find((a) => credId(a) === cid);
  if (!acc) {
    // every new wallet is born on the currently-selected network
    acc = { id: genId(), network: getNetwork(), ...partial };
    // the Add-wallet chooser fixed this wallet's purpose before the seed flow
    if (ui.newWalletKind) { acc.kind = ui.newWalletKind; ui.newWalletKind = null; }
    accounts.push(acc);
    persistAccounts();
  }
  return acc;
}

// A wallet on an existing seed: the next unused BIP84 account index under the
// parent's phrase. Its coins, ark state, cache and nostr identity are all its
// own; the parent's seed phrase backs up both.
function createDerivedWallet(parentId, kind) {
  const parent = accounts.find((a) => a.id === parentId);
  if (!parent || !parent.mnemonic) return;
  const siblings = accounts.filter((x) => x.mnemonic === parent.mnemonic && (x.passphrase || '') === (parent.passphrase || ''));
  const next = 1 + Math.max(0, ...siblings.map((x) => x.deriveIndex || 0));
  const acc = {
    id: genId(), type: 'full', network: parent.network || getNetwork(),
    label: `${parent.label} +${next}`,
    viewLabels: { [kind]: `${kind === 'spending' ? t('spendingName') : t('savingsName')} ${next + 1}` },
    mnemonic: parent.mnemonic, passphrase: parent.passphrase || '',
    deriveIndex: next, kind,
  };
  accounts.push(acc);
  persistAccounts();
  if (parent.persisted) { acc.persisted = true; writeVault(); }
  ui.addWallet = null;
  activateAccount(acc, { fresh: true });
}

// Commit the active account — clear the "provisional" gift flag so it's no
// longer discarded on bail. Called once the user claims, keeps, or enters it.
function commitAccount() {
  const a = accounts.find((x) => x.id === activeId);
  if (a && a.provisional) {
    delete a.provisional;
    if (a.type !== 'watch') a.xpub = wallet.accountXpub(); // now eligible for the durable directory
    persistAccounts();
  }
  autoSave(a);
}

function removeAccount(id) {
  const acc = accounts.find((a) => a.id === id);
  if (!acc) return;
  accounts = accounts.filter((a) => a.id !== id);
  persistAccounts();
  if (activeId === id) {
    if (accounts.length) activateAccount(accounts[0], { fresh: true });
    else lock();
  } else {
    render();
  }
}

function switchAccount(id) {
  const acc = accounts.find((a) => a.id === id);
  if (acc) activateAccount(acc, { fresh: true });
}

// Restore accounts after a refresh (sessionStorage); on a fresh session, prompt
// to unlock the encrypted vault if there is one, else seed from watch-only
// accounts. Returns true if it handled the entry (opened or showed a prompt).
function restoreAccountsState() {
  let sess = null;
  try { sess = JSON.parse(sessionStorage.getItem(ACCOUNTS_KEY) || 'null'); } catch {}
  // the "Unlock for" deadline outlives refreshes: past it, the password is
  // required again no matter what the session cache still holds
  if (unlockDeadlinePassed()) {
    try { sessionStorage.removeItem(ACCOUNTS_KEY); localStorage.removeItem(UNLOCK_UNTIL_KEY); } catch {}
    sess = null;
  } else {
    armUnlockDeadline();
  }
  if (sess && Array.isArray(sess.accounts) && sess.accounts.length) {
    accounts = sess.accounts;
    const active = accounts.find((a) => a.id === sess.activeId) || accounts[0];
    activateAccount(active);
    restoreNavFromHistory();
    return true;
  }
  if (hasVault()) {
    // A blank (optional) vault password unlocks seamlessly with no prompt.
    if (attemptVaultUnlock('')) {
      if (accounts.length) activateAccount(accounts[0], { fresh: true });
      else { ui.screen = 'unlock'; render(); }
      return true;
    }
    ui.screen = 'vault'; render(); return true;
  }
  const watch = loadWatchAccounts();
  if (watch.length) {
    accounts = watch.slice();
    activateAccount(accounts[0], { fresh: true });
    return true;
  }
  return false;
}

// --- encrypted vault (optional password-persisted full accounts) ----------
const VAULT_KEY = 'btc-wallet-vault';
// Whether we've offered a password on locking. Asked once, ever: someone who
// says no has chosen, and a wallet that nags is a wallet people stop reading.
const LOCK_PW_KEY = 'btc-wallet-lockpw';
const lockPwAsked = () => { try { return !!localStorage.getItem(LOCK_PW_KEY); } catch { return true; } };
const markLockPwAsked = () => { try { localStorage.setItem(LOCK_PW_KEY, '1'); } catch {} };
let vaultPassword = null; // in memory once unlocked/set this session; cleared on lock

function loadVaultBlob() {
  try { return JSON.parse(localStorage.getItem(VAULT_KEY) || 'null'); } catch { return null; }
}
function hasVault() { return !!loadVaultBlob(); }

// Re-encrypt the vault from the currently-persisted full accounts (needs the
// in-memory password). Removes the blob when nothing is persisted.
function writeVault() {
  if (vaultPassword == null) return;
  const list = accounts.filter((a) => a.type === 'full' && a.persisted)
    .map((a) => (a.xprv ? { label: a.label, xprv: a.xprv, network: a.network } : { label: a.label, mnemonic: a.mnemonic, passphrase: a.passphrase || '', network: a.network }));
  try {
    if (!list.length) localStorage.removeItem(VAULT_KEY);
    else localStorage.setItem(VAULT_KEY, JSON.stringify(encryptVault(list, vaultPassword)));
  } catch {}
}

// Bring vault-saved seeds into the session. Each upgrades the matching watch-only
// directory entry (by xpub) to a spendable full account so wallets aren't
// duplicated; one with no directory entry is added fresh.
function mergeVaultList(list) {
  for (const v of list) {
    // Derive on the wallet's OWN network: accountXpubFor defaults to mainnet,
    // and a testnet wallet derives under a different coin type, so leaving it
    // to the default produced an xpub that could never match the stored one —
    // every unlock re-added the same wallet as a new entry.
    const net = v.network || getNetwork();
    const xpub = v.xprv ? accountXpubFor({ xprv: v.xprv }, net) : accountXpubFor({ mnemonic: v.mnemonic, passphrase: v.passphrase || '' }, net);
    const existing = accounts.find((a) => a.xpub === xpub);
    if (existing) {
      existing.type = 'full';
      if (v.xprv) { existing.xprv = v.xprv; delete existing.mnemonic; delete existing.passphrase; }
      else { existing.mnemonic = v.mnemonic; existing.passphrase = v.passphrase || ''; delete existing.xprv; }
      if (v.label) existing.label = v.label;
      if (v.network && !existing.network) existing.network = v.network;
      existing.persisted = true;
    } else {
      const acc = addOrGetAccount(
        v.xprv
          ? { type: 'full', label: v.label || defaultLabel('full'), xprv: v.xprv, xpub }
          : { type: 'full', label: v.label || defaultLabel('full'), mnemonic: v.mnemonic, passphrase: v.passphrase || '', xpub }
      );
      if (v.network) acc.network = v.network;
      acc.persisted = true;
    }
  }
}

// Keeping a wallet is the default: a seed that only lives in this tab is one
// refresh away from being gone, and that surprise costs people money. So a
// wallet saves itself to the device unless the vault is locked behind a real
// password — then the manual Save button (and the padlock's save-first ask)
// still covers it. No password is set here; Settings can add one later.
function autoSave(acc) {
  if (!acc || acc.type !== 'full' || acc.persisted || acc.provisional) return;
  if (vaultPassword == null) {
    if (hasVault()) {
      // A blank-password vault opens by itself — treating it as locked left
      // every wallet created after a plain reload silently unsaved. Fold its
      // wallets into the session first: writeVault rebuilds the blob from
      // session accounts, and the saved ones must not fall out of it here.
      let list;
      try { list = decryptVault(loadVaultBlob(), ''); } catch { return; } // a real password: manual
      vaultPassword = '';
      mergeVaultList(list);
    } else {
      vaultPassword = '';
    }
  }
  acc.persisted = true;
  writeVault();
  persistAccounts();
}

// Toggle persistence on a full account. Prompts for the vault password when it
// isn't unlocked this session ('set' the first time, 'enter' if a vault exists).
function startSave(id) {
  const acc = accounts.find((a) => a.id === id);
  if (!acc || acc.type !== 'full') return;
  if (vaultPassword != null) { acc.persisted = true; writeVault(); persistAccounts(); render(); return; }
  ui.pw = { purpose: 'save', accId: id, mode: hasVault() ? 'enter' : 'set', v1: '', v2: '', error: '' };
  render();
}
// --- load a seed into a watch-only account (make it spendable) --------------
function startLoadSeed(opts = {}) {
  // accId lets the per-wallet settings page import a seed for a specific
  // (possibly non-active) watch-only wallet; defaults to the active one.
  ui.loadSeed = { value: '', passphrase: '', save: !!opts.save, error: '', accId: opts.accId || activeId };
  render();
}
function cancelLoadSeed() { ui.loadSeed = null; render(); }
async function doLoadSeed() {
  const ls = ui.loadSeed;
  const acc = (ls && accounts.find((a) => a.id === ls.accId)) || activeAccount();
  if (!ls || !acc || !acc.xpub) return;
  const raw = (ls.value || '').trim().replace(/\s+/g, ' ');
  if (!raw) { ls.error = t('enterSeedToSpend'); render(); return; }
  let next = null;
  try {
    if (isValidMnemonic(raw)) {
      if (accountXpubFor({ mnemonic: raw, passphrase: ls.passphrase || '' }, acc.network || getNetwork()) !== acc.xpub) { ls.error = t('seedMismatch'); render(); return; }
      next = { mnemonic: raw, passphrase: ls.passphrase || '' };
    } else {
      const pk = parseExtendedKey(raw); // throws if not an extended key
      if (pk.kind !== 'xprv') { ls.error = t('seedNeedsPrivate'); render(); return; }
      if (accountXpubFor({ xprv: pk.key }, acc.network || getNetwork()) !== acc.xpub) { ls.error = t('seedMismatch'); render(); return; }
      next = { xprv: pk.key };
    }
  } catch { ls.error = t('seedInvalid'); render(); return; }
  // Upgrade in place — keep id/label/xpub so the cache, directory entry and
  // history all carry over; the account is now spendable.
  acc.type = 'full';
  if (next.mnemonic) { acc.mnemonic = next.mnemonic; acc.passphrase = next.passphrase; delete acc.xprv; }
  else { acc.xprv = next.xprv; delete acc.mnemonic; delete acc.passphrase; }
  const save = ls.save;
  ui.loadSeed = null;
  await activateAccount(acc, { fresh: false });
  if (save) startSave(acc.id); // opens the Save-to-device (vault) flow
  else render();
}

function startForget(id) {
  if (vaultPassword != null) {
    const acc = accounts.find((a) => a.id === id);
    if (acc) acc.persisted = false;
    writeVault(); persistAccounts(); render();
    return;
  }
  ui.pw = { purpose: 'forget', accId: id, mode: 'enter', v1: '', v2: '', error: '' };
  render();
}
function cancelPw() {
  // Declining the lock-time offer is an answer, not a postponement.
  if (ui.pw && ui.pw.purpose === 'lock') markLockPwAsked();
  // Backing out of save-before-lock means "don't lock" — go home, keys intact.
  if (ui.pw && ui.pw.purpose === 'locksave') ui.screen = 'wallet';
  ui.pw = null;
  render();
}
function startChangePw() {
  ui.pw = { purpose: 'change', mode: 'change', v0: '', v1: '', v2: '', error: '' };
  render();
}
function submitPw() {
  const p = ui.pw;
  if (p.purpose === 'change') {
    // Re-encrypt the actual vault (decrypt with the current password, encrypt
    // with the new one) so we never drop wallets that aren't in this session.
    let list;
    try { list = decryptVault(loadVaultBlob(), p.v0 || ''); } catch { p.error = t('pwWrong'); render(); return; }
    if (p.v1 !== p.v2) { p.error = t('pwMismatch'); render(); return; }
    try { localStorage.setItem(VAULT_KEY, JSON.stringify(encryptVault(list, p.v1 || ''))); } catch {}
    if (vaultPassword != null) vaultPassword = p.v1 || ''; // keep the unlocked session in sync
    ui.pw = null;
    render();
    toast(t('pwChanged'));
    return;
  }
  if (p.purpose === 'lock') {
    if (!p.v1) { p.error = t('pwNeededToLock'); render(); return; }
    if (p.v1 !== p.v2) { p.error = t('pwMismatch'); render(); return; }
    // Fold any blank-password vault contents into the session before the
    // re-encrypt: writeVault rebuilds the blob from session accounts, and a
    // wallet saved by an earlier session must not fall out of the vault just
    // because a password is being set now.
    try { mergeVaultList(decryptVault(loadVaultBlob(), '')); } catch {}
    vaultPassword = p.v1;
    writeVault();
    persistAccounts();
    markLockPwAsked();
    ui.pw = null;
    softLock(); // stay home, watch-only: closed padlock + "Locked" toast
    return;
  }
  if (p.mode === 'set') {
    // Password is optional — a blank one just persists without protection.
    if (p.v1 !== p.v2) { p.error = t('pwMismatch'); render(); return; }
    vaultPassword = p.v1 || '';
  } else {
    let list;
    try { list = decryptVault(loadVaultBlob(), p.v1); } catch { p.error = t('pwWrong'); render(); return; }
    vaultPassword = p.v1;
    mergeVaultList(list); // bring existing persisted accounts into the session
  }
  const acc = accounts.find((a) => a.id === p.accId);
  if (acc) acc.persisted = p.purpose === 'save' || p.purpose === 'locksave';
  writeVault();
  persistAccounts();
  const finishLock = p.purpose === 'locksave';
  ui.pw = null;
  if (finishLock) { softLock(); return; }
  render();
}

// Try to decrypt the vault with the given password; on success, seed the
// accounts (watch-only directory + the unlocked full wallets). Returns success.
function attemptVaultUnlock(password) {
  let list;
  try { list = decryptVault(loadVaultBlob(), password); } catch { return false; }
  vaultPassword = password;
  // Start from the durable directory (watch-only views of every known wallet),
  // then upgrade the vault-saved ones to spendable — so non-saved wallets still
  // appear (watch-only) instead of vanishing.
  accounts = loadWatchAccounts();
  mergeVaultList(list);
  // Now that we have the password, finish signing out any saved wallets whose
  // timer expired while we were away (couldn't re-encrypt the vault until now).
  if (_bootAwayMs) {
    const due = accounts.filter((a) => accAutoLock(a) > 0 && _bootAwayMs >= accAutoLock(a));
    for (const a of due) { wipeAccountCache(a); accounts = accounts.filter((x) => x.id !== a.id); }
    if (due.some((a) => a.persisted)) writeVault();
    _bootAwayMs = 0;
  }
  return true;
}

// "Unlock for": a session deadline chosen at the password prompt. Past it the
// app relocks (back to this prompt) — wallets stay saved, nothing is wiped.
const UNLOCK_FOR_KEY = 'btc-wallet-unlock-for';
const UNLOCK_UNTIL_KEY = 'btc-wallet-unlock-until';
const UNLOCK_FOR_OPTIONS = [
  { ms: 300_000, label: 'unlockFor5m' },
  { ms: 1_800_000, label: 'unlockFor30m' },
  { ms: 86_400_000, label: 'unlockFor1d' },
  { ms: 0, label: 'unlockForever' },
];
let _unlockUntilTimer = null;
function armUnlockDeadline() {
  clearTimeout(_unlockUntilTimer); _unlockUntilTimer = null;
  let until = 0;
  try { until = Number(localStorage.getItem(UNLOCK_UNTIL_KEY)) || 0; } catch {}
  if (!until) return;
  const left = until - Date.now();
  if (left <= 0) {
    try { localStorage.removeItem(UNLOCK_UNTIL_KEY); } catch {}
    if (activeAccount() && !wallet.watchOnly) softLock();
    return;
  }
  _unlockUntilTimer = setTimeout(armUnlockDeadline, Math.min(left, 60_000));
}
function unlockDeadlinePassed() {
  try { const u = Number(localStorage.getItem(UNLOCK_UNTIL_KEY)) || 0; return u > 0 && Date.now() >= u; } catch { return false; }
}

// On-open vault unlock (password prompt).
function unlockVault() {
  if (!attemptVaultUnlock(ui.vaultPw)) { ui.vaultError = t('pwWrong'); render(); return; }
  ui.vaultPw = '';
  ui.vaultError = '';
  ui.justLocked = false;
  const ms = ui.unlockFor != null ? ui.unlockFor : Number(localStorage.getItem(UNLOCK_FOR_KEY)) || 0;
  try {
    localStorage.setItem(UNLOCK_FOR_KEY, String(ms));
    if (ms > 0) localStorage.setItem(UNLOCK_UNTIL_KEY, String(Date.now() + ms));
    else localStorage.removeItem(UNLOCK_UNTIL_KEY);
  } catch {}
  armUnlockDeadline();
  const cur = accounts.find((a) => a.id === activeId) || accounts[0];
  if (cur) activateAccount(cur, { fresh: true });
  else lock(); // everything got signed out by the timer
}
function skipVault() {
  ui.vaultPw = '';
  ui.vaultError = '';
  const watch = loadWatchAccounts();
  if (watch.length) { accounts = watch.slice(); activateAccount(accounts[0], { fresh: true }); }
  else { ui.screen = 'unlock'; render(); }
}

function enterOfflineFallback() {
  wallet.setOffline(true);
  wallet.deriveWindow(40);
  ui.offlineFallback = true;
  ui.claimChecking = false; // can't verify a gift offline; don't hang on the loader
  ui.tab = 'settings';
  render();
}

async function retryOnline() {
  ui.offlineFallback = false;
  wallet.setOffline(false);
  ui.tab = 'history';
  render();
  try {
    await wallet.scan();
    wallet.startRealtime();
  } catch {
    enterOfflineFallback();
  }
}

// --- auto log-out, per wallet ----------------------------------------------
// Each account can choose how long the app may sit in the background before that
// wallet is signed out (removed from this device — session, directory, cache,
// and its vault entry). Other wallets are untouched. The countdown only runs
// while the app is hidden/unfocused, never while you're looking at it. 0 = never.
const AUTOLOCK_OPTIONS = [
  { ms: 0, label: 'autolockNever' },
  { ms: 60_000, label: 'autolock1m' },
  { ms: 300_000, label: 'autolock5m' },
  { ms: 3_600_000, label: 'autolock1h' },
  { ms: 86_400_000, label: 'autolock1d' },
];
const accAutoLock = (a) => (a && Number(a.autoLock)) || 0;

const AWAY_AT_KEY = 'btc-wallet-bg-at';
let _awayTimer = null;
let _bootAwayMs = 0; // away duration carried into the vault-unlock check this session
const _awayAt = () => { try { return Number(localStorage.getItem(AWAY_AT_KEY)) || 0; } catch { return 0; } };
const _clearAwayAt = () => { try { localStorage.removeItem(AWAY_AT_KEY); } catch {} };

// Remove one wallet's cached state — the xpub mirror plus its seed-keyed cache
// (when the seed is at hand), including the :ack/:gift suffixes.
function wipeAccountCache(acc) {
  if (!acc) return;
  const ids = [];
  if (acc.xpub) ids.push(acc.xpub);
  if (acc.xprv) ids.push(acc.xprv);
  else if (acc.mnemonic) ids.push(`${acc.mnemonic}\n${acc.passphrase || ''}`);
  const bases = ids.map(cacheKeyFor);
  try {
    const keys = [];
    for (let i = 0; i < localStorage.length; i++) { const k = localStorage.key(i); if (k && bases.some((b) => k.startsWith(b))) keys.push(k); }
    keys.forEach((k) => localStorage.removeItem(k));
  } catch {}
}

// Sign out a single wallet: remove it from the device entirely (session,
// directory, cache, and the vault if it was saved). Others are left alone.
function wipeAccount(id) {
  const acc = accounts.find((a) => a.id === id);
  if (!acc) return;
  const wasActive = activeId === id;
  wipeAccountCache(acc);
  const wasPersisted = acc.persisted;
  accounts = accounts.filter((a) => a.id !== id);
  if (wasPersisted && vaultPassword != null) writeVault(); // re-encrypt the vault without it
  persistAccounts(); // refresh the durable directory
  if (wasActive) {
    if (accounts.length) activateAccount(accounts[0], { fresh: true });
    else lock();
  }
}

// Sign out every loaded wallet whose timer has elapsed for the given away time.
function evaluateOverdue(away) {
  const due = accounts.filter((a) => accAutoLock(a) > 0 && away >= accAutoLock(a)).map((a) => a.id);
  for (const id of due) wipeAccount(id);
}

// Arm a timer for the soonest-due wallet so a blurred-but-visible window still
// signs out on time (the timestamp covers throttled/backgrounded tabs).
function armAwayTimer() {
  clearTimeout(_awayTimer); _awayTimer = null;
  const awayAt = _awayAt();
  if (!awayAt) return;
  const locks = accounts.map(accAutoLock).filter((ms) => ms > 0);
  if (!locks.length) return;
  const elapsed = Date.now() - awayAt;
  if (locks.some((ms) => elapsed >= ms)) { evaluateOverdue(elapsed); armAwayTimer(); return; }
  const next = Math.min(...locks.map((ms) => ms - elapsed));
  _awayTimer = setTimeout(() => { evaluateOverdue(Date.now() - awayAt); armAwayTimer(); }, Math.max(0, next));
}

function onAppHidden() {
  try { localStorage.setItem(AWAY_AT_KEY, String(Date.now())); } catch {}
  armAwayTimer();
}
function onAppVisible() {
  clearTimeout(_awayTimer); _awayTimer = null;
  const awayAt = _awayAt(); _clearAwayAt();
  if (awayAt) evaluateOverdue(Date.now() - awayAt);
  armUnlockDeadline(); // background tabs throttle timers — recheck on return
}

// At boot the in-memory timer is gone (reload / discarded tab). Drop overdue
// wallets from the persisted session and directory before anything is restored;
// overdue saved wallets are removed from the vault when it's unlocked.
function applyBootAutoLogout() {
  const awayAt = _awayAt(); _clearAwayAt();
  if (!awayAt) return;
  const away = Date.now() - awayAt;
  _bootAwayMs = away;
  const overdue = (a) => { const ms = Number(a.autoLock) || 0; return ms > 0 && away >= ms; };
  try {
    const sess = JSON.parse(sessionStorage.getItem(ACCOUNTS_KEY) || 'null');
    if (sess && Array.isArray(sess.accounts)) {
      const keep = sess.accounts.filter((a) => { if (overdue(a)) { wipeAccountCache(a); return false; } return true; });
      sess.accounts = keep;
      if (!keep.find((a) => a.id === sess.activeId)) sess.activeId = keep[0] ? keep[0].id : null;
      sessionStorage.setItem(ACCOUNTS_KEY, JSON.stringify(sess));
    }
  } catch {}
  try {
    const dir = JSON.parse(localStorage.getItem(WATCH_KEY) || '[]');
    const keep = dir.filter((d) => { if (overdue(d)) { wipeAccountCache(d); return false; } return true; });
    localStorage.setItem(WATCH_KEY, JSON.stringify(keep));
  } catch {}
}

function lock({ offerPassword = false } = {}) {
  wallet.stopRealtime();
  // A locked session must not keep listening as the account that just left —
  // and whatever logs in next must not inherit its threads or subscriptions.
  _featuresInited = false;
  for (const f of FEATURES) { try { f.stop && f.stop(); } catch {} }
  clearAccounts();
  vaultPassword = null;
  wallet.load({ mnemonic: '', passphrase: '', netName: getNetwork(), offline: false });
  wallet.mnemonic = '';
  // Wallets save themselves to this device without asking, under an empty
  // password unless one is set. Demanding a password on the way out is then
  // theatre — it protects nothing and asks for something nobody chose. With no
  // password, logging out means dropping back to the wallet list; with one, it
  // means what it says.
  const noPassword = hasVault() && attemptVaultUnlock('');
  ui.screen = !hasVault() ? 'unlock' : noPassword ? 'accounts' : 'vault';
  ui.unlockTab = 'create';
  ui.fromWallet = false;
  ui.watchXpub = '';
  ui.watchLabel = '';
  ui.pw = null;
  ui.vaultPw = '';
  ui.vaultError = '';
  ui.confirmClear = false;
  ui.confirmRemove = null;
  ui.editId = null;
  ui.editLabel = '';
  ui.createStep = 'gen';
  ui.draftMnemonic = '';
  ui.importText = '';
  ui.entropyPage = null;
  ui.entropyEntry = '';
  ui.ownEntropy = '';
  ui.importEntropy = '';
  ui.passphrase = '';
  ui.confirmPass = '';
  ui.confirm = [];
  ui.revealShown = false;
  ui.pubkeyShown = false;
  ui.giftMode = false;
  ui.giftAmount = '';
  ui.giftCode = null;
  ui.giftError = '';
  ui.giftMax = false;
  ui.giftSplitOffer = null;
  ui.revokeId = null;
  ui.receiveSeenIndex = null;
  ui.txDetail = null;
  ui.broadcastTx = null;
  ui.bump = null;
  // Offer to set a password on the way out — but once, ever: someone who said
  // "Not now" has answered, and a wallet that nags is a wallet people stop
  // reading. (The padlock is different: it asks every time via softLock's
  // in-place prompt, because locking without a password is impossible and
  // the tap would otherwise be a confusing trip to the wallet list.)
  if (noPassword && offerPassword && !lockPwAsked()) {
    ui.pw = { purpose: 'lock', mode: 'set', v0: '', v1: '', v2: '', error: '' };
  }
  render();
}

// ================================================================ WALLET
// The avatar IS your profile now — one tap opens it (edit lives there).
// Settings and Lock stand beside it as their own icons; no popup menu.
function avatarMenu() {
  const me = (featureHook('nostrLoginIdentity') || {}).pubkey || (wallet.nostrPubkey && wallet.nostrPubkey())
    || (activeAccount() || {}).nostrPk;
  // No identity (watch-only wallet): a neutral face with nowhere to go.
  const node = (me && featureHook('headerAvatar', me))
    || h('span', {
      class: 'chat-avatar header-ava fallback',
      html: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>',
    });
  return h('button', {
    class: 'header-avatar',
    title: me ? t('profYourProfile') : undefined,
    onClick: me ? () => { featureHook('showProfile', me); render(); } : undefined,
  }, node);
}

function settingsBtn() {
  return h('button', {
    class: 'header-msgs', title: t('tabSettings'), 'aria-label': t('tabSettings'),
    onClick: () => {
      ui.chatOpen = false; ui.profilePk = null; ui.userSearch = null; ui.noteThread = null;
      ui.screen = 'wallet'; ui.tab = 'settings'; ui.settingsPage = null; render();
    },
  }, h('span', {
    class: 'hm-ico',
    html: '<svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33h.09a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82v.09a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>',
  }));
}

// Lock in place: the keys leave, the view stays. The wallet remains on screen
// watch-only (balances and history, no spending), the padlock closes, and
// tapping it again asks for the password to bring the keys back.
function softLock() {
  const watch = loadWatchAccounts();
  let blankPw = false;
  try { decryptVault(loadVaultBlob(), ''); blankPw = true; } catch {}
  // No protecting password yet: locking would protect nothing, so ask for one
  // right here — keys intact, home still on screen. Submitting saves the
  // vault under it and locks in place; "Not now" just closes the prompt.
  // (Tearing the session down first meant "Not now" stranded people on the
  // wallet list, signed out of a wallet they never asked to leave.)
  if (!hasVault() || blankPw) {
    ui.pw = { purpose: 'lock', mode: 'set', v0: '', v1: '', v2: '', error: '' };
    render();
    return;
  }
  // Nothing watchable: this session can't stay on screen — classic full lock.
  if (!watch.length) { lock({ offerPassword: true }); ui.justLocked = true; return; }
  // A wallet that isn't IN the vault can't come back from a lock — unlocking
  // decrypts the vault, and this seed isn't there (created while the vault
  // sat locked, so autoSave couldn't write it). Save it first: with the
  // session password if we hold it, else ask for the vault password now.
  const active = activeAccount();
  if (active && active.type === 'full' && !active.provisional && !active.persisted) {
    if (vaultPassword != null) {
      active.persisted = true;
      writeVault();
      persistAccounts();
    } else {
      ui.pw = { purpose: 'locksave', accId: active.id, mode: 'enter', v1: '', v2: '', error: '' };
      ui.screen = 'accounts'; // the pw prompt renders on the accounts screen
      render();
      return;
    }
  }
  const keepId = activeId;
  _featuresInited = false;
  for (const f of FEATURES) { try { f.stop && f.stop(); } catch {} }
  vaultPassword = null;
  accounts = watch.slice();
  persistAccounts();
  const cur = accounts.find((a) => a.id === keepId) || accounts[0];
  activateAccount(cur, { fresh: true });
  toast(t('lockedToast'));
}

function lockBtn() {
  const locked = wallet.watchOnly && hasVault();
  return h('button', {
    class: 'header-msgs',
    title: locked ? t('unlock') : t('lockWallet'),
    'aria-label': locked ? t('unlock') : t('lockWallet'),
    onClick: locked
      ? () => {
          if (attemptVaultUnlock('')) {
            const cur = accounts.find((a) => a.id === activeId) || accounts[0];
            if (cur) activateAccount(cur, { fresh: true });
          } else { ui.justLocked = false; ui.screen = 'vault'; render(); }
        }
      : () => softLock(),
  }, h('span', { class: 'hm-ico', style: 'font-size:18px;line-height:1' }, locked ? '\u{1F512}' : '\u{1F513}'));
}

// Messages sit one tap away, left of the wallet selector. The dot is presence,
// not a count — it says "someone's waiting", and the chat list says who.
function messagesBtn() {
  const me = (featureHook('nostrLoginIdentity') || {}).pubkey || (wallet.nostrPubkey && wallet.nostrPubkey());
  if (!me) return null;
  const unread = featureHook('unreadMessages') || 0;
  return h('button', {
    class: 'header-msgs' + (unread ? ' unread' : ''),
    title: t('msgDmsTitle'),
    'aria-label': t('msgDmsTitle'),
    onClick: () => { ui.profilePk = null; ui.userSearch = null; ui.noteThread = null; ui.zapSetup = null; ui.chatOpen = true; ui.msgView = 'home'; render(); },
  }, h('span', {
    class: 'hm-ico',
    html: '<svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg>',
  }));
}

// Find anyone on nostr from the header — results open their profile.
function searchBtn() {
  if (!featureHook('userSearchAvailable')) return null;
  return h('button', {
    class: 'header-msgs',
    title: t('searchUsers'),
    'aria-label': t('searchUsers'),
    onClick: () => {
      featureHook('openUserSearch');
      render();
      setTimeout(() => document.querySelector('.user-search-input')?.focus(), 60);
    },
  }, h('span', {
    class: 'hm-ico',
    html: '<svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.35-4.35"/></svg>',
  }));
}

function brandHeader(withLock) {
  const acc = activeAccount();
  return h(
    'div',
    { class: 'row between' },
    h(
      'div',
      { class: 'brand' + (STAGING ? ' staging' : ' beta'), style: 'cursor:pointer', title: t('home'), onClick: goHome },
      STAGING ? h('span', { class: 'staging-badge', title: 'staging build — new wallets start on Mutinynet' }, 'staging')
        : h('span', { class: 'beta-badge' }, 'v3 beta'),
      h('div', { class: 'logo-full', 'aria-label': 'coinos', role: 'img', html: '<svg viewBox="0 0 224 72" height="40" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M36 4.23529C18.4568 4.23529 4.23529 18.4568 4.23529 36C4.23529 53.5432 18.4568 67.7647 36 67.7647C53.5432 67.7647 67.7647 53.5432 67.7647 36C67.7647 18.4568 53.5432 4.23529 36 4.23529ZM0 36C0 16.1177 16.1177 0 36 0C55.8823 0 72 16.1177 72 36C72 55.8823 55.8823 72 36 72C16.1177 72 0 55.8823 0 36Z" fill="currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M36 58.5882C48.4751 58.5882 58.5882 48.4751 58.5882 36C58.5882 23.5248 48.4751 13.4117 36 13.4117C23.5249 13.4117 13.4118 23.5248 13.4118 36C13.4118 48.4751 23.5249 58.5882 36 58.5882ZM36 54C45.9411 54 54 45.9411 54 36C54 26.0589 45.9411 18 36 18C26.0589 18 18 26.0589 18 36C18 45.9411 26.0589 54 36 54Z" fill="currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M36.0001 22.8988C36.0001 22.8988 36 22.8988 36 22.8988C28.7644 22.8988 22.8988 28.7644 22.8988 36C22.8988 43.2356 28.7644 49.1012 36 49.1012C36 49.1012 36.0001 49.1012 36.0001 49.1012V22.8988Z" fill="currentColor"/><path d="M97.608 27.704C99.544 27.704 101.248 28.088 102.72 28.856C104.192 29.624 105.368 30.688 106.248 32.048C107.144 33.408 107.68 34.952 107.856 36.68H102.864C102.752 35.928 102.48 35.216 102.048 34.544C101.616 33.856 101.032 33.304 100.296 32.888C99.56 32.456 98.672 32.24 97.632 32.24C95.776 32.24 94.264 32.928 93.096 34.304C91.944 35.68 91.368 37.792 91.368 40.64C91.368 43.264 91.92 45.352 93.024 46.904C94.128 48.456 95.704 49.232 97.752 49.232C98.776 49.232 99.648 49.008 100.368 48.56C101.104 48.096 101.68 47.528 102.096 46.856C102.528 46.168 102.808 45.48 102.936 44.792H107.784C107.64 46.472 107.112 47.968 106.2 49.28C105.304 50.592 104.12 51.624 102.648 52.376C101.192 53.112 99.512 53.48 97.608 53.48C95.336 53.48 93.312 52.984 91.536 51.992C89.776 50.984 88.392 49.528 87.384 47.624C86.376 45.704 85.872 43.392 85.872 40.688C85.872 38.112 86.344 35.856 87.288 33.92C88.232 31.968 89.584 30.448 91.344 29.36C93.104 28.256 95.192 27.704 97.608 27.704ZM122.09 53.48C119.722 53.48 117.658 52.976 115.898 51.968C114.138 50.944 112.77 49.48 111.794 47.576C110.834 45.672 110.354 43.384 110.354 40.712C110.354 38.12 110.818 35.848 111.746 33.896C112.69 31.944 114.042 30.424 115.802 29.336C117.562 28.248 119.666 27.704 122.114 27.704C124.482 27.704 126.538 28.224 128.282 29.264C130.026 30.304 131.37 31.792 132.314 33.728C133.274 35.664 133.754 37.992 133.754 40.712C133.754 43.224 133.298 45.44 132.386 47.36C131.49 49.264 130.17 50.76 128.426 51.848C126.698 52.936 124.586 53.48 122.09 53.48ZM122.114 49.04C123.458 49.04 124.562 48.672 125.426 47.936C126.306 47.2 126.954 46.192 127.37 44.912C127.802 43.632 128.018 42.176 128.018 40.544C128.018 39.024 127.826 37.624 127.442 36.344C127.074 35.064 126.45 34.04 125.57 33.272C124.706 32.488 123.554 32.096 122.114 32.096C120.754 32.096 119.626 32.456 118.73 33.176C117.85 33.88 117.186 34.872 116.738 36.152C116.306 37.416 116.09 38.88 116.09 40.544C116.09 42.048 116.282 43.448 116.666 44.744C117.066 46.024 117.706 47.064 118.586 47.864C119.466 48.648 120.642 49.04 122.114 49.04ZM143.518 28.184V53H137.902V28.184H143.518ZM143.59 18.32V23.84H137.806V18.32H143.59ZM149.367 53V28.184H155.079V31.736C155.463 31.096 155.983 30.48 156.639 29.888C157.311 29.296 158.135 28.816 159.111 28.448C160.087 28.08 161.231 27.896 162.543 27.896C164.079 27.896 165.503 28.2 166.815 28.808C168.143 29.416 169.207 30.368 170.007 31.664C170.823 32.96 171.231 34.632 171.231 36.68V53H165.375V37.376C165.375 35.744 164.927 34.536 164.031 33.752C163.135 32.952 162.007 32.552 160.647 32.552C159.719 32.552 158.839 32.712 158.007 33.032C157.175 33.336 156.495 33.808 155.967 34.448C155.455 35.072 155.199 35.856 155.199 36.8V53H149.367ZM186.348 53.48C183.98 53.48 181.916 52.976 180.156 51.968C178.396 50.944 177.028 49.48 176.052 47.576C175.092 45.672 174.612 43.384 174.612 40.712C174.612 38.12 175.076 35.848 176.004 33.896C176.948 31.944 178.3 30.424 180.06 29.336C181.82 28.248 183.924 27.704 186.372 27.704C188.74 27.704 190.796 28.224 192.54 29.264C194.284 30.304 195.628 31.792 196.572 33.728C197.532 35.664 198.012 37.992 198.012 40.712C198.012 43.224 197.556 45.44 196.644 47.36C195.748 49.264 194.428 50.76 192.684 51.848C190.956 52.936 188.844 53.48 186.348 53.48ZM186.372 49.04C187.716 49.04 188.82 48.672 189.684 47.936C190.564 47.2 191.212 46.192 191.628 44.912C192.06 43.632 192.276 42.176 192.276 40.544C192.276 39.024 192.084 37.624 191.7 36.344C191.332 35.064 190.708 34.04 189.828 33.272C188.964 32.488 187.812 32.096 186.372 32.096C185.012 32.096 183.884 32.456 182.988 33.176C182.108 33.88 181.444 34.872 180.996 36.152C180.564 37.416 180.348 38.88 180.348 40.544C180.348 42.048 180.54 43.448 180.924 44.744C181.324 46.024 181.964 47.064 182.844 47.864C183.724 48.648 184.9 49.04 186.372 49.04ZM210.995 53.48C209.267 53.48 207.627 53.208 206.075 52.664C204.539 52.104 203.243 51.232 202.187 50.048C201.147 48.864 200.491 47.336 200.219 45.464H205.355C205.579 46.376 205.971 47.12 206.531 47.696C207.107 48.272 207.787 48.696 208.571 48.968C209.355 49.224 210.155 49.352 210.971 49.352C212.459 49.352 213.659 49.096 214.571 48.584C215.499 48.072 215.963 47.28 215.963 46.208C215.963 45.424 215.707 44.8 215.195 44.336C214.683 43.872 213.867 43.52 212.747 43.28L208.019 42.2C205.923 41.736 204.235 40.968 202.955 39.896C201.691 38.824 201.051 37.312 201.035 35.36C201.019 33.888 201.387 32.576 202.139 31.424C202.891 30.272 204.011 29.368 205.499 28.712C206.987 28.04 208.827 27.704 211.019 27.704C213.915 27.704 216.235 28.352 217.979 29.648C219.723 30.928 220.619 32.76 220.667 35.144H215.699C215.523 34.072 215.019 33.24 214.187 32.648C213.355 32.04 212.275 31.736 210.947 31.736C209.571 31.736 208.443 32 207.563 32.528C206.683 33.056 206.243 33.864 206.243 34.952C206.243 35.704 206.579 36.296 207.251 36.728C207.923 37.16 208.931 37.528 210.275 37.832L214.739 38.912C216.019 39.232 217.067 39.664 217.883 40.208C218.699 40.752 219.339 41.352 219.803 42.008C220.267 42.648 220.587 43.312 220.763 44C220.955 44.672 221.051 45.296 221.051 45.872C221.051 47.472 220.635 48.84 219.803 49.976C218.987 51.096 217.827 51.96 216.323 52.568C214.819 53.176 213.043 53.48 210.995 53.48Z" fill="currentColor"/></svg>' })
    ),
    withLock
      ? h('div', { class: 'row gap6', style: 'align-items:center' },
          searchBtn(),
          messagesBtn(),
          settingsBtn(),
          lockBtn(),
          avatarMenu())
      : null
  );
}

// Settings tab — view the recovery phrase (+ passphrase) again (important for
// users who skipped backup verification) and the offline snapshot transfer.
// The phrase is gated: the real words are never put in the DOM until "Reveal",
// so the warning is read first.
// Rescan a single address on demand — recovers a deposit to a reused old
// address without a full wallet rescan. Multiple can be queued at once; the
// API layer's global scheduler serializes and spaces the underlying requests
// (and backs off on 429), so a flurry of clicks stays within the rate limit.
async function doRescanAddress(chain, index) {
  if (wallet.offline) { toast(t('scanOffline')); return; }
  const id = chain + '/' + index;
  if (ui.rescanning.has(id)) return; // already queued
  ui.rescanning.add(id);
  render();
  try {
    await wallet.rescanAddress(chain, index);
  } catch (e) {
    toast(e.message || t('rescanFailed'));
  }
  ui.rescanning.delete(id);
  render();
}

// Paginated list of every known address, each with its own rescan button.
function addressScanView() {
  const addrs = wallet.knownAddresses();
  const pages = Math.ceil(addrs.length / PAGE_SIZE) || 1;
  const page = Math.min(ui.addrScanPage, pages - 1);
  const slice = addrs.slice(page * PAGE_SIZE, page * PAGE_SIZE + PAGE_SIZE);
  return h(
    'div',
    { class: 'col', style: 'gap:16px' },
    h('div', { class: 'card col', style: 'gap:12px' },
      h('div', { class: 'row between' },
        h('h3', { style: 'margin:0' }, t('rescanAddresses')),
        h('button', { class: 'btn-sm', onClick: () => { ui.addrScan = false; render(); } }, t('back'))
      ),
      h('p', { class: 'small muted', style: 'margin:0' }, t('rescanAddrDesc')),
      h('div', { class: 'list' },
        ...slice.map((a) => {
          const id = a.chain + '/' + a.index;
          const busy = ui.rescanning.has(id);
          return h('div', { class: 'item' },
            h('div', { class: 'grow' },
              h('div', { class: 'mono small break' }, shortAddr(a.address, 16, 10),
                a.used ? null : h('span', { class: 'badge off dot', style: 'font-size:10px;margin-left:6px;padding:1px 7px' }, t('unusedTag'))),
              h('div', { class: 'path' }, `${a.chain}/${a.index}` + (a.balance ? ' · ' + fmtAmount(a.balance) + ' ' + unitLabel() : ''))
            ),
            busy
              ? h('button', { class: 'btn-sm', disabled: true }, h('span', { class: 'spinner sm' }))
              : h('button', { class: 'btn-sm', onClick: () => doRescanAddress(a.chain, a.index) }, t('rescanOne'))
          );
        })
      ),
      pager(page, addrs.length, (p) => { ui.addrScanPage = p; render(); })
    )
  );
}

// Settings is a hub: the main page is nothing but doors, each subpage owns
// one concern — Wallet (name/pubkey/seed), Payments (address + Spending),
// Network (chain + data source), Nostr, Advanced (rarities).
function settingsTab() {
  if (ui.addrScan && !wallet.offline) return addressScanView();
  const a = activeAccount();
  const page = (kids) => h('div', { class: 'col', style: 'gap:16px' }, ...kids,
    h('button', { class: 'btn-ghost btn-block', onClick: () => { ui.settingsPage = null; render(); } }, t('back')));
  switch (ui.settingsPage) {
    case 'wallet': return page(a ? [walletNameCard(a), pubkeyCard(a), recoveryCard(a)] : []);
    case 'payments': return page(featureAll('settingsCards').reverse());
    case 'network': return page([networkCard(), explorerCard()]);
    case 'nostr': return nostrSettingsView();
    case 'notifications': return page(featureAll('notifySettingsCards'));
    case 'advanced': return advancedSettingsView();
  }
  const I = (d) => '<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">' + d + '</svg>';
  const TILE_ICONS = {
    wallet: I('<rect x="2" y="6" width="20" height="14" rx="2"/><path d="M2 10h20"/><circle cx="17" cy="15" r="1.4"/>'),
    payments: I('<path d="M13 2 4.5 13.5H11L9.5 22 18 10.5h-6.5z"/>'),
    network: I('<circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a15 15 0 0 1 0 18M12 3a15 15 0 0 0 0 18"/>'),
    nostr: I('<circle cx="8" cy="15" r="4"/><path d="M10.9 12.1 20 3l1 1-2 2 2 2-2.5 2.5L16 8l-2.2 2.2"/>'),
    notifications: I('<path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 0 1-3.4 0"/>'),
    advanced: I('<line x1="4" y1="8" x2="20" y2="8"/><line x1="4" y1="16" x2="20" y2="16"/><circle cx="9" cy="8" r="2.2" fill="var(--surface,#fff)"/><circle cx="15" cy="16" r="2.2" fill="var(--surface,#fff)"/>'),
  };
  const tile = (id, label, desc) =>
    h('button', {
      class: 'card col settings-tile',
      style: 'align-items:flex-start;gap:6px;text-align:left;padding:14px;cursor:pointer;margin:0',
      onClick: () => { ui.settingsPage = id; render(); },
    },
      h('span', { class: 'st-ico', style: 'color:var(--muted)', html: TILE_ICONS[id] || '' }),
      h('span', { style: 'font-weight:600' }, label),
      h('span', { class: 'small faint' }, desc));
  const grid = (kids) => h('div', { style: 'display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px' }, ...kids);
  return h(
    'div',
    { class: 'col', style: 'gap:10px' },
    h('div', { class: 'row gap6', style: 'align-items:center;margin:2px 0 6px 4px' },
      h('span', { style: 'display:flex;color:var(--muted)', html: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>' }),
      h('h3', { style: 'margin:0' }, t('tabSettings'))),
    grid([
      tile('wallet', t('settingsWallet'), t('settingsWalletDesc')),
      tile('payments', t('settingsPayments'), t('settingsPaymentsDesc')),
      tile('network', t('settingsNetwork'), t('settingsNetworkDesc')),
      tile('nostr', t('nostrSettings'), t('settingsNostrDesc')),
      tile('notifications', t('settingsNotifications'), t('settingsNotifDesc')),
      tile('advanced', t('advancedSettings'), t('settingsAdvancedDesc')),
    ]),
    h('button', { class: 'btn-ghost btn-block', style: 'margin-top:6px', onClick: () => { ui.tab = wallet.offline ? 'settings' : 'history'; render(); } }, t('back'))
  );
}

// Everything nostr — identity, sync, wallet connect — on its own page.
function nostrSettingsView() {
  return h(
    'div',
    { class: 'col', style: 'gap:16px' },
    ...featureAll('nostrSettingsCards'),
    h('button', { class: 'btn-ghost btn-block', onClick: () => { ui.settingsPage = null; render(); } }, t('back'))
  );
}

// Rarely used, easy to fat-finger: offline transfer, address rescan, auto-logout.
function advancedSettingsView() {
  const a = activeAccount();
  return h(
    'div',
    { class: 'col', style: 'gap:16px' },
    wallet.watchOnly
      ? null
      : h(
          'div',
          { class: 'card col' },
          h('h3', {}, t('offlineTransfer')),
          snapshotActions()
        ),
    h(
      'div',
      { class: 'card col' },
      h('h3', {}, t('rescan')),
      h('p', { class: 'small muted', style: 'margin:0' }, t('rescanDesc')),
      wallet.offline
        ? null
        : h('button', { onClick: () => { ui.addrScan = true; ui.addrScanPage = 0; render(); } }, t('rescanAddresses'))
    ),
    a ? autolockCard(a) : null,
    h('button', { class: 'btn-ghost btn-block', onClick: () => { ui.settingsPage = null; render(); } }, t('back'))
  );
}

















// Move the ACTIVE wallet to another network (and make that the default for
// new wallets). Changes addresses/balances entirely, so the account is
// restamped and reloaded under it.
function changeNetwork(net) {
  if (net === getNetwork()) return;
  setNetwork(net);
  for (const f of FEATURES) { try { f.networkChanged && f.networkChanged(net); } catch {} }
  const acc = accounts.find((a) => a.id === activeId);
  if (acc) { acc.network = net; persistAccounts(); activateAccount(acc); } else render();
}





// Network selector. Per-network endpoints (Electrum server / block explorer) are
// configured in the Data source card below — no duplicate URL fields here.
function networkCard() {
  const net = getNetwork();
  return h(
    'div',
    { class: 'card col' },
    h('h3', {}, 'Network'),
    h('p', { class: 'small muted', style: 'margin:0' }, 'Bitcoin network this wallet operates on. Pick its servers under Data source.'),
    h('select', { onChange: (e) => changeNetwork(e.target.value) },
      NETWORKS.map((n) => h('option', { value: n.id, selected: net === n.id }, n.label)))
  );
}

function explorerCard() {
  const net = getNetwork();
  const src = getSource();
  const sources = dataSources(net);
  const pick = (id) => {
    setSource({ id, url: '' });
    render();
    // Switching source can swap the whole backend (electrum⇄esplora), so rebuild
    // + rescan — except an empty custom (wait for the URL).
    if (id !== 'custom' && !wallet.offline) wallet.reloadExplorer();
  };
  const typeDesc = t(src.type === 'electrum' ? 'detectedElectrum' : 'detectedEsplora');
  return h(
    'div',
    { class: 'card col' },
    h('h3', {}, t('dataSource')),
    h('p', { class: 'small muted', style: 'margin:0' }, t('dataSourceDesc')),
    h('select', { onChange: (e) => pick(e.target.value) },
      sources.map((o) => h('option', { value: o.id, selected: o.id === src.id }, o.id === 'custom' ? o.label : (o.url || o.base).replace(/^\w+:\/\//, '')))),
    src.id === 'custom'
      ? h('label', { class: 'field' },
          h('span', { class: 'lab' }, t('sourceUrl')),
          h('input', {
            type: 'text', class: 'mono-input', placeholder: 'wss://your-node:50004  ·  https://your-esplora/api',
            autocapitalize: 'none', autocomplete: 'off', spellcheck: 'false', value: src.url || '',
            onChange: (e) => { const url = e.target.value.trim(); setSource({ id: 'custom', url }); render(); if (!wallet.offline) wallet.reloadExplorer(); },
          }),
          h('div', { class: 'small faint' }, src.url ? typeDesc : t('sourceUrlHint'))
        )
      : h('div', { class: 'small faint' }, typeDesc)
  );
}


// Language selector. Changing it persists the choice, flips text direction for
// RTL languages, and re-renders the whole app in the new language.
function languagePicker() {
  return h(
    'select',
    {
      value: getLang(),
      onChange: async (e) => {
        const code = e.target.value;
        setLang(code);
        await loadLocale(code); // fetch the locale's strings before re-rendering
        applyDir();
        render();
      },
    },
    LANGS.map(([code, name]) => h('option', { value: code, selected: code === getLang() }, name))
  );
}

// Reflect the active language's writing direction on <html> (rtl for ar/ur).
function applyDir() {
  try {
    document.documentElement.dir = isRTL() ? 'rtl' : 'ltr';
    document.documentElement.lang = getLang();
  } catch {}
}

function goHome() {
  // Bailing from an unclaimed gift — discard the provisional wallet it generated.
  const active = accounts.find((a) => a.id === activeId);
  if (active && active.provisional) {
    accounts = accounts.filter((a) => a.id !== active.id);
    persistAccounts();
    activeId = accounts[0] ? accounts[0].id : null;
  }
  // A wallet is open → home is its Receive page (not the create/import screen),
  // so the logo is always a way back to your wallet.
  if (activeAccount()) {
    ui.screen = 'wallet';
    // Home means home: with a wallet already minted, even the wizard yields —
    // its remaining steps are niceties, not something to be trapped in.
    if (ui.onb || onbInProgress()) { ui.onb = null; try { localStorage.removeItem(ONB_STEP_KEY); } catch {} }
    // Clear every takeover a feature or subpage may hold —
    // chat, profile, ark exit, settings subpages, the address rescan list.
    ui.chatOpen = false;
    ui.profilePk = null;
    ui.profEdit = null;
    ui.userSearch = null;
    ui.noteThread = null;
    ui.zapSetup = null;
    ui.arkExitPage = null;
    ui.settingsPage = null;
    ui.logoutConfirm = null;
    ui.nostrReconnect = null;
    ui.addrScan = false;
    ui.arkMoveOpen = false;
    ui.nameEditOpen = null;
    ui.tab = wallet.offline ? 'settings' : 'history';
    ui.draft = null;
    ui.sendResult = null;
    ui.sendError = '';
    ui.fromWallet = false;
  } else if ((ui.onb && ui.onb.step !== 'welcome')
      || ui.draftMnemonic || ui.createStep !== 'gen' || ui.importText) {
    // Mid-create with no wallet minted yet (wizard step, a generated seed on
    // screen, the confirm quiz, a pasted import): the logo backs out to the
    // start page this began from — not the vault prompt, which reads as a
    // dead end when you were busy creating something new.
    ui.onb = { step: 'welcome' };
    try { localStorage.removeItem(ONB_STEP_KEY); } catch {}
    ui.nostrLoginOpen = false;
    ui.screen = 'unlock';
    ui.unlockTab = 'create';
    ui.createStep = 'gen';
    ui.draftMnemonic = '';
    ui.importText = '';
    ui.entropyPage = null;
    ui.confirm = [];
    ui.unlockError = '';
  } else if (hasVault()) {
    // Locked with saved wallets: home is the unlock prompt, not the
    // create-a-new-wallet flow — the logo must never read as "start over".
    // A passwordless vault isn't locked, though: open it silently and land
    // home instead of demanding a password nobody set.
    if (attemptVaultUnlock('') && accounts.length) {
      activateAccount(accounts[0], { fresh: true });
      return;
    }
    ui.screen = 'vault';
  } else {
    ui.screen = 'unlock';
    ui.unlockTab = 'create';
    ui.createStep = 'gen';
    ui.draftMnemonic = '';
    ui.confirm = [];
    ui.unlockError = '';
  }
  render();
}















// Wallets a gift could be claimed into: full accounts open this session plus the
// durable directory (every wallet's xpub, watch-only), deduped by xpub. Claiming
// sends the gift to the wallet's address; a watch-only one then needs the seed
// re-entered to spend. Empty for a first-time recipient.
function claimTargets() {
  let sess = null;
  try { sess = JSON.parse(sessionStorage.getItem(ACCOUNTS_KEY) || 'null'); } catch {}
  const open = ((sess && Array.isArray(sess.accounts)) ? sess.accounts : []).filter((a) => !a.provisional);
  const seen = new Set(open.map((a) => a.xpub).filter(Boolean));
  return [...open, ...loadWatchAccounts().filter((w) => !seen.has(w.xpub))];
}









// Account switcher: pick a wallet, add another, or lock the session.
function accountsScreen() {
  if (ui.pw) return h('div', { class: 'col', style: 'gap:16px' }, brandHeader(false), pwPromptCard());
  if (ui.addWallet) {
    const aw = ui.addWallet;
    const fulls = accounts.filter((x) => x.type === 'full' && x.mnemonic);
    return h('div', { class: 'col', style: 'gap:16px' },
      brandHeader(false),
      h('div', { class: 'card col', style: 'gap:12px' },
        h('h3', {}, t('addWallet')),
        h('div', { class: 'seg', style: 'display:flex;width:100%' },
          ['spending', 'savings'].map((k) => h('button', {
            type: 'button', class: (aw.kind === k ? 'active ' : '') + 'grow',
            onClick: () => { aw.kind = k; render(); },
          }, k === 'spending' ? t('spendingName') : t('savingsName')))),
        h('div', { class: 'col gap6' },
          h('span', { class: 'small muted' }, t('addWalletSeed')),
          h('select', { onChange: (e) => { aw.from = e.target.value; render(); } },
            h('option', { value: 'new', selected: aw.from === 'new' }, t('addWalletNewSeed')),
            fulls.map((x) => h('option', { value: x.id, selected: aw.from === x.id }, t('addWalletShareSeed', { name: seedName(x) }))))),
        aw.from !== 'new' ? h('div', { class: 'small faint' }, t('addWalletShareNote')) : null,
        h('div', { class: 'row gap6' },
          h('button', { class: 'btn-ghost grow', onClick: () => { ui.addWallet = null; render(); } }, t('back')),
          h('button', { class: 'btn-primary grow', onClick: () => {
            const kind = aw.kind;
            if (aw.from === 'new') {
              ui.newWalletKind = kind;
              ui.addWallet = null;
              ui.draftMnemonic = ''; ui.createStep = 'gen'; ui.confirm = []; ui.passphrase = ''; ui.confirmPass = '';
              ui.showPass = false; ui.screen = 'unlock'; ui.unlockTab = 'create'; ui.fromWallet = true; ui.unlockError = '';
              render();
            } else {
              createDerivedWallet(aw.from, kind);
            }
          } }, t('addWalletGo')))));
  }
  if (ui.confirmClear) {
    return h('div', { class: 'col', style: 'gap:16px' },
      brandHeader(false),
      h('div', { class: 'card col' },
        h('h3', {}, t('clearAll')),
        h('div', { class: 'warn-box' }, t('clearAllWarn')),
        h('div', { class: 'row gap6' },
          h('button', { class: 'btn-ghost grow', onClick: () => { ui.confirmClear = false; render(); } }, t('back')),
          h('button', { class: 'btn-primary grow', onClick: clearAll }, t('clearAll'))
        )
      )
    );
  }
  if (ui.confirmRemove) {
    const acc = accounts.find((a) => a.id === ui.confirmRemove);
    return h('div', { class: 'col', style: 'gap:16px' },
      brandHeader(false),
      h('div', { class: 'card col' },
        h('h3', {}, t('removeWalletTitle')),
        h('div', { class: 'warn-box' }, t('removeWalletWarn', { name: acc ? seedName(acc) : '' })),
        h('div', { class: 'row gap6' },
          h('button', { class: 'btn-ghost grow', onClick: () => { ui.confirmRemove = null; render(); } }, t('back')),
          h('button', { class: 'btn-primary grow', onClick: () => { const id = ui.confirmRemove; ui.confirmRemove = null; removeAccount(id); } }, t('remove'))
        )
      )
    );
  }
  return h(
    'div',
    { class: 'col', style: 'gap:16px' },
    // Reached from an open wallet this is a page, not a boot screen — the
    // header icons (search, messages, settings, lock, avatar) stay put.
    // Cold boot lands here with nothing loaded yet, and then they hide.
    brandHeader(wallet.loaded),
    h('div', { class: 'card col' },
      h('h3', {}, t('accounts')),
      h('div', { class: 'col', style: 'gap:0' },
        accounts.flatMap((a) => viewsOf(a).map((view) => {
          const isActive = a.id === activeId && accountSel() === view;
          const netTag = a.network && a.network !== 'mainnet' ? ' · ' + a.network : '';
          const seedTag = '';
          const tag = (a.type === 'watch' ? ' · ' + t('watchOnlyTag') : '') + netTag + seedTag;
          if (ui.editId === a.id && ui.editView === view) {
            return h('div', { class: 'row gap6', style: 'padding:10px 0; border-bottom:1px solid var(--line)' },
              h('input', { type: 'text', style: 'flex:1', value: ui.editLabel, autofocus: true,
                onInput: (e) => (ui.editLabel = e.target.value),
                onKeyDown: (e) => { if (e.key === 'Enter') renameAccount(a.id); } }),
              h('button', { class: 'btn-sm', onClick: () => renameAccount(a.id) }, t('save')),
              h('button', { class: 'btn-sm', onClick: () => { ui.editId = null; render(); } }, t('back'))
            );
          }
          return h('div', { class: 'col', style: 'gap:4px; padding:10px 0; border-bottom:1px solid var(--line)' },
            h('div', { class: 'row between' },
              h('button', {
                class: 'linklike', style: 'text-align:left;flex:1;font-size:15px;' + (isActive ? 'font-weight:600' : ''),
                onClick: () => switchToView(a.id, view),
              }, (isActive ? '● ' : '○ ') + viewLabel(a, view) + tag),
              h('button', { class: 'btn-sm wallet-row-btn', title: t('renameWallet'), onClick: () => { ui.editId = a.id; ui.editView = view; ui.editLabel = viewLabel(a, view); render(); } }, '✎'),
              h('button', { class: 'btn-sm wallet-row-btn', title: t('walletSettings'), onClick: () => openAccountSettings(a.id), html: '<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:block"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>' }),
              h('button', { class: 'btn-sm wallet-row-btn', title: t('remove'), onClick: () => { ui.confirmRemove = a.id; render(); }, html: '<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:block"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg>' })
            ),
            a.type === 'full' && view === viewsOf(a)[viewsOf(a).length - 1]
              ? h('button', { class: 'linklike small', style: 'align-self:flex-start', onClick: () => (a.persisted ? startForget(a.id) : startSave(a.id)) },
                  a.persisted ? t('forgetDevice') : t('saveDevice'))
              : null
          );
        }))
      ),
      h('button', { class: 'btn-block', onClick: () => { ui.addWallet = { kind: 'spending', from: 'new' }; render(); } }, t('addWallet')),
      hasVault() ? h('button', { class: 'btn-ghost btn-block', onClick: startChangePw }, t('changePassword')) : null,
      h('button', { class: 'btn-ghost btn-block', onClick: () => { ui.confirmClear = true; render(); } }, t('clearAll'))
    ),
    h('button', { class: 'btn-ghost btn-block', onClick: () => goBack(() => { ui.screen = 'wallet'; }) }, t('back'))
  );
}

function renameAccount(id) {
  const acc = accounts.find((a) => a.id === id);
  if (acc) {
    const v = (ui.editLabel || '').trim();
    if (v) {
      // names belong to the VIEW now — Spending and Savings rename separately
      acc.viewLabels = { ...(acc.viewLabels || {}), [ui.editView || accountSel()]: v };
      persistAccounts();
      if (acc.persisted) writeVault();
    }
  }
  ui.editId = null;
  render();
}

// Open the per-wallet settings page for an account.
function openAccountSettings(id) {
  ui.settingsId = id;
  ui.editLabel = null;
  ui.revealShown = false;
  ui.pubkeyShown = false;
  ui.loadSeed = null;
  ui.screen = 'accountSettings';
  render();
}

// Per-wallet settings cards, shared by the per-account screen (Accounts → ⚙)
// and the main Settings tab (which inlines them for the active wallet).

function recoveryCard(a) {
  const isWatch = a.type === 'watch' || (!a.mnemonic && !a.xprv);
  const shown = ui.revealShown;
  const words = a.mnemonic ? a.mnemonic.split(' ') : [];
  if (isWatch) {
    return ui.loadSeed && ui.loadSeed.accId === a.id
      ? loadSeedCard()
      : h('div', { class: 'card col' },
          h('h3', {}, t('recoveryPhrase')),
          h('p', { class: 'small muted', style: 'margin:0' }, t('watchOnlyNote')),
          a.xpub
            ? h('button', { class: 'btn-primary btn-block', style: 'margin-top:4px', onClick: () => startLoadSeed({ accId: a.id }) }, t('loadSeedBtn'))
            : null
        );
  }
  if (!a.mnemonic)
    return h('div', { class: 'card col' }, h('h3', {}, t('importedKey')), h('p', { class: 'small muted', style: 'margin:0' }, t('importedKeyNote')));
  // Two steps on purpose. The first opens the card, with the words masked —
  // so the grid is on screen and you can see how much of it there is (and get
  // a warning) before anything readable is over your shoulder. The second
  // actually shows them.
  if (!shown)
    return h('div', { class: 'card col' },
      h('h3', {}, t('recoveryPhrase')),
      h('p', { class: 'small muted', style: 'margin:0' }, t('recoveryDesc')),
      h('button', { class: 'btn-block', onClick: () => { ui.revealShown = 'masked'; render(); } }, t('revealRecovery')));
  const unmasked = shown === 'words';
  return h('div', { class: 'card col' },
    h('h3', {}, t('recoveryPhrase')),
    h('div', { class: 'warn-box' }, t('recoveryWarn')),
    h('div', { class: 'words' }, words.map((w, i) =>
      h('div', { class: 'w' + (unmasked ? '' : ' masked') },
        h('span', { class: 'n' }, i + 1),
        h('span', { class: 't' }, unmasked ? w : '••••••')))),
    unmasked && a.passphrase
      ? h('div', { class: 'col gap6' }, h('span', { class: 'lab' }, t('bip39Passphrase')), h('div', { class: 'addr-box' }, a.passphrase))
      : null,
    unmasked
      ? h('div', { class: 'row gap6 wrap' },
          copyBtn(a.mnemonic, t('copyPhrase')),
          a.passphrase ? copyBtn(a.passphrase, t('copyPassphrase')) : null,
          h('button', { class: 'btn-sm grow', onClick: () => { ui.revealShown = false; render(); } }, t('hide')))
      : h('div', { class: 'row gap6' },
          h('button', { class: 'btn-primary grow', onClick: () => { ui.revealShown = 'words'; render(); } }, t('revealWords')),
          h('button', { class: 'btn-sm', onClick: () => { ui.revealShown = false; render(); } }, t('hide')))
  );
}

function walletNameCard(a) {
  const saveName = () => {
    const v = (ui.editLabel || '').trim();
    if (v && v !== a.label) { a.label = v; persistAccounts(); if (a.persisted) writeVault(); }
    ui.editLabel = null;
    render();
  };
  return h('div', { class: 'card col' },
    h('h3', {}, t('walletName')),
    h('div', { class: 'row gap6' },
      h('input', { type: 'text', style: 'flex:1', value: ui.editLabel != null ? ui.editLabel : a.label,
        onInput: (e) => { ui.editLabel = e.target.value; },
        onKeyDown: (e) => { if (e.key === 'Enter') saveName(); } }),
      h('button', { class: 'btn-sm', onClick: saveName }, t('save'))
    )
  );
}

function pubkeyCard(a) {
  let zpub = '';
  try { if (a.xpub) zpub = xpubToZpub(a.xpub); } catch {}
  return h('div', { class: 'card col' },
    h('h3', {}, t('publicKey')),
    h('p', { class: 'small muted', style: 'margin:0' }, t('publicKeyDesc')),
    ui.pubkeyShown
      ? h('div', { class: 'col gap6' },
          h('div', { class: 'addr-box break', style: 'font-size:12px' }, zpub),
          h('div', { class: 'row gap6 wrap' },
            copyBtn(zpub, t('copyKey')),
            h('button', { class: 'btn-sm grow', onClick: () => { ui.pubkeyShown = false; render(); } }, t('hide'))))
      : h('button', { class: 'btn-block', onClick: () => { ui.pubkeyShown = true; render(); } }, t('showPublicKey'))
  );
}

function autolockCard(a) {
  return h('div', { class: 'card col' },
    h('h3', {}, t('autolockTitle')),
    h('p', { class: 'small muted', style: 'margin:0' }, t('autolockDesc')),
    h('select', { onChange: (e) => { a.autoLock = Number(e.target.value) || 0; persistAccounts(); if (a.persisted) writeVault(); render(); } },
      AUTOLOCK_OPTIONS.map((o) => h('option', { value: String(o.ms), selected: o.ms === accAutoLock(a) }, t(o.label))))
  );
}

// Per-wallet settings screen — reached from Accounts → ⚙ for any account
// (not just the active one; full accounts keep their seed in memory).
function accountSettingsScreen() {
  const a = accounts.find((x) => x.id === ui.settingsId) || activeAccount();
  if (!a) { ui.screen = 'accounts'; return accountsScreen(); }
  return h(
    'div',
    { class: 'col', style: 'gap:16px' },
    brandHeader(false),
    walletNameCard(a),
    pubkeyCard(a),
    recoveryCard(a),
    autolockCard(a),
    h('button', { class: 'btn-ghost btn-block', onClick: () => { ui.editLabel = null; ui.revealShown = false; ui.pubkeyShown = false; ui.loadSeed = null; goBack(() => { ui.screen = 'accounts'; }); } }, t('back'))
  );
}

// Wipe every wallet from this device: session accounts, the encrypted vault,
// and saved watch-only accounts. Unbacked-up seeds are unrecoverable after this.
function clearAll() {
  // Forget means forget: cached balances, history and feature state go with
  // the seeds (best effort — a still-locked vault's mnemonic-keyed caches
  // can't be found without its password; the xpub-keyed ones still match).
  for (const a of [...accounts, ...loadWatchAccounts()]) wipeAccountCache(a);
  try { localStorage.removeItem(VAULT_KEY); } catch {}
  try { localStorage.removeItem(WATCH_KEY); } catch {}
  ui.confirmClear = false;
  lock();
}

function pwPromptCard() {
  const p = ui.pw;
  const change = p.purpose === 'change';
  const atLock = p.purpose === 'lock';
  const newish = change || p.mode === 'set'; // entering a (new) password with confirm
  const atLockSave = p.purpose === 'locksave'; // locking, but the vault needs its password first
  return h('div', { class: 'card col' },
    h('h3', {}, atLock ? t('lockPwTitle') : atLockSave ? t('lockWallet') : change ? t('changePassword') : p.mode === 'set' ? t('setPassword') : t('enterPassword')),
    h('p', { class: 'small muted', style: 'margin:0' },
      atLock ? t('lockPwDesc') : change ? t('changePasswordDesc') : atLockSave ? t('lockSaveDesc') : p.mode === 'set' ? t('setPasswordDesc') : t('enterPasswordDesc')),
    change ? h('input', { type: 'password', placeholder: t('currentPassword'), value: p.v0, onInput: (e) => (p.v0 = e.target.value) }) : null,
    h('input', { type: 'password', placeholder: newish ? t('passwordOptional') : t('password'), value: p.v1, onInput: (e) => (p.v1 = e.target.value) }),
    newish ? h('input', { type: 'password', placeholder: t('confirmPassword'), value: p.v2, onInput: (e) => (p.v2 = e.target.value) }) : null,
    p.error && h('div', { class: 'notice err' }, p.error),
    h('div', { class: 'row gap6' },
      h('button', { class: 'btn-ghost grow', onClick: cancelPw }, atLock ? t('lockPwSkip') : t('back')),
      h('button', { class: 'btn-primary grow', onClick: submitPw }, newish ? t('save') : atLockSave ? t('lockAction') : t('unlock'))
    )
  );
}

function vaultScreen() {
  return h(
    'div',
    { class: 'col', style: 'gap:16px' },
    brandHeader(false),
    h('div', { class: 'card col' },
      h('div', { class: 'row gap6', style: 'align-items:center' },
        h('span', { style: 'font-size:20px;line-height:1' }, '\u{1F512}'),
        h('h3', { style: 'margin:0' }, ui.justLocked ? t('lockedTitle') : t('unlockSaved'))),
      h('p', { class: 'small muted', style: 'margin:0' }, ui.justLocked ? t('lockedDesc') : t('unlockSavedDesc')),
      h('input', { type: 'password', placeholder: t('password'), value: ui.vaultPw,
        onInput: (e) => (ui.vaultPw = e.target.value), onKeyDown: (e) => { if (e.key === 'Enter') unlockVault(); } }),
      h('div', { class: 'row between', style: 'align-items:center;gap:10px' },
        h('span', { class: 'small muted', style: 'white-space:nowrap;flex-shrink:0' }, t('unlockForLabel')),
        h('select', { onChange: (e) => { ui.unlockFor = Number(e.target.value) || 0; } },
          UNLOCK_FOR_OPTIONS.map((o) => h('option', {
            value: String(o.ms),
            selected: (ui.unlockFor != null ? ui.unlockFor : Number(localStorage.getItem(UNLOCK_FOR_KEY)) || 0) === o.ms,
          }, t(o.label))))),
      ui.vaultError && h('div', { class: 'notice err' }, ui.vaultError),
      h('button', { class: 'btn-primary btn-block', onClick: unlockVault }, t('unlock')),
      h('button', { class: 'btn-ghost btn-block', onClick: skipVault },
        loadWatchAccounts().length ? t('viewWithoutPassword') : t('useAnotherWallet'))
    )
  );
}

// ================================================================ onboarding
// First visit on a fresh device: a full-screen wizard — welcome, then either
// create/import a seed or sign in with nostr — that ends the moment a wallet
// exists, dropping the user into a plain on-chain wallet. Spending is opt-in:
// the same wizard machinery serves the "set up a spending account" flow
// (username, avatar, confetti), but only when the user asks for it from the
// balance card. Shown whenever the device has no wallet — deleting every
// wallet brings it back. The current step is persisted so a refresh (or the
// legacy-migration round trip) resumes exactly where it left off.
const ONB_STEP_KEY = 'btc-wallet-onb-step';
function onbInProgress() {
  try { return !!localStorage.getItem(ONB_STEP_KEY); } catch { return false; }
}
function shouldOnboard() {
  return accounts.length === 0 && !hasVault();
}

const PUNK_PICKS = [7, 14, 21, 3, 33, 40, 47, 36, 61, 26, 12, 50];
const punkImg = (n) => `punks/${n}.webp`;

async function onbUpload(file) {
  const fd = new FormData();
  fd.append('file', file);
  const endpoint = 'https://nostr.build/api/v2/upload/files';
  // nostr.build no longer takes anonymous uploads — sign with the wallet's
  // nostr key, the one key that's always available without a signer prompt.
  const headers = {};
  try {
    if (wallet.nostrPubkey && wallet.nostrPubkey()) {
      headers.authorization = await nip98Header({ signEvent: (e) => wallet.nostrSign(e) }, endpoint, 'POST');
    }
  } catch {}
  const r = await fetch(endpoint, { method: 'POST', body: fd, headers });
  const j = await r.json();
  const url = j?.data?.[0]?.url;
  if (!url) throw new Error(t('onbUploadFailed'));
  return url;
}

function onboardScreen() {
  if (!ui.onb) {
    let saved = null;
    try { saved = localStorage.getItem(ONB_STEP_KEY); } catch {}
    // a saved step past wallet creation only makes sense if the wallet is here
    if (saved && !['welcome', 'signin', 'seed'].includes(saved) && !activeAccount()) saved = 'welcome';
    // 'legacy-went' survives the coinos.io round trip: the user left for the
    // migrate page, so coming back must offer "I'm done, continue" — the
    // in-memory flag died with the navigation and left them looping.
    ui.onb = saved === 'legacy-went'
      ? { step: 'legacy', wentToLegacy: true }
      : { step: saved || 'welcome' };
    if (saved === 'signin') ui.nostrLoginOpen = true; // reopen the login card
  }
  const o = ui.onb;
  // The wizard's whole job ends the moment a wallet exists: hand the user
  // their on-chain wallet, receive page up. A nostr login in flight holds
  // this: the wallet opens mid-login, but whether the wizard should even
  // continue (a restored account has onboarded elsewhere) isn't known until
  // the login finishes.
  if ((o.step === 'welcome' || o.step === 'seed' || o.step === 'signin')
      && ui.screen === 'wallet' && activeAccount() && !ui.nostrLoginBusy) {
    ui.onb = null;
    try { localStorage.removeItem(ONB_STEP_KEY); } catch {}
    // On-chain first: the wizard's promise is "your keys, your coins", and
    // Spending stays out of sight until the user sets it up.
    ui.account = 'savings';
    try { localStorage.setItem(ACCOUNT_KEY, 'savings'); } catch {}
    ui.tab = 'history';
    return null; // the caller falls through to the wallet itself
  }
  if (o.step === 'spend') {
    const addr = featureHook('namesAddress');
    if (o.enterAddr === undefined) o.enterAddr = addr || null;
    // Only a real (custom) name advances by itself — the background
    // auto-claim of the npub-shaped default doesn't count as setting up.
    if (addr && addr !== o.enterAddr && !/^npub1/.test(addr)) {
      // The avatar ask is for brand-new profiles. An identity that already
      // wears a face (a nostr login with a published picture) skips straight
      // past the punk picker — restyling a real profile helps nobody.
      const me = (featureHook('nostrLoginIdentity') || {}).pubkey || (wallet.nostrPubkey && wallet.nostrPubkey());
      const prof = me ? featureHook('cachedProfile', me) : null;
      o.step = prof && prof.picture ? nextAfterAvatar() : 'avatar';
    }
  }
  try { localStorage.setItem(ONB_STEP_KEY, o.step === 'legacy' && o.wentToLegacy ? 'legacy-went' : o.step); } catch {}
  const page = (kids) => h('div', { class: 'col onb', style: 'gap:20px' }, ...kids);
  const title = (txt) => h('h2', { class: 'onb-title' }, txt);
  // After the identity niceties: offer a first top-up when Savings can fund
  // one and Spending is empty-handed — a spending account with nothing in it
  // is a demo, not a wallet.
  const nextAfterAvatar = () =>
    (featureHook('arkReady') && wallet.spendable > 1000
      && (featureHook('spendingSat') || 0) + (featureHook('spendingBoardingSat') || 0) < 1000)
      ? 'board' : 'success';

  if (o.step === 'legacy') {
    // The migrate link carries this wallet's payment address, which the
    // background claim may still be minting. Don't make the user watch that:
    // show the finished page and wait (on the button) only if they tap
    // before it lands.
    const goLegacy = async () => {
      let addr = featureHook('namesAddress');
      if (!addr) {
        o.legacyBusy = true;
        render();
        for (let i = 0; i < 40 && !addr; i++) {
          await new Promise((r) => setTimeout(r, 500));
          addr = featureHook('namesAddress');
        }
        o.legacyBusy = false;
        if (!addr) { ui.onbError = t('onbLegacyNoAddr'); render(); return; }
      }
      o.wentToLegacy = true;
      // persist NOW — location.href never comes back through a render
      try { localStorage.setItem(ONB_STEP_KEY, 'legacy-went'); } catch {}
      location.href = `https://coinos.io/migrate?to=${encodeURIComponent(addr)}&back=${encodeURIComponent(location.origin + '/')}`;
    };
    // A migrated name mid-claim (the ?migrated= return) paints as progress
    // here, not as the pristine ask the user just finished answering.
    const claiming = ui.migrating || pendingMigratedName();
    return page([
      title(t('onbLegacyTitle')),
      h('p', { class: 'muted', style: 'margin:0' },
        claiming ? t('migrateWorking', { name: claiming }) : t('onbLegacyBody')),
      claiming
        ? h('div', { class: 'row gap6', style: 'justify-content:center;padding:8px 0' }, h('span', { class: 'spinner' }))
        : h('button', {
            class: 'btn-primary btn-block', style: 'padding:14px',
            disabled: !!o.legacyBusy, onClick: goLegacy,
          }, o.legacyBusy ? h('span', { class: 'spinner sm' }) : t('onbLegacyGo')),
      h('button', { class: 'btn-block', style: 'padding:14px', onClick: () => { o.step = 'spend'; render(); } },
        o.wentToLegacy || claiming ? t('onbLegacyDone') : t('back')),
      ui.onbError ? h('div', { class: 'notice err' }, ui.onbError) : null,
    ]);
  }
  if (o.step === 'welcome') {
    return page([
      h('div', { class: 'onb-hero' }, brandHeader(false)),
      title(t('onbWelcomeTitle')),
      // Starting is the primary path; bringing a nostr account is the
      // alternative, offered here rather than as a question of its own.
      h('button', { class: 'btn-primary btn-block', style: 'font-size:17px;padding:14px', onClick: () => {
        ui.unlockTab = 'create';
        ui.unlockError = '';
        o.step = 'seed';
        render();
      } }, t('onbStart')),
      // All the sign-in doors right on the welcome screen (Google, passkey,
      // Nostr) — the feature supplies them; the single-button fallback keeps
      // builds without it working.
      featureHook('frontDoorSignin')
        || h('button', { class: 'btn-block', style: 'padding:14px', onClick: () => {
          o.step = 'signin';
          ui.nostrLoginOpen = true;
          render();
        } }, h('span', { style: 'display:flex;align-items:center;justify-content:center;gap:8px' },
          h('span', { style: 'display:flex;flex-shrink:0', html: NOSTR_MARK }),
          t('nlSignIn'))),
      ui.onbError ? h('div', { class: 'notice err' }, ui.onbError) : null,
    ]);
  }
  if (o.step === 'seed') {
    // The classic create/import card, inside the wizard: getting started
    // means seeing (or bringing) your seed phrase, not a wallet minted
    // behind your back. Opening one ends the wizard into the wallet + tour.
    return page([
      title(t('onbSeedTitle')),
      unlockCard(),
      // the entropy page brings its own Back — one is enough
      ui.entropyPage ? null : h('button', { class: 'linklike small', onClick: () => { ui.unlockError = ''; o.step = 'welcome'; render(); } }, t('back')),
    ]);
  }
  if (o.step === 'signin') {
    return page([
      h('div', { class: 'onb-mark', html: NOSTR_MARK }),
      title(t('onbSigninTitle')),
      featureHook('unlockExtra') || h('div', { class: 'notice err' }, 'nostr login unavailable'),
      h('button', { class: 'linklike small', onClick: () => { o.step = 'welcome'; render(); } }, t('back')),
    ]);
  }
  if (o.step === 'spend') {
    return page([
      title(t('onbSpendTitle')),
      h('p', { class: 'muted', style: 'margin:0' }, t('onbSpendBody')),
      featureHook('namesClaimForm') || h('div', { class: 'row gap6', style: 'align-items:center' }, h('span', { class: 'spinner sm' }), h('span', { class: 'small muted' }, t('onbNameWait'))),
      // Optional means optional: one tap back to the wallet, no questions.
      h('button', { class: 'btn-ghost btn-block', onClick: () => {
        ui.onb = null;
        try { localStorage.removeItem(ONB_STEP_KEY); } catch {}
        render();
      } }, t('onbNotNow')),
      // Most people are new. The ones who aren't know it, and can say so here
      // rather than everyone being asked first.
      h('button', { class: 'linklike small', onClick: () => { ui.onbError = ''; o.step = 'legacy'; render(); } }, t('onbHaveCoinos')),
    ]);
  }
  if (o.step === 'avatar') {
    const me = (featureHook('nostrLoginIdentity') || {}).pubkey || (wallet.nostrPubkey && wallet.nostrPubkey());
    const sel = o.avatar;
    // The big avatar IS the selection: it shows exactly what Continue will
    // publish — a picked punk, an upload, or the pubkey-derived default.
    const preview = sel || (me ? punkUrl(me) : null);
    return page([
      title(t('onbAvatarTitle')),
      h('p', { class: 'muted', style: 'margin:0' }, t('onbAvatarBody')),
      preview ? h('img', {
        class: 'onb-avatar', src: preview, alt: '',
        style: ui.onbBusy ? 'opacity:.5' : '',
        onError: (e) => { e.target.style.visibility = 'hidden'; },
      }) : null,
      h('div', { class: 'onb-punks', 'data-keep-scroll': 'punks' },
        ...PUNK_PICKS.map((n) =>
          h('img', {
            class: 'onb-punk' + (sel === punkImg(n) ? ' sel' : ''),
            src: punkImg(n), alt: '',
            onClick: () => { o.avatar = punkImg(n); render(); },
            onError: (e) => { e.target.remove(); }, // a 502'd punk removes itself
          }))),
      h('div', { class: 'row gap6' },
        h('button', { class: 'btn-block grow', disabled: ui.onbBusy, onClick: () => document.getElementById('onb-file')?.click() }, t('onbUpload')),
        h('input', { type: 'file', id: 'onb-file', accept: 'image/*', style: 'display:none', onChange: async (e) => {
          const f = e.target.files && e.target.files[0];
          if (!f) return;
          ui.onbBusy = true; ui.onbError = ''; render();
          try { o.avatar = await onbUpload(f); } catch (err) { ui.onbError = err.message; }
          ui.onbBusy = false; render();
        } })),
      ui.onbError ? h('div', { class: 'notice err' }, ui.onbError) : null,
      h('button', { class: 'btn-primary btn-block', style: 'padding:14px', disabled: ui.onbBusy, onClick: async () => {
        ui.onbBusy = true; ui.onbError = ''; render();
        try {
          const addr = featureHook('namesAddress');
          // keeping the default still publishes it — their punk should be
          // their face on every nostr client, not just here. A picked punk is
          // a relative path; kind 0 needs the absolute URL (a relative one
          // once replaced a real profile picture with a broken string).
          const picked = o.avatar && !/^https?:/i.test(o.avatar) ? 'https://v3.coinos.io/' + o.avatar : o.avatar;
          const picture = picked || (me ? 'https://v3.coinos.io/' + punkUrl(me) : undefined);
          const fields = { name: addr ? addr.split('@')[0] : undefined, picture };
          // Publishing the profile is a nicety — a signer that can't sign
          // right now (a sleeping phone bunker) must not trap the wizard.
          // And it's an OFFER: the address-derived name (and, unless they
          // actually picked one, the default punk) only fills gaps — it
          // never renames an identity that already has a profile.
          if (fields.name || fields.picture) {
            try { await featureHook('publishProfile', fields, { fillOnly: o.avatar ? ['name'] : ['name', 'picture'] }); }
            catch (e) { toast(t('onbProfileSkipped')); console.warn('onboarding: profile publish failed —', e.message); }
          }
          o.step = nextAfterAvatar();
        } catch (e) { ui.onbError = e.message; }
        ui.onbBusy = false; render();
      } }, ui.onbBusy ? h('span', { class: 'spinner sm' }) : (o.avatar ? t('onbContinue') : t('onbSkipAvatar'))),
      h('button', { class: 'btn-ghost btn-block', disabled: ui.onbBusy, onClick: () => {
        // re-anchor the spend step's "name changed" detector to the name
        // as it stands NOW, or a just-claimed name bounces us right back here
        o.enterAddr = featureHook('namesAddress') || null;
        o.step = 'spend'; render();
      } }, t('back')),
    ]);
  }
  if (o.step === 'board') {
    return page([
      title(t('onbBoardTitle')),
      h('p', { class: 'muted', style: 'margin:0' }, t('onbBoardBody')),
      featureHook('arkBoardForm')
        || h('div', { class: 'row gap6', style: 'align-items:center;justify-content:center' },
             h('span', { class: 'spinner sm' }), h('span', { class: 'small muted' }, t('arkConnecting'))),
      h('button', { class: 'btn-primary btn-block', style: 'padding:14px', onClick: () => { o.step = 'success'; render(); } }, t('onbContinue')),
    ]);
  }
  // success
  return page([
    h('div', { class: 'onb-confetti' }, ...Array.from({ length: 18 }, () => h('i'))),
    h('h2', { class: 'onb-title', style: 'text-align:center' }, t('onbDoneTitle')),
    h('div', { class: 'check-badge onb-check' }, '✓'),
    h('p', { class: 'muted', style: 'margin:0;text-align:center' }, t('onbDoneBody')),
    h('button', { class: 'btn-primary btn-block', style: 'padding:14px', onClick: () => {
      try { localStorage.removeItem(ONB_STEP_KEY); } catch {}
      ui.onb = null;
      // Latch Spending onto the account only when the wizard actually set it
      // up (a claimed address or funds prove it) — finishing the wizard on a
      // network without names, or skipping the spend step, must not conjure
      // a Spending wallet nobody asked for.
      const acc = activeAccount();
      // A name claimed DURING this wizard run (it differs from the address
      // recorded on entry) is explicit setup on any network — that's the user
      // opting in, not stale evidence. Otherwise the mainnet-only rule from
      // spendingActive applies: a stored mainnet name must not vouch for
      // spending on another network.
      const addr = featureHook('namesAddress');
      const named = !!addr && !/^npub1/.test(addr);
      const claimedNow = named && addr !== o.enterAddr;
      const spendReady = claimedNow || (featureHook('spendingSat') || 0) > 0
        || (getNetwork() === 'mainnet' && named);
      if (spendReady) {
        if (acc && !acc.spendingSetup) { acc.spendingSetup = Date.now(); persistAccounts(); featureHook('spendingEvident'); }
        ui.account = 'spending';
        try { localStorage.setItem(ACCOUNT_KEY, 'spending'); } catch {}
      }
      ui.tab = 'history';
      render();
    } }, t('onbEnter')),
    h('button', { class: 'btn-ghost btn-block', onClick: () => { o.step = 'avatar'; render(); } }, t('back')),
  ]);
}

// Returning from the legacy migration: coinos.io sends ?migrated=<username>
// once it has swept the balance and released the name. The param is stashed
// SYNCHRONOUSLY at boot (module init below) because the claim itself needs
// an open wallet — which can arrive well after any single post-load timer.
// The old one-shot ("1.5s after load, if a wallet is active") silently
// dropped the whole hand-off whenever the wallet wasn't ready yet, and the
// user came back to a migrate page that had no idea they'd just migrated.
const MIGRATED_KEY = 'btc-wallet-migrated-name';
try {
  const _mu = new URL(location.href);
  const _mn = _mu.searchParams.get('migrated');
  if (_mn) {
    localStorage.setItem(MIGRATED_KEY, _mn);
    _mu.searchParams.delete('migrated');
    history.replaceState(null, '', _mu.pathname + _mu.search + _mu.hash);
  }
} catch {}
function pendingMigratedName() {
  try { return localStorage.getItem(MIGRATED_KEY); } catch { return null; }
}
function claimMigratedName() {
  const name = pendingMigratedName();
  if (!name || ui.migrating) return;
  ui.migrating = name;
  render();
  let tries = 0;
  const attempt = () => {
    const p = featureHook('namesClaimName', name);
    if (!p || !p.then) { if (++tries < 12) return setTimeout(attempt, 5000); ui.migrating = null; return; }
    p.then(async () => {
      try { localStorage.removeItem(MIGRATED_KEY); } catch {}
      // Bring the old account's face and cover along — filled into empty
      // kind-0 slots only. Bounded wait: the wizard's punk-picker skip
      // checks the cached picture right after this, and losing the race
      // would ask a migrated user to restyle the profile they already have.
      await Promise.race([
        Promise.resolve(featureHook('adoptLegacyProfile', name)).catch(() => {}),
        new Promise((r) => setTimeout(r, 5000)),
      ]);
      ui.migrating = null;
      // Mid-onboarding: the migrate step's job is done — move the wizard
      // along instead of re-offering the page that was just completed. A
      // null enterAddr lets the spend step see the claimed name as change
      // and advance on its own.
      if (ui.onb && ui.onb.step === 'legacy') { ui.onb.step = 'spend'; ui.onb.enterAddr = null; }
      toast(t('migrateClaimed', { name }));
      render();
    })
      .catch(() => {
        // DNS/registrar caches the legacy lookup briefly; give it a minute
        if (++tries < 12) return setTimeout(attempt, 5000);
        try { localStorage.removeItem(MIGRATED_KEY); } catch {}
        ui.migrating = null;
        toast(t('migrateClaimFailed', { name }));
        render();
      });
  };
  attempt();
}

function walletScreen() {
  if (ui.onb || onbInProgress()) {
    const s = onboardScreen();
    if (s) return s; // null = the wizard just handed over; fall through
  }
  // The padlock's set-a-password ask renders here, over the open wallet —
  // declining it must land back exactly where the tap happened.
  if (ui.pw && ui.pw.purpose === 'lock') {
    return h('div', { class: 'col', style: 'gap:16px' }, brandHeader(false), pwPromptCard());
  }
  // A feature can hold the wallet behind a required onboarding step (picking
  // a username). Imported wallets skip it once their name is recovered.
  const ob = featureHook('onboardingView');
  if (ob) {
    return h('div', { class: 'col', style: 'gap:0' }, brandHeader(false), h('div', { class: 'mt16' }, ob));
  }
  // Settings is a full page of its own — no balance, no tab strip; the hub's
  // back button (or the logo / avatar menu) leads out. Offline keeps the
  // classic layout: settings is the forced tab there, and hiding the balance
  // and tab strip would wall off the cached balance, history, and receive.
  if (ui.tab === 'settings' && !wallet.offline) {
    return h(
      'div',
      { class: 'col', style: 'gap:0' },
      brandHeader(true),
      ui.offlineFallback && wallet.offline ? offlineBanner() : null,
      h('div', { class: 'mt16' }, tabContent())
    );
  }
  // Tab changes slide the content pane sideways like a carousel — swipe
  // direction when a gesture caused it, index order for taps. The balance
  // card and tab strip stay planted.
  const TAB_ORDER = ['history', 'receive', 'send'];
  if (uiChanged('tabnav', ui.tab)) {
    const idx = TAB_ORDER.indexOf(ui.tab);
    // The pane slides only BETWEEN tabs the user has seen: the first
    // observation after a sign-in (and the handover render itself) is the
    // wallet simply appearing, not a navigation.
    if (!ui.navAnimSkip && _tabSeen) {
      _tabCls = 'anim-tab-' + (_swipeDir || (idx >= 0 && idx < _prevTabIdx ? 'right' : 'left'));
      _tabAt = performance.now();
    }
    _tabSeen = true;
    if (idx >= 0) _prevTabIdx = idx;
  }
  _swipeDir = null;
  const pane = h('div', { class: 'tab-pane' }, tabContent());
  const tabDt = performance.now() - _tabAt;
  // skip the pane slide while a full-page entrance is already running
  if (performance.now() - _navAt > 400) applyAnim(pane, _tabCls, tabDt < 300 ? tabDt : -1);
  return h(
    'div',
    { class: 'col', style: 'gap:0' },
    brandHeader(true),
    h('div', { class: 'mt16' }, balanceCard()),
    ui.offlineFallback && wallet.offline ? offlineBanner() : null,
    ...featureAll('walletNotices'),
    tabsBar(),
    pane
  );
}

function offlineBanner() {
  return h(
    'div',
    { class: 'notice info row between', style: 'margin:12px 0 0' },
    h('span', {}, t('offlineBanner')),
    h('button', { class: 'btn-sm', onClick: retryOnline }, t('retry'))
  );
}

// ---- the global account selector -------------------------------------
// The wallet is always "in" one of its two balances: Spending (Ark +
// Lightning) or Savings (on-chain). The balance card headline, the Receive
// pane, and the gift source all follow it.
const ACCOUNT_KEY = 'btc-wallet-account';
// Spending is opt-in: a wallet is born on-chain only, and the second balance
// (with its toggle, swipe, and Move money) appears once the user sets it up —
// or the moment money is already there (a restored wallet, a claimed gift),
// because a balance must never hide. Setting up = claiming a username, so a
// name claimed anywhere counts; the account flag latches it for accounts
// whose name lookup isn't available right now.
function spendingActive() {
  if (!featureHook('arkReady')) return false;
  const acc = activeAccount();
  // A single-purpose spending wallet IS the opt-in — the user created it by
  // picking "Spending" in Add wallet; no further evidence required.
  if (acc?.kind === 'spending') return true;
  if (acc?.spendingSetup) {
    // Self-heal a flag latched by the old cross-network name leak: off
    // mainnet, a LEGACY boolean flag (`true` — the buggy era's value; every
    // deliberate latch since carries a timestamp) with zero balance and no
    // ark history was never really set up — drop it.
    if (acc.spendingSetup === true && getNetwork() !== 'mainnet' && !(featureHook('spendingSat') || 0)
        && !(featureHook('arkMovements') || []).length) {
      delete acc.spendingSetup;
      persistAccounts();
    } else {
      return true;
    }
  }
  // A claimed payment address proves spending on MAINNET only: names feature
  // state is stored per-wallet without a network, so a mainnet name would
  // otherwise conjure a Spending wallet on mutinynet nobody set up.
  const addr = getNetwork() === 'mainnet' ? featureHook('namesAddress') : null;
  const evident = (featureHook('spendingSat') || 0) > 0 || (!!addr && !/^npub1/.test(addr));
  // Latch demonstrated use onto the record, so the Wallets list keeps showing
  // this seed's Spending side even while it's locked or not the active one.
  if (evident && acc && !acc.spendingSetup) { acc.spendingSetup = Date.now(); persistAccounts(); featureHook('spendingEvident'); }
  return evident;
}
// ---- the flat wallet model -------------------------------------------------
// Each seed record surfaces as up to two TOP-LEVEL wallets: its Spending (Ark)
// and Savings (on-chain) sides. A record with a fixed `kind` (single-purpose,
// possibly sharing another wallet's seed at a higher BIP84 account) surfaces
// once. "Spending" and "Savings" are the default names; renames are per-view.
function viewsOf(a) {
  if (!a) return [];
  if (a.kind) return [a.kind];
  if (a.type === 'watch') return ['savings'];
  // Spending is opt-in: a seed starts as its on-chain wallet alone, and grows
  // a Spending side only once the user sets one up (the wizard's spend step,
  // an explicit Add wallet, or funds/an address arriving — see the latch in
  // spendingActive).
  return a.spendingSetup ? ['spending', 'savings'] : ['savings'];
}
// How a SEED reads to the user: the names of the wallets it carries
// ("Spending + Savings") — its internal record label never surfaces.
function seedName(a) {
  return viewsOf(a).map((v) => viewLabel(a, v)).join(' + ');
}
function viewLabel(a, view) {
  if (a && a.viewLabels && a.viewLabels[view]) return a.viewLabels[view];
  return view === 'spending' ? t('spendingName') : t('savingsName');
}
function switchToView(id, view) {
  ui.accountUserChosen = true; // deliberate pick from the accounts screen
  ui.account = view;
  try { localStorage.setItem(ACCOUNT_KEY, view); } catch {}
  if (id === activeId) { ui.screen = 'wallet'; ui.tab = 'history'; render(); }
  else {
    const acc = accounts.find((a) => a.id === id);
    if (acc) switchAccount(id);
  }
}

function accountSel() {
  const a = activeAccount();
  if (a && a.kind) return a.kind; // single-purpose wallet: no other side
  if (!spendingActive()) return 'savings'; // one balance, no choice
  if (!ui.account) {
    let saved = null;
    try { saved = localStorage.getItem(ACCOUNT_KEY); } catch {}
    ui.account = saved === 'savings' ? 'savings' : 'spending';
  }
  return ui.account;
}
let _accDir = null; // which way the balance face should slide in
let _accAnim = false; // whether the current face switch animates (decided at the switch)
function setAccountSel(a, dir) {
  if (ui.account === a) return;
  ui.accountUserChosen = true; // deliberate pick — auto-select must not override
  _accDir = dir || (a === 'savings' ? 'left' : 'right');
  ui.account = a;
  try { localStorage.setItem(ACCOUNT_KEY, a); } catch {}
  // Selecting an account shows its history right away — home base — and any
  // open payment detail (which belongs to the account it was opened from)
  // closes with it.
  ui.txDetail = null; ui.arkMoveDetail = null; ui.arkReconDetail = null; ui.arkExitDetail = null; ui.giftDetail = null;
  ui.tab = 'history';
  render();
}

const SWAP_ICON = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:block"><path d="M8 3 4 7l4 4"/><path d="M4 7h16"/><path d="m16 21 4-4-4-4"/><path d="M20 17H4"/></svg>';

function balanceCard() {
  // Dim + spin until this network has data (cache, Nostr state, or a scan has
  // populated balances once). `scanning` alone misses the window between
  // wallet.load() and the first scan — the cache check and Nostr sync on a
  // network switch — where a bare 0 reads as a final balance. Background
  // updates after that happen silently.
  const firstLoad = !wallet.loaded && !wallet.offline;
  const pending = wallet.pendingIncoming;
  const featLines = featureAll('balanceLines');
  // Money lives in two places and we name them for what they're FOR, not for
  // the rails underneath: Spending is the instant off-chain balance, Saving
  // is the on-chain one. The headline is simply everything you have.
  const spending = featureHook('spendingSat') || 0;
  const saving = wallet.spendable;
  const acc0 = activeAccount();
  const kindLocked = !!(acc0 && acc0.kind); // single-purpose top-level wallet
  const hasSpending = spendingActive();
  const sel = kindLocked ? acc0.kind : hasSpending ? accountSel() : 'savings';
  const isSpending = sel === 'spending';
  // a single-purpose wallet's switch jumps to a same-seed sibling wallet of
  // the opposite purpose, when one exists
  const opp = isSpending ? 'savings' : 'spending';
  const sibling = kindLocked
    ? accounts.find((x) => x.id !== acc0.id && x.mnemonic && x.mnemonic === acc0.mnemonic
        && (x.passphrase || '') === (acc0.passphrase || '') && viewsOf(x).includes(opp))
    : null;
  // The balance area: with both views live it's a CAROUSEL — the other face
  // peeks at the edge and drags/snaps into place (native scroll-snap), the
  // way wallet cards behave in BlueWallet. Snapping IS the account switch.
  // Single-purpose and savings-only wallets keep the lone face.
  const manageBtn = () => h('button', {
    class: 'balance-switch',
    onClick: () => { ui.screen = 'accounts'; render(); },
  },
    h('span', { html: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:block"><rect x="2" y="6" width="20" height="14" rx="2"/><path d="M2 10h20"/><circle cx="17" cy="15" r="1.3"/></svg>' }),
    h('span', { class: 'bsw-label' }, t('manageAccounts')));
  const faceFor = (view) => {
    const viewSpending = view === 'spending';
    return h('div', { class: 'balance-face' },
      h('div', { class: 'row between', style: 'align-items:center' },
        h('div', { class: 'row', style: 'gap:7px;align-items:center;min-width:0' },
          // account identity at a glance (user feedback): spending wears
          // lightning + the ark mark, savings the bitcoin disc — color says
          // which rail before the label is read
          hasSpending && !kindLocked
            ? h('span', {
                class: 'face-ico ' + (viewSpending ? 'spend' : 'save'),
                html: viewSpending ? '\u26a1' + ARK_MARK(12) : BITCOIN_ICON(14),
              })
            : null,
          h('div', { class: 'small faint', style: 'text-transform:uppercase;letter-spacing:.06em' },
            kindLocked ? viewLabel(acc0, view)
              : hasSpending ? (viewSpending ? t('spendingLabel') : t('savingLabel')) : t('balance'))),
        manageBtn()),
      h('div', { class: 'amt', style: firstLoad ? 'opacity:.3' : '' },
        firstLoad ? h('span', { class: 'spinner sm', style: 'margin-right:8px' }) : null,
        animatedAmount('bal:' + view, viewSpending ? spending : saving), ' ', unitTag('unit')),
      (pending > 0 && !viewSpending) || (viewSpending && featLines.length)
        ? h('div', { class: 'split' },
            // Pending incoming is an on-chain fact — it belongs to the Saving
            // face; the feature lines (ark's Moving…) belong to Spending.
            pending > 0 && !viewSpending
              ? h('div', {}, h('div', { class: 'k' }, t('pending')), h('div', { class: 'v pending' }, fmtAmount(pending), ' ', unitTag()))
              : null,
            ...(viewSpending ? featLines : []).map((l) =>
              h('div', {}, h('div', { class: 'k' }, l.label), h('div', { class: 'v' }, fmtAmount(l.sat), ' ', unitTag()))))
        : null);
  };
  // Everything below the balance figure — the move button, top-up offer,
  // spend-setup offer and the inline unfold panel. In carousel mode these
  // belong to the SPENDING CARD ITSELF, not to whichever card is selected:
  // the strip's flex row stretches both cards to the tallest, so an extra
  // that appears only on selection made the whole strip change height right
  // as a swipe settled. Tied to the card, heights never move mid-swipe.
  const cardExtras = (view = sel) => [
    // "Move money" and friends: the only door between the two balances —
    // pointless (and confusing) while there's only one.
    ...(hasSpending ? featureAll('balanceActions') : []).map((a2) =>
      h('button', { class: 'btn-sm', style: 'margin-top:10px', onClick: a2.onClick }, a2.label)),
    // A seed with only a Savings side is one tap from growing a Spending one:
    // the offer sits right on the balance card. The tap creates it outright —
    // same seed, a "Spending" side, latched before any prompt so backing out
    // of the niceties can't take it away — then walks the username + avatar
    // steps, since a spending account is best enjoyed with a payment address.
    // (Explicit latches carry a timestamp; self-heal only eats legacy booleans.)
    // A Spending face running on fumes while Savings sits comfortable gets a
    // one-tap top-up into the board panel.
    hasSpending && view === 'spending' && !ui.arkMoveOpen && wallet.spendable > 1000
      && spending + (featureHook('spendingBoardingSat') || 0) < 1000
      && featureHook('arkReady') && !wallet.watchOnly
      ? h('button', { class: 'btn-sm', style: 'margin-top:10px', onClick: () => {
          // tapped on the peeking card: bring the card in with its panel
          if (accountSel() !== 'spending') {
            ui.accountUserChosen = true;
            ui.account = 'spending';
            try { localStorage.setItem(ACCOUNT_KEY, 'spending'); } catch {}
          }
          ui.arkMoveDir = 'toSpending'; ui.arkMoveOpen = true; render();
        } }, t('topUpFromSavings'))
      : null,
    !hasSpending && !kindLocked && featureHook('arkReady') && !wallet.watchOnly && acc0 && acc0.type === 'full'
      && featureHook('namesSettled') !== 'pending' // a restoring name may prove Spending any second — don't flash the setup ask
      ? h('button', { class: 'btn-sm', style: 'margin-top:10px', onClick: () => {
          acc0.spendingSetup = Date.now();
          persistAccounts();
          featureHook('spendingEvident');
          setAccountSel('spending', 'right');
          ui.onbError = '';
          ui.onb = { step: 'spend' };
          render();
        } }, t('spendSetup'))
      : null,
    // A feature can unfold UI right on the card (ark's inline move panel).
    (() => {
      if (!hasSpending) return null;
      const dt = animWindow('unfold', !!ui.arkMoveOpen, 300);
      const extra = featureHook('balanceExtra');
      if (!extra) return null;
      const w = h('div', {}, extra);
      applyAnim(w, 'anim-unfold', dt);
      return w;
    })(),
  ];
  const carouselMode = hasSpending && !kindLocked;
  if (carouselMode) {
    // Two SEPARATE cards side by side — the neighbor card peeks past the
    // active one's edge and drags/snaps into place, BlueWallet-style.
    const ORDER2 = ['spending', 'savings'];
    // Align the carousel to the selected card after this render lands — but
    // never fight a finger or live momentum, and NEVER touch layout when it's
    // already where it belongs. Boot fires many renders (cache, ark connect,
    // scan, nostr, balance ticks); reading offsetLeft/scrollLeft on each one
    // forced a synchronous layout mid-scroll — the stutter. `_alignedTo`
    // short-circuits before any layout read once the card is in place.
    requestAnimationFrame(() => {
      const el = document.querySelector('.bal-carousel');
      if (!el || el._alignedTo === sel) return;
      // never yank the card while a finger/mouse is on it, or right after a
      // scroll — a boot render firing this mid-drag was the "false start"
      if (el._dragging || Date.now() - (el._lastScroll || 0) < 350) return;
      const k = el.children[ORDER2.indexOf(sel)];
      if (!k) return;
      const target = k.offsetLeft + k.offsetWidth / 2 - el.clientWidth / 2;
      if (Math.abs(el.scrollLeft - target) > 6) el.scrollTo({ left: target, behavior: el._inited ? 'smooth' : 'auto' });
      el._alignedTo = sel;
      el._inited = true;
    });
    _accDir = null; // the drag is the animation here
    // Commit the account switch — shared by settle (the authority, at rest)
    // and the EARLY commit at release: the moment a flick's outcome is known
    // the history below starts loading, instead of waiting out the slide.
    // The strip itself stays morph-frozen until the glide lands, so this
    // render can't disturb the motion.
    const commitAccount = (el, view) => {
      // the scroll rests (or will rest) on this card — mark it aligned so
      // the post-render pass skips its layout read instead of re-aligning
      el._alignedTo = view;
      ui.accountUserChosen = true; // a deliberate pick — no auto-select behind it
      ui.account = view;
      try { localStorage.setItem(ACCOUNT_KEY, view); } catch {}
      // selecting an account lands on its history (home), any open
      // payment detail belonged to the other account
      ui.txDetail = null; ui.arkMoveDetail = null; ui.arkReconDetail = null; ui.arkExitDetail = null; ui.giftDetail = null;
      ui.tab = 'history';
      render();
    };
    // Where will a released touch flick land? Nearest card, pushed one over
    // when the finger left with real speed — the same physics mandatory snap
    // applies. A wrong guess only flashes the other history for a beat:
    // settle corrects it when the snap actually lands.
    const predictLanding = (el) => {
      const kids = [...el.children];
      if (!kids.length) return null;
      const mid = el.scrollLeft + el.clientWidth / 2;
      let idx = 0, d0 = Infinity;
      kids.forEach((k, i) => {
        const d = Math.abs(k.offsetLeft + k.offsetWidth / 2 - mid);
        if (d < d0) { d0 = d; idx = i; }
      });
      const s = el._flick || [];
      const a = s[0], b = s[s.length - 1];
      const vel = a && b && b.t > a.t ? (b.x - a.x) / (b.t - a.t) : 0; // px/ms, + = toward higher index
      if (Math.abs(vel) > 0.3) idx = Math.max(0, Math.min(kids.length - 1, idx + (vel > 0 ? 1 : -1)));
      return ORDER2[idx];
    };
    // The settled-card check, shared by the scroll debounce and drag release.
    // While a finger or mouse button is still DOWN nothing switches — hovering
    // a card mid-drag is browsing, not choosing; release is the choice.
    const settle = (el) => {
      if (el._dragging) return;
      endCarouselDrag(); // motion has stopped — unfreeze the strip and sync it
      const mid = el.scrollLeft + el.clientWidth / 2;
      let best = 0, bestD = Infinity;
      [...el.children].forEach((k, i) => {
        const d = Math.abs(k.offsetLeft + k.offsetWidth / 2 - mid);
        if (d < bestD) { bestD = d; best = i; }
      });
      const view = ORDER2[best];
      if (view && view !== accountSel()) commitAccount(el, view);
    };
    return h('div', {
      class: 'bal-carousel',
      // The account switch (and its history-list rebuild) is the heaviest work
      // the carousel triggers, so it must never run mid-glide (that dropped a
      // frame and read as a stutter). The switch is driven by the onScroll
      // debounce below, which naturally trails the LAST scroll event — during a
      // smooth glide or momentum scroll, scroll events fire continuously until
      // motion stops, so the debounce lands after the card is already at rest.
      // (scrollend would be the semantic signal but it doesn't fire reliably
      // for programmatic scrolls across browsers, so it's not relied on.)
      onScrollend: (e) => { const el = e.currentTarget; if (!el._dragging) { clearTimeout(el._settle); settle(el); } },
      onTouchstart: (e) => { const el = e.currentTarget; el._dragging = true; _carDragging = true; el._skipMorph = true; clearTimeout(el._settle); },
      onTouchend: (e) => {
        const el = e.currentTarget;
        el._dragging = false; // onScroll's debounce settles it
        // The finger is up: lift the render hold (the strip stays frozen via
        // _skipMorph) and commit the predicted landing NOW, so the history
        // below loads under the glide instead of after it.
        _carDragging = false;
        const view = predictLanding(el);
        if (view && view !== accountSel()) commitAccount(el, view);
        // safety: if momentum produces no scroll events, settle may never
        // fire — unfreeze the strip and flush anyway
        setTimeout(() => { if (!el._dragging && (el._skipMorph || _renderDeferred)) endCarouselDrag(); }, 700);
      },
      // Desktop: scroll-snap has no mouse drag, so emulate one — grab the
      // strip and pull. Touch keeps the native pan (pointerType check);
      // buttons keep their clicks untouched. Mandatory snap fights raw
      // scrollLeft writes, so it's lifted for the drag and restored once the
      // release glide lands on a card.
      onPointerDown: (e) => {
        if (e.pointerType !== 'mouse' || e.button !== 0) return;
        if (e.target.closest && e.target.closest('button, a, input')) return;
        e.preventDefault(); // no text selection while pulling
        const el = e.currentTarget;
        // A new grab invalidates any pending snap-restore from the previous
        // release: bumping the token makes a stale restore a no-op, so it can
        // never re-apply mandatory snap mid-glide and yank the card back to
        // where it started. Kill its timer too so they don't pile up.
        el._dragGen = (el._dragGen || 0) + 1;
        clearTimeout(el._snapT);
        const x0 = e.clientX, s0 = el.scrollLeft;
        const kids0 = [...el.children];
        // the card the drag started on — a flick throws relative to it
        let fromIdx = 0, fromD = Infinity;
        kids0.forEach((k, i) => {
          const d = Math.abs(k.offsetLeft + k.offsetWidth / 2 - (s0 + el.clientWidth / 2));
          if (d < fromD) { fromD = d; fromIdx = i; }
        });
        let moved = false;
        const samples = []; // recent pointer positions for release velocity
        const mv = (ev) => {
          const dx = ev.clientX - x0;
          if (!moved && Math.abs(dx) > 4) {
            moved = true;
            el._dragging = true;
            _carDragging = true; // hold renders so nothing eats frames under the pull
            el._skipMorph = true; // and freeze the strip against any later mid-glide morph
            el.classList.add('grabbing');
            el.style.scrollSnapType = 'none';
          }
          if (moved) {
            el.scrollLeft = s0 - dx;
            el._lastScroll = Date.now();
            samples.push({ t: performance.now(), x: ev.clientX });
            while (samples.length > 8 || (samples.length && samples[0].t < performance.now() - 140)) samples.shift();
          }
        };
        const up = () => {
          window.removeEventListener('pointermove', mv);
          window.removeEventListener('pointerup', up);
          el.classList.remove('grabbing');
          el._dragging = false;
          // safety: if the release glide produces no scroll events, settle
          // never fires to unfreeze the strip — do it after a beat
          setTimeout(() => { if (!el._dragging && (el._skipMorph || _renderDeferred)) endCarouselDrag(); }, 700);
          if (!moved) { endCarouselDrag(); return; }
          el._dragged = Date.now(); // the release's click must not double as a card tap
          // Commit to a neighbor on a small, deliberate move — not only when
          // the drag drags PAST the halfway point. A short flick that traveled
          // ~20% of a card toward the neighbor, or any quick flick, switches;
          // otherwise it snaps back. (Nearest-point settling made a short pull
          // spring back to where it started — the "slide then jump back"
          // glitch.) Direction: a flick uses its velocity sign, a slow drag
          // uses how far it actually moved from the card it grabbed.
          const kids = [...el.children];
          const last = samples[samples.length - 1];
          const past = samples[0];
          const vel = last && past && last.t > past.t ? (last.x - past.x) / (last.t - past.t) : 0;
          const pitch = kids[1] ? (kids[1].offsetLeft - kids[0].offsetLeft) : el.clientWidth || 1;
          const fromCenter = kids[fromIdx].offsetLeft + kids[fromIdx].offsetWidth / 2;
          const nowCenter = el.scrollLeft + el.clientWidth / 2;
          const travelled = (nowCenter - fromCenter) / pitch; // + = toward higher index
          let dir = 0;
          if (Math.abs(vel) > 0.12) dir = vel < 0 ? 1 : -1; // quick flick
          else if (Math.abs(travelled) > 0.15) dir = travelled > 0 ? 1 : -1; // pulled ~a sixth of a card
          const best = Math.max(0, Math.min(kids.length - 1, fromIdx + dir));
          const k = kids[best];
          if (k) el.scrollTo({ left: k.offsetLeft + k.offsetWidth / 2 - el.clientWidth / 2, behavior: 'smooth' });
          // Restore mandatory snap only once THIS glide has come to rest, and
          // only if no newer drag has taken over — a fixed timer used to fire
          // mid-glide and snap the card back to its origin. scrollend marks
          // the true end; the timer is just a fallback for when the target is
          // already reached (no scroll, no scrollend).
          const gen = el._dragGen;
          const restore = () => { if (el._dragGen === gen && !el._dragging) el.style.scrollSnapType = ''; };
          el.addEventListener('scrollend', restore, { once: true });
          clearTimeout(el._snapT);
          el._snapT = setTimeout(restore, 700);
          // The chosen card is known RIGHT HERE — commit it now so the
          // history below loads under the glide. The hold lifts (renders may
          // run again) but the strip stays morph-frozen until settle; settle
          // then finds the account already switched and just syncs the strip.
          _carDragging = false;
          const view = ORDER2[best];
          if (view && view !== accountSel()) commitAccount(el, view);
        };
        window.addEventListener('pointermove', mv);
        window.addEventListener('pointerup', up);
      },
      onScroll: (e) => {
        const el = e.target;
        el._lastScroll = Date.now();
        // recent positions — predictLanding reads the release velocity off
        // these when a touch flick lifts (same window the desktop drag keeps)
        (el._flick ||= []).push({ t: performance.now(), x: el.scrollLeft });
        while (el._flick.length > 8 || (el._flick.length && el._flick[0].t < performance.now() - 140)) el._flick.shift();
        // trails the LAST scroll event: during a glide/momentum scroll these
        // fire continuously, so this lands ~130ms after motion stops — after
        // the card is at rest, never mid-glide. settle bails while _dragging.
        clearTimeout(el._settle);
        el._settle = setTimeout(() => settle(el), 130);
      },
    }, ORDER2.map((v) => h('div', {
      class: 'card balance bal-slide face-' + v,
      // Tapping the peeking neighbor switches to it outright — the post-render
      // alignment then glides it into place. Guarded against a desktop drag's
      // release click and against buttons riding on the card.
      onClick: v === sel ? undefined : (e) => {
        if (e.target.closest && e.target.closest('button, a, input')) return;
        const strip = e.currentTarget.parentNode;
        if (strip && Date.now() - (strip._dragged || 0) < 300) return;
        ui.accountUserChosen = true; // deliberate pick
        ui.account = v;
        try { localStorage.setItem(ACCOUNT_KEY, v); } catch {}
        ui.txDetail = null; ui.arkMoveDetail = null; ui.arkReconDetail = null; ui.arkExitDetail = null; ui.giftDetail = null;
        ui.tab = 'history';
        render();
      },
    }, faceFor(v), ...(v === 'spending' ? cardExtras(v) : []))));
  }
  const dtRaw = animWindow('acct', sel, 300);
  // Decide AT the change whether this face switch animates: only deliberate
  // switches (tap/swipe set _accDir) slide — a background flip (arkReady
  // arriving and revealing Spending right after sign-in) must not.
  if (dtRaw >= 0 && dtRaw < 16.7) _accAnim = !!_accDir && !ui.navAnimSkip;
  const dtAcc = _accAnim ? dtRaw : -1;
  const heroEl = faceFor(sel);
  applyAnim(heroEl, 'anim-tab-' + (_accDir || 'left'), dtAcc);
  _accDir = null;
  return h('div', { class: 'card balance' + (hasSpending && !kindLocked ? ' face-' + sel : '') }, heroEl, ...cardExtras());
}



function tabsBar() {
  // Settings lives in the avatar menu, not the tab strip. History isn't a tab
  // at all any more — it's the wallet's HOME, under the two tabs: tapping the
  // lit tab again (or native back) puts it away and the history is what's left.
  const tabs = [
    ['receive', t('tabReceive')],
    // Watch-only wallets show Send too — it prompts to load the seed to spend.
    ['send', t('tabSend')],
  ];
  return h(
    'div',
    { class: 'tabs' },
    tabs.map(([id, label]) =>
      tabBtn(label, ui.tab === id, () => {
        ui.tab = ui.tab === id ? 'history' : id;
        ui.sendError = ''; // a stale send error never survives a tab change
        ui.revealShown = false; // re-mask the recovery phrase whenever tabs change
        ui.nostrExportStep = false; // and the exported nostr key
        ui.txDetail = null; // back to the history list when leaving/returning
        ui.arkMoveDetail = null;
        ui.arkReconDetail = null;
        ui.giftDetail = null;
        ui.addrScan = false; // and back to the main Settings, not the address list
        ui.settingsPage = null;
        ui.bump = null;
        ui.giftMode = false;
        render();
      })
    )
  );
}

function tabContent() {
  if (ui.tab === 'settings') return settingsTab();
  if (ui.tab === 'history') return historyTab();
  // Receive and Send are panes that fold open ABOVE the home view, not
  // replacements for it: the transaction history stays visible below them, so
  // getting back to it is scrolling, not hunting for the toggle. A history
  // DETAIL (a tapped row) still claims the whole area — you're reading one
  // payment, not browsing — as does the receive celebration takeover.
  const pane = ui.tab === 'receive' ? receiveTab() : sendTab();
  const hist = historyTab();
  const detailOpen = ui.bump || ui.txDetail || ui.arkMoveDetail
    || ui.arkReconDetail || ui.arkExitDetail || ui.giftDetail;
  if (detailOpen) return hist;
  return h('div', { class: 'col', style: 'gap:16px' },
    pane,
    h('div', { class: 'small faint', style: 'text-transform:uppercase;letter-spacing:.06em;margin-top:4px' }, t('tabHistory')),
    hist);
}

// A payment is "recent" enough to celebrate if it's still pending or confirmed
// within the last couple hours. This is a hard guard so an old payment can never
// trigger the celebration on import, regardless of receive-index bookkeeping.
function hasRecentIncoming() {
  // "Recent" means "plausibly the payment you're watching for right now".
  // The open-time baseline can't cover a payment the socket only DISCOVERS
  // seconds after it was taken — with a 2h window, money that landed a while
  // ago celebrated on open as if it had just arrived. A payment confirmed
  // more than 15 minutes ago is news, not an event.
  const now = Date.now() / 1000;
  return wallet.txs.some((tx) => tx.net > 0 && (!tx.confirmed || (tx.blockTime && now - tx.blockTime < 900)));
}

// ---------------------------------------------------------------- Receive
// A dropdown that shows an icon beside each option (a native <select> can't
// render SVG). opts: [{id,label,icon}] where icon is an emoji or an <svg>
// string. Closes on select or on a tap outside (transparent backdrop).
function iconGlyph(ic) {
  if (!ic) return null;
  return String(ic).trim().startsWith('<')
    ? h('span', { class: 'sel-ico', html: ic })
    : h('span', { class: 'sel-ico' }, ic);
}

function receiveTab() {
  // Feature takeovers: boarding success, Ark receive celebration, etc.
  const takeover = featureHook('receiveTakeover');
  if (takeover) return takeover;

  // A payment landed on the shown address (the fresh index advanced past what
  // the user last saw) — celebrate, and wait for a tap before showing the next.
  // Until receiveSeenIndex has been baselined (post-scan, in enterWallet) it
  // stays null and we never celebrate. The recency guard additionally ensures an
  // already-old payment never celebrates when a wallet is opened.
  if (ui.receiveSeenIndex != null && wallet.nextReceiveIndex > ui.receiveSeenIndex && hasRecentIncoming()) {
    // Mark it acknowledged as soon as it's shown — so a refresh or navigating
    // away (without tapping) won't bring the celebration back. It stays visible
    // this session (ui.receiveSeenIndex is unchanged) until the tap below.
    wallet.setReceiveAck(wallet.nextReceiveIndex);
    let amt = 0;
    for (let i = ui.receiveSeenIndex; i < wallet.nextReceiveIndex; i++) {
      const e = wallet._addrInfo(0, i);
      if (e) amt += (e.confirmed || 0) + (e.pending || 0);
    }
    return h(
      'div',
      {
        class: 'card col',
        style: 'align-items:center;text-align:center;gap:14px;cursor:pointer;padding:48px 20px',
        onClick: () => { ui.receiveSeenIndex = wallet.nextReceiveIndex; wallet.setReceiveAck(wallet.nextReceiveIndex); render(); },
      },
      h('div', { class: 'check-badge' }, '✓'),
      h('h2', { style: 'margin:0' }, t('paymentReceived')),
      amt ? h('div', { class: 'amount-pos', style: 'font-size:18px' }, '+' + fmtAmount(amt) + ' ' + unitLabel()) : null,
      h('div', { class: 'small muted' }, t('tapToProceed'))
    );
  }

  // The pane follows the global account: Spending shows the payment address
  // (receives Ark and Lightning), Savings shows a fresh on-chain address.
  const fresh = wallet.freshReceive();
  const nameMode = featureAll('receiveModes').find((m) => m.id === 'name');
  if (accountSel() === 'spending') {
    // Spending needs the network (registrar + ark); offline, offer the
    // on-chain path right here instead of an endless spinner.
    if (wallet.offline)
      return h('div', { class: 'card col', style: 'gap:12px' },
        h('div', { class: 'notice info' }, t('receiveOfflineSpending')),
        h('button', { class: 'btn-primary btn-block', onClick: () => setAccountSel('savings') }, t('receiveUseSavings')));
    if (nameMode) return nameMode.render(null);
    // No payment address off mainnet — show the reusable ark address rather
    // than silently falling back to an on-chain one that isn't Spending.
    if (featureHook('arkReady')) {
      if (!ui.arkRecvAddr) {
        Promise.resolve(featureHook('arkStaticAddress'))
          .then((a2) => { if (a2 && ui.arkRecvAddr !== a2) { ui.arkRecvAddr = a2; render(); } })
          .catch(() => {});
        return h('div', { class: 'card col', style: 'align-items:center;padding:24px' }, h('span', { class: 'spinner' }));
      }
      return h(
        'div',
        { class: 'card col', style: 'align-items:center;gap:14px' },
        h('div', { html: qrSvg(ui.arkRecvAddr) }),
        h('div', { class: 'addr-box break', style: 'width:100%' }, ui.arkRecvAddr),
        copyBtn(ui.arkRecvAddr, t('copyAddress'))
      );
    }
  }
  const addr = fresh.address;
  return h(
    'div',
    { class: 'card col', style: 'align-items:center;gap:14px' },
    h('div', { html: qrSvg(addr) }),
    h('div', { class: 'addr-box', style: 'width:100%' }, addr),
    copyBtn(addr, t('copyAddress'))
  );
}



// ---------------------------------------------------------------- Send
// Form to enter a recovery phrase / xprv and make a watch-only wallet spendable.
// Shared by the Send tab and Settings. The entered seed must derive to this
// account's xpub — you can't load the wrong wallet's seed.
function loadSeedCard() {
  const ls = ui.loadSeed;
  const seedTa = h('textarea', {
    class: 'mono-input', rows: '3', placeholder: t('seedPlaceholder'),
    autocapitalize: 'none', autocomplete: 'off', spellcheck: 'false', value: ls.value,
    onInput: (e) => { ls.value = e.target.value; },
  });
  return h(
    'div',
    { class: 'card col' },
    h('h3', { style: 'margin:0' }, t('loadSeedTitle')),
    h('p', { class: 'small muted', style: 'margin:0' }, t('loadSeedDesc')),
    pasteInto(seedTa, (text) => { seedTa.value = text; ls.value = text; }),
    h('input', {
      type: 'password', class: 'mono-input', placeholder: t('bip39PassphraseOpt'),
      autocapitalize: 'none', autocomplete: 'off', value: ls.passphrase,
      onInput: (e) => { ls.passphrase = e.target.value; },
    }),
    h('label', { class: 'row gap6', style: 'align-items:center;cursor:pointer' },
      h('input', { type: 'checkbox', checked: ls.save, onChange: (e) => { ls.save = e.target.checked; } }),
      h('span', { class: 'small' }, t('alsoSaveDevice'))
    ),
    ls.error ? h('div', { class: 'notice err' }, ls.error) : null,
    h('div', { class: 'row gap6' },
      h('button', { class: 'btn-ghost', onClick: cancelLoadSeed }, t('cancel')),
      h('button', { class: 'btn-primary grow', onClick: doLoadSeed }, t('loadSeedBtn'))
    )
  );
}

function sendTab() {
  // Watch-only wallet (e.g. restored after a session wipe without "Save to
  // device"): prompt to re-enter the seed before spending.
  if (wallet.watchOnly) {
    if (ui.loadSeed) return loadSeedCard();
    return h('div', { class: 'card col', style: 'gap:12px' },
      h('h3', {}, t('watchOnlySendTitle')),
      h('p', { class: 'small muted', style: 'margin:0' }, t('watchOnlySendDesc')),
      h('button', { class: 'btn-primary btn-block', onClick: () => startLoadSeed() }, t('loadSeedBtn'))
    );
  }
  if (ui.sendResult) return sendResultView();
  if (ui.broadcastTx) return broadcastConfirmView();
  const featView = featureHook('sendView');
  if (featView) return featView;
  if (ui.draft) return reviewView();
  return sendForm();
}



// QR scanning is only possible in a secure context with a camera.
const canScan = () =>
  typeof navigator !== 'undefined' && !!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia);

// Open the camera, then route the decoded payload: a BIP21 URI or address fills
// the form; a raw signed-tx hex goes to a broadcast confirmation.
async function scanIntoSend() {
  let text;
  try {
    text = await scanQr(t);
  } catch (e) {
    ui.sendError = e.message;
    render();
    return;
  }
  if (text) handleScanned(text);
}

function handleScanned(raw) {
  const text = raw.trim();
  const s = ui.send;
  ui.sendError = '';

  // A scanned bolt11 (optionally lightning:-prefixed) → pay it over Lightning.
  if (featureMatchSend(text)) return;

  if (/^bitcoin:/i.test(text)) {
    const { address, amount } = parseBip21(text);
    if (!address) {
      ui.sendError = t('scanUnrecognized');
      render();
      return;
    }
    s.recipients[0].address = address;
    if (amount != null) {
      s.recipients[0].amount = amount;
      s.max = false;
    }
    render();
    return;
  }

  // A raw signed transaction (hex) — confirm before broadcasting.
  const compact = text.replace(/\s+/g, '');
  if (/^[0-9a-fA-F]+$/.test(compact) && compact.length >= 100 && compact.length % 2 === 0) {
    try {
      const info = wallet.parseRawTx(compact);
      ui.broadcastTx = { hex: compact, ...info };
      render();
      return;
    } catch {
      /* not a parseable tx — fall through and treat as an address */
    }
  }

  // Otherwise treat it as an address (review will validate it).
  s.recipients[0].address = text;
  render();
}

// bitcoin:<address>?amount=<btc>&label=... — amount is in BTC; convert to the
// current display unit so it lands in the form's amount field correctly.
function parseBip21(uri) {
  const m = /^bitcoin:([^?]*)(?:\?(.*))?$/i.exec(uri.trim());
  if (!m) return {};
  const address = decodeURIComponent((m[1] || '').trim());
  let amount = null;
  if (m[2]) {
    const amt = new URLSearchParams(m[2]).get('amount');
    if (amt && isFinite(Number(amt)) && Number(amt) > 0) {
      const sats = Math.round(Number(amt) * SATS);
      amount = unit === 'sats' ? String(sats) : String(Number(amt));
    }
  }
  return { address, amount };
}

function broadcastConfirmView() {
  const b = ui.broadcastTx;
  return h(
    'div',
    { class: 'card col' },
    h('h3', {}, t('broadcastScanned')),
    h(
      'div',
      { class: 'summary col', style: 'gap:0' },
      ...b.outputs.map((o) =>
        h('div', { class: 'line' },
          h('span', { class: 'k mono break' }, o.address ? shortAddr(o.address, 14, 8) : '—'),
          h('span', { class: 'v' }, fmtAmount(o.value), ' ', unitTag())
        )
      ),
      h('div', { class: 'line' },
        h('span', { class: 'k' }, t('transactionId')),
        h('span', { class: 'v mono break' }, shortTxid(b.txid))
      )
    ),
    ui.sendError && h('div', { class: 'notice err' }, ui.sendError),
    h('div', { class: 'row gap6' },
      h('button', { class: 'btn-ghost', onClick: () => { ui.broadcastTx = null; ui.sendError = ''; render(); } }, t('back')),
      ui.busy
        ? h('button', { class: 'btn-primary grow', disabled: true }, h('span', { class: 'spinner' }))
        : h('button', { class: 'btn-primary grow', onClick: broadcastScanned }, t('broadcastNow'))
    )
  );
}

// --- RBF fee bump (with a fee-rate picker) ---------------------------------
function bumpRate() {
  const s = ui.bump;
  if (s.feeChoice === 'custom') return Math.max(1, Math.round(Number(s.customFee) || 1));
  const fr = wallet.feeRates;
  return (fr && fr[s.feeChoice]) || 5;
}

// Open the bump screen: fetch + reconstruct the original, default to Priority.
async function bumpFee(txid) {
  if (wallet.offline) { toast(t('scanOffline')); return; }
  ui.busy = true;
  render();
  try {
    const prep = await wallet.prepareBump(txid);
    ui.bump = { prep, feeChoice: 'fastestFee', customFee: '' };
    ui.sendError = '';
  } catch (e) {
    toast(e.message);
  }
  ui.busy = false;
  render();
}

function bumpView() {
  const s = ui.bump;
  const feeOpts = [
    ['economyFee', t('feeEconomy')],
    ['halfHourFee', t('feeNormal')],
    ['fastestFee', t('feePriority')],
    ['custom', t('feeCustom')],
  ];
  const rate = bumpRate();
  let pl = null;
  try { pl = wallet.planBump(s.prep, rate); } catch {}
  const newFee = pl && pl.ok ? pl.fee : null;
  const planErr = pl && !pl.ok ? t('bumpInsufficient') : '';
  return h(
    'div',
    { class: 'card col' },
    h('h3', {}, t('bumpConfirm')),
    h('div', { class: 'summary col', style: 'gap:0' },
      ...s.prep.recipients.map((r) =>
        h('div', { class: 'line' },
          h('span', { class: 'k mono break' }, r.address ? shortAddr(r.address, 14, 8) : '—'),
          h('span', { class: 'v' }, fmtAmount(r.value), ' ', unitTag())
        )
      ),
      h('div', { class: 'line' },
        h('span', { class: 'k' }, t('networkFee')),
        h('span', { class: 'v' }, fmtAmount(s.prep.oldFee) + ' → ' + (newFee != null ? fmtAmount(newFee) : '—') + ' ' + unitLabel())
      )
    ),
    h('div', { class: 'field' },
      h('span', { class: 'lab' }, t('feeRate')),
      h('div', { class: 'seg', style: 'display:flex;width:100%' },
        feeOpts.map(([k, label]) =>
          h('button', {
            type: 'button', class: (s.feeChoice === k ? 'active ' : '') + 'grow',
            onClick: () => { s.feeChoice = k; if (k === 'custom' && !s.customFee) s.customFee = String(rate); render(); },
          }, label)
        )
      ),
      s.feeChoice === 'custom'
        ? h('div', { class: 'input-group mt8' },
            h('input', { type: 'number', min: '1', placeholder: 'sat/vB', value: s.customFee,
              onInput: (e) => (s.customFee = e.target.value), onChange: () => render() }),
            h('span', { class: 'small muted', style: 'align-self:center' }, 'sat/vB'))
        : h('div', { class: 'small faint mt8' }, t('selectedRate', { n: rate }))
    ),
    (ui.sendError || planErr) && h('div', { class: 'notice err' }, ui.sendError || planErr),
    h('div', { class: 'row gap6' },
      h('button', { class: 'btn-ghost', onClick: () => { ui.sendError = ''; goBack(() => { ui.bump = null; }); } }, t('back')),
      ui.busy
        ? h('button', { class: 'btn-primary grow', disabled: true }, h('span', { class: 'spinner' }))
        : h('button', { class: 'btn-primary grow', disabled: !newFee, onClick: doBump }, t('replaceTx'))
    )
  );
}

async function doBump() {
  ui.busy = true;
  ui.sendError = '';
  render();
  try {
    const d = wallet.buildBump(ui.bump.prep, bumpRate());
    const txid = await wallet.broadcast(d.hex);
    ui.sendResult = { txid };
    ui.bump = null;
    ui.txDetail = null;
    ui.tab = 'send';
    await wallet.scan().catch(() => {});
  } catch (e) {
    ui.sendError = t('broadcastFailed', { msg: e.message });
  }
  ui.busy = false;
  render();
}

async function broadcastScanned() {
  if (wallet.offline) { ui.sendError = t('scanOffline'); render(); return; }
  ui.busy = true;
  ui.sendError = '';
  render();
  try {
    const txid = await wallet.broadcast(ui.broadcastTx.hex);
    ui.sendResult = { txid };
    ui.broadcastTx = null;
    await wallet.scan().catch(() => {});
  } catch (e) {
    ui.sendError = t('broadcastFailed', { msg: e.message });
  }
  ui.busy = false;
  render();
}

// Full address as wrapping nodes, first/last 6 chars emphasized — readable
// without horizontally scrolling the input. Returns DOM nodes for in-place
// updates (the address input doesn't re-render on every keystroke).
function addrVerifyNodes(a) {
  const n = 6;
  if (!a) return [];
  if (a.length <= n * 2) return [document.createTextNode(a)];
  return [
    h('span', { class: 'hl' }, a.slice(0, n)),
    document.createTextNode(a.slice(n, -n)),
    h('span', { class: 'hl' }, a.slice(-n)),
  ];
}

// True once the destination is a real on-chain or silent-payment address — used to
// progressively reveal the amount/fee/coin controls. A Lightning invoice instead
// auto-advances to its own confirmation, so it never needs them.
function destReady(a) {
  a = (a || '').trim();
  return !!a && (wallet.isOnchainAddress(a) || FEATURES.some((f) => f.isSendDest && f.isSendDest(a)));
}

// Recipient search under the destination input: usernames and npubs resolve
// to candidates with avatars; picking one runs the same path as pasting.
const sendSearch = { rows: null, sync: null };
let sendRevealTimer = null;
// With the phone keyboard up, the space under the recipient field is scarce —
// park the field at the top of the view so the candidate list gets what's
// left. Runs on focus and again whenever fresh candidates land (the list
// growing is what pushes things under the keyboard). The .send-suggest
// bottom margin (style.css) guarantees there's page below to scroll into.
function parkSendField() {
  if (!matchMedia('(pointer: coarse)').matches) return;
  const el = document.activeElement;
  if (el && el.isConnected && el.tagName === 'INPUT') el.scrollIntoView({ block: 'start', behavior: 'smooth' });
}
// Results update the panel IMPERATIVELY (sendSearch.sync, set by the mounted
// recipient row) rather than via render(): a full render swaps the focused
// input for a fresh node, which resets Android's keyboard session and cancels
// key auto-repeat — holding backspace deleted one character per press.
const sendSearcher = makeSearcher((q, rows) => {
  sendSearch.rows = rows;
  if (sendSearch.sync) sendSearch.sync(); else render();
  if (rows && rows.length) setTimeout(parkSendField, 50);
});

// One recipient: address + amount. Max is only offered for a single recipient.
function recipientRow(s, r, i) {
  const single = s.recipients.length === 1;
  const maxOn = single && s.max;
  r._ready = destReady(r.address); // reflected each render; onInput re-renders on a flip
  // same idea for destination annotations (e.g. the lightning-address zap
  // button): they only exist in the rendered tree, so a flip must re-render
  r._note = !!featureHook('sendFormNote', r.address);

  // Updated imperatively on input (and on render) so paste, typing, and scan
  // all reflect immediately without disrupting the input's focus/cursor.
  // data-fresh: these two are filled IMPERATIVELY through closures over this
  // render's nodes — the morph must install these exact nodes, not keep last
  // render's (whose closures are stale). Both are fully filled before the
  // morph runs, so the wholesale swap carries identical content.
  const check = h('div', { class: 'addr-check', 'data-fresh': '1' });
  const syncCheck = () => {
    const a = r.address.trim();
    const nodes = addrVerifyNodes(a);
    check.replaceChildren(...nodes);
    check.style.display = a ? '' : 'none';
  };
  // The suggestions panel gets the same imperative treatment — see the
  // sendSearcher note: a render between key repeats kills backspace-hold.
  const suggest = i === 0 ? h('div', { class: 'list send-suggest', style: 'display:none', 'data-fresh': '1' }) : null;
  const syncSuggest = () => {
    if (!suggest) return;
    const show = sendSearch.rows && sendSearch.rows.length && searchable(r.address);
    suggest.replaceChildren(...(show ? resultRows(h, sendSearch.rows, pickRecipient, (pk, node) => featureHook('wrapAvatar', pk, node)) : []));
    suggest.style.display = show ? '' : 'none';
  };
  if (i === 0) sendSearch.sync = syncSuggest;

  // A pasted/typed/scanned payload a feature recognizes (e.g. a bolt11) jumps
  // straight to that feature's own confirmation flow.
  const tryFeature = (v, typed) => featureMatchSend(v, typed);
  const addrInput = h('input', {
    type: 'text', class: 'mono-input grow', placeholder: i === 0 ? t('destPlaceholder') : 'bc1q…',
    autocapitalize: 'none', autocomplete: 'off', spellcheck: 'false', value: r.address,
    // the delay lets the keyboard start opening (and any render() swap of
    // this input) before parkSendField measures the live activeElement.
    // warmSearch pre-opens the search transports so the first keystroke's
    // results don't pay three cold handshakes.
    onFocus: () => { warmSearch(); setTimeout(parkSendField, 300); },
    onInput: (e) => {
      const v = e.target.value;
      r.address = v; syncCheck();
      const hadError = !!ui.sendError;
      ui.sendError = ''; // editing the destination starts over — drop stale errors
      if (i === 0) sendSearcher.update(v); // candidates render when results land
      if (tryFeature(v, true)) return;              // a bolt11 advances to its own confirmation
      // reveal/hide amount + controls as validity flips, an annotation
      // (zap button) appears/disappears, or an error clears — but only after
      // typing pauses: an immediate render swaps this input for a fresh node,
      // and Android cancels key auto-repeat when the focused field resets
      // (holding backspace deleted a single character).
      if (hadError || destReady(v) !== r._ready || !!featureHook('sendFormNote', v) !== r._note) {
        clearTimeout(sendRevealTimer);
        sendRevealTimer = setTimeout(render, 250);
      }
    },
  });
  const pickRecipient = (cand) => {
    const v = cand.address || npubOf(cand.pk);
    // State first: clear() re-renders, and that render must already see the
    // picked address — the old order repainted the half-typed query and left
    // the pick looking like it did nothing.
    r.address = v;
    ui.sendError = '';
    sendSearcher.clear();
    if (!featureMatchSend(v)) render();
  };
  const row = h(
    'div',
    { class: 'col gap6' },
    h('div', { class: 'input-group' },
      addrInput,
      pasteBtn((text) => { addrInput.value = text; r.address = text; ui.sendError = ''; syncCheck(); if (!tryFeature(text)) render(); }),
      i === 0 && canScan() && h('button', {
        type: 'button', class: 'btn-sm', title: t('scanQr'), onClick: scanIntoSend,
        html: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 8V5a1 1 0 0 1 1-1h3M16 4h3a1 1 0 0 1 1 1v3M20 16v3a1 1 0 0 1-1 1h-3M8 20H5a1 1 0 0 1-1-1v-3"/></svg>',
      }),
      !single && h('button', { type: 'button', class: 'btn-sm', title: t('remove'), onClick: () => { s.recipients.splice(i, 1); render(); } }, '✕')
    ),
    check,
    suggest,
    r._ready ? h('div', { class: 'input-group' },
      h('input', {
        type: 'number', step: unit === 'sats' ? '1' : '0.00000001', min: '0',
        placeholder: unit === 'sats' ? '0' : '0.00000000',
        disabled: maxOn,
        value: maxOn
          ? (unit === 'sats' ? String(estimatedMaxSats()) : fmtBtc(estimatedMaxSats()))
          : r.amount,
        onInput: (e) => {
          let v = e.target.value;
          // Chrome emits scientific notation when stepping tiny BTC amounts.
          if (v && /e/i.test(v)) {
            const n = Number(v);
            if (isFinite(n)) {
              v = unit === 'sats' ? String(Math.round(n)) : n.toFixed(8).replace(/\.?0+$/, '');
              e.target.value = v;
            }
          }
          r.amount = v;
        },
      }),
      h('button', { type: 'button', title: t('switchUnit'), onClick: toggleUnit }, unitLabel()),
      single && !featureHook('hideSendControls', r.address) && h('button', { type: 'button', class: s.max ? 'btn-primary' : '', onClick: () => { s.max = !s.max; render(); } }, t('max')),
      // features that hide the fee controls (ark) can still offer their own
      // Max — it fills the amount with that rail's spendable balance
      single && featureHook('hideSendControls', r.address)
        ? (() => {
            const v = featureHook('sendMaxFill', r.address);
            return v != null ? h('button', { type: 'button', onClick: () => { r.amount = v; s.max = false; render(); } }, t('max')) : null;
          })()
        : null
    ) : null
  );
  syncCheck();
  syncSuggest();
  return row;
}

function sendForm() {
  const s = ui.send;
  // Progressive disclosure: until the destination is a valid on-chain/SP address,
  // show only the destination input (a Lightning invoice auto-advances instead).
  const ready = destReady((s.recipients[0] || {}).address);
  const plainAddr = (s.recipients[0] || {}).address;
  const arkDest = s.recipients.length === 1 && !!featureHook('hideSendControls', plainAddr);
  const feeOpts = [
    ['economyFee', t('feeEconomy')],
    ['halfHourFee', t('feeNormal')],
    ['fastestFee', t('feePriority')],
    ['custom', t('feeCustom')],
  ];
  return h(
    'div',
    { class: 'card col' },
    h(
      'div',
      { class: 'field' },
      h('span', { class: 'lab' }, s.recipients.length > 1 ? t('recipients') : t('recipient')),
      h('div', { class: 'col', style: 'gap:14px' },
        s.recipients.map((r, i) => recipientRow(s, r, i))
      ),
      ready && !arkDest && s.recipients.length < 10 &&
        h('button', {
          type: 'button', class: 'linklike small mt8',
          onClick: () => { s.recipients.push({ address: '', amount: '' }); s.max = false; render(); },
        }, t('addRecipient'))
    ),
    // any feature may annotate the destination (ark hint, lightning-address
    // zap offer, …) — each hook decides for itself whether the text is its
    s.recipients.length === 1 ? (featureHook('sendFormNote', plainAddr) || null) : null,
    ready && !arkDest && h(
      'div',
      { class: 'field' },
      h('span', { class: 'lab' }, t('feeRate')),
      h(
        'div',
        { class: 'seg', style: 'display:flex;width:100%' },
        feeOpts.map(([k, label]) =>
          h('button', {
            type: 'button', class: (s.feeChoice === k ? 'active ' : '') + 'grow',
            onClick: () => {
              s.feeChoice = k;
              if (k === 'custom' && !s.customFee) {
                s.customFee = String((wallet.feeRates && wallet.feeRates.economyFee) || 1);
              }
              render();
            },
          }, label)
        )
      ),
      s.feeChoice === 'custom' &&
        h('div', { class: 'input-group mt8' },
          h('input', { type: 'number', min: '1', placeholder: 'sat/vB', value: s.customFee, onInput: (e) => (s.customFee = e.target.value) }),
          h('span', { class: 'small muted', style: 'align-self:center' }, 'sat/vB')
        ),
      s.feeChoice !== 'custom' &&
        h('div', { class: 'small faint mt8' }, t('selectedRate', { n: currentFeeRate() }))
    ),
    ready && !arkDest ? coinControl() : null,
    ui.sendError && h('div', { class: 'notice err' }, ui.sendError),
    ready && h('button', { class: 'btn-primary btn-block', onClick: reviewSend }, t('reviewTx')),
    ...FEATURES.map((f) => (f.sendFormExtras ? f.sendFormExtras() : null))
  );
}

function coinControl() {
  const s = ui.send;
  const head = h(
    'div',
    { class: 'row between' },
    h('span', { class: 'lab', style: 'margin:0' }, t('coinSelection')),
    h(
      'div',
      { class: 'seg' },
      h('button', { type: 'button', class: !s.manual ? 'active' : '', onClick: () => { s.manual = false; render(); } }, t('automatic')),
      h('button', { type: 'button', class: s.manual ? 'active' : '', onClick: () => { s.manual = true; render(); } }, t('manual'))
    )
  );
  if (!s.manual) return h('div', { class: 'col gap6' }, head);

  if (!wallet.utxos.length)
    return h('div', { class: 'col gap6' }, head, h('div', { class: 'small muted' }, t('noCoins')));

  let selTotal = 0;
  const rows = wallet.utxos.map((u) => {
    const id = utxoId(u);
    const checked = s.coins.has(id);
    if (checked) selTotal += u.value;
    return h(
      'label',
      { class: 'coin' },
      h('input', {
        type: 'checkbox', checked,
        onChange: (e) => { e.target.checked ? s.coins.add(id) : s.coins.delete(id); render(); },
      }),
      h('div', { class: 'grow' },
        h('div', { class: 'mono small break' }, shortAddr(u.address, 14, 10),
          !u.confirmed ? h('span', { class: 'tag pending', style: 'margin-left:6px' }, t('pendingTag')) : null),
        h('div', { class: 'path' }, `${u.chain}/${u.index} · ${shortTxid(u.txid)}:${u.vout}`)
      ),
      h('div', { class: 'amount small' }, fmtAmount(u.value))
    );
  });
  return h(
    'div',
    { class: 'col gap6' },
    head,
    h('div', { class: 'list' }, rows),
    h('div', { class: 'row between small' },
      h('span', { class: 'muted' }, t('nSelected', { n: s.coins.size })),
      h('span', { class: 'amount' }, fmtAmount(selTotal), ' ', unitTag())
    )
  );
}

// Coins that a send would draw from (all, or the manually-selected subset).
function spendableCoins() {
  const s = ui.send;
  return s.manual ? wallet.utxos.filter((u) => s.coins.has(utxoId(u))) : wallet.utxos;
}

// Estimated max sendable = selected total − fee for (n inputs, 1 output).
function estimatedMaxSats() {
  const coins = spendableCoins();
  const total = coins.reduce((a, u) => a + u.value, 0);
  const vbytes = 11 + 68 * coins.length + 31;
  const fee = Math.ceil(vbytes * currentFeeRate());
  return Math.max(0, total - fee);
}

function currentFeeRate() {
  const s = ui.send;
  if (s.feeChoice === 'custom') return Math.max(1, Math.round(Number(s.customFee) || 1));
  const fr = wallet.feeRates;
  if (fr && fr[s.feeChoice]) return fr[s.feeChoice];
  return 5;
}

function reviewSend() {
  ui.sendError = '';
  try {
    const s = ui.send;
    // Feature destinations (bolt11 → Lightning swap, ark1 → Ark send, ...)
    // divert to their own confirmation flows.
    for (const f of FEATURES) {
      if (f.interceptReview && f.interceptReview(s)) return;
    }
    const feeRate = currentFeeRate();
    let coinIds = null;
    if (s.manual) {
      coinIds = [...s.coins];
      if (!coinIds.length) throw new Error(t('selectCoin'));
    }
    let recipients, sendMax = false;
    if (s.max && s.recipients.length === 1) {
      const addr = s.recipients[0].address.trim();
      if (!addr) throw new Error(t('enterRecipientAddr'));
      recipients = [{ address: addr, amount: 0 }];
      sendMax = true;
    } else {
      recipients = s.recipients.map((r, i) => {
        const addr = r.address.trim();
        if (!addr) throw new Error(t('enterAddrForN', { n: i + 1 }));
        const sats = parseAmount(r.amount, unit);
        if (!sats || sats <= 0) throw new Error(t('enterValidAmtForN', { n: i + 1 }));
        return { address: addr, amount: sats };
      });
    }
    ui.draft = wallet.buildTx({ recipients, feeRate, coinIds, sendMax });
  } catch (e) {
    ui.draft = null;
    ui.sendError = e.message;
  }
  render();
}







function reviewView() {
  const d = ui.draft;
  const changeAddr = wallet.freshChange().address;
  const outs = d.outputs.filter((o) => o.address !== changeAddr);
  return h(
    'div',
    { class: 'card col' },
    h('h3', {}, t('reviewTx')),
    h(
      'div',
      { class: 'summary col', style: 'gap:0' },
      ...outs.map((o) =>
        h('div', { class: 'line' },
          o.silent
            ? h('span', { class: 'k col', style: 'gap:2px;align-items:flex-start' },
                h('span', { class: 'mono break' }, shortAddr(o.silent, 12, 8)),
                h('span', { class: 'small faint' }, t('silentPaymentNote'))
              )
            : h('span', { class: 'k mono break' }, shortAddr(o.address, 14, 8)),
          h('span', { class: 'v' }, fmtAmount(o.amount), ' ', unitTag())
        )
      ),
      h('div', { class: 'line' },
        h('span', { class: 'k' }, t('networkFee')),
        h('span', { class: 'v' }, fmtAmount(d.fee), ' ', unitTag())
      )
    ),
    ui.sendError && h('div', { class: 'notice err' }, ui.sendError),
    wallet.spendsUnconfirmed(d.tx)
      ? h('div', { class: 'notice info' }, t('unconfirmedInputWarn'))
      : null,
    wallet.offline
      ? h('div', { class: 'notice info' }, t('offlineSignNote'))
      : null,
    h(
      'div',
      { class: 'row gap6' },
      h('button', { class: 'btn-ghost', onClick: () => { ui.draft = null; ui.sendError = ''; render(); } }, t('back')),
      ui.busy
        ? h('button', { class: 'btn-primary grow', disabled: true }, h('span', { class: 'spinner' }))
        : wallet.offline
          ? h('button', { class: 'btn-primary grow', onClick: signForExport }, t('signTx'))
          : h('button', { class: 'btn-primary grow', onClick: broadcast }, t('signBroadcast'))
    ),
    // Online: also allow signing without broadcasting, to relay the signed tx
    // from another device (air-gapped, or a different network).
    !wallet.offline && !ui.busy
      ? h('button', { class: 'btn-block', style: 'margin-top:8px', onClick: signForExport }, t('signExport'))
      : null
  );
}

async function broadcast() {
  ui.busy = true;
  ui.sendError = '';
  render();
  try {
    const hexTx = wallet.sign(ui.draft.tx);
    const txid = await Promise.race([
      wallet.broadcast(hexTx),
      new Promise((_, rej) => setTimeout(() => rej(new Error(t('broadcastTimeout'))), 30000)),
    ]);
    wallet.applySentTx(ui.draft.tx); // update balance/history locally, right now
    ui.sendResult = { txid };
    ui.draft = null;
    ui.send = blankSend();
    ui.busy = false;
    render(); // the realtime watcher / backstop poll reconciles + confirms later
    return;
  } catch (e) {
    ui.sendError = t('broadcastFailed', { msg: e.message });
  }
  ui.busy = false;
  render();
}

function signForExport() {
  ui.sendError = '';
  try {
    const tx = ui.draft.tx;
    const hexTx = wallet.sign(tx);
    ui.sendResult = { signedHex: hexTx, txid: tx.id };
    ui.draft = null;
    ui.send = blankSend();
  } catch (e) {
    ui.sendError = t('signingFailed', { msg: e.message });
  }
  render();
}

function sendResultView() {
  const r = ui.sendResult;
  const again = h('button', { class: 'btn-block mt8', onClick: () => { ui.sendResult = null; render(); } }, t('done'));
  if (r.signedHex) {
    return h(
      'div',
      { class: 'card col' },
      h('div', { class: 'warn-box' }, t('txSignedNote')),
      h('div', { class: 'small muted' }, t('transactionId')),
      h('div', { class: 'addr-box' }, r.txid),
      h('div', { class: 'small muted mt8' }, t('signedTxRaw')),
      h('textarea', { readonly: true, style: 'min-height:120px', value: r.signedHex }),
      h('div', { class: 'row gap6' },
        copyBtn(r.signedHex, t('copyHex')),
        h('button', { class: 'btn-sm', onClick: () => download(`tx-${r.txid.slice(0, 8)}.txt`, r.signedHex, 'text/plain') }, t('downloadLabel')),
        h('div', { class: 'grow', html: '' })
      ),
      h('details', { class: 'mt8' }, h('summary', { class: 'small muted' }, t('showQrAirgap')), h('div', { style: 'margin-top:10px', html: qrSvg(r.signedHex) })),
      again
    );
  }
  return h(
    'div',
    { class: 'card col', style: 'align-items:center' },
    h('div', { class: 'notice ok', style: 'width:100%' }, t('txBroadcast')),
    h('div', { class: 'small muted' }, t('transactionId')),
    h('div', { class: 'addr-box' }, r.txid),
    h('div', { class: 'row gap6' },
      copyBtn(r.txid, t('copyTxid')),
      h('a', { class: 'btn btn-sm', href: wallet.api.explorerTx(r.txid), target: '_blank', rel: 'noopener', onClick: (e) => { e.preventDefault(); openExternal(wallet.api.explorerTx(r.txid)); } }, t('viewOnMempool'))
    ),
    again
  );
}







function txHistoryItem(tx) {
  const incoming = tx.net >= 0;
  const stuck = !tx.confirmed && wallet.isStuck(tx);
  const deco = featureHook('decorateTxRow', tx); // e.g. a claimed gift's claim tx
  return h(
    'div',
    { class: 'item', style: 'cursor:pointer', onClick: () => openTx(tx.txid) },
    // rail glyph in the direction-tinted circle: feature decoration (ark/sp/
    // gift) if any, else the Bitcoin mark for a plain on-chain tx. Direction
    // is carried by the tint + signed amount.
    deco
      ? h('div', { class: `ico ${incoming ? 'in' : 'out'}` }, deco.icon)
      : h('div', { class: `ico ${incoming ? 'in' : 'out'}`, html: BITCOIN_ICON(22) }),
    h('div', { class: 'grow' },
      h('div', { class: 'row gap6' },
        deco ? deco.label :
        incoming ? t('received') : t('sent'),
        tx.confirmed ? null
          : stuck ? h('span', { class: 'tag', style: 'background:var(--red-soft);color:var(--red)' }, t('stuckTag'))
          : h('span', { class: 'tag pending' }, t('pendingTag'))
      ),
      h('div', { class: 'small faint' }, tx.confirmed ? timeAgo(tx.blockTime) : stuck ? t('stuckNote') : t('awaitingConfirmation'))
    ),
    h('div', { style: 'text-align:right' },
      h('div', { class: incoming ? 'amount-pos' : 'amount-neg' }, (incoming ? '+' : '') + fmtAmount(tx.net)),
      !incoming && tx.fee ? h('div', { class: 'small faint' }, t('feeShort', { x: fmtAmount(tx.fee) })) : null
    )
  );
}

// Prev / page-of / next controls. Returns null when there's only one page.
// The buttons LOOP within the pages (never disabled): Next on the last page
// returns to page 1, Prev on page 1 jumps to the end — unlike the swipe
// ring, they never leave the list for the tabs.
const PAGE_SIZE = 10;
// The history list currently on screen ({ page, pages }), null when a detail
// view / spinner / another tab is up — the swipe gesture paginates against
// this and only falls through to tab navigation once the pages run out.
let _histPager = null;
function pager(page, total, onPage) {
  const pages = Math.ceil(total / PAGE_SIZE);
  if (pages <= 1) return null;
  return h('div', { class: 'row between', style: 'align-items:center;padding-top:10px' },
    h('button', { class: 'btn-sm', onClick: () => onPage((page - 1 + pages) % pages) }, t('prevPage')),
    h('span', { class: 'small muted' }, t('pageXofY', { x: page + 1, y: pages })),
    h('button', { class: 'btn-sm', onClick: () => onPage((page + 1) % pages) }, t('nextPage'))
  );
}

function historyTab() {
  _histPager = null; // set again below only when the pageable list renders
  if (ui.bump) return bumpView();
  // History is SCOPED to the selected account: Savings shows the on-chain
  // ledger (BIP84 txs, silent-payment receipts, gift reservations), Spending
  // shows the ark side (receives, sends, boards, LN) — each card of the
  // carousel owns its own timeline.
  const histSel = accountSel();
  const txs = histSel === 'spending' ? [] : wallet.history; // newest first
  const featDetail = featureHook('historyDetail');
  if (featDetail) return featDetail;
  if (ui.txDetail) {
    const tx = wallet.history.find((x) => x.txid === ui.txDetail);
    if (tx) return txDetailView(tx);
    ui.txDetail = null;
  }
  if (wallet.offline)
    return h('div', { class: 'card' }, h('p', { class: 'muted center', style: 'margin:0' }, t('historyOffline')));
  if (!wallet.loaded || (histSel !== 'spending' && wallet.historyLoading && !txs.length))
    return h(
      'div',
      { class: 'card center col', style: 'align-items:center;gap:10px' },
      h('span', { class: 'spinner' }),
      wallet.historyLoading ? h('p', { class: 'small muted', style: 'margin:0' }, t('loadingHistory')) : null
    );
  const featEntries = featureAll('historyEntries', txs, histSel);
  if (!txs.length && !featEntries.length)
    return h('div', { class: 'card' }, h('p', { class: 'muted center', style: 'margin:0' }, t('noTxYet')));

  // Transactions and feature entries merge into one timeline.
  const entries = [
    ...txs.map((tx) => ({ time: tx.confirmed ? (tx.blockTime || 0) * 1000 : Date.now(), render: () => txHistoryItem(tx) })),
    ...featEntries,
  ].sort((a, b) => b.time - a.time);
  const txPages = Math.ceil(entries.length / PAGE_SIZE);
  const txPage = Math.min(ui.txPage, Math.max(0, txPages - 1));
  const txSlice = entries.slice(txPage * PAGE_SIZE, txPage * PAGE_SIZE + PAGE_SIZE);
  _histPager = { page: txPage, pages: txPages };
  return h(
    'div',
    { class: 'card history-card' },
    h('div', { class: 'list' },
      ...txSlice.map((e) => e.render())
    ),
    pager(txPage, entries.length, (p) => { ui.txPage = p; render(); }),
    wallet.historyLoading
      ? h(
          'div',
          { class: 'row gap6', style: 'padding:10px 0 2px;justify-content:center' },
          h('span', { class: 'spinner sm' }),
          h('span', { class: 'small muted' }, t('loadingHistory'))
        )
      : null
  );
}

// Open a tx's detail view, lazily fetching its fee/details if we don't have them
// yet. A watcher-credited receive arrives with no fee (the push can't compute it
// from the raw tx), so fill it in from the explorer on demand — works for pending
// mempool txs too.
async function openTx(txid) {
  ui.txDetail = txid;
  render();
  const tx = wallet.history.find((t) => t.txid === txid);
  if (!tx || tx.sp || tx.fee || wallet.offline) return;
  try {
    const full = await wallet.api.getTx(txid);
    if (!full || ui.txDetail !== txid) return;
    if (full.fee != null) tx.fee = full.fee;
    if (full.weight) tx.vsize = Math.ceil(full.weight / 4);
    if (full.status && full.status.confirmed) {
      tx.confirmed = true;
      tx.blockHeight = full.status.block_height || tx.blockHeight;
      tx.blockTime = full.status.block_time || tx.blockTime;
    }
    wallet.saveCache();
    render();
  } catch {}
}


function txDetailView(tx) {
  const incoming = tx.net >= 0;

  const line = (k, v) => h('div', { class: 'line' }, h('span', { class: 'k' }, k), h('span', { class: 'v' }, v));
  return h(
    'div',
    { class: 'card col' },
    h('div', { class: 'row between' },
      h('h3', {}, incoming ? t('received') : t('sent')),
      h('span', { class: `tag ${tx.confirmed ? 'conf' : 'pending'}` }, tx.confirmed ? t('confirmedTag') : t('pendingTag'))
    ),
    h('div', { class: 'amt', style: 'font-size:30px' },
      h('span', { class: incoming ? 'amount-pos' : 'amount-neg' }, (incoming ? '+' : '') + fmtAmount(tx.net)),
      ' ', unitTag('unit')
    ),
    h('div', { class: 'summary col', style: 'gap:0' },
      line(t('status'), tx.confirmed ? t('confirmed') : t('pending')),
      tx.confirmed ? line(t('block'), String(tx.blockHeight || '—')) : null,
      tx.confirmed && tx.blockTime ? line(t('date'), new Date(tx.blockTime * 1000).toLocaleString()) : null,
      tx.fee ? line(t('networkFee'), fmtAmount(tx.fee) + ' ' + unitLabel()) : null
    ),
    ...FEATURES.map((f) => (f.txDetailSection ? f.txDetailSection(tx) : null)),
    !tx.confirmed && wallet.isStuck(tx)
      ? h('div', { class: 'warn-box' }, incoming ? t('stuckIncomingNote') : t('stuckOutgoingNote'))
      : null,
    h('div', { class: 'col gap6' },
      h('span', { class: 'lab' }, t('transactionId')),
      h('div', { class: 'addr-box', style: 'font-size:13px' }, tx.txid)
    ),
    h('div', { class: 'row gap6 wrap' },
      copyBtn(tx.txid, t('copyId')),
      h('a', { class: 'btn btn-sm', href: wallet.api.explorerTx(tx.txid), target: '_blank', rel: 'noopener', onClick: (e) => { e.preventDefault(); openExternal(wallet.api.explorerTx(tx.txid)); } }, t('viewOnMempool'))
    ),
    // RBF: an unconfirmed send can be rebroadcast at a higher fee.
    !tx.confirmed && !incoming && !wallet.offline
      ? (ui.busy
          ? h('button', { class: 'btn-primary btn-block', disabled: true }, h('span', { class: 'spinner' }))
          : h('button', { class: 'btn-primary btn-block', onClick: () => bumpFee(tx.txid) }, t('bumpFee')))
      : null,
    h('button', { class: 'btn-ghost btn-block', onClick: () => goBack(() => { ui.txDetail = null; }) }, t('backToHistory'))
  );
}

// Offline snapshot exchange: export coins on an online device, import on an
// offline (air-gapped) one to sign without internet.
function snapshotActions() {
  return h(
    'div',
    { class: 'col gap6' },
    h('p', { class: 'small muted', style: 'margin:0' },
      t('offlineTransferDesc')),
    h('div', { class: 'row gap6 wrap' },
      h('button', { class: 'btn-sm', disabled: !wallet.utxos.length, onClick: exportSnapshot }, t('exportSnapshot')),
      h('label', { class: 'btn btn-sm', style: 'cursor:pointer' }, t('importSnapshot'),
        h('input', { type: 'file', accept: 'application/json,.json', style: 'display:none', onChange: importSnapshotFile })
      )
    )
  );
}

function exportSnapshot() {
  const snap = wallet.exportSnapshot();
  const stamp = new Date().toISOString().slice(0, 10);
  download(`wallet-snapshot-${wallet.netName}-${stamp}.json`, JSON.stringify(snap, null, 2));
  toast(t('snapshotExported'));
}

async function importSnapshotFile(e) {
  const file = e.target.files[0];
  if (!file) return;
  try {
    const snap = JSON.parse(await file.text());
    const res = wallet.importSnapshot(snap);
    let msg = t('importedNCoins', { n: res.imported });
    if (res.unmatched.length) msg += t('unmatchedSuffix', { n: res.unmatched.length });
    toast(msg);
    ui.tab = 'settings';
    render();
  } catch (err) {
    toast(t('importFailed', { msg: err.message }));
  }
  e.target.value = '';
}

// ================================================================ start
// Load the active language's strings (English is inline; others are fetched),
// ---- feature registry -------------------------------------------------
// Optional features receive the app context and plug into fixed seams. This
// sits just before boot so every helper it captures is defined; the hooks are
// only invoked at runtime (first render happens after loadLocale below).
const ctx = {
  h, ui, render, wallet, toast, copy, copyBtn, pasteBtn, blankSend, goBack, goHome, openExternal,
  fmtAmount, unitLabel, unitTag, parseAmount, getUnit: () => unit, toggleUnit, download,
  // the one-tap zap amount, synced across devices with the rest of the state
  zapDefaultSat: () => (wallet.loadFeatureState ? (wallet.loadFeatureState('prefs', {}).zapSat || 0) : 0),
  setZapDefaultSat: (n) => {
    const p = wallet.loadFeatureState('prefs', {});
    p.zapSat = Math.max(1, Math.floor(n) || 0);
    wallet.saveFeatureState('prefs', p);
    try { wallet.saveCache(); } catch {}
  },
  brandHeader, activeAccount, setAccounts: (list) => { accounts = list; },
  getAccounts: () => accounts,
  claimTargets, enterWallet, activateAccount, commitAccount,
  // cross-feature calls (e.g. gifts asking the ark feature for ark-gift
  // support) — lazy so it resolves against the final FEATURES list, and a
  // build without the target feature simply gets null back
  hook: (name, ...args) => featureHook(name, ...args),
  // full sign-out (distinct from the padlock's lock-in-place): clear the
  // session and leave — offering a password if none protects the vault yet
  logout: () => {
    lock({ offerPassword: true });
    // Logging out means the front door, not the password prompt: land on the
    // start page (Get started / sign in). Saved wallets stay one Unlock away.
    if (!ui.pw) { ui.screen = 'unlock'; ui.unlockTab = 'create'; ui.onb = { step: 'welcome' }; render(); }
  },
  // The drastic exit: leave AND remove everything saved on this device.
  // Routes through the Delete-all warning — never a single tap.
  // The popup has already shown the delete-everything warning by the time
  // this runs — wipe now and land on the front door.
  logoutForget: () => {
    ui.profilePk = null; ui.profEdit = null; ui.profEditFilled = false; ui.chatOpen = false;
    ui.pubProf = null;
    clearAll();
  },
  // the identity the header avatar currently wears (login > seed key >
  // remembered) — profile "mine"-ness must match what the user clicked
  shownPubkey: () => (featureHook('nostrLoginIdentity') || {}).pubkey
    || (wallet.nostrPubkey && wallet.nostrPubkey()) || (activeAccount() || {}).nostrPk || null,
  getAccount: () => accountSel(),
  setAccount: (a, dir) => setAccountSel(a, dir),
  // Open (or create) a wallet from a mnemonic — used by nostr login.
  openMnemonic: async (mnemonic, passphrase, opts) => enterWallet(mnemonic, passphrase, opts),
  // Upload an image (avatar) and get back its URL — the same signed
  // nostr.build path the onboarding picker uses.
  uploadImage: (file) => onbUpload(file),
  // A nostr login that lands mid-wizard: a restored wallet has been through
  // onboarding elsewhere, so the wizard ends without tour or prompts; a fresh
  // one falls through to the wallet + tour on the next render.
  onbNostrLogin: (restored) => {
    if (!ui.onb) return;
    if (restored) { ui.onb = null; try { localStorage.removeItem(ONB_STEP_KEY); } catch {} }
  },
};
// Android wrapper intents: the TWA app (android/) registers for lightning:/
// bitcoin:/nostr:/lnurl: URIs and forwards them here as ?u=<encoded>. Read
// BEFORE features construct: a nostr npub/nprofile rewrites itself onto the
// existing /npub… profile deep link (which the messages feature reads at
// construction); payment URIs stash for dispatch once a wallet is open.
const INTENT_URI = (() => {
  try {
    const u = new URLSearchParams(location.search).get('u');
    if (!u) return null;
    history.replaceState(null, '', location.pathname || '/');
    const m = u.match(/^nostr:((npub|nprofile)1[a-z0-9]+)\/?$/i);
    if (m) { history.replaceState(null, '', '/' + m[1]); return null; }
    return u;
  } catch { return null; }
})();
const FEATURES = buildFeatures(ctx);
// Deferred features (gifts, NWC, hats) hold placeholder slots in FEATURES —
// hook precedence is position — and arrive as separate chunks right after
// boot, filled in place. If a wallet opened before they landed, each newcomer
// gets the init() it missed; if the wallet locked again, it doesn't.
let _featuresInited = false;
const _deferredReady = (async () => {
  try {
    const late = await loadDeferredFeatures(ctx, FEATURES);
    if (_featuresInited) for (const f of late) { try { f.init && f.init(); } catch {} }
    if (late.length) render();
  } catch (e) { console.error('deferred features failed to load', e); }
})();

// apply text direction, then restore a wallet left open in this tab — otherwise
// show the unlock screen.
applyDir();
// Auto log-out: start the countdown only when the app loses focus / is hidden,
// and cancel it the moment it's focused again. So it never logs out mid-use.
// Swipe left/right moves between the main tabs, the way thumbs expect.
// Horizontal-dominant, quick, and only on the wallet's own tab pages — never
// inside chat, profiles, takeovers, or the (offline-forced) settings tab.
(() => {
  const ORDER = ['history', 'receive', 'send'];
  let sx = 0, sy = 0, t0 = 0, live = false, onBalance = false, swallowClick = false;
  window.addEventListener('click', (e) => {
    if (!swallowClick) return;
    swallowClick = false;
    e.stopPropagation();
    e.preventDefault();
  }, true);
  window.addEventListener('touchstart', (e) => {
    live = e.touches.length === 1 && ui.screen === 'wallet' && !ui.chatOpen && !ui.profilePk
      && !ui.arkExitPage && ORDER.includes(ui.tab);
    if (!live) return;
    // the carousel owns its own drag — the flip gesture only serves the
    // single-face balance (kind-locked / savings-only wallets)
    if (e.target.closest && e.target.closest('.bal-carousel')) { live = false; return; }
    onBalance = !!(e.target.closest && e.target.closest('.balance'));
    sx = e.touches[0].clientX;
    sy = e.touches[0].clientY;
    t0 = Date.now();
  }, { passive: true });
  window.addEventListener('touchcancel', () => { live = false; }, { passive: true });
  window.addEventListener('touchend', (e) => {
    if (!live) return;
    live = false;
    const t = e.changedTouches[0];
    const dx = t.clientX - sx, dy = t.clientY - sy;
    if (Date.now() - t0 > 600 || Math.abs(dx) < 60 || Math.abs(dx) < 1.8 * Math.abs(dy)) return;
    // A touch sequence still fires a compatibility click at the release
    // point; after a swipe that would ALSO press whatever is under the
    // finger. Swallow exactly one click.
    swallowClick = true;
    setTimeout(() => { swallowClick = false; }, 400);
    // a swipe that began on the balance card flips the account instead
    if (onBalance) {
      const want = dx < 0 ? 'savings' : 'spending';
      if (spendingActive()) setAccountSel(want, dx < 0 ? 'left' : 'right');
      return;
    }
    // The swipe surfaces form ONE RING that loops:
    //   … page0 ⇄ page1 … lastPage ⇄ Receive ⇄ Send ⇄ page0 …
    // Swiping left over the history list turns pages older (the pager's
    // Next); at the last page it wraps into Receive, then Send, then back to
    // page 0. Swiping right from page 0 goes the other way — Send, then
    // Receive, then the LAST page. No dead ends anywhere.
    const resets = () => {
      // same resets as a tab-bar tap
      ui.sendError = '';
      ui.revealShown = false;
      ui.txDetail = null;
      ui.arkMoveDetail = null;
      ui.arkReconDetail = null;
      ui.giftDetail = null;
      ui.addrScan = false;
      ui.bump = null;
      ui.giftMode = false;
    };
    const goTab = (tab) => { _swipeDir = dx < 0 ? 'left' : 'right'; ui.tab = tab; resets(); render(); };
    // entering history from a wrap lands on a chosen page (an oversized
    // index clamps to the last page in historyTab)
    const goHist = (page) => { _swipeDir = dx < 0 ? 'left' : 'right'; ui.tab = 'history'; resets(); ui.txPage = page; render(); };
    if (ui.tab === 'history') {
      // a detail view / spinner / empty list publishes no pager — treat it
      // as a single page so the swipe still reaches the tabs
      const { page, pages } = _histPager || { page: 0, pages: 1 };
      if (dx < 0) { if (page < pages - 1) { ui.txPage = page + 1; render(); } else goTab('receive'); }
      else if (page > 0) { ui.txPage = page - 1; render(); }
      else goTab('send');
      return;
    }
    if (ui.tab === 'receive') { if (dx < 0) goTab('send'); else goHist(1e9); return; }
    if (ui.tab === 'send') { if (dx < 0) goHist(0); else goTab('receive'); return; }
  }, { passive: true });
})();

window.addEventListener('blur', onAppHidden);
window.addEventListener('focus', onAppVisible);
document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden') onAppHidden();
  else onAppVisible();
});
// Claim a stashed migrated name as soon as a wallet is actually open — a
// vault unlock or slow boot can put that minutes after 'load'. The stash
// survives reloads, so an unfinished claim resumes on the next visit too.
// Dispatch a stashed payment intent (lightning:/bitcoin:/lnurl: from the
// Android wrapper) once a wallet is actually open — a locked vault or slow
// boot can put that well after load. handleScanned routes it exactly like a
// scanned QR: bolt11s and lnurls through the feature chain, bitcoin: through
// BIP-21 (nostr profile intents already rerouted onto the /npub deep link).
if (INTENT_URI) {
  const started = Date.now();
  const tick = setInterval(() => {
    if (Date.now() - started > 10 * 60_000) return clearInterval(tick);
    if (!activeAccount() || !wallet.loaded || ui.screen !== 'wallet') return;
    clearInterval(tick);
    ui.tab = 'send';
    render();
    handleScanned(INTENT_URI);
    // A lightning:lnurl… (or ln-address) intent often lands BEFORE the
    // feature that pays it is ready — ark connects lazily, so zaps'
    // matchSendText declines and the raw URI falls through into the
    // recipient field. Keep re-offering the text to the feature chain for a
    // while; when a feature finally claims it (the zap amount screen takes
    // over), sweep the leftover raw text out of the recipient.
    let tries = 0;
    const retry = setInterval(() => {
      const s = ui.send;
      const pending = s && s.recipients.length === 1 && s.recipients[0].address === INTENT_URI;
      if (!pending || ++tries > 20) return clearInterval(retry);
      if (featureMatchSend(INTENT_URI)) {
        clearInterval(retry);
        s.recipients[0].address = '';
        render();
      }
    }, 1000);
  }, 500);
}

window.addEventListener('load', () => {
  if (!pendingMigratedName()) return;
  const started = Date.now();
  const tick = setInterval(() => {
    if (!pendingMigratedName() || Date.now() - started > 10 * 60_000) return clearInterval(tick);
    if (activeAccount()) { clearInterval(tick); claimMigratedName(); }
  }, 1000);
});
loadLocale(getLang()).finally(async () => {
  applyBootAutoLogout(); // clear an overdue session before we read it for claim targets
  // Public read-only community chat: no wallet, no login — the join material
  // ships in the bundle, so the page decrypts client-side (src/public-chat.js).
  // A share-anywhere link; its sign-in button leads back to the normal app.
  if (location.pathname === '/chat') {
    _publicChatMode = true; // app renders stand down — the page owns #app
    const m = await import('./public-chat.js');
    m.mountPublicChat();
    return;
  }
  // A gift link's feature is deferred — wait for it before asking who owns
  // the URL, or the claim would fall through to a normal boot and be lost.
  if (/^\/(g|ag|lg)\//.test(location.pathname)) await _deferredReady;
  if (featureHook('bootUrl')) return; // a feature consumed the URL (e.g. a gift claim)
  if (!restoreAccountsState()) render();
});