From 1c797da908f60a8ff9a190c6a7a08476deb15cc9 Mon Sep 17 00:00:00 2001 From: Dorian Date: Thu, 5 Mar 2026 07:43:40 +0000 Subject: [PATCH] feat: wire Home Network card to real app store data Replace hardcoded "All Running", "Connected", "12" in the Network overview card with computed values from useAppStore. Services status reflects actual running/total app counts, connectivity uses WebSocket connection state, and running apps count is live. Co-Authored-By: Claude Opus 4.6 --- .claude/plans/reflective-meandering-castle.md | 2 +- neode-ui/src/views/Home.vue | 30 +++++++++++++++---- 2 files changed, 25 insertions(+), 7 deletions(-) diff --git a/.claude/plans/reflective-meandering-castle.md b/.claude/plans/reflective-meandering-castle.md index bd3dadb0..d5cdfdf6 100644 --- a/.claude/plans/reflective-meandering-castle.md +++ b/.claude/plans/reflective-meandering-castle.md @@ -69,7 +69,7 @@ After getting Claude Max OAuth working on the live server, hardening the deploy - **Change**: Add tab bar with "Dashboard" and "Setup" tabs below welcome header. Dashboard tab: current overview cards. Setup tab: EasyHome goal cards (already imported). After completing all setup wizards, default to Dashboard. Use `.mode-switcher` pattern for tab styling. - **Verify**: Both tabs visible, Dashboard shows live data, Setup shows goal wizards -### Task 12: Wire up Home.vue Network card with real data +### Task 12: Wire up Home.vue Network card with real data [DONE] - **Files**: `neode-ui/src/views/Home.vue`, `neode-ui/src/views/Server.vue` - **Change**: Replace hardcoded "All Running", "Connected", "12" with computed values from `useAppStore`. Check `runningCount === appCount` for services status. Use `store.isConnected` for connectivity. - **Verify**: Network card reflects actual service states diff --git a/neode-ui/src/views/Home.vue b/neode-ui/src/views/Home.vue index 3b540a0c..caa28477 100644 --- a/neode-ui/src/views/Home.vue +++ b/neode-ui/src/views/Home.vue @@ -141,24 +141,24 @@
-
+
Services Status
- All Running + {{ servicesStatusText }}
-
+
Connectivity
- Connected + {{ connectivityText }}
- Connected Nodes + Running Apps
- 12 + {{ runningCount }}
@@ -377,6 +377,24 @@ const runningCount = computed(() => Object.values(packages.value).filter(pkg => pkg.state === PackageState.Running).length ) +// Network card computed values +const servicesAllRunning = computed(() => + appCount.value > 0 && runningCount.value === appCount.value +) +const servicesStatusText = computed(() => { + if (appCount.value === 0) return 'No Apps' + return servicesAllRunning.value ? 'All Running' : `${runningCount.value}/${appCount.value} Running` +}) +const servicesStatusColor = computed(() => + appCount.value === 0 ? 'text-white/60' : servicesAllRunning.value ? 'text-green-400' : 'text-yellow-400' +) +const servicesDotColor = computed(() => + appCount.value === 0 ? 'bg-white/40' : servicesAllRunning.value ? 'bg-green-400' : 'bg-yellow-400' +) +const connectivityText = computed(() => store.isConnected ? 'Connected' : 'Disconnected') +const connectivityColor = computed(() => store.isConnected ? 'text-green-400' : 'text-red-400') +const connectivityDotColor = computed(() => store.isConnected ? 'bg-green-400' : 'bg-red-400') + // Quick Start Goals dismiss logic const quickStartDismissed = ref(false)