✨ Make a broke websocket on watchOS (w.i.p)

ios/WatchRunner Watch App/Views/AppInfoHeaderView.swift

@@ -5,9 +5,14 @@
 //  Created by LittleSheep on 2025/10/30.
 //
 
+import Combine
 import SwiftUI
 
 struct AppInfoHeaderView : View {
+    @EnvironmentObject var appState: AppState // Access AppState
+    @State private var webSocketConnectionState: WebSocketState = .disconnected // New state for WebSocket status
+    @State private var cancellables = Set<AnyCancellable>() // For managing subscriptions
+
     var body: some View {
         VStack(alignment: .leading) {
             HStack(spacing: 12) {
@@ -18,8 +23,40 @@ struct AppInfoHeaderView : View {
                 VStack(alignment: .leading) {
                     Text("Solian").font(.headline)
                     Text("for Apple Watch").font(.system(size: 11))
+                    
+                    // Display WebSocket connection status
+                    Text(webSocketStatusMessage)
+                        .font(.caption2)
+                        .foregroundColor(.secondary)
                 }
             }
         }
+        .onAppear {
+            setupWebSocketListeners()
+        }
+        .onDisappear {
+            cancellables.forEach { $0.cancel() }
+            cancellables.removeAll()
+        }
+    }
+
+    private var webSocketStatusMessage: String {
+        switch webSocketConnectionState {
+        case .connected: return "Connected"
+        case .connecting: return "Connecting..."
+        case .disconnected: return "Disconnected"
+        case .serverDown: return "Server Down"
+        case .duplicateDevice: return "Duplicate Device"
+        case .error(let msg): return "Error: \(msg)"
+        }
+    }
+
+    private func setupWebSocketListeners() {
+        appState.networkService.stateStream
+            .receive(on: DispatchQueue.main)
+            .sink { state in
+                webSocketConnectionState = state
+            }
+            .store(in: &cancellables)
     }
 }