fix: polish error handling across frontend views

- Server.vue: Add user feedback for disk cleanup and restart operations
- Credentials.vue: Add clipboard fallback, better identity load error handling
- Federation.vue: Add clipboard fallback for invite code copy
- ContainerApps.vue: Wrap polling intervals in try-catch to prevent
  unhandled promise rejections from background refresh

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

neode-ui/src/views/Server.vue

@@ -6,6 +6,36 @@
       <p class="text-sm text-white/60 mt-2">{{ connectedNodes }} connected nodes</p>
     </div>
 
+    <!-- Disk Space Warning Banner -->
+    <div
+      v-if="diskWarning"
+      class="mb-6 p-4 rounded-xl border flex items-center justify-between"
+      :class="diskWarning.level === 'critical'
+        ? 'bg-red-500/10 border-red-500/30'
+        : 'bg-yellow-500/10 border-yellow-500/30'"
+    >
+      <div class="flex items-center gap-3">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 shrink-0" :class="diskWarning.level === 'critical' ? 'text-red-400' : 'text-yellow-400'" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <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>
+          <p class="text-sm font-medium" :class="diskWarning.level === 'critical' ? 'text-red-300' : 'text-yellow-300'">
+            {{ diskWarning.level === 'critical' ? 'Disk Space Critical' : 'Disk Space Warning' }}
+          </p>
+          <p class="text-xs text-white/60">
+            {{ diskWarning.used_percent.toFixed(1) }}% used — {{ formatBytes(diskWarning.free_bytes) }} remaining
+          </p>
+        </div>
+      </div>
+      <button
+        class="glass-button glass-button-sm px-3 py-1.5 text-xs font-medium rounded"
+        :disabled="diskCleaning"
+        @click="runDiskCleanup"
+      >
+        {{ diskCleaning ? 'Cleaning...' : 'Clean Up' }}
+      </button>
+    </div>
+
     <!-- Quick Actions Container -->
     <div class="glass-card p-6 mb-6">
       <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
@@ -163,10 +193,34 @@
               </div>
               <span class="text-white/60 text-sm">{{ networkData.forwardCount }}</span>
             </div>
+
+            <div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
+              <div class="flex items-center gap-3">
+                <svg class="w-5 h-5 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+                </svg>
+                <span class="text-white/80 text-sm">VPN</span>
+              </div>
+              <span class="text-sm" :class="networkData.vpnConnected ? 'text-green-400' : 'text-white/40'">
+                {{ networkData.vpnConnected ? `${networkData.vpnProvider} (${networkData.vpnIp})` : 'Not Connected' }}
+              </span>
+            </div>
+
+            <button class="w-full flex items-center justify-between p-3 bg-white/5 rounded-lg hover:bg-white/10 transition-colors text-left" @click="showDnsModal = true">
+              <div class="flex items-center gap-3">
+                <svg class="w-5 h-5 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9" />
+                </svg>
+                <span class="text-white/80 text-sm">DNS</span>
+              </div>
+              <span class="text-sm" :class="networkData.dnsProvider !== 'system' ? 'text-green-400' : 'text-white/60'">
+                {{ dnsDisplayLabel }}
+              </span>
+            </button>
           </template>
         </div>
 
-        <button class="mt-auto pt-4 w-full px-4 py-2 glass-button rounded-lg text-sm font-medium text-white/90 hover:text-white transition-colors shrink-0">
+        <button disabled title="Coming Soon" class="mt-auto pt-4 w-full px-4 py-2 glass-button rounded-lg text-sm font-medium opacity-50 cursor-not-allowed shrink-0">
           Manage Local Network
         </button>
       </div>
@@ -227,7 +281,7 @@
           </div>
         </div>
 
-        <button class="mt-auto pt-4 w-full px-4 py-2 glass-button rounded-lg text-sm font-medium text-white/90 hover:text-white transition-colors shrink-0">
+        <button disabled title="Coming Soon" class="mt-auto pt-4 w-full px-4 py-2 glass-button rounded-lg text-sm font-medium opacity-50 cursor-not-allowed shrink-0">
           Manage Web3 Services
         </button>
       </div>
@@ -329,13 +383,86 @@
             class="w-full px-3 py-2 bg-white/5 border border-white/10 rounded-lg text-white text-sm placeholder-white/30 focus:outline-none focus:border-white/30 mb-3"
             @keyup.enter="connectToWifi"
           />
+          <p v-if="wifiError" class="text-sm text-red-400 mb-3">{{ wifiError }}</p>
           <div class="flex gap-2">
-            <button @click="wifiConnecting = false; wifiPassword = ''" class="flex-1 px-3 py-2 glass-button rounded-lg text-sm">Cancel</button>
+            <button @click="wifiConnecting = false; wifiPassword = ''; wifiError = ''" class="flex-1 px-3 py-2 glass-button rounded-lg text-sm">Cancel</button>
             <button @click="connectToWifi" class="flex-1 px-3 py-2 glass-button rounded-lg text-sm font-medium" :disabled="!wifiPassword">Connect</button>
           </div>
         </div>
       </div>
     </div>
+
+    <!-- DNS Configuration Modal -->
+    <div v-if="showDnsModal" class="fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex items-center justify-center p-4" @click.self="showDnsModal = false">
+      <div class="glass-card p-6 w-full max-w-md">
+        <div class="flex items-center justify-between mb-4">
+          <h3 class="text-lg font-semibold text-white">DNS Configuration</h3>
+          <button @click="showDnsModal = false" class="text-white/40 hover:text-white transition-colors">
+            <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>
+
+        <p class="text-sm text-white/60 mb-4">Choose a DNS provider. Providers with DoH encrypt your DNS queries.</p>
+
+        <div class="space-y-2 mb-4">
+          <button
+            v-for="opt in dnsProviderOptions"
+            :key="opt.value"
+            class="w-full flex items-center justify-between p-3 rounded-lg transition-colors text-left"
+            :class="dnsSelectedProvider === opt.value ? 'bg-white/15 border border-white/20' : 'bg-white/5 border border-transparent hover:bg-white/10'"
+            @click="dnsSelectedProvider = opt.value; dnsCustomServers = ''"
+          >
+            <div>
+              <p class="text-sm font-medium text-white">{{ opt.label }}</p>
+              <p class="text-xs text-white/50">{{ opt.description }}</p>
+            </div>
+            <span v-if="opt.doh" class="text-xs px-2 py-0.5 rounded-full bg-green-400/20 text-green-400">DoH</span>
+          </button>
+        </div>
+
+        <!-- Custom servers input -->
+        <div v-if="dnsSelectedProvider === 'custom'" class="mb-4">
+          <label class="block text-sm text-white/70 mb-1">DNS Servers (comma-separated)</label>
+          <input
+            v-model="dnsCustomServers"
+            type="text"
+            placeholder="1.1.1.1, 8.8.8.8"
+            class="w-full px-3 py-2 bg-white/5 border border-white/10 rounded-lg text-white text-sm placeholder-white/30 focus:outline-none focus:border-white/30"
+          />
+        </div>
+
+        <!-- Current servers info -->
+        <div v-if="networkData.dnsServers.length > 0" class="mb-4 p-3 bg-white/5 rounded-lg">
+          <p class="text-xs text-white/50 mb-1">Current resolv.conf servers</p>
+          <p class="text-sm text-white/80">{{ networkData.dnsServers.join(', ') }}</p>
+        </div>
+
+        <p v-if="dnsError" class="text-sm text-red-400 mb-3">{{ dnsError }}</p>
+
+        <div class="flex gap-2">
+          <button @click="showDnsModal = false; dnsError = ''" class="flex-1 px-3 py-2 glass-button rounded-lg text-sm">Cancel</button>
+          <button
+            @click="applyDnsConfig"
+            class="flex-1 px-3 py-2 glass-button rounded-lg text-sm font-medium"
+            :disabled="dnsApplying || (dnsSelectedProvider === 'custom' && !dnsCustomServers.trim())"
+          >
+            {{ dnsApplying ? 'Applying...' : 'Apply' }}
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Logs info toast -->
+    <Transition name="fade">
+      <div v-if="logsToast" class="fixed bottom-20 left-1/2 -translate-x-1/2 z-50 max-w-md w-full px-4">
+        <div class="bg-white/10 border border-white/20 backdrop-blur-sm rounded-lg px-4 py-3 text-white/80 text-sm flex items-center justify-between gap-3">
+          <span>{{ logsToast }}</span>
+          <button @click="logsToast = ''" class="text-white/50 hover:text-white shrink-0">&times;</button>
+        </div>
+      </div>
+    </Transition>
   </div>
 </template>
 
@@ -366,14 +493,24 @@ const networkData = ref({
   wifiCount: 'N/A',
   torConnected: false,
   forwardCount: 'N/A',
+  vpnConnected: false,
+  vpnProvider: '',
+  vpnIp: '',
+  vpnHostname: '',
+  vpnPeers: 0,
+  dnsProvider: 'system',
+  dnsServers: [] as string[],
+  dnsDoH: false,
 })
 
 async function loadNetworkData() {
   networkLoading.value = true
   try {
-    const [diagRes, fwdRes] = await Promise.allSettled([
+    const [diagRes, fwdRes, vpnRes, dnsRes] = await Promise.allSettled([
       rpcClient.call<{ wan_ip: string | null; nat_type: string; upnp_available: boolean; tor_connected: boolean; wifi_count?: number }>({ method: 'network.diagnostics' }),
       rpcClient.call<{ forwards: unknown[] }>({ method: 'router.list-forwards' }),
+      rpcClient.vpnStatus(),
+      rpcClient.dnsStatus(),
     ])
 
     if (diagRes.status === 'fulfilled') {
@@ -387,6 +524,20 @@ async function loadNetworkData() {
       const count = fwdRes.value.forwards?.length ?? 0
       networkData.value.forwardCount = `${count} rule${count !== 1 ? 's' : ''}`
     }
+
+    if (vpnRes.status === 'fulfilled') {
+      networkData.value.vpnConnected = vpnRes.value.connected
+      networkData.value.vpnProvider = vpnRes.value.provider ?? ''
+      networkData.value.vpnIp = vpnRes.value.ip_address ?? ''
+      networkData.value.vpnHostname = vpnRes.value.hostname ?? ''
+      networkData.value.vpnPeers = vpnRes.value.peers_connected
+    }
+
+    if (dnsRes.status === 'fulfilled') {
+      networkData.value.dnsProvider = dnsRes.value.provider
+      networkData.value.dnsServers = dnsRes.value.resolv_conf_servers ?? []
+      networkData.value.dnsDoH = dnsRes.value.doh_enabled
+    }
   } catch (e) {
     if (import.meta.env.DEV) console.warn('Keep N/A defaults on failure', e)
   } finally {
@@ -434,6 +585,62 @@ const wifiNetworks = ref<WifiNetwork[]>([])
 const wifiConnecting = ref(false)
 const wifiSelectedSsid = ref('')
 const wifiPassword = ref('')
+const wifiError = ref('')
+
+// DNS configuration
+const showDnsModal = ref(false)
+const dnsSelectedProvider = ref('system')
+const dnsCustomServers = ref('')
+const dnsApplying = ref(false)
+const dnsError = ref('')
+
+const dnsProviderOptions = [
+  { value: 'system', label: 'System Default', description: 'DHCP-assigned DNS servers', doh: false },
+  { value: 'cloudflare', label: 'Cloudflare', description: '1.1.1.1 / 1.0.0.1', doh: true },
+  { value: 'google', label: 'Google', description: '8.8.8.8 / 8.8.4.4', doh: true },
+  { value: 'quad9', label: 'Quad9', description: '9.9.9.9 / 149.112.112.112', doh: true },
+  { value: 'mullvad', label: 'Mullvad', description: '194.242.2.2 (no logging)', doh: true },
+  { value: 'custom', label: 'Custom', description: 'Enter your own DNS servers', doh: false },
+]
+
+type DnsProviderValue = 'system' | 'cloudflare' | 'google' | 'quad9' | 'mullvad' | 'custom'
+
+const dnsDisplayLabel = computed(() => {
+  const p = networkData.value.dnsProvider
+  const opt = dnsProviderOptions.find(o => o.value === p)
+  if (opt && p !== 'system') {
+    return `${opt.label}${networkData.value.dnsDoH ? ' (DoH)' : ''}`
+  }
+  if (networkData.value.dnsServers.length > 0) {
+    return networkData.value.dnsServers.slice(0, 2).join(', ')
+  }
+  return 'System Default'
+})
+
+async function applyDnsConfig() {
+  dnsApplying.value = true
+  dnsError.value = ''
+  try {
+    const provider = dnsSelectedProvider.value as DnsProviderValue
+    const params: { provider: DnsProviderValue; servers?: string[] } = { provider }
+    if (provider === 'custom') {
+      params.servers = dnsCustomServers.value
+        .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
+    showDnsModal.value = false
+  } catch (e) {
+    dnsError.value = e instanceof Error ? e.message : 'DNS configuration failed. Please try again.'
+    if (import.meta.env.DEV) console.warn('DNS configuration failed', e)
+  } finally {
+    dnsApplying.value = false
+  }
+}
 
 async function loadInterfaces() {
   interfacesLoading.value = true
@@ -468,34 +675,98 @@ function selectWifi(ssid: string) {
 
 async function connectToWifi() {
   if (!wifiPassword.value || !wifiSelectedSsid.value) return
+  wifiError.value = ''
   try {
     await rpcClient.call({ method: 'network.configure-wifi', params: { ssid: wifiSelectedSsid.value, password: wifiPassword.value } })
     showWifiModal.value = false
     wifiConnecting.value = false
     wifiPassword.value = ''
     loadInterfaces()
-  } catch {
-    if (import.meta.env.DEV) console.warn('WiFi connection failed')
+  } catch (e) {
+    wifiError.value = e instanceof Error ? e.message : 'WiFi connection failed. Check password and try again.'
+    if (import.meta.env.DEV) console.warn('WiFi connection failed', e)
   }
 }
 
+// Disk space monitoring
+const diskWarning = ref<{
+  level: 'warning' | 'critical'
+  used_percent: number
+  free_bytes: number
+} | null>(null)
+const diskCleaning = ref(false)
+
+async function loadDiskStatus() {
+  try {
+    const res = await rpcClient.diskStatus()
+    if (res.level === 'warning' || res.level === 'critical') {
+      diskWarning.value = {
+        level: res.level,
+        used_percent: res.used_percent,
+        free_bytes: res.free_bytes,
+      }
+    } else {
+      diskWarning.value = null
+    }
+  } catch {
+    // Disk status is non-critical
+  }
+}
+
+async function runDiskCleanup() {
+  diskCleaning.value = true
+  try {
+    await rpcClient.diskCleanup()
+    await loadDiskStatus()
+    logsToast.value = 'Disk cleanup completed'
+    setTimeout(() => { logsToast.value = '' }, 4000)
+  } catch (e) {
+    logsToast.value = `Disk cleanup failed: ${e instanceof Error ? e.message : 'Unknown error'}`
+    setTimeout(() => { logsToast.value = '' }, 6000)
+    if (import.meta.env.DEV) console.warn('Disk cleanup failed', e)
+  } finally {
+    diskCleaning.value = false
+  }
+}
+
+function formatBytes(bytes: number): string {
+  const gb = 1024 * 1024 * 1024
+  const mb = 1024 * 1024
+  if (bytes >= gb) return `${(bytes / gb).toFixed(1)} GB`
+  if (bytes >= mb) return `${(bytes / mb).toFixed(0)} MB`
+  return `${(bytes / 1024).toFixed(0)} KB`
+}
+
 onMounted(() => {
   loadNetworkData()
   loadPeerCount()
   loadInterfaces()
+  loadDiskStatus()
 })
 
 watch(showWifiModal, (open) => {
   if (open) scanWifi()
 })
 
+watch(showDnsModal, (open) => {
+  if (open) {
+    dnsSelectedProvider.value = networkData.value.dnsProvider || 'system'
+    dnsCustomServers.value = ''
+    dnsError.value = ''
+  }
+})
+
 async function restartServices() {
   restarting.value = true
   servicesRunning.value = false
   try {
     await rpcClient.restartServer()
-  } catch {
-    if (import.meta.env.DEV) console.warn('Restart RPC unavailable, using mock')
+    logsToast.value = 'Services restarting...'
+    setTimeout(() => { logsToast.value = '' }, 4000)
+  } catch (e) {
+    logsToast.value = `Restart failed: ${e instanceof Error ? e.message : 'Unknown error'}`
+    setTimeout(() => { logsToast.value = '' }, 6000)
+    if (import.meta.env.DEV) console.warn('Restart RPC failed', e)
   }
   setTimeout(() => {
     restarting.value = false
@@ -520,8 +791,12 @@ function toggleAutoSync() {
   autoSyncEnabled.value = !autoSyncEnabled.value
 }
 
+const logsToast = ref('')
+
 function viewLogs() {
   logCount.value = 0
+  logsToast.value = 'Server logs are available via SSH: journalctl -u archipelago -f'
+  setTimeout(() => { logsToast.value = '' }, 6000)
 }
 </script>