security+feat: v1.3.0 — pentest remediation, container reliability, UI overhaul

Security (33 pentest findings addressed):
- CRITICAL: backend binds 127.0.0.1, path traversal in tor.rs/dwn fixed
- HIGH: federation requires signatures, XSS login redirect, RBAC viewer restricted
- HIGH: tar slip prevention, S3 SSRF validation, backup ID validation
- MEDIUM: remember-me random secret, TOTP session rotation, password re-auth
- LOW: CSP unsafe-inline removed, CORS dev-only, onion/webhook validation

Container reliability:
- Memory limits on all 37 containers (OOM prevention)
- Exited vs stopped state distinction with health-aware status badges
- Crash recovery coordination (no more restart cascade)
- User-stopped tracking survives reboots
- Tiered boot recovery (databases → core → services → apps)

UI:
- Wallet TransactionsModal, health-aware app status badges
- Restart button on containers, exited/crashed red state
- Mesh view overhaul, glass button updates, BaseModal/ToggleSwitch
- Apps sticky header removed, dev faucet, mutable mock wallet

Infrastructure:
- LND REST port 8080 exposed over Tor (LND Connect fix)
- Nginx cookie_session fix, deploy script Tor config updated
- Dev environment: podman auto-start, boot mode simulation

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

neode-ui/src/components/AppLauncherOverlay.vue

@@ -141,15 +141,15 @@
                     </div>
                   </div>
 
-                  <div v-if="paymentError" class="mb-3 p-2 bg-red-500/15 border border-red-500/20 rounded-lg">
-                    <p class="text-red-400 text-xs">{{ paymentError }}</p>
+                  <div v-if="paymentError" class="mb-3 alert-error">
+                    <p class="text-xs">{{ paymentError }}</p>
                   </div>
 
                   <div class="flex gap-3">
                     <button @click="rejectPayment" class="flex-1 px-4 py-2.5 bg-white/5 border border-white/10 rounded-lg text-sm text-white/70 hover:bg-white/10 transition-colors">
                       Deny
                     </button>
-                    <button @click="approvePayment" :disabled="paymentProcessing" class="flex-1 px-4 py-2.5 bg-orange-500/20 border border-orange-500/30 rounded-lg text-sm font-medium text-orange-300 hover:bg-orange-500/30 transition-colors disabled:opacity-50">
+                    <button @click="approvePayment" :disabled="paymentProcessing" class="flex-1 px-4 py-2.5 glass-button glass-button-warning rounded-lg text-sm font-medium disabled:opacity-50">
                       {{ paymentProcessing ? 'Paying...' : 'Approve' }}
                     </button>
                   </div>

neode-ui/src/components/BaseModal.vue

@@ -0,0 +1,89 @@
+<template>
+  <Teleport to="body">
+    <Transition name="modal">
+      <div
+        v-if="show"
+        class="fixed inset-0 flex items-center justify-center p-4"
+        :class="zClass"
+        @click.self="close"
+      >
+        <div class="absolute inset-0 bg-black/60 backdrop-blur-md"></div>
+        <div
+          ref="modalRef"
+          class="glass-card p-6 w-full relative z-10"
+          :class="[maxWidth, contentClass]"
+          role="dialog"
+          aria-modal="true"
+          @click.stop
+        >
+          <div class="flex items-start justify-between gap-4 mb-4 shrink-0">
+            <h3 class="text-xl font-semibold text-white">{{ title }}</h3>
+            <button
+              @click="close"
+              class="p-2 rounded-lg hover:bg-white/10 text-white/70 hover:text-white transition-colors"
+              aria-label="Close"
+            >
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+          <slot />
+          <slot name="footer" />
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useModalKeyboard } from '@/composables/useModalKeyboard'
+
+const props = withDefaults(defineProps<{
+  show: boolean
+  title: string
+  maxWidth?: string
+  zIndex?: string
+  contentClass?: string
+}>(), {
+  maxWidth: 'max-w-md',
+  zIndex: 'z-[3000]',
+  contentClass: '',
+})
+
+const emit = defineEmits<{
+  close: []
+}>()
+
+const modalRef = ref<HTMLElement | null>(null)
+
+const zClass = computed(() => props.zIndex)
+
+function close() {
+  emit('close')
+}
+
+useModalKeyboard(modalRef, computed(() => props.show), close)
+</script>
+
+<style scoped>
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity 0.2s ease;
+}
+.modal-enter-from,
+.modal-leave-to {
+  opacity: 0;
+}
+.modal-enter-active .glass-card,
+.modal-leave-active .glass-card {
+  transition: transform 0.2s ease;
+}
+.modal-enter-from .glass-card {
+  transform: scale(0.95);
+}
+.modal-leave-to .glass-card {
+  transform: scale(0.95);
+}
+</style>

neode-ui/src/components/EasyHome.vue

@@ -12,7 +12,18 @@
       :style="{ '--card-stagger': idx }"
     >
       <div class="flex items-start justify-between mb-4">
-        <div class="w-10 h-10 rounded-xl bg-white/10 flex items-center justify-center shrink-0">
+        <!-- App icons for goals with required apps, emoji fallback otherwise -->
+        <div v-if="goalAppIcons(goal).length > 0" class="flex items-center gap-1.5 shrink-0">
+          <img
+            v-for="icon in goalAppIcons(goal)"
+            :key="icon.appId"
+            :src="icon.url"
+            :alt="icon.appId"
+            class="w-8 h-8 rounded-lg object-contain bg-white/5 border border-white/10 p-0.5"
+            @error="($event.target as HTMLImageElement).style.display = 'none'"
+          />
+        </div>
+        <div v-else class="w-10 h-10 rounded-xl bg-white/10 flex items-center justify-center shrink-0">
           <span class="text-xl">{{ goalIcon(goal.icon) }}</span>
         </div>
         <span class="goal-status-badge" :class="statusBadgeClass(goal.id)">
@@ -28,7 +39,7 @@
       <div class="flex items-center justify-between">
         <span class="text-xs text-white/40">{{ goal.estimatedTime }}</span>
         <span class="text-xs text-white/50 flex items-center gap-1">
-          {{ goal.difficulty === 'beginner' ? 'Beginner' : 'Intermediate' }}
+          {{ goal.difficulty === 'beginner' ? t('easyHome.beginner') : t('easyHome.intermediate') }}
         </span>
       </div>
     </RouterLink>
@@ -37,18 +48,40 @@
 
 <script setup lang="ts">
 import { RouterLink } from 'vue-router'
+import { useI18n } from 'vue-i18n'
 import { GOALS } from '@/data/goals'
 import { useGoalStore } from '@/stores/goals'
+import type { GoalDefinition } from '@/types/goals'
 
 defineProps<{
   show: boolean
   animate: boolean
 }>()
 
+const { t } = useI18n()
 const goalStore = useGoalStore()
 const goals = GOALS
 const goalStatuses = goalStore.goalStatuses
 
+/** Map appId to its icon file path under /assets/img/app-icons/ */
+const APP_ICON_MAP: Record<string, string> = {
+  'bitcoin-knots': '/assets/img/app-icons/bitcoin-knots.webp',
+  lnd: '/assets/img/app-icons/lnd.svg',
+  'btcpay-server': '/assets/img/app-icons/btcpay-server.png',
+  immich: '/assets/img/app-icons/immich.png',
+  nextcloud: '/assets/img/app-icons/nextcloud.webp',
+  fedimint: '/assets/img/app-icons/fedimint.png',
+  mempool: '/assets/img/app-icons/mempool.webp',
+  electrs: '/assets/img/app-icons/electrs.svg',
+  'nostr-rs-relay': '/assets/img/app-icons/nostr-rs-relay.svg',
+}
+
+function goalAppIcons(goal: GoalDefinition): { appId: string; url: string }[] {
+  return goal.requiredApps
+    .filter((appId) => APP_ICON_MAP[appId] !== undefined)
+    .map((appId) => ({ appId, url: APP_ICON_MAP[appId] as string }))
+}
+
 function goalIcon(icon: string): string {
   const icons: Record<string, string> = {
     shop: '🏪',
@@ -64,9 +97,9 @@ function goalIcon(icon: string): string {
 
 function statusLabel(goalId: string): string {
   const status = goalStatuses[goalId]
-  if (status === 'completed') return 'Done'
-  if (status === 'in-progress') return 'In Progress'
-  return 'Start'
+  if (status === 'completed') return t('easyHome.done')
+  if (status === 'in-progress') return t('easyHome.inProgress')
+  return t('easyHome.start')
 }
 
 function statusBadgeClass(goalId: string): string {

neode-ui/src/components/HelpGuideModal.vue

@@ -1,29 +1,5 @@
 <template>
-  <Teleport to="body">
-    <Transition name="modal">
-      <div
-        v-if="show"
-        class="fixed inset-0 z-[3000] flex items-center justify-center p-4"
-        @click="$emit('close')"
-      >
-        <div class="absolute inset-0 bg-black/60 backdrop-blur-sm"></div>
-        <div
-          ref="modalRef"
-          @click.stop
-          class="glass-card p-6 max-w-lg w-full relative z-10 max-h-[80vh] overflow-y-auto"
-        >
-          <div class="flex items-start justify-between gap-4 mb-4">
-            <h3 class="text-xl font-semibold text-white">{{ title }}</h3>
-            <button
-              @click="$emit('close')"
-              class="p-2 rounded-lg hover:bg-white/10 text-white/70 hover:text-white transition-colors"
-              aria-label="Close"
-            >
-              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-              </svg>
-            </button>
-          </div>
+  <BaseModal :show="show" :title="title" max-width="max-w-lg" content-class="max-h-[80vh] overflow-y-auto" @close="$emit('close')">
           <div class="text-white/80 prose prose-invert max-w-none">
             <p class="whitespace-pre-wrap">{{ content }}</p>
           </div>
@@ -39,27 +15,20 @@
               </svg>
             </router-link>
           </div>
-        </div>
-      </div>
-    </Transition>
-  </Teleport>
+  </BaseModal>
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
-import { useModalKeyboard } from '@/composables/useModalKeyboard'
+import BaseModal from '@/components/BaseModal.vue'
 
-const props = defineProps<{
+defineProps<{
   show: boolean
   title: string
   content: string
   relatedPath?: string
 }>()
 
-const emit = defineEmits<{
+defineEmits<{
   close: []
 }>()
-
-const modalRef = ref<HTMLElement | null>(null)
-useModalKeyboard(modalRef, computed(() => props.show), () => emit('close'))
 </script>

neode-ui/src/components/PWAUpdatePrompt.vue

@@ -1,59 +1,33 @@
 <template>
-  <Teleport to="body">
-    <Transition name="modal">
-      <div
-        v-if="showUpdatePrompt"
-        class="fixed inset-0 z-[9999] flex items-center justify-center p-4"
-        @click.self="dismissUpdate"
-      >
-        <div class="absolute inset-0 bg-black/60 backdrop-blur-sm"></div>
-        <div
-          ref="modalRef"
-          class="glass-card p-6 max-w-md w-full relative z-10"
-          @click.stop
-        >
-          <div class="flex items-start justify-between gap-4 mb-4">
-            <h3 class="text-xl font-semibold text-white">Update Available</h3>
-            <button
-              @click="dismissUpdate"
-              class="p-2 rounded-lg hover:bg-white/10 text-white/70 hover:text-white transition-colors"
-              aria-label="Dismiss"
-            >
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-              </svg>
-            </button>
-          </div>
+  <BaseModal :show="showUpdatePrompt" title="Update Available" z-index="z-[9999]" @close="dismissUpdate">
           <p class="text-white/80 mb-6">
             A new version of Archipelago is available. Update now to get the latest features and fixes.
           </p>
-          <div class="flex gap-3 justify-end">
-            <button
-              @click="dismissUpdate"
-              class="px-4 py-2 glass-button rounded-lg text-sm font-medium"
-            >
-              Later
-            </button>
-            <button
-              @click="handleUpdate"
-              class="px-4 py-2 glass-button glass-button-sm rounded-lg text-sm font-medium"
-            >
-              Update Now
-            </button>
-          </div>
-        </div>
-      </div>
-    </Transition>
-  </Teleport>
+          <template #footer>
+            <div class="flex gap-3 justify-end">
+              <button
+                @click="dismissUpdate"
+                class="px-4 py-2 glass-button rounded-lg text-sm font-medium"
+              >
+                Later
+              </button>
+              <button
+                @click="handleUpdate"
+                class="px-4 py-2 glass-button glass-button-sm rounded-lg text-sm font-medium"
+              >
+                Update Now
+              </button>
+            </div>
+          </template>
+  </BaseModal>
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
-import { useModalKeyboard } from '@/composables/useModalKeyboard'
+import BaseModal from '@/components/BaseModal.vue'
 
 const showUpdatePrompt = ref(false)
 let updateCallback: (() => Promise<void>) | null = null
-const modalRef = ref<HTMLElement | null>(null)
 
 onMounted(() => {
   // Listen for service worker updates
@@ -106,8 +80,6 @@ onMounted(() => {
   }
 })
 
-useModalKeyboard(modalRef, showUpdatePrompt, dismissUpdate)
-
 function dismissUpdate() {
   showUpdatePrompt.value = false
 }

neode-ui/src/components/ReceiveBitcoinModal.vue

@@ -1,9 +1,5 @@
 <template>
-  <Teleport to="body">
-    <div v-if="show" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-md" @click.self="close" @keydown.escape="close">
-      <div class="glass-card p-6 w-full max-w-2xl mx-4 max-h-[90vh] overflow-y-auto" role="dialog" aria-modal="true">
-        <h2 class="text-lg font-bold text-white mb-4">{{ t('web5.receiveBitcoinTitle') }}</h2>
-
+  <BaseModal :show="show" :title="t('web5.receiveBitcoinTitle')" max-width="max-w-2xl" content-class="max-h-[90vh] overflow-y-auto" @close="close">
         <!-- Method tabs -->
         <div class="flex gap-1 mb-4 p-1 bg-white/5 rounded-lg">
           <button
@@ -12,24 +8,24 @@
             @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' ? 'On-chain' : m }}</button>
+          >{{ m === 'onchain' ? t('receiveBitcoin.onChain') : m === 'lightning' ? t('receiveBitcoin.lightning') : t('receiveBitcoin.ecash') }}</button>
         </div>
 
         <!-- Lightning -->
         <div v-if="receiveMethod === 'lightning'">
           <div class="mb-3">
-            <label class="text-white/60 text-sm block mb-1">Amount (sats)</label>
-            <input v-model.number="invoiceAmount" type="number" min="1" placeholder="1000" class="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-white/30" />
+            <label class="text-white/60 text-sm block mb-1">{{ t('receiveBitcoin.amountSats') }}</label>
+            <input v-model.number="invoiceAmount" type="number" min="1" placeholder="1000" class="w-full input-glass" />
           </div>
           <div class="mb-3">
-            <label class="text-white/60 text-sm block mb-1">Memo (optional)</label>
-            <input v-model="invoiceMemo" type="text" placeholder="Payment for..." class="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-white/30" />
+            <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">
             <canvas ref="lightningQrCanvas" class="mx-auto mb-3 rounded-lg" style="image-rendering: pixelated;"></canvas>
-            <p class="text-white/50 text-xs mb-1">Invoice (share with sender):</p>
+            <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>
-            <button @click="copyText(invoiceResult)" class="mt-2 text-xs text-orange-400 hover:text-orange-300">Copy</button>
+            <button @click="copyText(invoiceResult)" class="mt-2 text-xs text-orange-400 hover:text-orange-300">{{ t('common.copy') }}</button>
           </div>
         </div>
 
@@ -37,9 +33,9 @@
         <div v-if="receiveMethod === 'onchain'">
           <div v-if="onchainAddress" class="mb-3 p-3 bg-white/5 rounded-lg text-center">
             <canvas ref="onchainQrCanvas" class="mx-auto mb-3 rounded-lg" style="image-rendering: pixelated;"></canvas>
-            <p class="text-white/50 text-xs mb-2">Your Bitcoin address:</p>
+            <p class="text-white/50 text-xs mb-2">{{ t('receiveBitcoin.yourBitcoinAddress') }}</p>
             <p class="text-sm font-mono text-white/90 break-all">{{ onchainAddress }}</p>
-            <button @click="copyText(onchainAddress)" class="mt-2 text-xs text-orange-400 hover:text-orange-300">Copy</button>
+            <button @click="copyText(onchainAddress)" 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">{{ t('web5.generateFreshAddress') }}</p>
@@ -49,29 +45,28 @@
         <!-- Ecash -->
         <div v-if="receiveMethod === 'ecash'">
           <div class="mb-3">
-            <label class="text-white/60 text-sm block mb-1">Paste ecash token</label>
-            <textarea v-model="ecashToken" rows="3" placeholder="cashuSend_..." class="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-white/30"></textarea>
+            <label class="text-white/60 text-sm block mb-1">{{ t('receiveBitcoin.pasteEcashToken') }}</label>
+            <textarea v-model="ecashToken" rows="3" placeholder="cashuSend_..." class="w-full input-glass font-mono"></textarea>
           </div>
           <div v-if="ecashResult" class="mb-3 text-xs text-green-400">{{ ecashResult }}</div>
         </div>
 
-        <div v-if="error" class="mb-3 text-xs text-red-400">{{ error }}</div>
+        <div v-if="error" class="mb-3 alert-error">{{ error }}</div>
 
         <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 px-4 py-2 rounded-lg text-sm font-medium bg-green-500/20 border-green-500/30 disabled:opacity-50">
-            {{ processing ? 'Processing...' : receiveMethod === 'onchain' ? 'Generate Address' : receiveMethod === 'lightning' ? 'Create Invoice' : 'Receive' }}
+          <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') }}
           </button>
         </div>
-      </div>
-    </div>
-  </Teleport>
+  </BaseModal>
 </template>
 
 <script setup lang="ts">
 import { ref, nextTick } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { rpcClient } from '@/api/rpc-client'
+import BaseModal from '@/components/BaseModal.vue'
 
 const { t } = useI18n()
 
@@ -120,7 +115,7 @@ async function receive() {
   error.value = ''
   try {
     if (receiveMethod.value === 'lightning') {
-      if (!invoiceAmount.value) { error.value = 'Enter an amount'; return }
+      if (!invoiceAmount.value) { error.value = t('receiveBitcoin.enterAnAmount'); return }
       const res = await rpcClient.call<{ payment_request: string }>({
         method: 'lnd.addinvoice',
         params: { amount_sats: invoiceAmount.value, memo: invoiceMemo.value || undefined },
@@ -132,12 +127,12 @@ async function receive() {
       onchainAddress.value = res.address
       nextTick(() => renderQr(res.address, onchainQrCanvas.value, 'bitcoin:'))
     } else {
-      if (!ecashToken.value.trim()) { error.value = 'Paste an ecash token'; return }
+      if (!ecashToken.value.trim()) { error.value = t('receiveBitcoin.pasteAnEcashToken'); return }
       await rpcClient.call<{ amount_sats: number }>({
         method: 'wallet.ecash-receive',
         params: { token: ecashToken.value.trim() },
       })
-      ecashResult.value = 'Token received successfully!'
+      ecashResult.value = t('receiveBitcoin.tokenReceivedSuccess')
       emit('received')
     }
   } catch (err: unknown) {

neode-ui/src/components/SendBitcoinModal.vue

@@ -1,9 +1,5 @@
 <template>
-  <Teleport to="body">
-    <div v-if="show" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-md" @click.self="close" @keydown.escape="close">
-      <div class="glass-card p-6 w-full max-w-2xl mx-4 max-h-[90vh] overflow-y-auto" role="dialog" aria-modal="true">
-        <h2 class="text-lg font-bold text-white mb-4">{{ t('web5.sendBitcoinTitle') }}</h2>
-
+  <BaseModal :show="show" :title="t('web5.sendBitcoinTitle')" max-width="max-w-2xl" content-class="max-h-[90vh] overflow-y-auto" @close="close">
         <!-- Method tabs -->
         <div class="flex gap-1 mb-4 p-1 bg-white/5 rounded-lg">
           <button
@@ -12,55 +8,54 @@
             @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' ? 'On-chain' : m }}</button>
+          >{{ m === 'onchain' ? t('sendBitcoin.onChain') : m === 'lightning' ? t('sendBitcoin.lightning') : m === 'ecash' ? t('sendBitcoin.ecash') : t('sendBitcoin.auto') }}</button>
         </div>
 
         <div v-if="sendMethod === 'auto'" class="mb-3 p-2 bg-white/5 rounded-lg">
-          <p class="text-xs text-white/50">Auto-selects method based on amount: ecash &lt; 1k sats, Lightning 1k–500k, on-chain &gt; 500k</p>
+          <p class="text-xs text-white/50">{{ t('sendBitcoin.autoMethodDesc') }}</p>
         </div>
 
         <div class="mb-3">
-          <label class="text-white/60 text-sm block mb-1">Amount (sats)</label>
-          <input v-model.number="amount" type="number" min="1" placeholder="1000" class="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-white/30" />
+          <label class="text-white/60 text-sm block mb-1">{{ t('sendBitcoin.amountSats') }}</label>
+          <input v-model.number="amount" type="number" min="1" placeholder="1000" class="w-full input-glass" />
         </div>
 
         <div v-if="effectiveMethod !== 'ecash'" class="mb-3">
           <label class="text-white/60 text-sm block mb-1">
-            {{ effectiveMethod === 'lightning' ? 'Lightning Invoice (BOLT11)' : 'Bitcoin Address' }}
+            {{ effectiveMethod === 'lightning' ? t('sendBitcoin.lightningInvoice') : t('sendBitcoin.bitcoinAddress') }}
           </label>
-          <textarea v-model="dest" rows="2" :placeholder="effectiveMethod === 'lightning' ? 'lnbc...' : 'bc1...'" class="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-white text-sm font-mono focus:outline-none focus:border-white/30"></textarea>
+          <textarea v-model="dest" rows="2" :placeholder="effectiveMethod === 'lightning' ? 'lnbc...' : '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">
-          <p class="text-white/50 text-xs mb-1">Token (share with recipient):</p>
+          <p class="text-white/50 text-xs mb-1">{{ t('sendBitcoin.tokenShareLabel') }}</p>
           <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">Copy</button>
+          <button @click="copyText(ecashToken)" class="mt-2 text-xs text-orange-400 hover:text-orange-300">{{ t('common.copy') }}</button>
         </div>
 
-        <div v-if="resultTxid" class="mb-3 p-2 bg-green-500/10 border border-green-500/20 rounded-lg">
-          <p class="text-green-400 text-xs">Sent! TX: {{ resultTxid }}</p>
+        <div v-if="resultTxid" class="mb-3 alert-success">
+          <p class="text-xs">{{ t('sendBitcoin.sentTx', { txid: resultTxid }) }}</p>
         </div>
-        <div v-if="resultHash" class="mb-3 p-2 bg-green-500/10 border border-green-500/20 rounded-lg">
-          <p class="text-green-400 text-xs">Paid! Hash: {{ resultHash }}</p>
+        <div v-if="resultHash" class="mb-3 alert-success">
+          <p class="text-xs">{{ t('sendBitcoin.paidHash', { hash: resultHash }) }}</p>
         </div>
 
-        <div v-if="error" class="mb-3 text-xs text-red-400">{{ error }}</div>
+        <div v-if="error" class="mb-3 alert-error">{{ error }}</div>
 
         <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="send" :disabled="processing || !amount" class="flex-1 glass-button px-4 py-2 rounded-lg text-sm font-medium bg-orange-500/20 border-orange-500/30 disabled:opacity-50">
-            {{ processing ? 'Sending...' : 'Send' }}
+          <button @click="send" :disabled="processing || !amount" class="flex-1 glass-button glass-button-warning px-4 py-2 rounded-lg text-sm font-medium disabled:opacity-50">
+            {{ processing ? t('common.sending') : t('common.send') }}
           </button>
         </div>
-      </div>
-    </div>
-  </Teleport>
+  </BaseModal>
 </template>
 
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { rpcClient } from '@/api/rpc-client'
+import BaseModal from '@/components/BaseModal.vue'
 
 const { t } = useI18n()
 

neode-ui/src/components/ToggleSwitch.vue

@@ -0,0 +1,25 @@
+<template>
+  <button
+    type="button"
+    role="switch"
+    :aria-checked="modelValue"
+    class="w-10 h-6 rounded-full shrink-0 transition-colors relative"
+    :class="modelValue ? 'bg-orange-500' : 'bg-white/15'"
+    @click="$emit('update:modelValue', !modelValue)"
+  >
+    <div
+      class="absolute top-1 w-4 h-4 rounded-full bg-white shadow transition-transform"
+      :class="modelValue ? 'translate-x-5' : 'translate-x-1'"
+    />
+  </button>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  modelValue: boolean
+}>()
+
+defineEmits<{
+  'update:modelValue': [value: boolean]
+}>()
+</script>

neode-ui/src/components/TransactionsModal.vue

@@ -0,0 +1,116 @@
+<template>
+  <BaseModal :show="show" :title="t('transactions.title')" max-width="max-w-2xl" content-class="max-h-[90vh] flex flex-col" @close="close">
+        <div v-if="transactions.length === 0" class="flex-1 flex items-center justify-center py-12">
+          <p class="text-white/40 text-sm">{{ t('transactions.noTransactionsYet') }}</p>
+        </div>
+
+        <div v-else class="flex-1 overflow-y-auto -mx-2 px-2 divide-y divide-white/5">
+          <div
+            v-for="tx in transactions"
+            :key="tx.tx_hash"
+            class="flex items-center justify-between gap-3 py-3 hover:bg-white/5 rounded-lg px-2 cursor-pointer transition-colors"
+            @click="openInMempool(tx.tx_hash)"
+          >
+            <div class="flex items-center gap-3 min-w-0 flex-1">
+              <div
+                class="w-8 h-8 rounded-full flex items-center justify-center shrink-0"
+                :class="tx.direction === 'incoming'
+                  ? (tx.num_confirmations === 0 ? 'bg-yellow-500/15' : 'bg-green-500/15')
+                  : 'bg-red-500/10'"
+              >
+                <svg
+                  class="w-4 h-4"
+                  :class="tx.direction === 'incoming'
+                    ? (tx.num_confirmations === 0 ? 'text-yellow-400' : 'text-green-400')
+                    : 'text-red-400'"
+                  fill="none" stroke="currentColor" viewBox="0 0 24 24"
+                >
+                  <path v-if="tx.direction === 'incoming'" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
+                  <path v-else stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
+                </svg>
+              </div>
+              <div class="min-w-0 flex-1">
+                <div class="flex items-center gap-2">
+                  <span
+                    class="text-sm font-medium"
+                    :class="tx.direction === 'incoming' ? 'text-green-400' : 'text-red-400'"
+                  >
+                    {{ tx.direction === 'incoming' ? '+' : '-' }}{{ Math.abs(tx.amount_sats).toLocaleString() }} sats
+                  </span>
+                  <span
+                    class="text-[10px] px-1.5 py-0.5 rounded-full font-medium"
+                    :class="tx.num_confirmations === 0
+                      ? 'bg-yellow-500/15 text-yellow-400'
+                      : tx.num_confirmations < 3
+                        ? 'bg-green-500/15 text-green-400'
+                        : 'bg-white/10 text-white/50'"
+                  >
+                    {{ tx.num_confirmations === 0 ? t('transactions.unconfirmed') : t('transactions.confirmations', { count: tx.num_confirmations }) }}
+                  </span>
+                </div>
+                <div class="flex items-center gap-2 mt-0.5">
+                  <p class="text-[11px] text-white/40 font-mono truncate">{{ tx.tx_hash }}</p>
+                  <span v-if="tx.label" class="text-[10px] text-white/30 shrink-0">{{ tx.label }}</span>
+                </div>
+              </div>
+            </div>
+            <div class="flex items-center gap-2 shrink-0">
+              <span class="text-[11px] text-white/40">{{ formatTxTime(tx.time_stamp) }}</span>
+              <svg class="w-3.5 h-3.5 text-white/30" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+              </svg>
+            </div>
+          </div>
+        </div>
+  </BaseModal>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import BaseModal from '@/components/BaseModal.vue'
+
+interface WalletTransaction {
+  tx_hash: string
+  amount_sats: number
+  direction: 'incoming' | 'outgoing'
+  num_confirmations: number
+  time_stamp: number
+  total_fees: number
+  dest_addresses: string[]
+  label: string
+  block_height: number
+}
+
+defineProps<{
+  show: boolean
+  transactions: WalletTransaction[]
+}>()
+
+const emit = defineEmits<{ close: [] }>()
+const { t } = useI18n()
+const router = useRouter()
+
+function close() {
+  emit('close')
+}
+
+function openInMempool(txHash: string) {
+  router.push({ name: 'app-session', params: { appId: 'mempool' }, query: { path: `/tx/${txHash}` } })
+}
+
+function formatTxTime(timestamp: number): string {
+  if (!timestamp) return ''
+  const date = new Date(timestamp * 1000)
+  const now = new Date()
+  const diffMs = now.getTime() - date.getTime()
+  const diffMins = Math.floor(diffMs / 60000)
+  if (diffMins < 1) return t('transactions.justNow')
+  if (diffMins < 60) return t('transactions.minutesAgo', { count: diffMins })
+  const diffHours = Math.floor(diffMins / 60)
+  if (diffHours < 24) return t('transactions.hoursAgo', { count: diffHours })
+  const diffDays = Math.floor(diffHours / 24)
+  if (diffDays < 7) return t('transactions.daysAgo', { count: diffDays })
+  return date.toLocaleDateString()
+}
+</script>

neode-ui/src/components/cloud/ShareModal.vue

@@ -28,10 +28,7 @@
             <p class="text-sm font-medium text-white/90">Share this {{ isDir ? 'folder' : 'file' }}</p>
             <p class="text-xs text-white/50 mt-0.5">Make visible to connected peers</p>
           </div>
-          <label class="share-toggle">
-            <input type="checkbox" v-model="shared" />
-            <span class="share-toggle-slider"></span>
-          </label>
+          <ToggleSwitch v-model="shared" />
         </div>
 
         <!-- Access Type (only when shared) -->
@@ -126,6 +123,7 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import { rpcClient } from '@/api/rpc-client'
+import ToggleSwitch from '@/components/ToggleSwitch.vue'
 
 const props = defineProps<{
   filename: string