From 9afb518ea624f172a3a74ad6d0de8eff749ada3f Mon Sep 17 00:00:00 2001
From: OG T <ogt@WOOOMacMiniM4.local>
Date: Thu, 2 Apr 2026 19:01:07 +0800
Subject: [PATCH] =?UTF-8?q?fix(ui):=20=E4=BF=AE=E5=BE=A9=E4=BA=8B=E4=BB=B6?=
 =?UTF-8?q?=E5=8D=A1=E7=89=87=E6=BA=A2=E5=87=BA=E6=A1=86=20+=20=E5=9F=BA?=
 =?UTF-8?q?=E7=A4=8E=E6=9E=B6=E6=A7=8B=E8=B3=87=E6=96=99=E6=AC=84=E4=BD=8D?=
 =?UTF-8?q?=E9=8C=AF=E8=AA=A4=E5=B0=8D=E6=87=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- incident-card: AI提案按鈕 width 100% + margin 造成右側懸浮框，改為 calc(100%-20px)
- page.tsx: useHosts() 返回 Host[] 但直接傳入 HostGrid 期望的 HostInfo[]，
  補上 mapper (name→hostname, metrics.cpu_percent→cpuPct, service.status→healthy)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 apps/web/src/app/[locale]/page.tsx                 | 13 +++++++++++--
 apps/web/src/components/incident/incident-card.tsx |  2 +-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/app/[locale]/page.tsx b/apps/web/src/app/[locale]/page.tsx
index c71597866..ae2ad20f4 100644
--- a/apps/web/src/app/[locale]/page.tsx
+++ b/apps/web/src/app/[locale]/page.tsx
@@ -14,7 +14,7 @@ import { useIncidents } from '@/hooks/useIncidents'
 import { useHosts } from '@/stores/dashboard.store'
 import { IncidentCard } from '@/components/incident'
 import { OpenClawPanel } from '@/components/ai/openclaw-panel'
-import { HostGrid } from '@/components/infra/host-grid'
+import { HostGrid, type HostInfo } from '@/components/infra/host-grid'
 import { AppLayout } from '@/components/layout'
 
 // =============================================================================
@@ -214,7 +214,16 @@ export default function Home({ params }: { params: { locale: string } }) {
               }}>
                 {tDashboard('infrastructure')}
               </div>
-              <HostGrid hosts={hosts} />
+              <HostGrid hosts={hosts.map((h): HostInfo => ({
+                hostname: h.name,
+                ip: h.ip,
+                cpuPct: h.metrics?.cpu_percent ?? null,
+                ramPct: h.metrics?.memory_percent ?? null,
+                services: h.services.map(s => ({
+                  name: s.name,
+                  healthy: s.status === 'up' || s.status === 'healthy',
+                })),
+              }))} />
             </div>
 
           </div>
diff --git a/apps/web/src/components/incident/incident-card.tsx b/apps/web/src/components/incident/incident-card.tsx
index 056aa78d9..e4441ac6a 100644
--- a/apps/web/src/components/incident/incident-card.tsx
+++ b/apps/web/src/components/incident/incident-card.tsx
@@ -334,7 +334,7 @@ export function IncidentCard({ incident, decision, onApprovalChange }: IncidentC
               gap: 5,
               fontSize: 13,
               color: '#87867f',
-              width: '100%',
+              width: 'calc(100% - 20px)',
               textAlign: 'left' as const,
               fontFamily: 'inherit',
             }}