refactor: split Web5.vue, Settings.vue, and Mesh.vue into focused subcomponents

- F25: Split Web5.vue (3940 lines) into 14 files under views/web5/
- F26: Split Mesh.vue (2106→840 lines) extracting Bitcoin and Deadman panels
- F27: Dashboard.vue assessed — layout shell, no split needed
- F28: Split Settings.vue (1792 lines) into AccountSection + SystemSection

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

neode-ui/src/views/mesh/MeshBitcoinPanel.vue

@@ -0,0 +1,180 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useMeshStore } from '@/stores/mesh'
+import { rpcClient } from '@/api/rpc-client'
+
+const mesh = useMeshStore()
+
+const txHexInput = ref('')
+const bolt11Input = ref('')
+const bolt11AmountInput = ref('')
+const relayingTx = ref(false)
+const relayingLn = ref(false)
+const relayResult = ref('')
+const meshSendAddr = ref('')
+const meshSendAmount = ref('')
+const relayMode = ref<'archy' | 'broadcast'>('archy')
+const sendTab = ref<'onchain' | 'lightning'>('onchain')
+
+function pollRelayStatus(requestId: number) {
+  let attempts = 0
+  const maxAttempts = 30
+  const interval = setInterval(async () => {
+    attempts++
+    try {
+      const res = await mesh.relayStatus(requestId)
+      if (res.status === 'confirmed' && res.txid) {
+        relayResult.value = `TX broadcast! txid: ${res.txid.slice(0, 8)}...${res.txid.slice(-8)}`
+        clearInterval(interval)
+      } else if (res.status === 'failed') {
+        const code = res.error_code ? ` [${res.error_code}]` : ''
+        relayResult.value = `Relay failed${code}: ${res.error || 'unknown error'}`
+        clearInterval(interval)
+      } else if (attempts >= maxAttempts) {
+        relayResult.value += ' (timed out waiting for confirmation)'
+        clearInterval(interval)
+      }
+    } catch {
+      if (attempts >= maxAttempts) clearInterval(interval)
+    }
+  }, 3000)
+}
+
+async function handleMeshSendBitcoin() {
+  if (!meshSendAddr.value.trim() || !meshSendAmount.value) return
+  relayingTx.value = true
+  relayResult.value = ''
+  try {
+    relayResult.value = 'Creating signed transaction...'
+    const rawRes = await rpcClient.call<{ raw_tx_hex: string; amount_sats: number }>({
+      method: 'lnd.create-raw-tx',
+      params: { addr: meshSendAddr.value.trim(), amount_sats: parseInt(meshSendAmount.value) },
+    })
+    relayResult.value = relayMode.value === 'broadcast'
+      ? 'Broadcasting via mesh network...'
+      : 'Sending to Archy peers (encrypted)...'
+    const relayRes = await mesh.relayTransaction(rawRes.raw_tx_hex, relayMode.value)
+    relayResult.value = `Sent via mesh! Request #${relayRes.request_id} — waiting for relay peer to broadcast...`
+    meshSendAddr.value = ''
+    meshSendAmount.value = ''
+    pollRelayStatus(relayRes.request_id)
+  } catch (err: unknown) {
+    relayResult.value = err instanceof Error ? err.message : 'Send failed'
+  } finally {
+    relayingTx.value = false
+  }
+}
+
+async function handleRelayTx() {
+  if (!txHexInput.value.trim()) return
+  relayingTx.value = true
+  relayResult.value = ''
+  try {
+    const res = await mesh.relayTransaction(txHexInput.value.trim())
+    relayResult.value = `TX queued (request #${res.request_id})`
+    txHexInput.value = ''
+  } catch (err: unknown) {
+    relayResult.value = err instanceof Error ? err.message : 'Relay failed'
+  } finally {
+    relayingTx.value = false
+  }
+}
+
+async function handleRelayLightning() {
+  if (!bolt11Input.value.trim() || !bolt11AmountInput.value) return
+  relayingLn.value = true
+  relayResult.value = ''
+  try {
+    const res = await mesh.relayLightning(bolt11Input.value.trim(), parseInt(bolt11AmountInput.value))
+    relayResult.value = `Lightning relay queued (request #${res.request_id})`
+    bolt11Input.value = ''
+    bolt11AmountInput.value = ''
+  } catch (err: unknown) {
+    relayResult.value = err instanceof Error ? err.message : 'Relay failed'
+  } finally {
+    relayingLn.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="glass-card mesh-bitcoin-panel">
+    <h3 class="mesh-panel-title">Off-Grid Bitcoin</h3>
+    <p class="mesh-panel-sub">Relay transactions and receive block headers via mesh radio</p>
+
+    <!-- Relay status notification -->
+    <div v-if="relayResult" class="mesh-relay-result" :class="relayResult.includes('failed') || relayResult.includes('Failed') ? 'error' : 'success'">
+      {{ relayResult }}
+    </div>
+
+    <!-- Block Headers -->
+    <div class="mesh-bitcoin-section">
+      <div class="mesh-bitcoin-section-header">
+        <span class="mesh-bitcoin-label">Latest Block</span>
+        <span v-if="mesh.latestBlockHeight > 0" class="mesh-bitcoin-height">#{{ mesh.latestBlockHeight.toLocaleString() }}</span>
+        <span v-else class="mesh-bitcoin-height mesh-muted">No headers yet</span>
+      </div>
+      <div v-if="mesh.blockHeaders.length" class="mesh-block-list">
+        <div v-for="h in mesh.blockHeaders.slice(0, 2)" :key="h.height" class="mesh-block-row">
+          <span class="mesh-block-height">#{{ h.height.toLocaleString() }}</span>
+          <span class="mesh-block-hash">{{ h.hash.slice(0, 12) }}...{{ h.hash.slice(-8) }}</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- On-Chain / Lightning tabs -->
+    <div class="mesh-send-tabs">
+      <button class="mesh-send-tab" :class="{ active: sendTab === 'onchain' }" @click="sendTab = 'onchain'">On-Chain</button>
+      <button class="mesh-send-tab" :class="{ active: sendTab === 'lightning' }" @click="sendTab = 'lightning'">Lightning</button>
+    </div>
+
+    <!-- On-Chain tab -->
+    <div v-if="sendTab === 'onchain'" class="mesh-bitcoin-section">
+      <p class="mesh-bitcoin-hint">Creates a signed transaction locally and relays via mesh peers</p>
+      <input v-model="meshSendAddr" class="mesh-bitcoin-input" placeholder="Bitcoin address (bc1...)" />
+      <input v-model="meshSendAmount" class="mesh-bitcoin-input mesh-bitcoin-input-sm" type="number" placeholder="Amount (sats)" min="546" />
+      <div class="mesh-relay-mode">
+        <label class="mesh-relay-mode-option" :class="{ active: relayMode === 'archy' }">
+          <input type="radio" v-model="relayMode" value="archy" />
+          <span>Archy Peers <small>(E2E encrypted, direct)</small></span>
+        </label>
+        <label class="mesh-relay-mode-option" :class="{ active: relayMode === 'broadcast' }">
+          <input type="radio" v-model="relayMode" value="broadcast" />
+          <span>Mesh Broadcast <small>(multi-hop, wider reach)</small></span>
+        </label>
+      </div>
+      <button class="glass-button" :disabled="!meshSendAddr.trim() || !meshSendAmount || relayingTx" @click="handleMeshSendBitcoin">
+        {{ relayingTx ? 'Sending...' : 'Send via Mesh' }}
+      </button>
+      <details class="mesh-bitcoin-advanced">
+        <summary class="mesh-bitcoin-label">Raw TX Relay</summary>
+        <div style="margin-top: 8px;">
+          <textarea v-model="txHexInput" class="mesh-bitcoin-input" placeholder="Paste raw transaction hex..." rows="3" />
+          <button class="glass-button" :disabled="!txHexInput.trim() || relayingTx" @click="handleRelayTx">
+            {{ relayingTx ? 'Relaying...' : 'Relay Raw TX' }}
+          </button>
+        </div>
+      </details>
+    </div>
+
+    <!-- Lightning tab -->
+    <div v-if="sendTab === 'lightning'" class="mesh-bitcoin-section">
+      <p class="mesh-bitcoin-hint">Relays a Lightning invoice to an internet-connected peer for payment</p>
+      <input v-model="bolt11Input" class="mesh-bitcoin-input" placeholder="lnbc... (bolt11 invoice)" />
+      <input v-model="bolt11AmountInput" class="mesh-bitcoin-input mesh-bitcoin-input-sm" type="number" placeholder="Amount (sats)" />
+      <div class="mesh-relay-mode">
+        <label class="mesh-relay-mode-option" :class="{ active: relayMode === 'archy' }">
+          <input type="radio" v-model="relayMode" value="archy" />
+          <span>Archy Peers <small>(E2E encrypted, direct)</small></span>
+        </label>
+        <label class="mesh-relay-mode-option" :class="{ active: relayMode === 'broadcast' }">
+          <input type="radio" v-model="relayMode" value="broadcast" />
+          <span>Mesh Broadcast <small>(multi-hop, wider reach)</small></span>
+        </label>
+      </div>
+      <button class="glass-button" :disabled="!bolt11Input.trim() || !bolt11AmountInput || relayingLn" @click="handleRelayLightning">
+        {{ relayingLn ? 'Relaying...' : 'Pay via Mesh' }}
+      </button>
+    </div>
+  </div>
+</template>

neode-ui/src/views/mesh/MeshDeadmanPanel.vue

@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useMeshStore } from '@/stores/mesh'
+import ToggleSwitch from '@/components/ToggleSwitch.vue'
+
+const mesh = useMeshStore()
+
+const deadmanConfiguring = ref(false)
+const deadmanInterval = ref('21600')
+const deadmanEnabled = ref(false)
+const deadmanCustomMsg = ref('')
+
+// Sync from store on creation
+if (mesh.deadmanStatus) {
+  deadmanEnabled.value = mesh.deadmanStatus.dead_man_enabled
+  deadmanInterval.value = String(mesh.deadmanStatus.dead_man_interval_secs)
+}
+
+function formatTimeRemaining(secs: number): string {
+  if (secs >= 86400) return `${Math.floor(secs / 3600)}h`
+  if (secs >= 3600) return `${Math.floor(secs / 3600)}h ${Math.floor((secs % 3600) / 60)}m`
+  if (secs >= 60) return `${Math.floor(secs / 60)}m ${secs % 60}s`
+  return `${secs}s`
+}
+
+async function handleDeadmanToggle() {
+  deadmanConfiguring.value = true
+  try {
+    await mesh.configureDeadman({ enabled: deadmanEnabled.value })
+    await mesh.fetchDeadmanStatus()
+  } finally {
+    deadmanConfiguring.value = false
+  }
+}
+
+async function handleDeadmanConfigure() {
+  deadmanConfiguring.value = true
+  try {
+    await mesh.configureDeadman({
+      enabled: deadmanEnabled.value,
+      interval_secs: parseInt(deadmanInterval.value) || 21600,
+      custom_message: deadmanCustomMsg.value || undefined,
+    })
+    await mesh.fetchDeadmanStatus()
+  } finally {
+    deadmanConfiguring.value = false
+  }
+}
+
+async function handleDeadmanCheckin() {
+  await mesh.deadmanCheckin()
+  await mesh.fetchDeadmanStatus()
+}
+</script>
+
+<template>
+  <div class="glass-card mesh-deadman-panel">
+    <h3 class="mesh-panel-title">Dead Man's Switch</h3>
+    <p class="mesh-panel-sub">Auto-broadcasts a signed emergency alert if you don't check in</p>
+
+    <!-- Status -->
+    <div v-if="mesh.deadmanStatus" class="mesh-deadman-status">
+      <div class="mesh-deadman-indicator" :class="mesh.deadmanStatus.triggered ? 'triggered' : mesh.deadmanStatus.dead_man_enabled ? 'armed' : 'disabled'">
+        {{ mesh.deadmanStatus.triggered ? 'TRIGGERED' : mesh.deadmanStatus.dead_man_enabled ? 'ARMED' : 'DISABLED' }}
+      </div>
+      <div v-if="mesh.deadmanStatus.dead_man_enabled && !mesh.deadmanStatus.triggered" class="mesh-deadman-timer">
+        {{ formatTimeRemaining(mesh.deadmanStatus.time_remaining_secs) }}
+      </div>
+      <div v-if="deadmanCustomMsg || mesh.deadmanStatus.dead_man_enabled" class="mesh-deadman-message">
+        {{ deadmanCustomMsg || 'Dead man\'s switch triggered — operator unresponsive' }}
+      </div>
+      <button v-if="mesh.deadmanStatus.dead_man_enabled" class="glass-button mesh-deadman-checkin-btn" @click="handleDeadmanCheckin">
+        I'm OK — Check In
+      </button>
+    </div>
+
+    <!-- Configuration -->
+    <div class="mesh-deadman-config">
+      <button
+        @click="deadmanEnabled = !deadmanEnabled; handleDeadmanToggle()"
+        class="w-full flex items-center gap-4 p-4 rounded-xl border transition-all text-left mb-3"
+        :class="deadmanEnabled
+          ? 'bg-white/10 border-orange-500/40'
+          : 'bg-black/20 border-white/10 hover:border-white/20'"
+      >
+        <svg class="w-5 h-5 shrink-0" :class="deadmanEnabled ? 'text-orange-400' : 'text-white/40'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4.5c-.77-.833-2.694-.833-3.464 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z" />
+        </svg>
+        <div class="flex-1 min-w-0">
+          <p class="text-sm font-medium" :class="deadmanEnabled ? 'text-white/95' : 'text-white/70'">{{ deadmanEnabled ? 'Dead Man\'s Switch Active' : 'Enable Dead Man\'s Switch' }}</p>
+          <p class="text-xs text-white/50 mt-0.5">Auto-alerts your contacts if you don't check in</p>
+        </div>
+        <ToggleSwitch :model-value="deadmanEnabled" @click.stop @update:model-value="deadmanEnabled = $event; handleDeadmanToggle()" />
+      </button>
+
+      <template v-if="deadmanEnabled">
+        <div class="mesh-deadman-field">
+          <label class="mesh-bitcoin-label">Trigger Interval</label>
+          <select v-model="deadmanInterval" class="mesh-bitcoin-input mesh-bitcoin-input-sm">
+            <option value="3600">1 hour</option>
+            <option value="21600">6 hours</option>
+            <option value="43200">12 hours</option>
+            <option value="86400">24 hours</option>
+          </select>
+        </div>
+
+        <div class="mesh-deadman-field">
+          <label class="mesh-bitcoin-label">Alert Message</label>
+          <input v-model="deadmanCustomMsg" class="mesh-bitcoin-input" placeholder="Dead man's switch triggered — operator unresponsive" />
+        </div>
+
+        <div class="mesh-deadman-info">
+          <span v-if="mesh.deadmanStatus?.has_gps" class="mesh-deadman-info-item">GPS: included</span>
+          <span class="mesh-deadman-info-item">Contacts: {{ mesh.deadmanStatus?.emergency_contacts ?? 0 }}</span>
+        </div>
+
+        <button class="glass-button" :disabled="deadmanConfiguring" @click="handleDeadmanConfigure">
+          {{ deadmanConfiguring ? 'Saving...' : 'Save Configuration' }}
+        </button>
+      </template>
+    </div>
+  </div>
+</template>