fix(ui): cap transactions modal at 60% of the live viewport on mobile

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

core/archipelago/src/config.rs

@@ -80,19 +80,11 @@ pub struct Config {
 }
 
 impl Config {
-    /// Detect primary host IP (first non-loopback IPv4)
+    /// Detect primary host IP (default-route interface, not `hostname -I` order)
     async fn detect_host_ip() -> Result<String> {
-        let output = tokio::process::Command::new("hostname")
-            .args(["-I"])
-            .output()
+        Ok(crate::host_ip::primary_host_ipv4()
             .await
-            .context("Failed to run hostname -I")?;
-        let s = String::from_utf8_lossy(&output.stdout);
-        let ip = s
-            .split_whitespace()
-            .find(|s| !s.starts_with("127.") && s.contains('.'))
-            .unwrap_or("127.0.0.1");
-        Ok(ip.to_string())
+            .unwrap_or_else(|| "127.0.0.1".to_string()))
     }
 
     pub async fn load() -> Result<Self> {

core/archipelago/src/container/docker_packages.rs

@@ -696,22 +696,11 @@ async fn netbird_configured_launch_url() -> Option<String> {
     PodmanClient::lan_address_for("netbird")
 }
 
-/// First address from `hostname -I` — the node's primary host IP. Mirrors the
-/// orchestrator's `detect_host_ip` so launch URLs match the cert/config the
-/// orchestrator renders for `{{HOST_IP}}`.
+/// The node's primary host IP. Mirrors the orchestrator's `detect_host_ip`
+/// so launch URLs match the cert/config the orchestrator renders for
+/// `{{HOST_IP}}`.
 async fn first_host_ip() -> Option<String> {
-    let out = tokio::process::Command::new("hostname")
-        .arg("-I")
-        .output()
-        .await
-        .ok()?;
-    if !out.status.success() {
-        return None;
-    }
-    String::from_utf8_lossy(&out.stdout)
-        .split_whitespace()
-        .next()
-        .map(ToOwned::to_owned)
+    crate::host_ip::primary_host_ipv4().await
 }
 
 async fn reachable_lan_address(app_id: &str, candidate: Option<String>) -> Option<String> {

core/archipelago/src/container/prod_orchestrator.rs

@@ -3087,16 +3087,7 @@ impl ProdContainerOrchestrator {
     }
 
     async fn detect_host_ip() -> Option<String> {
-        let output = tokio::process::Command::new("hostname")
-            .arg("-I")
-            .output()
-            .await
-            .ok()?;
-        if !output.status.success() {
-            return None;
-        }
-        let stdout = String::from_utf8_lossy(&output.stdout);
-        stdout.split_whitespace().next().map(|s| s.to_string())
+        crate::host_ip::primary_host_ipv4().await
     }
 
     async fn detect_host_mdns() -> String {

core/archipelago/src/host_ip.rs

@@ -0,0 +1,135 @@
+//! Primary host LAN IPv4 detection.
+//!
+//! `hostname -I` lists addresses in interface-creation order, so once a VPN
+//! or bridge interface exists (NetBird's WireGuard tunnel, br-tollgate, …)
+//! its address can sort ahead of the real NIC — a fresh-ISO node handed out
+//! `https://10.44.0.1:8087` as NetBird's launch URL instead of the LAN IP.
+//! The main routing table's default route names the physical uplink even when
+//! a VPN is active (NetBird/Tailscale steer traffic via policy-routing rules
+//! in separate tables, not by replacing the main-table default), so that is
+//! the authoritative source, with `hostname -I` kept only as the last resort
+//! for hosts with no default route at all.
+
+/// The node's primary LAN IPv4, as a string.
+///
+/// Resolution order:
+/// 1. `src`/`dev` of the main-table default route (`ip -4 route show default`)
+/// 2. source address of a connected UDP socket (never transmits)
+/// 3. first non-loopback IPv4 from `hostname -I` (legacy behaviour)
+pub(crate) async fn primary_host_ipv4() -> Option<String> {
+    if let Some(ip) = default_route_ip().await {
+        return Some(ip);
+    }
+    if let Some(ip) = udp_route_ip() {
+        return Some(ip);
+    }
+    hostname_i_ip().await
+}
+
+async fn default_route_ip() -> Option<String> {
+    let out = tokio::process::Command::new("ip")
+        .args(["-4", "route", "show", "default"])
+        .output()
+        .await
+        .ok()?;
+    if !out.status.success() {
+        return None;
+    }
+    let route = String::from_utf8_lossy(&out.stdout);
+    if let Some(ip) = parse_route_src(&route) {
+        return Some(ip);
+    }
+    // No `src` hint on the route — resolve the device's global address.
+    let dev = parse_route_dev(&route)?;
+    let out = tokio::process::Command::new("ip")
+        .args(["-4", "-o", "addr", "show", "dev", &dev, "scope", "global"])
+        .output()
+        .await
+        .ok()?;
+    if !out.status.success() {
+        return None;
+    }
+    parse_addr_inet(&String::from_utf8_lossy(&out.stdout))
+}
+
+fn parse_route_src(route: &str) -> Option<String> {
+    field_after(route.lines().next()?, "src")
+}
+
+fn parse_route_dev(route: &str) -> Option<String> {
+    field_after(route.lines().next()?, "dev")
+}
+
+fn field_after(line: &str, key: &str) -> Option<String> {
+    let mut words = line.split_whitespace();
+    while let Some(w) = words.next() {
+        if w == key {
+            return words.next().map(ToOwned::to_owned);
+        }
+    }
+    None
+}
+
+fn parse_addr_inet(out: &str) -> Option<String> {
+    let cidr = field_after(out.lines().next()?, "inet")?;
+    Some(cidr.split('/').next().unwrap_or(&cidr).to_string())
+}
+
+/// A connected UDP socket's local address is the source IP the kernel would
+/// use to reach the peer; nothing is sent. Can still land on a tunnel IP when
+/// a VPN policy-routes all traffic, hence only a fallback.
+fn udp_route_ip() -> Option<String> {
+    let sock = std::net::UdpSocket::bind("0.0.0.0:0").ok()?;
+    sock.connect("8.8.8.8:80").ok()?;
+    match sock.local_addr().ok()?.ip() {
+        std::net::IpAddr::V4(v4) if !v4.is_loopback() && !v4.is_unspecified() => {
+            Some(v4.to_string())
+        }
+        _ => None,
+    }
+}
+
+async fn hostname_i_ip() -> Option<String> {
+    let out = tokio::process::Command::new("hostname")
+        .arg("-I")
+        .output()
+        .await
+        .ok()?;
+    if !out.status.success() {
+        return None;
+    }
+    String::from_utf8_lossy(&out.stdout)
+        .split_whitespace()
+        .find(|s| !s.starts_with("127.") && s.contains('.'))
+        .map(ToOwned::to_owned)
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn route_src_wins() {
+        let route = "default via 192.168.1.254 dev wlp3s0 proto dhcp src 192.168.1.116 metric 600";
+        assert_eq!(parse_route_src(route).as_deref(), Some("192.168.1.116"));
+    }
+
+    #[test]
+    fn route_dev_without_src() {
+        let route = "default via 192.168.1.1 dev enp0s31f6 proto static";
+        assert_eq!(parse_route_src(route), None);
+        assert_eq!(parse_route_dev(route).as_deref(), Some("enp0s31f6"));
+    }
+
+    #[test]
+    fn addr_inet_strips_prefix() {
+        let out = "3: wlp3s0    inet 192.168.1.65/24 brd 192.168.1.255 scope global dynamic noprefixroute wlp3s0\\       valid_lft 85328sec preferred_lft 85328sec";
+        assert_eq!(parse_addr_inet(out).as_deref(), Some("192.168.1.65"));
+    }
+
+    #[test]
+    fn empty_route_table() {
+        assert_eq!(parse_route_src(""), None);
+        assert_eq!(parse_route_dev(""), None);
+    }
+}

core/archipelago/src/main.rs

@@ -50,6 +50,7 @@ mod electrs_status;
 mod federation;
 mod fips;
 mod health_monitor;
+mod host_ip;
 mod identity;
 mod identity_manager;
 mod marketplace;

docker/bitcoin-ui/index.html

@@ -7,7 +7,9 @@
     <meta http-equiv="Pragma" content="no-cache">
     <meta http-equiv="Expires" content="0">
     <title id="pageTitle">Bitcoin Node - Archipelago</title>
-    <link rel="stylesheet" href="/tailwind.css">
+    <!-- Relative: the shell is served at / in the container but under
+         /app/bitcoin-ui/ in the public demo — absolute paths 404 there. -->
+    <link rel="stylesheet" href="tailwind.css">
     <style>
         * {
             margin: 0;
@@ -339,7 +341,7 @@
                     <div class="logo-gradient-border">
                         <img
                             id="implLogo"
-                            src="/assets/img/app-icons/bitcoin-knots.webp"
+                            src="assets/img/app-icons/bitcoin-knots.webp"
                             alt="Bitcoin Node"
                             class="w-16 h-16"
                             style="object-fit: contain;"
@@ -984,8 +986,8 @@
                 ? 'Enhanced Bitcoin node implementation'
                 : 'Reference Bitcoin node implementation';
             const icon = isKnots
-                ? '/assets/img/app-icons/bitcoin-knots.webp'
-                : '/assets/img/app-icons/bitcoin-core.svg';
+                ? 'assets/img/app-icons/bitcoin-knots.webp'
+                : 'assets/img/app-icons/bitcoin-core.svg';
             const pageTitle = document.getElementById('pageTitle');
             const implName = document.getElementById('implName');
             const implTagline = document.getElementById('implTagline');

docker/fedimint-ui/index.html

@@ -386,7 +386,7 @@
       <section class="glass-card">
         <div class="header">
           <div class="logo-gradient-border">
-            <img src="/assets/img/app-icons/fedimint.jpg" alt="Fedimint Guardian">
+            <img src="assets/img/app-icons/fedimint.jpg" alt="Fedimint Guardian">
           </div>
           <div class="title">
             <h1>Fedimint Guardian</h1>

neode-ui/docker/nginx-demo.conf

@@ -91,7 +91,10 @@ http {
         }
 
         # Proxy FileBrowser API to mock backend (demo mode)
-        location /app/filebrowser/ {
+        # ^~ on every /app/ prefix: the .css/.js/.img cache regex below must
+        # never swallow app-shell assets (they live on the backend, not in the
+        # web root — without ^~ nginx prefers the regex and 404s them).
+        location ^~ /app/filebrowser/ {
             client_max_body_size 10G;
             proxy_pass http://neode-backend:5959;
             proxy_http_version 1.1;
@@ -103,7 +106,7 @@ http {
         # IndeeHub: reverse-proxy the real site same-origin, strip framing headers,
         # and rewrite its absolute asset paths (/assets, /, src, href) to the
         # /app/indeedhub/ prefix so the SPA loads inside the iframe.
-        location /app/indeedhub/ {
+        location ^~ /app/indeedhub/ {
             proxy_pass https://indee.tx1138.com/;
             proxy_http_version 1.1;
             proxy_set_header Host indee.tx1138.com;
@@ -129,7 +132,7 @@ http {
         # Proxy every other app UI (/app/<id>/) to the mock backend, which serves
         # the per-app mock UIs (bitcoin-ui, electrumx, lnd, fedimint) and the
         # generic "Not available in the demo" notice for the rest.
-        location /app/ {
+        location ^~ /app/ {
             proxy_pass http://neode-backend:5959;
             proxy_http_version 1.1;
             proxy_set_header Host $host;

neode-ui/mock-backend.js

@@ -1249,7 +1249,8 @@ const DOCKER_UI = path.join(__dirname, '..', 'docker')
 for (const [prefixes, dir] of [
   [['/app/bitcoin-core', '/app/bitcoin-knots', '/app/bitcoin-ui'], 'bitcoin-ui'],
   [['/app/electrumx', '/app/electrs', '/app/archy-electrs-ui'], 'electrs-ui'],
-  [['/app/lnd', '/app/lnd-ui', '/app/archy-lnd-ui', '/app/thunderhub'], 'lnd-ui'],
+  // lnd deliberately NOT here: the real lnd-ui shell reads poorly in the demo
+  // iframe, so /app/lnd/ gets a DEMO_APP_PAGES placeholder dashboard instead.
   [['/app/fedimint', '/app/fedimintd'], 'fedimint-ui'],
 ]) {
   for (const p of prefixes) app.use(p, express.static(path.join(DOCKER_UI, dir)))
@@ -2195,6 +2196,15 @@ app.post('/rpc/v1', (req, res) => {
       case 'content.download-peer-paid':
       case 'content.download-peer-invoice':
       case 'content.download-peer-onchain': {
+        // Deduct the price from the chosen rail so demo balances react.
+        const paid = params?.price_sats || 0
+        if (paid > 0 && method === 'content.download-peer-paid') {
+          if (params?.method === 'ark') walletState.ark_sats = Math.max(0, walletState.ark_sats - paid)
+          else if (params?.method === 'fedimint') {
+            const fed = (mockState.federations || [])[0]
+            if (fed) fed.balance_sats = Math.max(0, (fed.balance_sats || 0) - paid)
+          } else walletState.ecash_sats = Math.max(0, walletState.ecash_sats - paid)
+        }
         const filename = params?.filename || 'demo-content'
         const body = Buffer.from(
           `Archipelago demo — "${filename}"\n\nThis is sample paid content delivered over the ` +
@@ -2418,20 +2428,34 @@ app.post('/rpc/v1', (req, res) => {
       }
 
       case 'network.dns-status': {
+        const dns = mockState.dns || { provider: 'system', servers: ['1.1.1.1', '9.9.9.9'], doh_enabled: false }
         return res.json({
           result: {
-            provider: 'system',
-            servers: ['1.1.1.1', '9.9.9.9'],
-            doh_enabled: false,
+            provider: dns.provider,
+            servers: dns.servers,
+            doh_enabled: dns.doh_enabled,
             doh_url: null,
-            resolv_conf_servers: ['1.1.1.1', '9.9.9.9'],
+            resolv_conf_servers: dns.servers,
           },
         })
       }
 
       case 'network.configure-dns': {
-        console.log(`[Network] DNS configured: ${params?.provider}`)
-        return res.json({ result: { success: true } })
+        const dnsProviders = {
+          system: ['192.168.4.1'],
+          cloudflare: ['1.1.1.1', '1.0.0.1'],
+          google: ['8.8.8.8', '8.8.4.4'],
+          quad9: ['9.9.9.9', '149.112.112.112'],
+          mullvad: ['194.242.2.2'],
+        }
+        const provider = params?.provider || 'system'
+        const servers = provider === 'custom'
+          ? (Array.isArray(params?.servers) ? params.servers : [])
+          : (dnsProviders[provider] || dnsProviders.system)
+        const doh_enabled = ['cloudflare', 'google', 'quad9', 'mullvad'].includes(provider)
+        mockState.dns = { provider, servers, doh_enabled }
+        console.log(`[Network] DNS configured: ${provider} → ${servers.join(', ')}`)
+        return res.json({ result: { provider, servers, doh_enabled } })
       }
 
       case 'network.accept-request': {
@@ -3315,10 +3339,15 @@ app.post('/rpc/v1', (req, res) => {
       // Wallet / Ecash (Fedimint)
       // =====================================================================
       case 'wallet.ecash-balance': {
+        const fedSats = (mockState.federations || []).reduce((s, f) => s + (f.balance_sats || 0), 0)
         return res.json({
           result: {
             balance_sats: walletState.ecash_sats,
             balance_msat: walletState.ecash_sats * 1000,
+            cashu_sats: walletState.ecash_sats,
+            fedimint_sats: fedSats,
+            ark_sats: walletState.ark_sats,
+            total_sats: walletState.ecash_sats + fedSats + walletState.ark_sats,
             token_count: walletState.ecash_tokens,
             federations: [
               { federation_id: 'fed1-demo', name: 'Archy Signet Mint', balance_msat: walletState.ecash_sats * 1000, gateway_active: true },
@@ -4741,6 +4770,34 @@ app.get('/app/thunderhub/api/forwards', (req, res) => res.json(MOCK_LND_DATA.for
 // something plausible in the in-app iframe. Registered before the generic
 // /app/:id notice handler so these win.
 const DEMO_APP_PAGES = {
+  // Placeholder LND dashboard — the real lnd-ui shell reads poorly inside the
+  // demo iframe. Numbers stay consistent with the /proxy/lnd/v1/* mocks.
+  lnd: () => demoAppShell('Lightning Network Daemon', 'archipelago-lnd · v0.18.3-beta · signet', '/assets/img/app-icons/lnd.png', `
+    <div class="grid">
+      <div class="card"><div class="k">Status</div><div class="v"><span class="badge">Running · synced</span></div></div>
+      <div class="card"><div class="k">On-chain</div><div class="v">2,450,000 sats</div></div>
+      <div class="card"><div class="k">Lightning (local)</div><div class="v">8,250,000 sats</div></div>
+      <div class="card"><div class="k">Inbound capacity</div><div class="v">11,750,000 sats</div></div>
+    </div>
+    <div class="grid">
+      <div class="card"><div class="k">Channels</div><div class="v">4 active</div></div>
+      <div class="card"><div class="k">Peers</div><div class="v">11</div></div>
+      <div class="card"><div class="k">Block height</div><div class="v">902,418</div></div>
+    </div>
+    <div class="card">
+      <div class="k" style="margin-bottom:6px">Channels</div>
+      <table>
+        <tr><th>Peer</th><th>Capacity</th><th>Local / Remote</th><th style="width:30%">Balance</th></tr>
+        <tr><td>ACINQ</td><td>5,000,000</td><td>2,450,000 / 2,550,000</td><td><div class="bar"><i style="width:49%"></i></div></td></tr>
+        <tr><td>Voltage</td><td>10,000,000</td><td>4,500,000 / 5,500,000</td><td><div class="bar"><i style="width:45%"></i></div></td></tr>
+        <tr><td>Kraken</td><td>3,000,000</td><td>1,800,000 / 1,200,000</td><td><div class="bar"><i style="width:60%"></i></div></td></tr>
+        <tr><td>Wallet of Satoshi</td><td>2,000,000</td><td>1,200,000 / 800,000</td><td><div class="bar"><i style="width:60%"></i></div></td></tr>
+      </table>
+    </div>
+    <div class="card" style="margin-top:14px">
+      <div class="k" style="margin-bottom:6px">Node URI</div>
+      <div class="v mono">02c9f0a1…e47b@lnd7f3a2c9d1b4e8f6.onion:9735</div>
+    </div>`),
   'btcpay-server': () => demoAppShell('BTCPay Server', 'Self-hosted payment processor · signet', '/assets/img/app-icons/btcpay-server.png', `
     <div class="grid">
       <div class="card"><div class="k">Store</div><div class="v">Archipelago Shop</div></div>

neode-ui/src/components/ReceiveBitcoinModal.vue

@@ -3,12 +3,12 @@
         <!-- Method tabs -->
         <div class="flex gap-1 mb-4 p-1 bg-white/5 rounded-lg">
           <button
-            v-for="m in (['onchain', 'lightning', 'ecash'] as const)"
+            v-for="m in (['onchain', 'lightning', 'ecash', 'ark'] as const)"
             :key="m"
             @click="receiveMethod = m"
             class="flex-1 px-2 py-1.5 rounded text-xs font-medium capitalize transition-colors"
             :class="receiveMethod === m ? 'bg-white/15 text-white' : 'text-white/50 hover:text-white/80'"
-          >{{ m === 'onchain' ? t('receiveBitcoin.onChain') : m === 'lightning' ? t('receiveBitcoin.lightning') : t('receiveBitcoin.ecash') }}</button>
+          >{{ m === 'onchain' ? t('receiveBitcoin.onChain') : m === 'lightning' ? t('receiveBitcoin.lightning') : m === 'ecash' ? t('receiveBitcoin.ecash') : 'Ark' }}</button>
         </div>
 
         <!-- Lightning -->
@@ -43,6 +43,19 @@
           </div>
         </div>
 
+        <!-- Ark -->
+        <div v-if="receiveMethod === 'ark'">
+          <div v-if="arkAddress" class="mb-3 p-3 bg-white/5 rounded-lg text-center">
+            <canvas ref="arkQrCanvas" class="mx-auto mb-3 rounded-lg" style="image-rendering: pixelated;"></canvas>
+            <p class="text-white/50 text-xs mb-2">Your Ark address</p>
+            <p class="text-sm font-mono text-white/90 break-all">{{ arkAddress }}</p>
+            <button @click="copyText(arkAddress)" class="mt-2 text-xs text-orange-400 hover:text-orange-300">{{ t('common.copy') }}</button>
+          </div>
+          <div v-else class="mb-3 text-center">
+            <p class="text-white/50 text-sm mb-2">Generate a fresh Ark address to receive off-chain sats instantly.</p>
+          </div>
+        </div>
+
         <!-- Ecash -->
         <div v-if="receiveMethod === 'ecash'">
           <div class="mb-3">
@@ -57,7 +70,7 @@
         <div class="flex gap-3">
           <button @click="close" class="flex-1 glass-button px-4 py-2 rounded-lg text-sm">{{ t('common.close') }}</button>
           <button @click="receive" :disabled="processing" class="flex-1 glass-button glass-button-success px-4 py-2 rounded-lg text-sm font-medium disabled:opacity-50">
-            {{ processing ? t('receiveBitcoin.processing') : receiveMethod === 'onchain' ? t('receiveBitcoin.generateAddress') : receiveMethod === 'lightning' ? t('receiveBitcoin.createInvoice') : t('receiveBitcoin.receive') }}
+            {{ processing ? t('receiveBitcoin.processing') : receiveMethod === 'onchain' ? t('receiveBitcoin.generateAddress') : receiveMethod === 'lightning' ? t('receiveBitcoin.createInvoice') : receiveMethod === 'ark' ? 'Get Ark address' : t('receiveBitcoin.receive') }}
           </button>
         </div>
   </BaseModal>
@@ -75,15 +88,17 @@ const { t } = useI18n()
 defineProps<{ show: boolean }>()
 const emit = defineEmits<{ close: []; received: [] }>()
 
-const receiveMethod = ref<'lightning' | 'onchain' | 'ecash'>('onchain')
+const receiveMethod = ref<'lightning' | 'onchain' | 'ecash' | 'ark'>('onchain')
 const invoiceAmount = ref<number>(0)
 const invoiceMemo = ref('')
 const invoiceResult = ref('')
 const onchainAddress = ref('')
+const arkAddress = ref('')
 const ecashToken = ref('')
 const ecashResult = ref('')
 const onchainQrCanvas = ref<HTMLCanvasElement | null>(null)
 const lightningQrCanvas = ref<HTMLCanvasElement | null>(null)
+const arkQrCanvas = ref<HTMLCanvasElement | null>(null)
 const processing = ref(false)
 const error = ref('')
 
@@ -102,6 +117,7 @@ async function renderQr(data: string, canvas: HTMLCanvasElement | null, prefix =
 function close() {
   invoiceResult.value = ''
   onchainAddress.value = ''
+  arkAddress.value = ''
   ecashToken.value = ''
   ecashResult.value = ''
   error.value = ''
@@ -131,6 +147,11 @@ async function receive() {
       }
       onchainAddress.value = res.address
       nextTick(() => renderQr(res.address, onchainQrCanvas.value, 'bitcoin:'))
+    } else if (receiveMethod.value === 'ark') {
+      const res = await rpcClient.call<{ address: string }>({ method: 'wallet.ark-address' })
+      if (!res.address) throw new Error('barkd did not return an Ark address')
+      arkAddress.value = res.address
+      nextTick(() => renderQr(res.address, arkQrCanvas.value))
     } else {
       if (!ecashToken.value.trim()) { error.value = t('receiveBitcoin.pasteAnEcashToken'); return }
       // The backend auto-detects the token type: a Cashu token (cashuA/B…) is

neode-ui/src/components/SendBitcoinModal.vue

@@ -3,12 +3,12 @@
         <!-- Method tabs -->
         <div class="flex gap-1 mb-4 p-1 bg-white/5 rounded-lg">
           <button
-            v-for="m in (['auto', 'lightning', 'onchain', 'ecash'] as const)"
+            v-for="m in (['auto', 'lightning', 'onchain', 'ecash', 'ark'] as const)"
             :key="m"
             @click="sendMethod = m"
             class="flex-1 px-2 py-1.5 rounded text-xs font-medium capitalize transition-colors"
             :class="sendMethod === m ? 'bg-white/15 text-white' : 'text-white/50 hover:text-white/80'"
-          >{{ m === 'onchain' ? t('sendBitcoin.onChain') : m === 'lightning' ? t('sendBitcoin.lightning') : m === 'ecash' ? t('sendBitcoin.ecash') : t('sendBitcoin.auto') }}</button>
+          >{{ m === 'onchain' ? t('sendBitcoin.onChain') : m === 'lightning' ? t('sendBitcoin.lightning') : m === 'ecash' ? t('sendBitcoin.ecash') : m === 'ark' ? 'Ark' : t('sendBitcoin.auto') }}</button>
         </div>
 
         <div v-if="sendMethod === 'auto'" class="mb-3 p-2 bg-white/5 rounded-lg">
@@ -22,9 +22,9 @@
 
         <div v-if="effectiveMethod !== 'ecash'" class="mb-3">
           <label class="text-white/60 text-sm block mb-1">
-            {{ effectiveMethod === 'lightning' ? t('sendBitcoin.lightningInvoice') : t('sendBitcoin.bitcoinAddress') }}
+            {{ effectiveMethod === 'lightning' ? t('sendBitcoin.lightningInvoice') : effectiveMethod === 'ark' ? 'Ark address, invoice or lightning address' : t('sendBitcoin.bitcoinAddress') }}
           </label>
-          <textarea v-model="dest" rows="2" :placeholder="effectiveMethod === 'lightning' ? 'lnbc...' : 'bc1...'" class="w-full input-glass font-mono"></textarea>
+          <textarea v-model="dest" rows="2" :placeholder="effectiveMethod === 'lightning' ? 'lnbc...' : effectiveMethod === 'ark' ? 'tark1… / lnbc… / user@lnaddress' : 'bc1...'" class="w-full input-glass font-mono"></textarea>
         </div>
 
         <div v-if="ecashToken && effectiveMethod === 'ecash'" class="mb-3 p-2 bg-white/5 rounded-lg">
@@ -39,6 +39,9 @@
         <div v-if="resultHash" class="mb-3 alert-success">
           <p class="text-xs">{{ t('sendBitcoin.paidHash', { hash: resultHash }) }}</p>
         </div>
+        <div v-if="resultArk" class="mb-3 alert-success">
+          <p class="text-xs">{{ resultArk }}</p>
+        </div>
 
         <div v-if="error" class="mb-3 alert-error">{{ error }}</div>
 
@@ -62,13 +65,14 @@ const { t } = useI18n()
 const props = defineProps<{ show: boolean }>()
 const emit = defineEmits<{ close: []; sent: [] }>()
 
-const sendMethod = ref<'auto' | 'lightning' | 'onchain' | 'ecash'>('auto')
+const sendMethod = ref<'auto' | 'lightning' | 'onchain' | 'ecash' | 'ark'>('auto')
 const amount = ref<number>(0)
 const dest = ref('')
 const processing = ref(false)
 const error = ref('')
 const resultTxid = ref('')
 const resultHash = ref('')
+const resultArk = ref('')
 const ecashToken = ref('')
 
 const effectiveMethod = computed(() => {
@@ -84,6 +88,7 @@ function close() {
   error.value = ''
   resultTxid.value = ''
   resultHash.value = ''
+  resultArk.value = ''
   ecashToken.value = ''
   emit('close')
 }
@@ -99,10 +104,20 @@ async function send() {
   ecashToken.value = ''
   resultTxid.value = ''
   resultHash.value = ''
+  resultArk.value = ''
 
   const method = effectiveMethod.value
   try {
-    if (method === 'ecash') {
+    if (method === 'ark') {
+      if (!dest.value.trim()) { error.value = 'Enter an Ark address, invoice or lightning address'; return }
+      await rpcClient.call<{ sent: boolean }>({
+        method: 'wallet.ark-send',
+        params: { destination: dest.value.trim(), amount_sats: amount.value },
+        // Ark sends can wait on round participation.
+        timeout: 130000,
+      })
+      resultArk.value = `Sent ${amount.value.toLocaleString()} sats via Ark`
+    } else if (method === 'ecash') {
       const res = await rpcClient.call<{ token: string }>({
         method: 'wallet.ecash-send',
         params: { amount_sats: amount.value },

neode-ui/src/components/TransactionsModal.vue

@@ -1,5 +1,7 @@
 <template>
-  <BaseModal :show="show" :title="t('transactions.title')" max-width="max-w-2xl" content-class="max-h-[90vh] flex flex-col" @close="close">
+  <!-- Mobile: cap at ~60% of the LIVE visible viewport (not dvh — see
+       syncViewportHeightVar in main.ts) so the tx list doesn't fill the screen. -->
+  <BaseModal :show="show" :title="t('transactions.title')" max-width="max-w-2xl" content-class="max-h-[calc(var(--visual-viewport-height,100dvh)*0.6)] md:max-h-[90vh] flex flex-col" @close="close">
         <!-- Rail filter: instant ecash micro-payments pile up fast and bury
              on-chain/Lightning rows; chips keep the standard txs reachable. -->
         <div v-if="transactions.length > 0" class="flex gap-1.5 mb-3 shrink-0 flex-wrap">

neode-ui/src/views/PeerFiles.vue

@@ -441,16 +441,16 @@
                    switch to the other if it has enough balance. -->
               <div class="space-y-2">
                 <button
-                  v-for="b in (['cashu', 'fedimint'] as const)"
+                  v-for="b in (['cashu', 'fedimint', 'ark'] as const)"
                   :key="b"
                   @click="ecashPlan.chosen = b"
                   :disabled="ecashBalanceOf(b) < getItemPrice(payItem.access)"
                   class="w-full px-4 py-3 rounded-xl flex items-center gap-3 text-left border transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
                   :class="ecashPlan.chosen === b ? 'border-green-400/70 bg-green-400/10' : 'border-white/10 bg-white/5 hover:bg-white/10'"
                 >
-                  <span class="text-xl shrink-0">{{ b === 'cashu' ? '🥜' : '🤝' }}</span>
+                  <span class="text-xl shrink-0">{{ b === 'cashu' ? '🥜' : b === 'fedimint' ? '🤝' : '⚓' }}</span>
                   <span class="flex-1 min-w-0">
-                    <span class="block text-base text-white">{{ b === 'cashu' ? 'Cashu' : 'Fedimint' }}</span>
+                    <span class="block text-base text-white">{{ b === 'cashu' ? 'Cashu' : b === 'fedimint' ? 'Fedimint' : 'Ark' }}</span>
                     <span class="block text-xs text-white/50">Balance: {{ ecashBalanceOf(b).toLocaleString() }} sats<span v-if="ecashBalanceOf(b) < getItemPrice(payItem.access)"> · not enough</span></span>
                   </span>
                   <svg v-if="ecashPlan.chosen === b" class="w-5 h-5 text-green-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -707,10 +707,11 @@ const payMode = ref<'choose' | 'ecash-confirm' | 'qr'>('choose')
 // Ecash confirmation step: after the user picks "pay from this node's ecash",
 // we look at both balances, decide which backend covers the price, and show a
 // confirm screen so they see (and can switch) which ecash is spent (#3).
-type EcashBackend = 'cashu' | 'fedimint'
+type EcashBackend = 'cashu' | 'fedimint' | 'ark'
 const ecashPlan = ref<{
   cashu: number
   fedimint: number
+  ark: number
   total: number
   chosen: EcashBackend | null
 } | null>(null)
@@ -1135,7 +1136,7 @@ async function pollOnchain(address: string) {
 /** Spendable balance for a given ecash backend in the current plan. */
 function ecashBalanceOf(b: EcashBackend): number {
   if (!ecashPlan.value) return 0
-  return b === 'cashu' ? ecashPlan.value.cashu : ecashPlan.value.fedimint
+  return b === 'cashu' ? ecashPlan.value.cashu : b === 'fedimint' ? ecashPlan.value.fedimint : ecashPlan.value.ark
 }
 
 /**
@@ -1152,23 +1153,25 @@ async function prepareEcashPay() {
   try {
     let cashu = 0
     let fedimint = 0
+    let ark = 0
     try {
-      const res = await rpcClient.call<{ cashu_sats?: number; fedimint_sats?: number; total_sats?: number; balance_sats?: number }>({
+      const res = await rpcClient.call<{ cashu_sats?: number; fedimint_sats?: number; ark_sats?: number; total_sats?: number; balance_sats?: number }>({
         method: 'wallet.ecash-balance',
       })
       cashu = res?.cashu_sats ?? res?.balance_sats ?? 0
       fedimint = res?.fedimint_sats ?? 0
+      ark = res?.ark_sats ?? 0
     } catch {
       // Couldn't read balances — let the user try anyway (auto backend).
     }
-    const total = cashu + fedimint
-    // Prefer Cashu when it covers the price, else Fedimint, else leave null
-    // (insufficient — shown in the confirm screen, Confirm disabled).
+    const total = cashu + fedimint + ark
+    // Prefer Cashu when it covers the price, else Fedimint, else Ark, else
+    // leave null (insufficient — shown in the confirm screen, Confirm disabled).
     const chosen: EcashBackend | null =
-      cashu >= price ? 'cashu' : fedimint >= price ? 'fedimint' : null
-    ecashPlan.value = { cashu, fedimint, total, chosen }
+      cashu >= price ? 'cashu' : fedimint >= price ? 'fedimint' : ark >= price ? 'ark' : null
+    ecashPlan.value = { cashu, fedimint, ark, total, chosen }
     if (!chosen) {
-      purchaseError.value = `Not enough ecash: Cashu ${cashu} + Fedimint ${fedimint} sats, need ${price}. Fund a wallet, or pay another way.`
+      purchaseError.value = `Not enough funds: Cashu ${cashu} + Fedimint ${fedimint} + Ark ${ark} sats, need ${price}. Fund a wallet, or pay another way.`
     }
     payMode.value = 'ecash-confirm'
   } finally {

neode-ui/src/views/Server.vue

@@ -630,7 +630,11 @@ async function applyDnsConfig(customServers: string) {
     const params: { provider: DnsProviderValue; servers?: string[] } = { provider }
     if (provider === 'custom') { params.servers = customServers.split(',').map(s => s.trim()).filter(s => s.length > 0) }
     const res = await rpcClient.configureDns(params)
-    networkData.value.dnsProvider = res.provider; networkData.value.dnsServers = res.servers; networkData.value.dnsDoH = res.doh_enabled
+    // Never trust the response shape: an undefined `servers` used to reach the
+    // dnsDisplayLabel computed and crash the whole page render on `.length`.
+    networkData.value.dnsProvider = res?.provider ?? provider
+    networkData.value.dnsServers = Array.isArray(res?.servers) ? res.servers : (params.servers ?? [])
+    networkData.value.dnsDoH = !!res?.doh_enabled
     showDnsModal.value = false
   } catch (e) { dnsError.value = e instanceof Error ? e.message : 'DNS configuration failed.' } finally { dnsApplying.value = false }
 }

neode-ui/src/views/server/ServerModals.vue

@@ -94,6 +94,7 @@
   </Teleport>
 
   <!-- WiFi Scan Modal -->
+  <Teleport to="body">
   <div v-if="showWifiModal" class="fixed inset-0 bg-black/60 backdrop-blur-md z-50 flex items-center justify-center p-4" @click.self="$emit('closeWifi')">
     <div class="glass-card p-6 w-full max-w-md">
       <div class="flex items-center justify-between mb-4">
@@ -161,8 +162,10 @@
       </div>
     </div>
   </div>
+  </Teleport>
 
   <!-- DNS Configuration Modal -->
+  <Teleport to="body">
   <div v-if="showDnsModal" class="fixed inset-0 bg-black/60 backdrop-blur-md z-50 flex items-center justify-center p-4" @click.self="$emit('closeDns')">
     <div class="glass-card p-6 w-full max-w-md">
       <div class="flex items-center justify-between mb-4">
@@ -223,6 +226,7 @@
       </div>
     </div>
   </div>
+  </Teleport>
 </template>
 
 <script setup lang="ts">