feat(wallet): Lightning gets the arrival screen; copy buttons unified

- lnd.createinvoice now returns r_hash_hex; new lnd.invoicestatus RPC
  looks the invoice up (SETTLED + amt_paid_sat). E2E-verified on this
  box: real invoice minted, status polls settled:false until paid.
- Receive modal: Lightning polls settlement every 3s and flips to the
  on-chain-style success view — straight to the green check + amount
  (no broadcast step; settlement is final). Raw bolt11 text removed:
  QR + CopyButton only. State fully reset per open/close.
- CopyButton is now the wallet's only copy affordance: the ark-address
  and ecash-token holdouts swapped in, their ad-hoc handlers deleted.

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

core/archipelago/src/api/rpc/assistant_chat.rs

@@ -344,6 +344,7 @@ impl RpcHandler {
             "content.indeehub-projects" => self.handle_content_indeehub_projects().await,
             "system.settings.get" => self.handle_system_settings_get(params).await,
             "system.settings.set" => self.handle_system_settings_set(params).await,
+            "system.node-ca.generate" => self.handle_system_node_ca_generate().await,
             "system.kiosk-display.get" => self.handle_system_kiosk_display_get().await,
             "system.kiosk-display.set" => self.handle_system_kiosk_display_set(params).await,
             "bitcoin.relay-update-settings" => {

core/archipelago/src/api/rpc/dispatcher.rs

@@ -133,6 +133,7 @@ impl RpcHandler {
             "lnd.sendcoins" => self.handle_lnd_sendcoins(params).await,
             "lnd.estimatefee" => self.handle_lnd_estimatefee(params).await,
             "lnd.createinvoice" => self.handle_lnd_createinvoice(params).await,
+            "lnd.invoicestatus" => self.handle_lnd_invoicestatus(params).await,
             "lnd.payinvoice" => self.handle_lnd_payinvoice(params).await,
             "lnd.paymentstatus" => self.handle_lnd_paymentstatus(params).await,
             "lnd.create-psbt" => self.handle_lnd_create_psbt(params).await,
@@ -503,6 +504,7 @@ impl RpcHandler {
             "ai.permissions.set" => self.handle_ai_permissions_set(params).await,
             "system.settings.get" => self.handle_system_settings_get(params).await,
             "system.settings.set" => self.handle_system_settings_set(params).await,
+            "system.node-ca.generate" => self.handle_system_node_ca_generate().await,
             "system.kiosk-display.get" => self.handle_system_kiosk_display_get().await,
             "system.kiosk-display.set" => self.handle_system_kiosk_display_set(params).await,
 

core/archipelago/src/api/rpc/lnd/wallet.rs

@@ -607,9 +607,77 @@ impl RpcHandler {
             .unwrap_or("")
             .to_string();
 
+        // LND returns r_hash base64-encoded; the lookup endpoint the Receive
+        // flow polls (`lnd.invoicestatus`) wants it hex — hand the UI the
+        // ready-to-use form.
+        let r_hash_hex = {
+            use base64::Engine as _;
+            body.get("r_hash")
+                .and_then(|v| v.as_str())
+                .and_then(|b64| base64::engine::general_purpose::STANDARD.decode(b64).ok())
+                .map(hex::encode)
+                .unwrap_or_default()
+        };
+
         Ok(serde_json::json!({
             "payment_request": payment_request,
             "amount_sats": amount_sats,
+            "r_hash_hex": r_hash_hex,
+        }))
+    }
+
+    /// lnd.invoicestatus — is this invoice settled yet? Polled by the wallet's
+    /// Receive flow so a Lightning payment gets the same "money has arrived"
+    /// success screen as on-chain (minus the broadcast step: settlement is
+    /// final). Params: `{ "r_hash_hex": string }`.
+    pub(in crate::api::rpc) async fn handle_lnd_invoicestatus(
+        &self,
+        params: Option<serde_json::Value>,
+    ) -> Result<serde_json::Value> {
+        let params = params.ok_or_else(|| anyhow::anyhow!("Missing params"))?;
+        let r_hash_hex = params
+            .get("r_hash_hex")
+            .and_then(|v| v.as_str())
+            .ok_or_else(|| anyhow::anyhow!("Missing 'r_hash_hex' parameter"))?;
+        if r_hash_hex.len() != 64 || !r_hash_hex.chars().all(|c| c.is_ascii_hexdigit()) {
+            return Err(anyhow::anyhow!("r_hash_hex must be 64 hex characters"));
+        }
+
+        let (client, macaroon_hex) = self.lnd_client().await?;
+        let resp = client
+            .get(format!("{LND_REST_BASE_URL}/v1/invoice/{r_hash_hex}"))
+            .header("Grpc-Metadata-macaroon", &macaroon_hex)
+            .send()
+            .await
+            .context("Failed to query invoice")?;
+        let status = resp.status();
+        let body: serde_json::Value = resp
+            .json()
+            .await
+            .context("Failed to parse invoice lookup response")?;
+        if !status.is_success() {
+            let msg = body
+                .get("message")
+                .and_then(|v| v.as_str())
+                .unwrap_or("Unknown error");
+            return Err(anyhow::anyhow!("Invoice lookup failed: {}", msg));
+        }
+
+        let settled = body
+            .get("state")
+            .and_then(|v| v.as_str())
+            .map(|s| s == "SETTLED")
+            .unwrap_or_else(|| body.get("settled").and_then(|v| v.as_bool()).unwrap_or(false));
+        let amt_paid_sat = body
+            .get("amt_paid_sat")
+            .and_then(|v| v.as_str())
+            .and_then(|s| s.parse::<i64>().ok())
+            .or_else(|| body.get("amt_paid_sat").and_then(|v| v.as_i64()))
+            .unwrap_or(0);
+
+        Ok(serde_json::json!({
+            "settled": settled,
+            "amt_paid_sat": amt_paid_sat,
         }))
     }
 

core/archipelago/src/api/rpc/system/handlers.rs

@@ -1248,6 +1248,30 @@ impl RpcHandler {
         }
     }
 
+    /// system.node-ca.generate — run the node's (idempotent) CA setup so the
+    /// dashboard can offer certificate generation as a button. WebUI rule:
+    /// users must never be pointed at a terminal; the script reuses an
+    /// existing CA and only reissues the leaf, so re-running is safe.
+    pub(in crate::api::rpc) async fn handle_system_node_ca_generate(
+        &self,
+    ) -> Result<serde_json::Value> {
+        let script = "/opt/archipelago/scripts/setup-node-ca.sh";
+        if tokio::fs::metadata(script).await.is_err() {
+            anyhow::bail!(
+                "The certificate setup script is not on this node yet — it arrives with the next update."
+            );
+        }
+        let status = host_sudo(&["/usr/bin/bash", script]).await?;
+        if !status.success() {
+            anyhow::bail!(
+                "Certificate generation failed (exit {:?}) — see the node log for detail",
+                status.code()
+            );
+        }
+        info!("Node CA generated/reissued via dashboard");
+        Ok(serde_json::json!({ "generated": true }))
+    }
+
     /// system.kiosk-display.get — Current kiosk display preset + whether this
     /// node has a kiosk at all (no kiosk unit -> the Settings section hides).
     pub(in crate::api::rpc) async fn handle_system_kiosk_display_get(

neode-ui/src/components/ReceiveBitcoinModal.vue

@@ -21,11 +21,25 @@
             <label class="text-white/60 text-sm block mb-1">{{ t('receiveBitcoin.memoOptional') }}</label>
             <input v-model="invoiceMemo" type="text" :placeholder="t('receiveBitcoin.memoPlaceholder')" class="w-full input-glass" />
           </div>
-          <div v-if="invoiceResult" class="mb-3 p-3 bg-white/5 rounded-lg text-center">
+          <!-- Paid: the invoice did its job — straight to the green check
+               (no broadcast step: Lightning settlement is final) -->
+          <div v-if="invoicePaid" class="mb-3 p-6 bg-white/5 rounded-lg text-center">
+            <div class="flex justify-center mb-4">
+              <div class="w-16 h-16 rounded-full flex items-center justify-center bg-green-500/15">
+                <svg class="w-8 h-8 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
+                </svg>
+              </div>
+            </div>
+            <p class="text-lg font-semibold text-white mb-1">{{ t('receiveBitcoin.paymentConfirmed') }}</p>
+            <p v-if="invoicePaid.amountSats > 0" class="text-2xl font-semibold text-white/95 mb-2">
+              {{ invoicePaid.amountSats.toLocaleString() }} sats
+            </p>
+          </div>
+          <div v-else-if="invoiceResult" class="mb-3 p-3 bg-white/5 rounded-lg text-center">
             <canvas ref="lightningQrCanvas" class="mx-auto mb-3 rounded-lg" style="image-rendering: pixelated;"></canvas>
-            <p class="text-white/50 text-xs mb-1">{{ t('receiveBitcoin.invoiceShareLabel') }}</p>
-            <p class="text-xs font-mono text-white/80 break-all">{{ invoiceResult }}</p>
-            <CopyButton :value="invoiceResult" :label="t('common.copy')" class="mt-2" />
+            <p class="text-white/50 text-xs mb-2">{{ t('receiveBitcoin.invoiceShareLabel') }}</p>
+            <CopyButton :value="invoiceResult" :label="t('common.copy')" />
           </div>
         </div>
 
@@ -147,6 +161,9 @@ watch(() => props.show, (open) => {
     return
   }
   paymentSeen.value = null
+  invoicePaid.value = null
+  invoiceRHash.value = ''
+  stopWatchingInvoice()
   // Blank slate on every open: a leftover amount/memo/token or a previous
   // invoice quietly carrying into a new receive flow is exactly the stale-
   // state class the operator flagged on the send modal (2026-08-05).
@@ -238,6 +255,46 @@ async function checkForPayment() {
 
 onUnmounted(stopWatchingPayment)
 
+// Lightning settlement watch — the on-chain pattern minus the broadcast
+// step: an invoice is either open or SETTLED (final), so the success view
+// goes straight to the green check.
+const invoicePaid = ref<null | { amountSats: number }>(null)
+const invoiceRHash = ref('')
+let invoiceTimer: ReturnType<typeof setInterval> | null = null
+
+function stopWatchingInvoice() {
+  if (invoiceTimer) {
+    clearInterval(invoiceTimer)
+    invoiceTimer = null
+  }
+}
+
+function startWatchingInvoice() {
+  stopWatchingInvoice()
+  invoiceTimer = setInterval(() => void checkInvoice(), 3000)
+}
+
+async function checkInvoice() {
+  if (!props.show || !invoiceRHash.value) {
+    stopWatchingInvoice()
+    return
+  }
+  try {
+    const res = await rpcClient.call<{ settled: boolean; amt_paid_sat: number }>({
+      method: 'lnd.invoicestatus',
+      params: { r_hash_hex: invoiceRHash.value },
+    })
+    if (!res.settled) return
+    invoicePaid.value = { amountSats: res.amt_paid_sat || invoiceAmount.value }
+    stopWatchingInvoice()
+    emit('received')
+  } catch {
+    // Transient poll failure — keep watching.
+  }
+}
+
+onUnmounted(stopWatchingInvoice)
+
 async function renderQr(data: string, canvas: HTMLCanvasElement | null, prefix = '') {
   if (!canvas || !data) return
   try {
@@ -272,11 +329,14 @@ async function receive() {
       // lnd.createinvoice fail with connection-refused (FED-08 follow-up).
       if (!(await lightning.requireLightningReady('receive'))) return
       if (!invoiceAmount.value) { error.value = t('receiveBitcoin.enterAnAmount'); return }
-      const res = await rpcClient.call<{ payment_request: string }>({
+      const res = await rpcClient.call<{ payment_request: string; r_hash_hex?: string }>({
         method: 'lnd.createinvoice',
         params: { amount_sats: invoiceAmount.value, memo: invoiceMemo.value || undefined },
       })
       invoiceResult.value = res.payment_request
+      invoiceRHash.value = res.r_hash_hex || ''
+      invoicePaid.value = null
+      if (invoiceRHash.value) startWatchingInvoice()
       nextTick(() => renderQr(res.payment_request, lightningQrCanvas.value, 'lightning:'))
     } else if (receiveMethod.value === 'onchain') {
       const res = await rpcClient.call<{ address: string }>({ method: 'lnd.newaddress' })

neode-ui/src/components/SendBitcoinModal.vue

@@ -227,7 +227,7 @@
             <canvas ref="tokenQrCanvas" class="rounded-lg bg-white p-2"></canvas>
           </div>
           <p class="text-xs font-mono text-white/80 break-all">{{ ecashToken }}</p>
-          <button @click="copyText(ecashToken)" class="mt-2 text-xs text-orange-400 hover:text-orange-300">{{ t('common.copy') }}</button>
+          <CopyButton :value="ecashToken" :label="t('common.copy')" size="sm" class="mt-2" />
         </div>
 
         <div v-if="error" class="mb-3 alert-error">{{ error }}</div>
@@ -604,10 +604,6 @@ function sendAnother() {
   error.value = ''
 }
 
-function copyText(text: string) {
-  navigator.clipboard.writeText(text).catch(() => {})
-}
-
 const tokenQrCanvas = ref<HTMLCanvasElement | null>(null)
 watch(ecashToken, async (token) => {
   if (!token) return

neode-ui/src/components/WalletSettingsModal.vue

@@ -202,11 +202,7 @@
           </div>
           <div v-if="arkAddress" class="mt-2 flex items-center gap-2 p-3 bg-white/5 rounded-lg">
             <span class="text-xs font-mono text-white/90 break-all flex-1">{{ arkAddress }}</span>
-            <button @click="copyArkAddress" class="p-2 rounded-lg hover:bg-white/10 text-white/50 hover:text-white shrink-0" :title="arkCopied ? 'Copied' : 'Copy'">
-              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
-              </svg>
-            </button>
+            <CopyButton :value="arkAddress" icon-only class="shrink-0" />
           </div>
         </div>
 
@@ -277,6 +273,7 @@
 </template>
 
 <script setup lang="ts">
+import CopyButton from '@/components/CopyButton.vue'
 import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { rpcClient } from '@/api/rpc-client'
@@ -349,7 +346,6 @@ const arkStatus = ref<ArkStatus | null>(null)
 const arkBalance = ref<ArkBalance | null>(null)
 const arkConfig = ref({ network: 'signet', ark_server: '', esplora: '' })
 const arkAddress = ref('')
-const arkCopied = ref(false)
 const loadingArk = ref(false)
 const savingArk = ref(false)
 const arkBoarding = ref(false)
@@ -505,22 +501,11 @@ async function fetchArkAddress(onchain: boolean) {
       params: { onchain },
     })
     arkAddress.value = res.address
-    arkCopied.value = false
   } catch (err: unknown) {
     arkError.value = err instanceof Error ? err.message : 'Failed to get address'
   }
 }
 
-async function copyArkAddress() {
-  if (!arkAddress.value) return
-  try {
-    await navigator.clipboard.writeText(arkAddress.value)
-    arkCopied.value = true
-  } catch {
-    /* clipboard unavailable (http) — the address is selectable */
-  }
-}
-
 async function boardArk() {
   arkBoarding.value = true
   arkError.value = ''

neode-ui/src/components/federation/NetworkMap3D.vue

@@ -702,11 +702,22 @@ function applyGraph() {
   const reqs = [...(props.requests ?? [])].sort((a, b) => (a.id < b.id ? -1 : a.id > b.id ? 1 : 0))
   const reqRing = requestRingRadius(peerNodes.length)
   const seenReqs = new Set<string>()
+  // Requests are a call to action: cluster them tightly at one stage angle
+  // (instead of spread around the orbit, where they could sit BEHIND the
+  // globe — reading as a mis-scaled chart the user had to rotate by hand)
+  // and steer the camera to face them when a new one arrives.
+  const REQUEST_STAGE_ANGLE = 0.35
+  const reqSpacing = Math.min(0.5, (Math.PI * 0.9) / Math.max(reqs.length, 1))
+  let newRequestArrived = false
   reqs.forEach((req, i) => {
     seenReqs.add(req.id)
-    const slot = { angle: (i / reqs.length) * Math.PI * 2 + 0.35, ringRadius: reqRing }
+    const slot = {
+      angle: REQUEST_STAGE_ANGLE + (i - (reqs.length - 1) / 2) * reqSpacing,
+      ringRadius: reqRing,
+    }
     const existing = reqMap.get(req.id)
     if (!existing) {
+      newRequestArrived = true
       const vis = createRequest(req, slot)
       if (introPlayed) {
         if (staticMode) vis.p = 1
@@ -738,6 +749,20 @@ function applyGraph() {
   for (const [id, vis] of reqMap) {
     if (!seenReqs.has(id)) killRequest(vis)
   }
+  // Face the request cluster when a new one arrives. Depth for a node at
+  // world angle a is proportional to sin(a − rotY): front-center (nearest
+  // to the viewer, horizontally centred) is a − rotY = −π/2. Only on
+  // ARRIVAL, so a user who rotates away afterwards isn't fought.
+  if (newRequestArrived && introPlayed) {
+    const target = nearestAngle(cam.rotY, REQUEST_STAGE_ANGLE + Math.PI / 2)
+    for (const t of spinTween) t.kill()
+    if (staticMode && !tickerAttached) {
+      cam.rotY = target
+      render()
+    } else {
+      gsap.to(cam, { rotY: target, duration: 1.1, ease: motionTokens.ease.inOut, overwrite: 'auto' })
+    }
+  }
 
   // --- orbit guide rings ---
   const desiredRings: { radius: number; kind: 'peer' | 'request' }[] = []

neode-ui/src/views/settings/NodeCertificateSection.vue

@@ -26,7 +26,30 @@ async function computeFingerprint(pem: string): Promise<string> {
     .join(':')
 }
 
-onMounted(async () => {
+const generating = ref(false)
+const generateError = ref('')
+
+// WebUI rule: never point a user at a terminal — the backend runs the
+// (idempotent) CA setup script for us.
+async function generateCa() {
+  generating.value = true
+  generateError.value = ''
+  try {
+    const { rpcClient } = await import('@/api/rpc-client')
+    await rpcClient.call({ method: 'system.node-ca.generate', timeout: 60000 })
+    loading.value = true
+    await probe()
+    if (!caAvailable.value) {
+      generateError.value = 'Generation reported success but the certificate is not being served yet — try reloading in a few seconds.'
+    }
+  } catch (e: unknown) {
+    generateError.value = e instanceof Error ? e.message : 'Certificate generation failed'
+  } finally {
+    generating.value = false
+  }
+}
+
+async function probe() {
   try {
     const res = await fetch('/ca.crt', { cache: 'no-store' })
     if (!res.ok) throw new Error(`HTTP ${res.status}`)
@@ -48,7 +71,9 @@ onMounted(async () => {
   } finally {
     loading.value = false
   }
-})
+}
+
+onMounted(probe)
 </script>
 
 <template>
@@ -70,9 +95,13 @@ onMounted(async () => {
       v-else-if="!caAvailable"
       class="p-3 bg-white/5 border border-white/10 rounded-lg text-sm text-white/70"
     >
-      This node has not generated a certificate authority yet. Run
-      <code class="px-1 py-0.5 bg-black/30 rounded text-xs">scripts/setup-node-ca.sh</code>
-      on the node, then reload this page.
+      <p class="mb-3">This node has not generated its certificate yet.</p>
+      <button
+        :disabled="generating"
+        @click="generateCa"
+        class="px-4 py-2 glass-button rounded-lg text-sm font-semibold disabled:opacity-60"
+      >{{ generating ? 'Generating…' : 'Generate certificate' }}</button>
+      <p v-if="generateError" class="mt-2 text-xs text-orange-300/90">{{ generateError }}</p>
     </div>
 
     <div v-else class="space-y-4">

neode-ui/src/views/settings/RoutstrBudgetSection.vue

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue'
+import { rpcClient } from '@/api/rpc-client'
+
+// Routstr prepaid budget (D-05): the assistant may only spend against an
+// operator-set sats ceiling. Zero allowance = Routstr never selected. This
+// panel is the ONLY UI for that ceiling; it fronts assistant.budget-get/set.
+const loaded = ref(false)
+const allowance = ref(0)
+const spent = ref(0)
+const remaining = ref(0)
+const draft = ref('')
+const applying = ref(false)
+const error = ref('')
+const savedTick = ref(false)
+
+const active = computed(() => allowance.value > 0)
+
+async function refresh() {
+  const res = await rpcClient.call<{ allowance_sats: number; spent_sats: number; remaining_sats: number }>({
+    method: 'assistant.budget-get',
+  })
+  allowance.value = res.allowance_sats
+  spent.value = res.spent_sats
+  remaining.value = res.remaining_sats
+  draft.value = String(res.allowance_sats)
+}
+
+onMounted(async () => {
+  try {
+    await refresh()
+    loaded.value = true
+  } catch { /* backend without the RPC — section hides */ }
+})
+
+async function apply() {
+  const parsed = Number(draft.value)
+  if (!Number.isInteger(parsed) || parsed < 0) {
+    error.value = 'Enter a whole number of sats (0 disables Routstr).'
+    return
+  }
+  applying.value = true
+  error.value = ''
+  try {
+    await rpcClient.call({ method: 'assistant.budget-set', params: { allowance_sats: parsed } })
+    await refresh()
+    savedTick.value = true
+    setTimeout(() => { savedTick.value = false }, 2500)
+  } catch (e: unknown) {
+    error.value = e instanceof Error ? e.message : 'Failed to save budget'
+  } finally {
+    applying.value = false
+  }
+}
+</script>
+
+<template>
+  <div v-if="loaded" class="glass-card px-6 py-6 mb-6">
+    <div class="flex items-center gap-3 mb-2">
+      <h2 class="text-xl font-semibold text-white/96">Routstr AI Budget</h2>
+      <span
+        class="text-xs font-mono px-2 py-0.5 rounded"
+        :class="active ? 'bg-emerald-500/20 text-emerald-300' : 'bg-white/10 text-white/50'"
+      >{{ active ? 'enabled' : 'off' }}</span>
+    </div>
+    <p class="text-sm text-white/60 mb-5">
+      Routstr is pay-per-use AI inference, paid in sats over Cashu, used when your local
+      model can't take a request. It never spends without a prepaid ceiling you set here —
+      at <span class="font-mono">0</span> it is completely disabled. The assistant stops
+      when the ceiling is reached; raising it widens the remainder without erasing the
+      spend history.
+    </p>
+
+    <div class="grid grid-cols-3 gap-4 mb-5 text-center">
+      <div class="rounded-lg bg-white/5 py-3">
+        <div class="text-lg font-mono text-white/90">{{ allowance.toLocaleString() }}</div>
+        <div class="text-xs text-white/50 mt-1">Allowance (sats)</div>
+      </div>
+      <div class="rounded-lg bg-white/5 py-3">
+        <div class="text-lg font-mono text-white/90">{{ spent.toLocaleString() }}</div>
+        <div class="text-xs text-white/50 mt-1">Spent</div>
+      </div>
+      <div class="rounded-lg bg-white/5 py-3">
+        <div class="text-lg font-mono" :class="remaining > 0 ? 'text-emerald-300' : 'text-white/60'">{{ remaining.toLocaleString() }}</div>
+        <div class="text-xs text-white/50 mt-1">Remaining</div>
+      </div>
+    </div>
+
+    <div class="flex items-end gap-3">
+      <div class="flex-1 max-w-xs">
+        <label class="block text-sm text-white/60 mb-1" for="routstr-allowance">Set allowance (sats)</label>
+        <input
+          id="routstr-allowance"
+          v-model="draft"
+          type="number"
+          min="0"
+          step="1"
+          inputmode="numeric"
+          class="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-2.5 text-sm text-white font-mono placeholder-white/30 focus:outline-none focus:border-white/30 transition-colors"
+          @keydown.enter="apply"
+        />
+      </div>
+      <button
+        :disabled="applying || draft === String(allowance)"
+        @click="apply"
+        class="px-4 py-2 glass-button rounded-lg text-sm font-medium disabled:opacity-50"
+      >{{ applying ? 'Saving…' : 'Save' }}</button>
+      <span v-if="savedTick" class="text-sm text-emerald-300 pb-2">Saved</span>
+    </div>
+    <div v-if="error" class="mt-3 alert-error text-sm">{{ error }}</div>
+  </div>
+</template>

neode-ui/src/views/settings/SystemSection.vue

@@ -3,6 +3,7 @@ import InterfaceModeSection from '@/views/settings/InterfaceModeSection.vue'
 import KioskDisplaySection from '@/views/settings/KioskDisplaySection.vue'
 import ClaudeAuthSection from '@/views/settings/ClaudeAuthSection.vue'
 import AIDataAccessSection from '@/views/settings/AIDataAccessSection.vue'
+import RoutstrBudgetSection from '@/views/settings/RoutstrBudgetSection.vue'
 import WebhookSection from '@/views/settings/WebhookSection.vue'
 import TelemetrySection from '@/views/settings/TelemetrySection.vue'
 import NodeCertificateSection from '@/views/settings/NodeCertificateSection.vue'
@@ -15,6 +16,7 @@ import SystemDangerZone from '@/views/settings/SystemDangerZone.vue'
   <InterfaceModeSection />
   <KioskDisplaySection />
   <ClaudeAuthSection />
+  <RoutstrBudgetSection />
   <AIDataAccessSection />
   <WebhookSection />
   <TelemetrySection />