From 4ac4e12aad4cdb93ca8a32683c00e0d7ce30076c Mon Sep 17 00:00:00 2001
From: Haze <709547807@qq.com>
Date: Fri, 17 Apr 2026 19:13:31 +0800
Subject: [PATCH] style(channels): align status indicator with Models card
 style (#867)

Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: Haze <hazeone@users.noreply.github.com>
---
 src/pages/Channels/index.tsx                  | 29 +++++++++++--------
 tests/e2e/channels-binding-regression.spec.ts |  3 ++
 tests/e2e/channels-health-diagnostics.spec.ts |  2 +-
 3 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/src/pages/Channels/index.tsx b/src/pages/Channels/index.tsx
index eae164fe6..150088996 100644
--- a/src/pages/Channels/index.tsx
+++ b/src/pages/Channels/index.tsx
@@ -616,19 +616,24 @@ export function Channels() {
                           <h3 className="text-[16px] font-semibold text-foreground truncate">
                             {CHANNEL_NAMES[group.channelType as ChannelType] || group.channelType}
                           </h3>
-                          <p className="text-[12px] text-muted-foreground">{group.channelType}</p>
+                          <div className="flex items-center gap-2 text-[12px] text-muted-foreground">
+                            <span>{group.channelType}</span>
+                            <span className="w-1 h-1 rounded-full bg-black/20 dark:bg-white/20" />
+                            <span className="flex items-center gap-1">
+                              <span
+                                className={cn(
+                                  'inline-block h-1.5 w-1.5 rounded-full shrink-0',
+                                  group.status === 'connected' && 'bg-green-500',
+                                  group.status === 'connecting' && 'bg-sky-500 animate-pulse',
+                                  group.status === 'degraded' && 'bg-yellow-500',
+                                  group.status === 'error' && 'bg-red-500',
+                                  group.status === 'disconnected' && 'bg-gray-400',
+                                )}
+                              />
+                              {statusLabel(group.status)}
+                            </span>
+                          </div>
                         </div>
-                        <span
-                          className={cn(
-                            'inline-block h-2.5 w-2.5 rounded-full shrink-0',
-                            group.status === 'connected' && 'bg-green-500',
-                            group.status === 'connecting' && 'bg-sky-500 animate-pulse',
-                            group.status === 'degraded' && 'bg-yellow-500',
-                            group.status === 'error' && 'bg-red-500',
-                            group.status === 'disconnected' && 'bg-gray-400',
-                          )}
-                          title={statusLabel(group.status)}
-                        />
                       </div>
 
                       <div className="flex items-center gap-2">
diff --git a/tests/e2e/channels-binding-regression.spec.ts b/tests/e2e/channels-binding-regression.spec.ts
index f009cb5bc..1fa7558f6 100644
--- a/tests/e2e/channels-binding-regression.spec.ts
+++ b/tests/e2e/channels-binding-regression.spec.ts
@@ -98,6 +98,9 @@ test.describe('Channels binding regression', () => {
     await expect(page.getByTestId('channels-page')).toBeVisible();
     await expect(page.getByText('Feishu / Lark')).toBeVisible();
 
+    const feishuGroupHeader = page.locator('div.rounded-2xl').filter({ hasText: 'Feishu / Lark' }).first();
+    await expect(feishuGroupHeader).toContainText(/Connected|已连接|接続済み|Подключён/);
+
     await page.getByRole('button', { name: /Add Account|添加账号|アカウントを追加/ }).click();
     await expect(page.getByText(/Configure Feishu \/ Lark|dialog\.configureTitle/)).toBeVisible();
 
diff --git a/tests/e2e/channels-health-diagnostics.spec.ts b/tests/e2e/channels-health-diagnostics.spec.ts
index fba43f12a..94d748dac 100644
--- a/tests/e2e/channels-health-diagnostics.spec.ts
+++ b/tests/e2e/channels-health-diagnostics.spec.ts
@@ -138,7 +138,7 @@ test.describe('Channels health diagnostics', () => {
     await expect(page.getByTestId('channels-page')).toBeVisible();
     await expect(page.getByTestId('channels-health-banner')).toBeVisible();
     await expect(page.getByText(/Gateway degraded|网关状态异常|ゲートウェイ劣化/)).toBeVisible();
-    await expect(page.locator('div.rounded-2xl').getByTitle(/Degraded|异常降级|劣化中/).first()).toBeVisible();
+    await expect(page.locator('div.rounded-2xl').getByText(/Degraded|异常降级|劣化中/).first()).toBeVisible();
 
     await page.getByTestId('channels-restart-gateway').click();
     await page.getByTestId('channels-copy-diagnostics').click();