feat: 添加swarms团队编排功能并优化agent委派系统

- 引入AgentTeamOrchestrator支持多agent协同任务执行
- 增加第三方swarms库依赖并配置git协议替换以改善包管理
- 扩展DelegationManager支持团队任务调度和进度跟踪
- 实现中文bigram分词算法提升中文任务检索准确性
- 调整A2AClient和DelegationManager超时时间从30秒增至600秒
- 优化AgentRunResult状态判断逻辑增加有意义摘要检测
- 修改Dockerfile配置npm仓库镜像地址和git协议映射
- 更新CLI命令行接口支持网关端口配置传递
- 调整提供者超时配置机制增强请求稳定性
- 移除过时的support_group字段简化agent描述符结构
- 增强错误处理和进度事件报告机制改进用户体验

app-instance/frontend/components/AppRuntimeBridge.tsx

@@ -0,0 +1,122 @@
+'use client';
+
+import React from 'react';
+
+import { getStatus, listSessions, wsManager } from '@/lib/api';
+import { useChatStore } from '@/lib/store';
+import type { ProcessWsEvent, SessionUpdatedEvent, WsEvent } from '@/types';
+
+function scheduleWhenIdle(task: () => void, timeout = 1200): () => void {
+  if (typeof window === 'undefined') {
+    task();
+    return () => {};
+  }
+
+  const idleWindow = window as Window &
+    typeof globalThis & {
+      requestIdleCallback?: (callback: IdleRequestCallback, options?: IdleRequestOptions) => number;
+      cancelIdleCallback?: (handle: number) => void;
+    };
+
+  if (typeof idleWindow.requestIdleCallback === 'function') {
+    const id = idleWindow.requestIdleCallback(() => task(), { timeout });
+    return () => idleWindow.cancelIdleCallback?.(id);
+  }
+
+  const id = globalThis.setTimeout(task, 250);
+  return () => globalThis.clearTimeout(id);
+}
+
+function isProcessEvent(data: WsEvent | Record<string, unknown>): data is ProcessWsEvent {
+  const type = typeof data.type === 'string' ? data.type : '';
+  return type.startsWith('process_') || type === 'process_cancel_ack';
+}
+
+function isSessionUpdatedEvent(data: WsEvent | Record<string, unknown>): data is SessionUpdatedEvent {
+  return data.type === 'session_updated' && typeof data.session_id === 'string';
+}
+
+export function AppRuntimeBridge() {
+  const sessionId = useChatStore((state) => state.sessionId);
+  const setSessions = useChatStore((state) => state.setSessions);
+  const setWsStatus = useChatStore((state) => state.setWsStatus);
+  const setNanobotReady = useChatStore((state) => state.setNanobotReady);
+  const resetProcessState = useChatStore((state) => state.resetProcessState);
+  const ingestProcessEvent = useChatStore((state) => state.ingestProcessEvent);
+  const statusCheckCleanupRef = React.useRef<(() => void) | null>(null);
+  const statusCheckInFlightRef = React.useRef(false);
+
+  const loadSessions = React.useCallback(async () => {
+    try {
+      const sessions = await listSessions();
+      setSessions(sessions);
+    } catch {
+      // backend may still be offline during first render
+    }
+  }, [setSessions]);
+
+  const scheduleStatusCheck = React.useCallback(() => {
+    if (statusCheckInFlightRef.current) return;
+
+    statusCheckCleanupRef.current?.();
+    statusCheckCleanupRef.current = scheduleWhenIdle(async () => {
+      statusCheckInFlightRef.current = true;
+      try {
+        await getStatus();
+        setNanobotReady(true);
+      } catch {
+        setNanobotReady(false);
+      } finally {
+        statusCheckInFlightRef.current = false;
+      }
+    });
+  }, [setNanobotReady]);
+
+  React.useEffect(() => {
+    void loadSessions();
+  }, [loadSessions]);
+
+  React.useEffect(() => {
+    resetProcessState();
+    const wsSessionId = sessionId.startsWith('web:') ? sessionId.slice(4) : sessionId;
+    wsManager.connect(wsSessionId);
+  }, [resetProcessState, sessionId]);
+
+  React.useEffect(() => {
+    const unsubStatus = wsManager.onStatusChange((status) => {
+      setWsStatus(status);
+      if (status === 'connected') {
+        scheduleStatusCheck();
+      } else {
+        statusCheckCleanupRef.current?.();
+        statusCheckCleanupRef.current = null;
+        setNanobotReady(null);
+      }
+    });
+
+    return () => {
+      statusCheckCleanupRef.current?.();
+      statusCheckCleanupRef.current = null;
+      unsubStatus();
+    };
+  }, [scheduleStatusCheck, setNanobotReady, setWsStatus]);
+
+  React.useEffect(() => {
+    const unsubMessage = wsManager.onMessage((data) => {
+      if (isSessionUpdatedEvent(data)) {
+        void loadSessions();
+        return;
+      }
+
+      if (isProcessEvent(data)) {
+        ingestProcessEvent(data);
+      }
+    });
+
+    return () => {
+      unsubMessage();
+    };
+  }, [ingestProcessEvent, loadSessions]);
+
+  return null;
+}

app-instance/frontend/components/AuthGuard.tsx

@@ -4,6 +4,8 @@ import { useEffect } from 'react';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { buildAuthPortalUrl } from '@/lib/auth-portal';
 import { clearTokens, getMe, isLoggedIn } from '@/lib/api';
+import { pickAppText } from '@/lib/i18n/core';
+import { useAppI18n } from '@/lib/i18n/provider';
 import { useChatStore } from '@/lib/store';
 
 export default function AuthGuard({
@@ -13,6 +15,7 @@ export default function AuthGuard({
   children: React.ReactNode;
   minHeightClassName?: string;
 }) {
+  const { locale } = useAppI18n();
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
@@ -86,7 +89,7 @@ export default function AuthGuard({
   if (isAuthLoading) {
     return (
       <div className={`flex ${minHeightClassName} items-center justify-center`}>
-        <div className="text-muted-foreground">加载中...</div>
+        <div className="text-muted-foreground">{pickAppText(locale, '加载中...', 'Loading...')}</div>
       </div>
     );
   }

app-instance/frontend/components/Header.tsx

@@ -4,37 +4,54 @@ import React from 'react';
 import Link from 'next/link';
 import Image from 'next/image';
 import { usePathname, useRouter } from 'next/navigation';
-import { MessageSquare, Activity, Clock, Puzzle, Blocks, HelpCircle, FolderOpen, Store, LogIn, UserPlus, Bot, ServerCog, Mail, LogOut, UserCircle2 } from 'lucide-react';
+import { MessageSquare, Activity, Clock, Puzzle, Blocks, FolderOpen, Store, LogIn, UserPlus, Bot, ServerCog, Mail, LogOut, ChevronDown } from 'lucide-react';
 import { logout } from '@/lib/api';
+import { LanguageSwitcher } from '@/components/LanguageSwitcher';
+import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+import { Button } from '@/components/ui/button';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { appConnectionStatusLabel } from '@/lib/i18n/common';
+import { pickAppText } from '@/lib/i18n/core';
+import { useAppI18n } from '@/lib/i18n/provider';
 import { useChatStore } from '@/lib/store';
 
 type NavItem = {
-  name: string;
+  key:
+    | 'chat'
+    | 'status'
+    | 'office'
+    | 'skills'
+    | 'plugins'
+    | 'agents'
+    | 'mcp'
+    | 'outlook'
+    | 'marketplace'
+    | 'files';
   href: string;
   icon: React.ComponentType<{ className?: string }>;
   matchPrefixes?: string[];
 };
 
 const NAV_ITEMS: NavItem[] = [
-  { name: '对话', href: '/', icon: MessageSquare },
-  { name: '状态', href: '/status', icon: Activity },
-  { name: '任务管理', href: '/office', icon: Clock, matchPrefixes: ['/office', '/cron'] },
-  { name: '技能', href: '/skills', icon: Puzzle },
-  { name: '插件', href: '/plugins', icon: Blocks },
-  { name: '智能体', href: '/agents', icon: Bot },
-  { name: 'MCP', href: '/mcp', icon: ServerCog },
-  { name: 'Outlook', href: '/outlook', icon: Mail },
-  { name: '市场', href: '/marketplace', icon: Store },
-  { name: '文件', href: '/files', icon: FolderOpen },
-  { name: '帮助', href: '/help', icon: HelpCircle },
+  { key: 'chat', href: '/', icon: MessageSquare },
+  { key: 'status', href: '/status', icon: Activity },
+  { key: 'office', href: '/office', icon: Clock, matchPrefixes: ['/office', '/cron'] },
+  { key: 'skills', href: '/skills', icon: Puzzle },
+  { key: 'plugins', href: '/plugins', icon: Blocks },
+  { key: 'agents', href: '/agents', icon: Bot },
+  { key: 'mcp', href: '/mcp', icon: ServerCog },
+  { key: 'outlook', href: '/outlook', icon: Mail },
+  { key: 'marketplace', href: '/marketplace', icon: Store },
+  { key: 'files', href: '/files', icon: FolderOpen },
 ];
 
 const AUTH_ITEMS = [
-  { name: '登录', href: '/login', icon: LogIn },
-  { name: '注册', href: '/register', icon: UserPlus },
-];
+  { key: 'login', href: '/login', icon: LogIn },
+  { key: 'register', href: '/register', icon: UserPlus },
+] as const;
 
 function ConnectionDot() {
+  const { locale } = useAppI18n();
   const wsStatus = useChatStore((s) => s.wsStatus);
   const nanobotReady = useChatStore((s) => s.nanobotReady);
 
@@ -49,15 +66,7 @@ function ConnectionDot() {
       ? 'bg-yellow-500'
       : 'bg-red-500';
 
-  const label = isOnline
-    ? '已连接'
-    : isChecking
-      ? '检查中'
-      : wsStatus === 'connecting'
-        ? '连接中'
-        : isOffline && wsStatus === 'connected'
-          ? '服务离线'
-          : '未连接';
+  const label = appConnectionStatusLabel(wsStatus, nanobotReady, locale);
 
   return (
     <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
@@ -68,12 +77,32 @@ function ConnectionDot() {
 }
 
 const Header = () => {
+  const { locale } = useAppI18n();
   const pathname = usePathname();
   const router = useRouter();
   const user = useChatStore((s) => s.user);
   const isAuthLoading = useChatStore((s) => s.isAuthLoading);
   const setUser = useChatStore((s) => s.setUser);
 
+  const navLabel = React.useCallback((key: NavItem['key']) => {
+    if (key === 'chat') return pickAppText(locale, '对话', 'Chat');
+    if (key === 'status') return pickAppText(locale, '状态', 'Status');
+    if (key === 'office') return pickAppText(locale, '任务管理', 'Tasks');
+    if (key === 'skills') return pickAppText(locale, '技能', 'Skills');
+    if (key === 'plugins') return pickAppText(locale, '插件', 'Plugins');
+    if (key === 'agents') return pickAppText(locale, '智能体', 'Agents');
+    if (key === 'mcp') return 'MCP';
+    if (key === 'outlook') return 'Outlook';
+    if (key === 'marketplace') return pickAppText(locale, '市场', 'Marketplace');
+    return pickAppText(locale, '文件', 'Files');
+  }, [locale]);
+
+  const authLabel = React.useCallback((key: 'login' | 'register') => (
+    key === 'login'
+      ? pickAppText(locale, '登录', 'Sign In')
+      : pickAppText(locale, '注册', 'Sign Up')
+  ), [locale]);
+
   const handleLogout = async () => {
     await logout();
     setUser(null);
@@ -81,6 +110,8 @@ const Header = () => {
     router.refresh();
   };
 
+  const userInitial = (user?.username || user?.email || '?').trim().charAt(0).toUpperCase();
+
   return (
     <header className="fixed top-0 left-0 right-0 bg-background border-b border-border z-50">
       <div className="max-w-[1720px] mx-auto px-5 sm:px-6 lg:px-8 xl:px-10">
@@ -117,28 +148,68 @@ const Header = () => {
                     }`}
                   >
                     <Icon className="w-4 h-4" />
-                    {item.name}
+                    {navLabel(item.key)}
                   </Link>
                 );
               })}
             </nav>
 
-            <div className="flex shrink-0 items-center gap-1.5 border-l border-border pl-4">
+            <div className="flex shrink-0 items-center gap-2 border-l border-border pl-4">
+              <LanguageSwitcher />
               {user ? (
-                <>
-                  <div className="flex items-center gap-1.5 rounded-md px-3 py-2 text-sm font-medium text-foreground">
-                    <UserCircle2 className="w-4 h-4" />
-                    <span className="max-w-32 truncate">{user.username}</span>
-                  </div>
-                  <button
-                    type="button"
-                    onClick={handleLogout}
-                    className="flex items-center gap-1.5 rounded-md px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
-                  >
-                    <LogOut className="w-4 h-4" />
-                    退出登录
-                  </button>
-                </>
+                <Popover>
+                  <PopoverTrigger asChild>
+                    <button
+                      type="button"
+                      className="flex items-center gap-2 rounded-full border border-border/70 bg-background px-2 py-1.5 text-sm font-medium text-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+                    >
+                      <Avatar className="h-8 w-8 border border-border/60">
+                        <AvatarFallback className="bg-primary text-xs font-semibold text-primary-foreground">
+                          {userInitial}
+                        </AvatarFallback>
+                      </Avatar>
+                      <span className="hidden max-w-28 truncate sm:block">{user.username}</span>
+                      <ChevronDown className="h-4 w-4 text-muted-foreground" />
+                    </button>
+                  </PopoverTrigger>
+                  <PopoverContent align="end" className="w-80 rounded-3xl border-border/70 p-0 shadow-2xl">
+                    <div className="overflow-hidden rounded-3xl bg-gradient-to-b from-slate-50 via-slate-50 to-white">
+                      <div className="border-b border-border/60 px-6 py-5">
+                        <p className="truncate text-center text-sm font-medium text-muted-foreground">
+                          {user.email}
+                        </p>
+                      </div>
+
+                      <div className="flex flex-col items-center gap-4 px-6 py-6 text-center">
+                        <Avatar className="h-24 w-24 border-4 border-white shadow-sm">
+                          <AvatarFallback className="bg-primary text-4xl font-semibold text-primary-foreground">
+                            {userInitial}
+                          </AvatarFallback>
+                        </Avatar>
+                        <div className="space-y-1">
+                          <p className="text-2xl font-semibold tracking-tight text-foreground">
+                            {pickAppText(locale, `${user.username}，你好！`, `Hi, ${user.username}`)}
+                          </p>
+                          <p className="text-sm text-muted-foreground">
+                            {pickAppText(locale, '当前已登录到你的工作区实例。', 'You are currently signed in to your workspace instance.')}
+                          </p>
+                        </div>
+                      </div>
+
+                      <div className="border-t border-border/60 bg-white/90 px-4 py-4">
+                        <Button
+                          type="button"
+                          variant="outline"
+                          onClick={handleLogout}
+                          className="h-12 w-full justify-center rounded-2xl text-sm font-semibold"
+                        >
+                          <LogOut className="mr-2 h-4 w-4" />
+                          {pickAppText(locale, '退出登录', 'Sign Out')}
+                        </Button>
+                      </div>
+                    </div>
+                  </PopoverContent>
+                </Popover>
               ) : !isAuthLoading ? (
                 AUTH_ITEMS.map((item) => {
                   const isActive = pathname.startsWith(item.href);
@@ -154,7 +225,7 @@ const Header = () => {
                       }`}
                     >
                       <Icon className="w-4 h-4" />
-                      {item.name}
+                      {authLabel(item.key)}
                     </Link>
                   );
                 })

app-instance/frontend/components/LanguageSwitcher.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import { Languages } from 'lucide-react';
+
+import { useAppI18n } from '@/lib/i18n/provider';
+import { cn } from '@/lib/utils';
+
+const OPTIONS = [
+  { value: 'zh-CN', label: 'ZH' },
+  { value: 'en-US', label: 'EN' },
+] as const;
+
+export function LanguageSwitcher({ className }: { className?: string }) {
+  const { locale, setLocale } = useAppI18n();
+
+  return (
+    <div
+      className={cn(
+        'inline-flex items-center gap-1 rounded-md border border-border bg-muted/30 p-1',
+        className
+      )}
+    >
+      <Languages className="h-3.5 w-3.5 text-muted-foreground" />
+      {OPTIONS.map((option) => (
+        <button
+          key={option.value}
+          type="button"
+          onClick={() => setLocale(option.value)}
+          className={cn(
+            'rounded px-2 py-1 text-xs font-medium transition-colors',
+            locale === option.value
+              ? 'bg-background text-foreground shadow-sm'
+              : 'text-muted-foreground hover:text-foreground'
+          )}
+        >
+          {option.label}
+        </button>
+      ))}
+    </div>
+  );
+}

app-instance/frontend/components/chat-workbench/AgentTeamBlock.tsx

@@ -6,6 +6,9 @@ import { CheckCircle2, Loader2, Sparkles, Square } from 'lucide-react';
 import type { ProcessArtifact, ProcessEvent, ProcessRun } from '@/types';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
+import { appArtifactPreview, appFeedRoleLabel, appStatusLabel } from '@/lib/i18n/common';
+import { pickAppText } from '@/lib/i18n/core';
+import { useAppI18n } from '@/lib/i18n/provider';
 import { cn } from '@/lib/utils';
 
 type RunCardPhase = 'live' | 'exiting' | 'collapsed';
@@ -51,15 +54,6 @@ function accentFor(index: number) {
   return AGENT_ACCENTS[index % AGENT_ACCENTS.length];
 }
 
-function statusLabel(status: ProcessRun['status']) {
-  if (status === 'done') return '已完成';
-  if (status === 'error') return '失败';
-  if (status === 'cancelled') return '已取消';
-  if (status === 'waiting') return '等待中';
-  if (status === 'queued') return '排队中';
-  return '进行中';
-}
-
 function statusTone(status: ProcessRun['status']) {
   if (status === 'done') return 'border-emerald-500/20 bg-emerald-500/10 text-emerald-300';
   if (status === 'error') return 'border-rose-500/20 bg-rose-500/10 text-rose-300';
@@ -69,13 +63,6 @@ function statusTone(status: ProcessRun['status']) {
   return 'border-sky-500/20 bg-sky-500/10 text-sky-300';
 }
 
-function roleLabel(role: AgentFeedItem['role']) {
-  if (role === 'user') return '主 agent';
-  if (role === 'tool') return '工具输出';
-  if (role === 'system') return '状态';
-  return '子 agent';
-}
-
 function feedTone(role: AgentFeedItem['role']) {
   if (role === 'user') {
     return 'ml-6 border-border/70 bg-muted/60 text-foreground';
@@ -89,22 +76,6 @@ function feedTone(role: AgentFeedItem['role']) {
   return 'mr-6 border-border/70 bg-background/80 text-foreground';
 }
 
-function artifactPreview(artifact: ProcessArtifact): string {
-  if (artifact.artifact_type === 'link' && artifact.url) {
-    return `${artifact.title}\n${artifact.url}`;
-  }
-  if ((artifact.artifact_type === 'text' || artifact.artifact_type === 'markdown') && artifact.content) {
-    return `${artifact.title}\n${artifact.content}`;
-  }
-  if (artifact.artifact_type === 'json') {
-    return `${artifact.title}\n已生成结构化结果`;
-  }
-  if (artifact.file_id) {
-    return `${artifact.title}\n已生成文件输出`;
-  }
-  return artifact.title;
-}
-
 function delegatedTask(run: ProcessRun): string | null {
   const value = run.metadata?.delegated_task;
   return typeof value === 'string' && value.trim() ? value.trim() : null;
@@ -114,6 +85,7 @@ function buildFeed(
   run: ProcessRun,
   events: ProcessEvent[],
   artifacts: ProcessArtifact[],
+  locale: 'zh-CN' | 'en-US',
 ): AgentFeedItem[] {
   const items: AgentFeedItem[] = [];
   let hasLeadBubble = false;
@@ -160,7 +132,7 @@ function buildFeed(
       key: artifact.artifact_id,
       created_at: artifact.created_at,
       role: artifact.actor_type === 'mcp' ? 'tool' : 'assistant',
-      text: artifactPreview(artifact),
+      text: appArtifactPreview(artifact, locale),
     });
   }
 
@@ -181,12 +153,12 @@ function buildFeed(
     .slice(-8);
 }
 
-function runSummary(run: ProcessRun, feed: AgentFeedItem[]): string {
+function runSummary(run: ProcessRun, feed: AgentFeedItem[], locale: 'zh-CN' | 'en-US'): string {
   if (run.summary?.trim()) {
     return run.summary.trim();
   }
   const latestAssistant = [...feed].reverse().find((item) => item.role === 'assistant' || item.role === 'tool');
-  return latestAssistant?.text || '已完成子任务处理';
+  return latestAssistant?.text || pickAppText(locale, '已完成子任务处理', 'Subtask processing completed');
 }
 
 function useRunCardPhases(runs: ProcessRun[]) {
@@ -256,7 +228,13 @@ function useRunCardPhases(runs: ProcessRun[]) {
   return phases;
 }
 
-function AgentBubble({ item }: { item: AgentFeedItem }) {
+function AgentBubble({
+  item,
+  locale,
+}: {
+  item: AgentFeedItem;
+  locale: 'zh-CN' | 'en-US';
+}) {
   return (
     <div
       className={cn(
@@ -266,7 +244,7 @@ function AgentBubble({ item }: { item: AgentFeedItem }) {
       )}
     >
       <div className="mb-1 text-[10px] font-medium uppercase tracking-[0.14em] text-muted-foreground">
-        <span>{roleLabel(item.role)}</span>
+        <span>{appFeedRoleLabel(item.role, locale)}</span>
       </div>
       <div className="whitespace-pre-wrap break-words">{item.text}</div>
     </div>
@@ -281,6 +259,7 @@ function LiveAgentCard({
   phase,
   accentIndex,
   onSelect,
+  locale,
 }: {
   run: ProcessRun;
   feed: AgentFeedItem[];
@@ -289,6 +268,7 @@ function LiveAgentCard({
   phase: RunCardPhase;
   accentIndex: number;
   onSelect: () => void;
+  locale: 'zh-CN' | 'en-US';
 }) {
   const showSpinner = !TERMINAL_STATUSES.has(run.status);
   const accent = accentFor(accentIndex);
@@ -308,13 +288,13 @@ function LiveAgentCard({
         <div className="min-w-0">
           <div className="flex items-center gap-2 text-[11px] font-medium uppercase tracking-[0.18em] text-muted-foreground">
             <span className={cn('h-2 w-2 rounded-full', accent.dot)} />
-            <span>Sub-Agent</span>
+            <span>{pickAppText(locale, '子 Agent', 'Sub-agent')}</span>
           </div>
           <div className={cn('mt-1 truncate text-sm font-semibold', accent.title)}>{run.actor_name}</div>
           <div className="mt-1 line-clamp-2 text-xs text-muted-foreground">{run.title}</div>
         </div>
         <Badge variant="outline" className={cn('border', statusTone(run.status))}>
-          {statusLabel(run.status)}
+          {appStatusLabel(run.status, locale)}
         </Badge>
       </div>
 
@@ -322,11 +302,11 @@ function LiveAgentCard({
         <div className="max-h-[280px] space-y-2.5 overflow-y-auto pr-1">
           {feed.length === 0 && (
             <div className="rounded-2xl border border-dashed border-border/60 bg-background/60 px-4 py-5 text-center text-sm text-muted-foreground">
-              等待子 agent 输出...
+              {pickAppText(locale, '等待子 agent 输出...', 'Waiting for sub-agent output...')}
             </div>
           )}
           {feed.map((item) => (
-            <AgentBubble key={item.key} item={item} />
+            <AgentBubble key={item.key} item={item} locale={locale} />
           ))}
         </div>
       </div>
@@ -335,10 +315,10 @@ function LiveAgentCard({
         {showSpinner && (
           <span className="inline-flex items-center gap-1.5 rounded-full border border-border/60 bg-muted/40 px-2.5 py-1 text-foreground/80">
             <Loader2 className="h-3 w-3 animate-spin" />
-            运行中
+            {pickAppText(locale, '运行中', 'Running')}
           </span>
         )}
-        {artifactCount > 0 && <span>{artifactCount} 个输出</span>}
+        {artifactCount > 0 && <span>{pickAppText(locale, `${artifactCount} 个输出`, `${artifactCount} outputs`)}</span>}
         {typeof run.source === 'string' && run.source.trim() && <span>{run.source}</span>}
       </div>
     </button>
@@ -352,6 +332,7 @@ function ResultCard({
   selected,
   accentIndex,
   onSelect,
+  locale,
 }: {
   run: ProcessRun;
   summary: string;
@@ -359,6 +340,7 @@ function ResultCard({
   selected: boolean;
   accentIndex: number;
   onSelect: () => void;
+  locale: 'zh-CN' | 'en-US';
 }) {
   const accent = accentFor(accentIndex);
 
@@ -374,7 +356,7 @@ function ResultCard({
     >
       <div className="flex items-center justify-between gap-3">
         <div className="min-w-0">
-          <div className="text-[10px] font-medium uppercase tracking-[0.18em] text-muted-foreground">Result</div>
+          <div className="text-[10px] font-medium uppercase tracking-[0.18em] text-muted-foreground">{pickAppText(locale, '结果', 'Result')}</div>
           <div className={cn('mt-1 truncate text-sm font-semibold', accent.title)}>{run.actor_name}</div>
         </div>
         <CheckCircle2 className="h-4 w-4 text-emerald-400" />
@@ -382,9 +364,9 @@ function ResultCard({
       <div className="mt-2 line-clamp-3 text-sm text-foreground/80">{summary}</div>
       <div className="mt-3 flex items-center gap-2 text-[11px] text-muted-foreground">
         <Badge variant="outline" className={cn('border', statusTone(run.status))}>
-          {statusLabel(run.status)}
+          {appStatusLabel(run.status, locale)}
         </Badge>
-        {artifactCount > 0 && <span>{artifactCount} 个输出</span>}
+        {artifactCount > 0 && <span>{pickAppText(locale, `${artifactCount} 个输出`, `${artifactCount} outputs`)}</span>}
       </div>
     </button>
   );
@@ -407,6 +389,7 @@ export function AgentTeamBlock({
   onSelectRun: (runId: string) => void;
   onCancelRun: (runId: string) => void;
 }) {
+  const { locale } = useAppI18n();
   const phases = useRunCardPhases(memberRuns);
   const sortedRuns = React.useMemo(
     () =>
@@ -431,23 +414,24 @@ export function AgentTeamBlock({
         <div className="mr-1 flex min-h-[68px] min-w-[132px] max-w-[180px] flex-col justify-center">
           <div className="inline-flex items-center gap-2 text-[11px] font-medium uppercase tracking-[0.18em] text-muted-foreground">
             <Sparkles className="h-3.5 w-3.5" />
-            Agent Results
+            {pickAppText(locale, '智能体结果', 'Agent results')}
           </div>
           <div className="mt-1 line-clamp-2 text-sm font-medium text-foreground">{rootRun.title}</div>
         </div>
         {terminalRuns.map((run, index) => {
           const runEvents = events.filter((event) => event.run_id === run.run_id);
           const runArtifacts = artifacts.filter((artifact) => artifact.run_id === run.run_id);
-          const feed = buildFeed(run, runEvents, runArtifacts);
+          const feed = buildFeed(run, runEvents, runArtifacts, locale);
           return (
             <ResultCard
               key={run.run_id}
               run={run}
-              summary={runSummary(run, feed)}
+              summary={runSummary(run, feed, locale)}
               artifactCount={runArtifacts.length}
               selected={selectedRunId === run.run_id}
               accentIndex={index}
               onSelect={() => onSelectRun(run.run_id)}
+              locale={locale}
             />
           );
         })}
@@ -461,25 +445,27 @@ export function AgentTeamBlock({
         <div>
           <div className="inline-flex items-center gap-2 text-xs font-medium uppercase tracking-[0.2em] text-muted-foreground">
             <Sparkles className="h-3.5 w-3.5" />
-            Agent Team
+            {pickAppText(locale, '智能体团队', 'Agent team')}
           </div>
           <div className="mt-1.5 text-base font-semibold text-foreground">{rootRun.title}</div>
           <p className="mt-1 text-sm text-muted-foreground">
-            {liveCount > 0 ? `主 agent 正在协调 ${liveCount} 个运行中的 sub-agent` : '子 agent 已完成，结果已折叠为摘要卡片'}
+            {liveCount > 0
+              ? pickAppText(locale, `主 agent 正在协调 ${liveCount} 个运行中的 sub-agent`, `Lead agent is coordinating ${liveCount} running sub-agents`)
+              : pickAppText(locale, '子 agent 已完成，结果已折叠为摘要卡片', 'Sub-agents are done. Results are folded into summary cards')}
           </p>
         </div>
         <div className="flex items-center gap-2">
           {canCancelRoot && (
             <Button variant="outline" size="sm" className="bg-background/60" onClick={() => onCancelRun(rootRun.run_id)}>
               <Square className="mr-1.5 h-3.5 w-3.5" />
-              取消
+              {pickAppText(locale, '取消', 'Cancel')}
             </Button>
           )}
           <Badge variant="outline" className="border-border/70 bg-background/55 text-foreground/85">
-            {memberRuns.length} 个 sub-agent
+            {pickAppText(locale, `${memberRuns.length} 个 sub-agent`, `${memberRuns.length} sub-agents`)}
           </Badge>
           <Badge variant="outline" className={cn('border', statusTone(rootRun.status))}>
-            {statusLabel(rootRun.status)}
+            {appStatusLabel(rootRun.status, locale)}
           </Badge>
         </div>
       </div>
@@ -490,7 +476,7 @@ export function AgentTeamBlock({
             {liveRuns.map((run, index) => {
               const runEvents = events.filter((event) => event.run_id === run.run_id);
               const runArtifacts = artifacts.filter((artifact) => artifact.run_id === run.run_id);
-              const feed = buildFeed(run, runEvents, runArtifacts);
+              const feed = buildFeed(run, runEvents, runArtifacts, locale);
               return (
                 <LiveAgentCard
                   key={run.run_id}
@@ -501,6 +487,7 @@ export function AgentTeamBlock({
                   phase={phases[run.run_id] || 'live'}
                   accentIndex={index}
                   onSelect={() => onSelectRun(run.run_id)}
+                  locale={locale}
                 />
               );
             })}
@@ -513,16 +500,17 @@ export function AgentTeamBlock({
           {collapsedRuns.map((run, index) => {
             const runEvents = events.filter((event) => event.run_id === run.run_id);
             const runArtifacts = artifacts.filter((artifact) => artifact.run_id === run.run_id);
-            const feed = buildFeed(run, runEvents, runArtifacts);
+            const feed = buildFeed(run, runEvents, runArtifacts, locale);
             return (
               <ResultCard
                 key={run.run_id}
                 run={run}
-                summary={runSummary(run, feed)}
+                summary={runSummary(run, feed, locale)}
                 artifactCount={runArtifacts.length}
                 selected={selectedRunId === run.run_id}
                 accentIndex={index}
                 onSelect={() => onSelectRun(run.run_id)}
+                locale={locale}
               />
             );
           })}

app-instance/frontend/components/chat-workbench/ArtifactSidebar.tsx

@@ -7,33 +7,9 @@ import { Badge } from '@/components/ui/badge';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { Separator } from '@/components/ui/separator';
-
-function statusLabel(status: string) {
-  if (status === 'done') return '已完成';
-  if (status === 'error') return '失败';
-  if (status === 'cancelled') return '已取消';
-  if (status === 'waiting') return '等待中';
-  if (status === 'running') return '运行中';
-  if (status === 'queued') return '排队中';
-  return status;
-}
-
-function actorTypeLabel(actorType: string) {
-  if (actorType === 'mcp') return 'MCP';
-  if (actorType === 'system') return '系统';
-  if (actorType === 'agent') return '智能体';
-  return actorType;
-}
-
-function eventKindLabel(kind: string) {
-  if (kind === 'run_started') return '已启动';
-  if (kind === 'run_progress') return '进行中';
-  if (kind === 'run_status') return '状态更新';
-  if (kind === 'run_artifact') return '产物';
-  if (kind === 'run_finished') return '已结束';
-  if (kind === 'run_cancelled') return '已取消';
-  return kind;
-}
+import { appActorTypeLabel, appEventKindLabel, appStatusLabel } from '@/lib/i18n/common';
+import { pickAppText } from '@/lib/i18n/core';
+import { useAppI18n } from '@/lib/i18n/provider';
 
 function artifactIcon(type: ProcessArtifact['artifact_type']) {
   if (type === 'json') return <FileJson className="w-4 h-4" />;
@@ -42,7 +18,7 @@ function artifactIcon(type: ProcessArtifact['artifact_type']) {
   return <FileOutput className="w-4 h-4" />;
 }
 
-function renderArtifactBody(artifact: ProcessArtifact) {
+function renderArtifactBody(artifact: ProcessArtifact, locale: 'zh-CN' | 'en-US') {
   if (artifact.artifact_type === 'json' && artifact.data !== undefined) {
     return (
       <pre className="text-[11px] leading-5 whitespace-pre-wrap break-words rounded-md bg-background/70 p-3 overflow-x-auto">
@@ -59,7 +35,7 @@ function renderArtifactBody(artifact: ProcessArtifact) {
   }
   return (
     <div className="text-xs text-foreground/90 whitespace-pre-wrap break-words">
-      {artifact.content || '（空产物）'}
+      {artifact.content || pickAppText(locale, '（空产物）', '(Empty artifact)')}
     </div>
   );
 }
@@ -73,6 +49,7 @@ export function ArtifactSidebar({
   events: ProcessEvent[];
   artifacts: ProcessArtifact[];
 }) {
+  const { locale } = useAppI18n();
   const runArtifacts = selectedRun
     ? artifacts.filter((item) => item.run_id === selectedRun.run_id)
     : artifacts;
@@ -90,9 +67,11 @@ export function ArtifactSidebar({
   return (
     <div className="h-full bg-card/60 flex flex-col border-l border-border">
       <div className="px-4 py-3 border-b border-border">
-        <h2 className="text-sm font-semibold tracking-wide uppercase text-muted-foreground">结果面板</h2>
+        <h2 className="text-sm font-semibold tracking-wide uppercase text-muted-foreground">{pickAppText(locale, '结果面板', 'Results')}</h2>
         <p className="text-xs text-muted-foreground mt-1">
-          {selectedRun ? `当前选中: ${selectedRun.actor_name}` : '选择一个任务查看详细过程与产物'}
+          {selectedRun
+            ? pickAppText(locale, `当前选中: ${selectedRun.actor_name}`, `Selected: ${selectedRun.actor_name}`)
+            : pickAppText(locale, '选择一个任务查看详细过程与产物', 'Select a task to inspect its process and artifacts')}
         </p>
       </div>
       <ScrollArea className="flex-1 px-4 py-4">
@@ -101,24 +80,24 @@ export function ArtifactSidebar({
             <CardHeader className="pb-3">
               <CardTitle className="text-sm flex items-center gap-2">
                 <FolderSearch className="w-4 h-4" />
-                任务摘要
+                {pickAppText(locale, '任务摘要', 'Task summary')}
               </CardTitle>
             </CardHeader>
             <CardContent className="pt-0 space-y-2 text-sm">
               {selectedRun ? (
                 <>
                   <div className="flex items-center gap-2 flex-wrap">
-                    <Badge variant="outline">{actorTypeLabel(selectedRun.actor_type)}</Badge>
-                    <Badge variant="outline">{statusLabel(selectedRun.status)}</Badge>
+                    <Badge variant="outline">{appActorTypeLabel(selectedRun.actor_type, locale)}</Badge>
+                    <Badge variant="outline">{appStatusLabel(selectedRun.status, locale)}</Badge>
                     {selectedRun.source && <Badge variant="secondary">{selectedRun.source}</Badge>}
                   </div>
                   <div className="font-medium">{selectedRun.title}</div>
                   <div className="text-muted-foreground whitespace-pre-wrap break-words">
-                    {selectedRun.summary || '暂时还没有最终摘要。'}
+                    {selectedRun.summary || pickAppText(locale, '暂时还没有最终摘要。', 'No final summary yet.')}
                   </div>
                 </>
               ) : (
-                <div className="text-muted-foreground text-sm">当前没有选中的任务。</div>
+                <div className="text-muted-foreground text-sm">{pickAppText(locale, '当前没有选中的任务。', 'No task is selected right now.')}</div>
               )}
             </CardContent>
           </Card>
@@ -127,22 +106,22 @@ export function ArtifactSidebar({
             <CardHeader className="pb-3">
               <CardTitle className="text-sm flex items-center gap-2">
                 <MessagesSquare className="w-4 h-4" />
-                事件记录
+                {pickAppText(locale, '事件记录', 'Events')}
               </CardTitle>
             </CardHeader>
             <CardContent className="pt-0 space-y-2">
               {runEvents.length === 0 && (
-                <div className="text-xs text-muted-foreground">暂时还没有结构化事件。</div>
+                <div className="text-xs text-muted-foreground">{pickAppText(locale, '暂时还没有结构化事件。', 'No structured events yet.')}</div>
               )}
               {runEvents.map((event, index) => (
                 <div key={event.event_id}>
                   <div className="rounded-md border border-border/60 px-3 py-2 bg-background/60">
                     <div className="flex items-center gap-2 text-[10px] uppercase tracking-wide text-muted-foreground mb-1">
-                      <span>{eventKindLabel(event.kind)}</span>
-                      {event.status && <span>{statusLabel(event.status)}</span>}
+                      <span>{appEventKindLabel(event.kind, locale)}</span>
+                      {event.status && <span>{appStatusLabel(event.status, locale)}</span>}
                     </div>
                     <div className="text-xs whitespace-pre-wrap break-words">
-                      {event.text || '结构化更新'}
+                      {event.text || pickAppText(locale, '结构化更新', 'Structured update')}
                     </div>
                   </div>
                   {index < runEvents.length - 1 && <Separator className="my-2" />}
@@ -155,12 +134,12 @@ export function ArtifactSidebar({
             <CardHeader className="pb-3">
               <CardTitle className="text-sm flex items-center gap-2">
                 <FileOutput className="w-4 h-4" />
-                产物列表
+                {pickAppText(locale, '产物列表', 'Artifacts')}
               </CardTitle>
             </CardHeader>
             <CardContent className="pt-0 space-y-3">
               {runArtifacts.length === 0 && (
-                <div className="text-xs text-muted-foreground">暂时还没有产物。</div>
+                <div className="text-xs text-muted-foreground">{pickAppText(locale, '暂时还没有产物。', 'No artifacts yet.')}</div>
               )}
               {runArtifacts.map((artifact) => (
                 <div key={artifact.artifact_id} className="rounded-lg border border-border/70 bg-background/70 p-3 space-y-2">
@@ -175,7 +154,7 @@ export function ArtifactSidebar({
                       </div>
                     </div>
                   </div>
-                  {renderArtifactBody(artifact)}
+                  {renderArtifactBody(artifact, locale)}
                 </div>
               ))}
             </CardContent>

app-instance/frontend/components/chat-workbench/ChatWorkbench.tsx

@@ -6,6 +6,8 @@ import type { ChatMessage, ProcessArtifact, ProcessEvent, ProcessRun } from '@/t
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { MessageList } from '@/components/chat-workbench/MessageList';
 import { ArtifactSidebar } from '@/components/chat-workbench/ArtifactSidebar';
+import { pickAppText } from '@/lib/i18n/core';
+import { useAppI18n } from '@/lib/i18n/provider';
 
 export function ChatWorkbench({
   messages,
@@ -30,6 +32,29 @@ export function ChatWorkbench({
   onSelectRun: (runId: string) => void;
   onCancelRun: (runId: string) => void;
 }) {
+  const { locale } = useAppI18n();
+  const [isDesktop, setIsDesktop] = React.useState(() =>
+    typeof window === 'undefined' ? true : window.matchMedia('(min-width: 1024px)').matches
+  );
+
+  React.useEffect(() => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+
+    const mediaQuery = window.matchMedia('(min-width: 1024px)');
+    const updateLayout = () => setIsDesktop(mediaQuery.matches);
+    updateLayout();
+
+    if (typeof mediaQuery.addEventListener === 'function') {
+      mediaQuery.addEventListener('change', updateLayout);
+      return () => mediaQuery.removeEventListener('change', updateLayout);
+    }
+
+    mediaQuery.addListener(updateLayout);
+    return () => mediaQuery.removeListener(updateLayout);
+  }, []);
+
   const selectedRun = selectedRunId
     ? processRuns.find((item) => item.run_id === selectedRunId) || null
     : null;
@@ -48,25 +73,29 @@ export function ChatWorkbench({
       )
   );
   const desktopColumns = hasResultsPanel
-    ? 'lg:grid-cols-[minmax(0,1fr)_360px]'
-    : 'lg:grid-cols-[minmax(0,1fr)]';
+    ? 'grid-cols-[minmax(0,1fr)_360px]'
+    : 'grid-cols-[minmax(0,1fr)]';
 
-  return (
-    <>
-      <div className={`hidden lg:grid h-full ${desktopColumns}`}>
+  const messageList = (
+    <MessageList
+      messages={messages}
+      isThinking={isThinking}
+      messagesEndRef={messagesEndRef}
+      viewportRef={messageViewportRef}
+      processRuns={processRuns}
+      processEvents={processEvents}
+      processArtifacts={processArtifacts}
+      selectedRunId={selectedRun?.run_id || null}
+      onSelectRun={onSelectRun}
+      onCancelRun={onCancelRun}
+    />
+  );
+
+  if (isDesktop) {
+    return (
+      <div className={`grid h-full ${desktopColumns}`}>
         <div className="min-h-0">
-          <MessageList
-            messages={messages}
-            isThinking={isThinking}
-            messagesEndRef={messagesEndRef}
-            viewportRef={messageViewportRef}
-            processRuns={processRuns}
-            processEvents={processEvents}
-            processArtifacts={processArtifacts}
-            selectedRunId={selectedRun?.run_id || null}
-            onSelectRun={onSelectRun}
-            onCancelRun={onCancelRun}
-          />
+          {messageList}
         </div>
         {hasResultsPanel && (
           <div className="min-h-0">
@@ -78,55 +107,33 @@ export function ChatWorkbench({
           </div>
         )}
       </div>
+    );
+  }
 
-      <div className="lg:hidden h-full">
-        {!hasResultsPanel ? (
-          <MessageList
-            messages={messages}
-            isThinking={isThinking}
-            messagesEndRef={messagesEndRef}
-            viewportRef={messageViewportRef}
-            processRuns={processRuns}
-            processEvents={processEvents}
-            processArtifacts={processArtifacts}
-            selectedRunId={selectedRun?.run_id || null}
-            onSelectRun={onSelectRun}
-            onCancelRun={onCancelRun}
-          />
-        ) : (
-          <Tabs defaultValue="chat" className="h-full flex flex-col">
-            <div className="px-4 pt-3 border-b border-border">
-              <TabsList className="grid w-full grid-cols-2">
-                <TabsTrigger value="chat">聊天</TabsTrigger>
-                {hasResultsPanel && <TabsTrigger value="results">结果</TabsTrigger>}
-              </TabsList>
-            </div>
-            <TabsContent value="chat" className="flex-1 min-h-0 mt-0">
-              <MessageList
-                messages={messages}
-                isThinking={isThinking}
-                messagesEndRef={messagesEndRef}
-                viewportRef={messageViewportRef}
-                processRuns={processRuns}
-                processEvents={processEvents}
-                processArtifacts={processArtifacts}
-                selectedRunId={selectedRun?.run_id || null}
-                onSelectRun={onSelectRun}
-                onCancelRun={onCancelRun}
-              />
-            </TabsContent>
-            {hasResultsPanel && (
-              <TabsContent value="results" className="flex-1 min-h-0 mt-0">
-                <ArtifactSidebar
-                  selectedRun={selectedRun}
-                  events={processEvents}
-                  artifacts={processArtifacts}
-                />
-              </TabsContent>
-            )}
-          </Tabs>
-        )}
-      </div>
-    </>
+  return (
+    <div className="h-full">
+      {!hasResultsPanel ? (
+        messageList
+      ) : (
+        <Tabs defaultValue="chat" className="h-full flex flex-col">
+          <div className="px-4 pt-3 border-b border-border">
+            <TabsList className="grid w-full grid-cols-2">
+              <TabsTrigger value="chat">{pickAppText(locale, '聊天', 'Chat')}</TabsTrigger>
+              <TabsTrigger value="results">{pickAppText(locale, '结果', 'Results')}</TabsTrigger>
+            </TabsList>
+          </div>
+          <TabsContent value="chat" className="flex-1 min-h-0 mt-0">
+            {messageList}
+          </TabsContent>
+          <TabsContent value="results" className="flex-1 min-h-0 mt-0">
+            <ArtifactSidebar
+              selectedRun={selectedRun}
+              events={processEvents}
+              artifacts={processArtifacts}
+            />
+          </TabsContent>
+        </Tabs>
+      )}
+    </div>
   );
 }

app-instance/frontend/components/chat-workbench/MessageList.tsx

@@ -8,6 +8,8 @@ import { getAccessToken, getFileUrl } from '@/lib/api';
 import { AgentTeamBlock } from '@/components/chat-workbench/AgentTeamBlock';
 import { MarkdownContent } from '@/components/chat-workbench/MarkdownContent';
 import { ScrollArea } from '@/components/ui/scroll-area';
+import { pickAppText } from '@/lib/i18n/core';
+import { useAppI18n } from '@/lib/i18n/provider';
 
 function AuthImage({ src, alt, className }: { src: string; alt: string; className?: string }) {
   const [blobUrl, setBlobUrl] = React.useState<string | null>(null);
@@ -115,6 +117,20 @@ type AgentTeamGroup = {
   startedAt: string;
 };
 
+const TERMINAL_RUN_STATUSES = new Set<ProcessRun['status']>(['done', 'error', 'cancelled']);
+
+function shouldHideSystemAgentMessage(message: ChatMessage): boolean {
+  if (message.role !== 'assistant' || typeof message.content !== 'string') {
+    return false;
+  }
+
+  const content = message.content.trim();
+  return (
+    /^\[(Agent team|Subagent)\s+['"][^'"]+['"]\s+(completed|failed|cancelled|finished)\]/i.test(content)
+      || (content.startsWith('[Agent team ') && content.includes('\nTask:'))
+  );
+}
+
 function parseTimelineTime(value?: string | null): number | null {
   if (!value) return null;
   const parsed = new Date(value).getTime();
@@ -194,9 +210,20 @@ export function MessageList({
   onSelectRun: (runId: string) => void;
   onCancelRun: (runId: string) => void;
 }) {
-  const teamGroups = React.useMemo(() => buildAgentTeamGroups(processRuns), [processRuns]);
+  const { locale } = useAppI18n();
+  const visibleMessages = React.useMemo(
+    () => messages.filter((message) => !shouldHideSystemAgentMessage(message)),
+    [messages]
+  );
+  const teamGroups = React.useMemo(
+    () =>
+      buildAgentTeamGroups(processRuns).filter((group) =>
+        group.memberRuns.some((run) => !TERMINAL_RUN_STATUSES.has(run.status))
+      ),
+    [processRuns]
+  );
   const timelineItems = React.useMemo(() => {
-    const messageItems = messages.map((message, index) => ({
+    const messageItems = visibleMessages.map((message, index) => ({
       kind: 'message' as const,
       key: `${message.role}:${message.timestamp || index}:${index}`,
       sortTime: parseTimelineTime(message.timestamp) ?? Number.MAX_SAFE_INTEGER / 2 + index,
@@ -204,12 +231,12 @@ export function MessageList({
       message,
     }));
     const teamItems = teamGroups.map((group, index) => ({
-      kind: 'team' as const,
-      key: `team:${group.rootRun.run_id}`,
-      sortTime: parseTimelineTime(group.startedAt) ?? Number.MAX_SAFE_INTEGER / 2 + messages.length + index,
-      order: messages.length + index,
-      group,
-    }));
+        kind: 'team' as const,
+        key: `team:${group.rootRun.run_id}`,
+        sortTime: parseTimelineTime(group.startedAt) ?? Number.MAX_SAFE_INTEGER / 2 + visibleMessages.length + index,
+        order: visibleMessages.length + index,
+        group,
+      }));
 
     return [...messageItems, ...teamItems].sort((a, b) => {
       if (a.sortTime !== b.sortTime) {
@@ -217,16 +244,16 @@ export function MessageList({
       }
       return a.order - b.order;
     });
-  }, [messages, teamGroups]);
+  }, [teamGroups, visibleMessages]);
 
   return (
     <ScrollArea className="h-full px-4" viewportRef={viewportRef}>
       <div className="max-w-6xl mx-auto py-4 space-y-4">
-        {messages.length === 0 && teamGroups.length === 0 && !isThinking && (
+        {visibleMessages.length === 0 && teamGroups.length === 0 && !isThinking && (
           <div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
             <Bot className="w-12 h-12 mb-4 opacity-50" />
             <p className="text-lg font-medium">Boardware Agent Sandbox</p>
-            <p className="text-sm">发送消息开始对话</p>
+            <p className="text-sm">{pickAppText(locale, '发送消息开始对话', 'Send a message to start the conversation')}</p>
           </div>
         )}
 
@@ -251,7 +278,7 @@ export function MessageList({
           <div className="flex items-center gap-2 text-muted-foreground px-1">
             <Bot className="w-5 h-5" />
             <Loader2 className="w-4 h-4 animate-spin" />
-            <span className="text-sm">思考中...</span>
+            <span className="text-sm">{pickAppText(locale, '思考中...', 'Thinking...')}</span>
           </div>
         )}
 

app-instance/frontend/components/chat-workbench/ProcessLane.tsx

@@ -7,35 +7,11 @@ import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { ScrollArea } from '@/components/ui/scroll-area';
+import { appActorTypeLabel, appEventKindLabel, appStatusLabel } from '@/lib/i18n/common';
+import { pickAppText } from '@/lib/i18n/core';
+import { useAppI18n } from '@/lib/i18n/provider';
 import { cn } from '@/lib/utils';
 
-function statusLabel(status: string) {
-  if (status === 'done') return '已完成';
-  if (status === 'error') return '失败';
-  if (status === 'cancelled') return '已取消';
-  if (status === 'waiting') return '等待中';
-  if (status === 'running') return '运行中';
-  if (status === 'queued') return '排队中';
-  return status;
-}
-
-function actorTypeLabel(actorType: string) {
-  if (actorType === 'mcp') return 'MCP';
-  if (actorType === 'system') return '系统';
-  if (actorType === 'agent') return '智能体';
-  return actorType;
-}
-
-function eventKindLabel(kind: string) {
-  if (kind === 'run_started') return '已启动';
-  if (kind === 'run_progress') return '进行中';
-  if (kind === 'run_status') return '状态更新';
-  if (kind === 'run_artifact') return '产物';
-  if (kind === 'run_finished') return '已结束';
-  if (kind === 'run_cancelled') return '已取消';
-  return kind;
-}
-
 function statusTone(status: string) {
   if (status === 'done') return 'bg-emerald-500/10 text-emerald-300 border-emerald-500/20';
   if (status === 'error') return 'bg-rose-500/10 text-rose-300 border-rose-500/20';
@@ -63,6 +39,7 @@ export function ProcessLane({
   onSelectRun: (runId: string) => void;
   onCancelRun: (runId: string) => void;
 }) {
+  const { locale } = useAppI18n();
   const sortedRuns = [...runs].sort((a, b) => {
     const at = new Date(a.started_at).getTime();
     const bt = new Date(b.started_at).getTime();
@@ -77,11 +54,11 @@ export function ProcessLane({
     <div className="h-full flex flex-col bg-card/60 border-l border-border">
       <div className="px-4 py-3 border-b border-border flex items-center justify-between">
         <div>
-          <h2 className="text-sm font-semibold tracking-wide uppercase text-muted-foreground">执行过程</h2>
-          <p className="text-xs text-muted-foreground mt-1">智能体、A2A、MCP 的实时过程</p>
+          <h2 className="text-sm font-semibold tracking-wide uppercase text-muted-foreground">{pickAppText(locale, '执行过程', 'Execution')}</h2>
+          <p className="text-xs text-muted-foreground mt-1">{pickAppText(locale, '智能体、A2A、MCP 的实时过程', 'Live process stream for agents, A2A, and MCP')}</p>
         </div>
         <Badge variant="outline" className="text-xs">
-          {sortedRuns.length} 个任务
+          {pickAppText(locale, `${sortedRuns.length} 个任务`, `${sortedRuns.length} tasks`)}
         </Badge>
       </div>
       <ScrollArea className="flex-1 px-4 py-4">
@@ -120,7 +97,7 @@ export function ProcessLane({
                     </div>
                     <div className="flex items-center gap-2 shrink-0">
                       <Badge variant="outline" className={cn('text-[10px] border', statusTone(run.status))}>
-                        {statusLabel(run.status)}
+                        {appStatusLabel(run.status, locale)}
                       </Badge>
                       {canCancel && (
                         <Button
@@ -133,7 +110,7 @@ export function ProcessLane({
                           }}
                         >
                           <Square className="w-3.5 h-3.5 mr-1" />
-                          取消
+                          {pickAppText(locale, '取消', 'Cancel')}
                         </Button>
                       )}
                     </div>
@@ -141,9 +118,9 @@ export function ProcessLane({
                 </CardHeader>
                 <CardContent className="pt-0 space-y-2">
                   <div className="flex items-center gap-2 text-[11px] text-muted-foreground flex-wrap">
-                    <span>{actorTypeLabel(run.actor_type)}</span>
+                    <span>{appActorTypeLabel(run.actor_type, locale)}</span>
                     {run.source && <span>{run.source}</span>}
-                    {run.parent_run_id && <span>子任务</span>}
+                    {run.parent_run_id && <span>{pickAppText(locale, '子任务', 'Subtask')}</span>}
                   </div>
                   {run.summary && (
                     <div className="rounded-md bg-muted/40 px-3 py-2 text-xs text-muted-foreground whitespace-pre-wrap line-clamp-3">
@@ -154,24 +131,24 @@ export function ProcessLane({
                     {runEvents.length === 0 && run.status === 'running' && (
                       <div className="flex items-center gap-2 text-xs text-muted-foreground">
                         <Loader2 className="w-3.5 h-3.5 animate-spin" />
-                        等待首个事件...
+                        {pickAppText(locale, '等待首个事件...', 'Waiting for the first event...')}
                       </div>
                     )}
                     {runEvents.map((event) => (
                       <div key={event.event_id} className="text-xs rounded-md border border-border/50 bg-background/60 px-3 py-2">
                         <div className="flex items-center gap-2 text-[10px] uppercase tracking-wide text-muted-foreground mb-1">
-                          <span>{eventKindLabel(event.kind)}</span>
-                          {event.status && <span>{statusLabel(event.status)}</span>}
+                          <span>{appEventKindLabel(event.kind, locale)}</span>
+                          {event.status && <span>{appStatusLabel(event.status, locale)}</span>}
                         </div>
                         <div className="text-foreground/90 whitespace-pre-wrap break-words">
-                          {event.text || '结构化更新'}
+                          {event.text || pickAppText(locale, '结构化更新', 'Structured update')}
                         </div>
                       </div>
                     ))}
                     {run.status === 'error' && (
                       <div className="flex items-center gap-2 text-xs text-rose-300">
                         <AlertCircle className="w-3.5 h-3.5" />
-                        此任务执行失败。
+                        {pickAppText(locale, '此任务执行失败。', 'This task failed.')}
                       </div>
                     )}
                   </div>

app-instance/frontend/components/office/OfficeShared.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useAppI18n } from '@/lib/i18n/provider';
 import { Badge } from '@/components/ui/badge';
 import { cn } from '@/lib/utils';
 import type { OfficeTaskStatus, OfficeZoneView } from '@/lib/office';
@@ -12,6 +13,8 @@ export function OfficeStatusBadge({
   status: OfficeTaskStatus;
   className?: string;
 }) {
+  const { locale } = useAppI18n();
+
   return (
     <Badge
       variant="outline"
@@ -27,16 +30,16 @@ export function OfficeStatusBadge({
         className
       )}
     >
-      {officeTaskStatusLabel(status)}
+      {officeTaskStatusLabel(status, locale)}
     </Badge>
   );
 }
 
-export function formatOfficeTime(value?: string | null): string {
+export function formatOfficeTime(value?: string | null, locale: 'zh-CN' | 'en-US' = 'zh-CN'): string {
   if (!value) return '-';
   const date = new Date(value);
   if (Number.isNaN(date.getTime())) return value;
-  return new Intl.DateTimeFormat('zh-CN', {
+  return new Intl.DateTimeFormat(locale, {
     month: '2-digit',
     day: '2-digit',
     hour: '2-digit',
@@ -44,18 +47,18 @@ export function formatOfficeTime(value?: string | null): string {
   }).format(date);
 }
 
-export function formatOfficeDuration(durationMs: number | null): string {
+export function formatOfficeDuration(durationMs: number | null, locale: 'zh-CN' | 'en-US' = 'zh-CN'): string {
   if (durationMs === null || durationMs < 0) return '-';
-  if (durationMs < 1000) return '<1s';
+  if (durationMs < 1000) return locale === 'en-US' ? '<1s' : '<1秒';
 
   const seconds = Math.floor(durationMs / 1000);
   const hours = Math.floor(seconds / 3600);
   const minutes = Math.floor((seconds % 3600) / 60);
   const remainingSeconds = seconds % 60;
 
-  if (hours > 0) return `${hours}h ${minutes}m`;
-  if (minutes > 0) return `${minutes}m ${remainingSeconds}s`;
-  return `${remainingSeconds}s`;
+  if (hours > 0) return locale === 'en-US' ? `${hours}h ${minutes}m` : `${hours}小时 ${minutes}分`;
+  if (minutes > 0) return locale === 'en-US' ? `${minutes}m ${remainingSeconds}s` : `${minutes}分 ${remainingSeconds}秒`;
+  return locale === 'en-US' ? `${remainingSeconds}s` : `${remainingSeconds}秒`;
 }
 
 export function progressPercent(value: number | null, max: number | null): number {

app-instance/frontend/components/task-management/TaskManagementTabs.tsx

@@ -4,6 +4,8 @@ import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { Building2, Clock3 } from 'lucide-react';
 
+import { pickAppText } from '@/lib/i18n/core';
+import { useAppI18n } from '@/lib/i18n/provider';
 import { cn } from '@/lib/utils';
 
 const TASK_MANAGEMENT_TABS = [
@@ -14,7 +16,7 @@ const TASK_MANAGEMENT_TABS = [
     match: (pathname: string) => pathname === '/office' || pathname.startsWith('/office/'),
   },
   {
-    label: '定时任务',
+    label: 'Scheduled tasks',
     href: '/cron',
     icon: Clock3,
     match: (pathname: string) => pathname === '/cron' || pathname.startsWith('/cron/'),
@@ -22,6 +24,7 @@ const TASK_MANAGEMENT_TABS = [
 ] as const;
 
 export function TaskManagementTabs() {
+  const { locale } = useAppI18n();
   const pathname = usePathname();
 
   return (
@@ -43,7 +46,9 @@ export function TaskManagementTabs() {
               )}
             >
               <Icon className="h-4 w-4" />
-              {tab.label}
+              {tab.href === '/cron'
+                ? pickAppText(locale, '定时任务', 'Scheduled tasks')
+                : pickAppText(locale, '办公室', 'Office')}
             </Link>
           );
         })}