From 8624c8c122acf7df770990dd29843f804d3dbb65 Mon Sep 17 00:00:00 2001
From: Eyejoker <phj1081@gmail.com>
Date: Sun, 26 Apr 2026 23:57:23 +0900
Subject: [PATCH] fix(dashboard): trim health view noise

---
 apps/dashboard/src/App.tsx    | 64 ++++++++++++++++++-----------------
 apps/dashboard/src/i18n.ts    | 16 ++++-----
 apps/dashboard/src/styles.css | 45 +++++++++++++++++-------
 3 files changed, 73 insertions(+), 52 deletions(-)

diff --git a/apps/dashboard/src/App.tsx b/apps/dashboard/src/App.tsx
index 5f14ee2..11e92ca 100644
--- a/apps/dashboard/src/App.tsx
+++ b/apps/dashboard/src/App.tsx
@@ -701,15 +701,13 @@ function HealthPanel({
   ).length;
   const healthLevel: HealthLevel =
     down > 0 ? 'down' : stale > 0 || ciFailures > 0 ? 'stale' : 'ok';
+  const affectedServices = serviceLevels.filter((item) => item.level !== 'ok');
 
   return (
     <div className="health-board">
       <section className={`health-overview health-${healthLevel}`}>
-        <div>
-          <span className="eyebrow">{t.health.system}</span>
-          <strong>{t.health.levels[healthLevel]}</strong>
-        </div>
-        <p>{t.health.summary}</p>
+        <span className="eyebrow">{t.health.system}</span>
+        <strong>{t.health.levels[healthLevel]}</strong>
       </section>
 
       <section className="health-signals" aria-label={t.health.signals}>
@@ -745,32 +743,36 @@ function HealthPanel({
 
       {services.length === 0 ? (
         <EmptyState>{t.service.empty}</EmptyState>
-      ) : (
-        <div className="health-service-list">
-          {serviceLevels.map(({ service, level, age }) => (
-            <article className="health-service" key={service.serviceId}>
-              <div>
-                <span className="eyebrow">{service.agentType}</span>
-                <strong>{service.assistantName}</strong>
-                <small>{service.serviceId}</small>
-              </div>
-              <span className={`pill pill-${level}`}>
-                {t.health.levels[level]}
-              </span>
-              <div>
-                <small>{t.service.updated}</small>
-                <strong>{formatDate(service.updatedAt, locale)}</strong>
-                <em>{formatDuration(age, t)}</em>
-              </div>
-              <div>
-                <small>{t.service.rooms}</small>
-                <strong>
-                  {service.activeRooms}/{service.totalRooms}
-                </strong>
-              </div>
-            </article>
-          ))}
-        </div>
+      ) : affectedServices.length === 0 ? null : (
+        <details className="health-service-details">
+          <summary>
+            {t.health.affectedServices}
+            <strong>{affectedServices.length}</strong>
+          </summary>
+          <div className="health-service-list">
+            {affectedServices.map(({ service, level, age }) => (
+              <article className="health-service" key={service.serviceId}>
+                <div>
+                  <strong>{service.assistantName || service.serviceId}</strong>
+                </div>
+                <span className={`pill pill-${level}`}>
+                  {t.health.levels[level]}
+                </span>
+                <div>
+                  <small>{t.service.updated}</small>
+                  <strong>{formatDate(service.updatedAt, locale)}</strong>
+                  <em>{formatDuration(age, t)}</em>
+                </div>
+                <div>
+                  <small>{t.service.rooms}</small>
+                  <strong>
+                    {service.activeRooms}/{service.totalRooms}
+                  </strong>
+                </div>
+              </article>
+            ))}
+          </div>
+        </details>
       )}
     </div>
   );
diff --git a/apps/dashboard/src/i18n.ts b/apps/dashboard/src/i18n.ts
index 6ef0e50..b51769a 100644
--- a/apps/dashboard/src/i18n.ts
+++ b/apps/dashboard/src/i18n.ts
@@ -65,13 +65,13 @@ export interface Messages {
   };
   health: {
     system: string;
-    summary: string;
     signals: string;
     services: string;
     fresh: string;
     stale: string;
     queue: string;
     ciFailures: string;
+    affectedServices: string;
     levels: {
       ok: string;
       stale: string;
@@ -259,13 +259,13 @@ export const messages = {
     },
     health: {
       system: '시스템',
-      summary: '헬스는 heartbeat, 큐, CI 실패를 합산합니다.',
       signals: '헬스 신호',
       services: '서비스',
-      fresh: '정상 heartbeat',
+      fresh: '정상',
       stale: '지연',
       queue: '큐',
       ciFailures: 'CI 실패',
+      affectedServices: '이상 서비스',
       levels: {
         ok: '정상',
         stale: '주의',
@@ -437,13 +437,13 @@ export const messages = {
     },
     health: {
       system: 'System',
-      summary: 'Health combines heartbeat, queue, and CI failures.',
       signals: 'Health signals',
       services: 'Services',
-      fresh: 'fresh heartbeat',
+      fresh: 'Fresh',
       stale: 'stale',
       queue: 'Queue',
       ciFailures: 'CI failures',
+      affectedServices: 'Affected services',
       levels: {
         ok: 'OK',
         stale: 'Watch',
@@ -615,13 +615,13 @@ export const messages = {
     },
     health: {
       system: '系统',
-      summary: '健康状态汇总心跳、队列和 CI 失败。',
       signals: '健康信号',
       services: '服务',
       fresh: '心跳正常',
       stale: '延迟',
       queue: '队列',
       ciFailures: 'CI 失败',
+      affectedServices: '异常服务',
       levels: {
         ok: '正常',
         stale: '关注',
@@ -793,13 +793,13 @@ export const messages = {
     },
     health: {
       system: 'システム',
-      summary: '状態はハートビート、キュー、CI失敗を集計します。',
       signals: '状態シグナル',
       services: 'サービス',
-      fresh: '正常ハートビート',
+      fresh: '正常',
       stale: '遅延',
       queue: 'キュー',
       ciFailures: 'CI失敗',
+      affectedServices: '異常サービス',
       levels: {
         ok: '正常',
         stale: '注意',
diff --git a/apps/dashboard/src/styles.css b/apps/dashboard/src/styles.css
index b18e4db..03685ba 100644
--- a/apps/dashboard/src/styles.css
+++ b/apps/dashboard/src/styles.css
@@ -813,7 +813,8 @@ progress::-moz-progress-bar {
 .health-signals div,
 .health-overview,
 .inbox-card,
-.health-service {
+.health-service,
+.health-service-details {
   border: 1px solid rgba(43, 55, 38, 0.1);
   border-radius: 18px;
   background: rgba(255, 250, 240, 0.64);
@@ -954,23 +955,17 @@ progress::-moz-progress-bar {
 }
 
 .health-overview {
-  display: grid;
-  grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
-  gap: 14px;
+  display: flex;
+  gap: 10px;
   align-items: center;
-  padding: 16px;
+  justify-content: space-between;
+  padding: 11px 12px;
 }
 
 .health-overview strong {
   display: block;
-  margin-top: 4px;
-  font-size: clamp(24px, 3vw, 40px);
-  letter-spacing: -0.05em;
-}
-
-.health-overview p {
-  margin: 0;
-  color: var(--muted);
+  font-size: clamp(20px, 2vw, 28px);
+  letter-spacing: -0.04em;
 }
 
 .health-down {
@@ -986,6 +981,30 @@ progress::-moz-progress-bar {
   gap: 8px;
 }
 
+.health-service-details {
+  padding: 10px;
+}
+
+.health-service-details summary {
+  display: flex;
+  min-height: 34px;
+  cursor: pointer;
+  align-items: center;
+  justify-content: space-between;
+  color: var(--bg-ink);
+  font-size: 13px;
+  font-weight: 900;
+  list-style: none;
+}
+
+.health-service-details summary::-webkit-details-marker {
+  display: none;
+}
+
+.health-service-details[open] summary {
+  margin-bottom: 8px;
+}
+
 .health-service {
   grid-template-columns: minmax(0, 1.2fr) auto minmax(0, 0.9fr) minmax(
       64px,