From c361153c671218d80e3d89df4132ca8c763a9be8 Mon Sep 17 00:00:00 2001
From: OG T <ogt@WOOOMacMiniM4.local>
Date: Sat, 28 Mar 2026 18:45:26 +0800
Subject: [PATCH] =?UTF-8?q?fix(ui):=20Phase=2019=20P1=20=E4=BF=AE=E5=BE=A9?=
 =?UTF-8?q?=20Header=E3=80=8C=E5=B7=B2=E6=96=B7=E7=B7=9A=E3=80=8D=E7=8B=80?=
 =?UTF-8?q?=E6=85=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

問題: 非 Dashboard 頁面顯示「已斷線」，因為 SSE 只在 Dashboard 啟動

修復:
- AppLayout 全局啟動 SSE 連接 (所有頁面共享)
- LiveDashboard 移除重複的 SSE 連接邏輯
- 現在所有頁面都會顯示正確的連線狀態

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../components/dashboard/live-dashboard.tsx   | 19 +++++++----------
 apps/web/src/components/layout/app-layout.tsx | 21 +++++++++++++++++++
 2 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/apps/web/src/components/dashboard/live-dashboard.tsx b/apps/web/src/components/dashboard/live-dashboard.tsx
index 64236a40..b0519257 100644
--- a/apps/web/src/components/dashboard/live-dashboard.tsx
+++ b/apps/web/src/components/dashboard/live-dashboard.tsx
@@ -61,7 +61,8 @@ export function LiveDashboard({ locale }: LiveDashboardProps) {
   const tBrand = useTranslations('brand')
   const tHost = useTranslations('host')
 
-  const { connect, disconnect } = useDashboardStore()
+  // Phase 19 修復: SSE 連接已移至 AppLayout 全局管理
+  // const { connect, disconnect } = useDashboardStore()
   const hosts = useHosts()
   const overallStatus = useOverallStatus()
   const alerts = useAlerts()
@@ -110,16 +111,12 @@ export function LiveDashboard({ locale }: LiveDashboardProps) {
     },
   }
 
-  useEffect(() => {
-    const apiBaseUrl = getApiBaseUrl()
-    console.log('[Dashboard] Connecting to SSE...', apiBaseUrl)
-    connect(apiBaseUrl)
-
-    return () => {
-      console.log('[Dashboard] Disconnecting SSE...')
-      disconnect()
-    }
-  }, [connect, disconnect])
+  // Phase 19 修復: SSE 連接已移至 AppLayout 全局管理
+  // useEffect(() => {
+  //   const apiBaseUrl = getApiBaseUrl()
+  //   connect(apiBaseUrl)
+  //   return () => disconnect()
+  // }, [connect, disconnect])
 
   return (
     <div className="space-y-6">
diff --git a/apps/web/src/components/layout/app-layout.tsx b/apps/web/src/components/layout/app-layout.tsx
index 05f78188..1e44e787 100644
--- a/apps/web/src/components/layout/app-layout.tsx
+++ b/apps/web/src/components/layout/app-layout.tsx
@@ -9,6 +9,9 @@
  * - 響應式側邊欄折疊
  * - 主內容區域自動適應
  * - 持久化折疊狀態 (localStorage)
+ * - **Phase 19 修復**: 全局 SSE 連接 (所有頁面共享連線狀態)
+ *
+ * @updated 2026-03-28 - 修復 Header「已斷線」狀態問題
  */
 
 import { useState, useEffect } from 'react'
@@ -16,6 +19,7 @@ import { Sidebar } from './sidebar'
 import { Header } from './header'
 import { DotMatrixBg } from '@/components/ui/dot-matrix-bg'
 import { cn } from '@/lib/utils'
+import { useDashboardStore } from '@/stores/dashboard.store'
 
 // =============================================================================
 // Types
@@ -45,6 +49,9 @@ export function AppLayout({
   const [collapsed, setCollapsed] = useState(false)
   const [mounted, setMounted] = useState(false)
 
+  // Phase 19 修復: 全局 SSE 連接
+  const { connect, disconnect } = useDashboardStore()
+
   // Load collapsed state from localStorage
   useEffect(() => {
     setMounted(true)
@@ -54,6 +61,20 @@ export function AppLayout({
     }
   }, [])
 
+  // Phase 19 修復: 全局啟動 SSE 連接 (所有頁面共享)
+  useEffect(() => {
+    const apiBaseUrl = process.env.NEXT_PUBLIC_API_URL || ''
+    if (apiBaseUrl) {
+      console.log('[AppLayout] 全局 SSE 連接啟動...', apiBaseUrl)
+      connect(apiBaseUrl)
+    }
+
+    return () => {
+      console.log('[AppLayout] SSE 連接關閉')
+      disconnect()
+    }
+  }, [connect, disconnect])
+
   // Save collapsed state to localStorage
   const handleToggle = () => {
     const newState = !collapsed