feat: enhance itchat adapter with runtime status tracking and UI integration

web/src/app/home/bots/BotDetailContent.tsx

@@ -2,6 +2,7 @@ import { useState, useEffect, useRef, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
 import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
 import { Switch } from '@/components/ui/switch';
 import { Label } from '@/components/ui/label';
 import {
@@ -26,9 +27,79 @@ import type { BotSessionMonitorHandle } from '@/app/home/bots/components/bot-ses
 import { httpClient } from '@/app/infra/http/HttpClient';
 import { useSidebarData } from '@/app/home/components/home-sidebar/SidebarDataContext';
 import { useTranslation } from 'react-i18next';
-import { Settings, FileText, Users, RefreshCw, Trash2 } from 'lucide-react';
+import {
+  Settings,
+  FileText,
+  Users,
+  RefreshCw,
+  Trash2,
+  CircleCheck,
+  CircleAlert,
+  Loader2,
+  CircleOff,
+} from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { toast } from 'sonner';
+import type { Bot, BotAdapterRuntimeStatus } from '@/app/infra/entities/api';
+
+function getBotRuntimeStatus(bot: Bot | null): BotAdapterRuntimeStatus | null {
+  return bot?.adapter_runtime_values?.runtime_status ?? null;
+}
+
+function RuntimeStatusBadge({
+  status,
+}: {
+  status: BotAdapterRuntimeStatus | null;
+}) {
+  const { t } = useTranslation();
+  if (!status) return null;
+
+  const value = status?.connection_status ?? 'disconnected';
+
+  const config = {
+    connected: {
+      label: t('bots.runtimeConnected'),
+      className: 'border-emerald-500/30 bg-emerald-500/10 text-emerald-700',
+      icon: CircleCheck,
+    },
+    connecting: {
+      label: t('bots.runtimeConnecting'),
+      className: 'border-amber-500/30 bg-amber-500/10 text-amber-700',
+      icon: Loader2,
+    },
+    disconnected: {
+      label: t('bots.runtimeDisconnected'),
+      className: 'border-muted-foreground/20 bg-muted text-muted-foreground',
+      icon: CircleOff,
+    },
+    error: {
+      label: t('bots.runtimeError'),
+      className: 'border-destructive/30 bg-destructive/10 text-destructive',
+      icon: CircleAlert,
+    },
+  }[value];
+
+  const Icon = config.icon;
+
+  return (
+    <div className="flex min-w-0 items-center gap-2">
+      <Badge
+        variant="outline"
+        className={cn('h-6 gap-1.5 px-2 text-xs', config.className)}
+      >
+        <Icon
+          className={cn('size-3.5', value === 'connecting' && 'animate-spin')}
+        />
+        {config.label}
+      </Badge>
+      {status?.connection_error && (
+        <span className="max-w-[360px] truncate text-xs text-destructive">
+          {status.connection_error}
+        </span>
+      )}
+    </div>
+  );
+}
 
 export default function BotDetailContent({ id }: { id: string }) {
   const isCreateMode = id === 'new';
@@ -58,16 +129,24 @@ export default function BotDetailContent({ id }: { id: string }) {
   // Enable state managed here so the header switch works
   const [botEnabled, setBotEnabled] = useState(true);
   const [enableLoaded, setEnableLoaded] = useState(false);
+  const [botDetail, setBotDetail] = useState<Bot | null>(null);
+
+  const fetchBotDetail = useCallback(async () => {
+    if (isCreateMode) return;
+    const res = await httpClient.getBot(id);
+    setBotDetail(res.bot);
+    setBotEnabled(res.bot.enable ?? true);
+    setEnableLoaded(true);
+  }, [id, isCreateMode]);
 
   // Fetch bot enable state
   useEffect(() => {
     if (!isCreateMode) {
-      httpClient.getBot(id).then((res) => {
-        setBotEnabled(res.bot.enable ?? true);
-        setEnableLoaded(true);
-      });
+      fetchBotDetail();
+      const timer = window.setInterval(fetchBotDetail, 5000);
+      return () => window.clearInterval(timer);
     }
-  }, [id, isCreateMode]);
+  }, [fetchBotDetail, isCreateMode]);
 
   const handleEnableToggle = useCallback(
     async (checked: boolean) => {
@@ -95,9 +174,7 @@ export default function BotDetailContent({ id }: { id: string }) {
 
   function handleFormSubmit() {
     // Re-sync enable state after form save (form may update enable too)
-    httpClient.getBot(id).then((res) => {
-      setBotEnabled(res.bot.enable ?? true);
-    });
+    fetchBotDetail();
     refreshBots();
   }
 
@@ -173,6 +250,7 @@ export default function BotDetailContent({ id }: { id: string }) {
                 </Label>
               </div>
             )}
+            <RuntimeStatusBadge status={getBotRuntimeStatus(botDetail)} />
           </div>
           <Button
             type="submit"

web/src/app/infra/entities/api/index.ts

@@ -179,6 +179,28 @@ export interface ApiRespPlatformBot {
   bot: Bot;
 }
 
+export type BotAdapterConnectionStatus =
+  | 'connecting'
+  | 'connected'
+  | 'disconnected'
+  | 'error';
+
+export interface BotAdapterRuntimeStatus {
+  connection_status?: BotAdapterConnectionStatus;
+  connection_error?: string;
+  last_connected_at?: number | null;
+  last_disconnected_at?: number | null;
+}
+
+export interface BotAdapterRuntimeValues {
+  bot_account_id?: string;
+  webhook_url?: string | null;
+  webhook_full_url?: string | null;
+  extra_webhook_full_url?: string | null;
+  runtime_status?: BotAdapterRuntimeStatus;
+  [key: string]: unknown;
+}
+
 export interface Bot {
   uuid?: string;
   name: string;
@@ -191,7 +213,7 @@ export interface Bot {
   pipeline_routing_rules?: PipelineRoutingRule[];
   created_at?: string;
   updated_at?: string;
-  adapter_runtime_values?: object;
+  adapter_runtime_values?: BotAdapterRuntimeValues;
 }
 
 export type RoutingRuleOperator =

web/src/i18n/locales/en-US.ts

@@ -354,6 +354,10 @@ const enUS = {
     log: 'Log',
     configuration: 'Configuration',
     logs: 'Logs',
+    runtimeConnected: 'Connected',
+    runtimeConnecting: 'Connecting',
+    runtimeDisconnected: 'Disconnected',
+    runtimeError: 'Connection error',
     basicInfo: 'Basic Information',
     basicInfoDescription: 'Set the bot name and description',
     routingConnection: 'Routing & Connection',

web/src/i18n/locales/ja-JP.ts

@@ -360,6 +360,10 @@ const jaJP = {
     log: 'ログ',
     configuration: '設定',
     logs: 'ログ',
+    runtimeConnected: '接続済み',
+    runtimeConnecting: '接続中',
+    runtimeDisconnected: '切断済み',
+    runtimeError: '接続エラー',
     basicInfo: '基本情報',
     basicInfoDescription: 'ボットの名前と説明を設定',
     routingConnection: 'ルーティングと接続',

web/src/i18n/locales/zh-Hans.ts

@@ -339,6 +339,10 @@ const zhHans = {
     log: '日志',
     configuration: '配置',
     logs: '日志',
+    runtimeConnected: '已连接',
+    runtimeConnecting: '连接中',
+    runtimeDisconnected: '已掉线',
+    runtimeError: '连接错误',
     basicInfo: '基础信息',
     basicInfoDescription: '设置机器人名称和描述',
     routingConnection: '路由与连接',