From 38b29dd2fd10a99d903811eab65c4f95ac8e12be Mon Sep 17 00:00:00 2001 From: Dorian Date: Wed, 11 Mar 2026 00:01:15 +0000 Subject: [PATCH] refactor: remove duplicate network diagnostics from Settings, add link to Server page Co-Authored-By: Claude Opus 4.6 --- loop/plan.md | 2 +- neode-ui/src/views/Settings.vue | 182 ++------------------------------ 2 files changed, 11 insertions(+), 173 deletions(-) diff --git a/loop/plan.md b/loop/plan.md index c4a094af..f33c1d47 100644 --- a/loop/plan.md +++ b/loop/plan.md @@ -40,7 +40,7 @@ - [x] **UI-02** — Fix Web5.vue top bar: use proper glass sub-card pattern. In `neode-ui/src/views/Web5.vue` lines 10-119, the 5 quick-action cards inside the `.glass-card` container use `bg-white/5 rounded-lg`. This is the correct pattern for info sub-cards inside a glass container per CLAUDE.md CSS hierarchy (`bg-white/5` = "Simple read-only info rows"). However, verify alignment with the Server.vue quick-actions bar (lines 10-96) which uses the identical pattern. Confirm both pages are visually consistent. If Web5 cards lack `data-controller-container` and `tabindex="0"` attributes, add them for keyboard/gamepad navigation parity. **Acceptance**: Web5 and Server quick-action bars visually match. No animation changes. Deploy and verify. -- [ ] **UI-03** — Remove duplicate network diagnostics from Settings.vue. Settings.vue contains a "Network Diagnostics" section that duplicates functionality available on the Server.vue (Network) page. Remove the entire Network Diagnostics section from Settings.vue. Add a small link/button in Settings that says "Network Diagnostics" and routes to `/dashboard/server` instead. Keep the "Network Diagnostics" section only in Server.vue. **Acceptance**: Settings no longer shows duplicate network info; link navigates to Server page. Deploy and verify. +- [x] **UI-03** — Remove duplicate network diagnostics from Settings.vue. Settings.vue contains a "Network Diagnostics" section that duplicates functionality available on the Server.vue (Network) page. Remove the entire Network Diagnostics section from Settings.vue. Add a small link/button in Settings that says "Network Diagnostics" and routes to `/dashboard/server` instead. Keep the "Network Diagnostics" section only in Server.vue. **Acceptance**: Settings no longer shows duplicate network info; link navigates to Server page. Deploy and verify. - [ ] **UI-04** — Server.vue: wire real RPC data to Local Network card. The Local Network card in `neode-ui/src/views/Server.vue` lines 100-159 shows hardcoded values ("2 configured", "12 active", "5 rules"). Replace with data from RPC calls: `network.diagnostics` for connectivity info and `router.list-forwards` for port forwarding count. Add `onMounted` lifecycle hook to fetch data. Show skeleton loading states while fetching. **Acceptance**: Network card shows real data from backend (or graceful "N/A" if RPC unavailable). Deploy and verify. diff --git a/neode-ui/src/views/Settings.vue b/neode-ui/src/views/Settings.vue index 1228a78a..0f84e544 100644 --- a/neode-ui/src/views/Settings.vue +++ b/neode-ui/src/views/Settings.vue @@ -542,111 +542,21 @@ - +
-
-

Network

-

Network connectivity, UPnP, and diagnostics

-
- - -
-

Running diagnostics...

-
- - - -
-
- - -
-
-

Add Port Forward

-
-
- - -
-
-
- - -
-
- - -
-
-
-
{{ fwdError }}
-
- - -
-
-
@@ -956,81 +866,9 @@ function closeChangePasswordModal() { changePasswordForm.value = { currentPassword: '', newPassword: '', confirmPassword: '', alsoChangeSsh: true } } -// --- Network & Connectivity --- -interface NetworkDiagData { - wan_ip: string | null - nat_type: string - upnp_available: boolean - tor_connected: boolean - dns_working: boolean - recommendations: string[] -} -interface PortForwardData { - id: string - service_name: string - internal_port: number - external_port: number - protocol: string - enabled: boolean -} -const networkDiag = ref(null) -const networkLoading = ref(false) -const portForwards = ref([]) -const showAddForwardModal = ref(false) -const newFwdService = ref('') -const newFwdInternal = ref(0) -const newFwdExternal = ref(0) -const fwdError = ref('') - -async function runNetworkDiag() { - networkLoading.value = true - try { - const [diagRes, fwdRes] = await Promise.all([ - rpcClient.call({ method: 'network.diagnostics' }), - rpcClient.call<{ forwards: PortForwardData[] }>({ method: 'router.list-forwards' }), - ]) - networkDiag.value = diagRes - portForwards.value = fwdRes.forwards || [] - } catch { - networkDiag.value = null - } finally { - networkLoading.value = false - } -} - -async function addPortForward() { - if (!newFwdService.value.trim() || !newFwdInternal.value || !newFwdExternal.value) return - fwdError.value = '' - try { - await rpcClient.call({ method: 'router.add-forward', params: { - service_name: newFwdService.value.trim(), - internal_port: newFwdInternal.value, - external_port: newFwdExternal.value, - protocol: 'TCP', - }}) - showAddForwardModal.value = false - newFwdService.value = '' - newFwdInternal.value = 0 - newFwdExternal.value = 0 - await runNetworkDiag() - } catch (e: unknown) { - fwdError.value = e instanceof Error ? e.message : 'Failed to add forward' - } -} - -async function removePortForward(id: string) { - try { - await rpcClient.call({ method: 'router.remove-forward', params: { id } }) - await runNetworkDiag() - } catch { - // Silent - } -} - onMounted(async () => { checkClaudeStatus() loadTotpStatus() - runNetworkDiag() if (!serverTorAddressFromStore.value) { try { const res = await rpcClient.getTorAddress()