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

@@ -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">

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();
 

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();