@lobehub/lobehub 2.0.0-next.301 → 2.0.0-next.303

package/CHANGELOG.md

@@ -2,6 +2,64 @@
 
 # Changelog
 
+## [Version 2.0.0-next.303](https://github.com/lobehub/lobe-chat/compare/v2.0.0-next.302...v2.0.0-next.303)
+
+<sup>Released on **2026-01-18**</sup>
+
+#### 💄 Styles
+
+- **misc**: Improve operation hint and fix scroll issue.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Styles
+
+- **misc**: Improve operation hint and fix scroll issue, closes [#11573](https://github.com/lobehub/lobe-chat/issues/11573) ([8505d14](https://github.com/lobehub/lobe-chat/commit/8505d14))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+## [Version 2.0.0-next.302](https://github.com/lobehub/lobe-chat/compare/v2.0.0-next.301...v2.0.0-next.302)
+
+<sup>Released on **2026-01-17**</sup>
+
+#### 🐛 Bug Fixes
+
+- **misc**: Try to fix group supervisor id not sync successful.
+
+#### 💄 Styles
+
+- **misc**: Fix left panel on group page.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: Try to fix group supervisor id not sync successful, closes [#11570](https://github.com/lobehub/lobe-chat/issues/11570) ([ef51c17](https://github.com/lobehub/lobe-chat/commit/ef51c17))
+
+#### Styles
+
+- **misc**: Fix left panel on group page, closes [#11571](https://github.com/lobehub/lobe-chat/issues/11571) ([de81a42](https://github.com/lobehub/lobe-chat/commit/de81a42))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 2.0.0-next.301](https://github.com/lobehub/lobe-chat/compare/v2.0.0-next.300...v2.0.0-next.301)
 
 <sup>Released on **2026-01-17**</sup>

package/changelog/v1.json

@@ -1,4 +1,25 @@
 [
+  {
+    "children": {
+      "improvements": [
+        "Improve operation hint and fix scroll issue."
+      ]
+    },
+    "date": "2026-01-18",
+    "version": "2.0.0-next.303"
+  },
+  {
+    "children": {
+      "fixes": [
+        "Try to fix group supervisor id not sync successful."
+      ],
+      "improvements": [
+        "Fix left panel on group page."
+      ]
+    },
+    "date": "2026-01-17",
+    "version": "2.0.0-next.302"
+  },
   {
     "children": {},
     "date": "2026-01-17",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/lobehub",
-  "version": "2.0.0-next.301",
+  "version": "2.0.0-next.303",
   "description": "LobeHub - an open-source,comprehensive AI Agent framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",

package/packages/builtin-tool-agent-builder/src/client/Streaming/UpdatePrompt/index.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import type { BuiltinStreamingProps } from '@lobechat/types';
+import { Block, Markdown } from '@lobehub/ui';
+import { memo } from 'react';
+
+import type { UpdatePromptParams } from '../../../types';
+
+export const UpdatePromptStreaming = memo<BuiltinStreamingProps<UpdatePromptParams>>(
+  ({ args }) => {
+    const { prompt } = args || {};
+
+    if (!prompt) return null;
+
+    return (
+      <Block paddingBlock={8} paddingInline={12} variant={'outlined'} width="100%">
+        <Markdown animated variant={'chat'}>
+          {prompt}
+        </Markdown>
+      </Block>
+    );
+  },
+);
+
+UpdatePromptStreaming.displayName = 'UpdatePromptStreaming';
+
+export default UpdatePromptStreaming;

package/packages/builtin-tool-agent-builder/src/client/Streaming/index.ts

@@ -0,0 +1,16 @@
+import type { BuiltinStreaming } from '@lobechat/types';
+
+import { AgentBuilderApiName } from '../../types';
+import { UpdatePromptStreaming } from './UpdatePrompt';
+
+/**
+ * Agent Builder Streaming Components Registry
+ *
+ * Streaming components render tool calls while they are
+ * still executing, allowing real-time feedback to users.
+ */
+export const AgentBuilderStreamings: Record<string, BuiltinStreaming> = {
+  [AgentBuilderApiName.updatePrompt]: UpdatePromptStreaming as BuiltinStreaming,
+};
+
+export { UpdatePromptStreaming } from './UpdatePrompt';

package/packages/builtin-tool-agent-builder/src/client/index.ts

@@ -14,6 +14,9 @@ export { AgentBuilderInterventions } from './Intervention';
 // Render components (read-only snapshots)
 export { AgentBuilderRenders } from './Render';
 
+// Streaming components (real-time tool execution feedback)
+export { AgentBuilderStreamings } from './Streaming';
+
 // Re-export types and manifest for convenience
 export { AgentBuilderManifest } from '../manifest';
 export * from '../types';

package/packages/model-bank/src/aiModels/infiniai.ts

@@ -51,7 +51,7 @@ const infiniaiChatModels: AIChatModelCard[] = [
     },
     contextWindowTokens: 200_000,
     description:
-      'MiniMax-M2.1 是 MiniMax 系列的最新版本，专为多语言编程和真实世界复杂任务优化。作为一款 AI 原生模型，MiniMax-M2.1 在模型性能、智能体框架支持以及多场景适配方面实现了显著提升，旨在帮助企业和个人更快地找到 AI 原生的工作与生活方式。',
+      'MiniMax-M2.1 is the latest version of the MiniMax series, optimized for multilingual programming and real-world complex tasks. As an AI-native model, MiniMax-M2.1 achieves significant improvements in model performance, agent framework support, and multi-scenario adaptation, aiming to help enterprises and individuals find AI-native work and lifestyle more quickly.',
     displayName: 'MiniMax M2.1',
     enabled: true,
     id: 'minimax-m2.1',
@@ -72,7 +72,7 @@ const infiniaiChatModels: AIChatModelCard[] = [
     },
     contextWindowTokens: 200_000,
     description:
-      'MiniMax-M2 是一款专为编码与智能体工作流优化的专家混合（MoE）语言模型，具有约 230B 总参数与约 10B 活跃参数。它在保持强通用智能的同时，针对多文件编辑、代码-运行-修复闭环、测试校验修复等开发者场景进行深度增强，在终端、IDE 与 CI 等真实环境中表现稳定、高效。',
+      'MiniMax-M2 is a Mixture of Experts (MoE) language model optimized for coding and agent workflows, with approximately 230B total parameters and approximately 10B active parameters. While maintaining strong general intelligence, it is deeply enhanced for developer scenarios such as multi-file editing, code-run-fix loops, and test validation fixes, demonstrating stable and efficient performance in real environments like terminals, IDEs, and CI.',
     displayName: 'MiniMax M2',
     id: 'minimax-m2',
     maxOutput: 200_000,

package/packages/model-bank/src/aiModels/ollamacloud.ts

@@ -82,7 +82,7 @@ const ollamaCloudModels: AIChatModelCard[] = [
     },
     contextWindowTokens: 200_000,
     description:
-      'GLM-4.7 是智谱最新旗舰模型，面向 Agentic Coding 场景强化了编码能力、长程任务规划与工具协同，并在多个公开基准的当期榜单中取得开源模型中的领先表现。通用能力提升，回复更简洁自然，写作更具沉浸感。在执行复杂智能体任务，在工具调用时指令遵循更强，Artifacts 与 Agentic Coding 的前端美感和长程任务完成效率进一步提升。',
+      "GLM-4.7 is Zhipu's latest flagship model, enhanced for Agentic Coding scenarios with improved coding capabilities, long-term task planning, and tool collaboration. It achieves leading performance among open-source models on multiple public benchmarks. General capabilities are improved with more concise and natural responses and more immersive writing. For complex agent tasks, instruction following during tool calls is stronger, and the frontend aesthetics and long-term task completion efficiency of Artifacts and Agentic Coding are further enhanced.",
     displayName: 'GLM-4.7',
     enabled: true,
     id: 'glm-4.7',
@@ -95,7 +95,7 @@ const ollamaCloudModels: AIChatModelCard[] = [
     },
     contextWindowTokens: 200_000,
     description:
-      '智谱旗舰模型 GLM-4.6 (355B) 在高级编码、长文本处理、推理与智能体能力上全面超越前代，尤其在编程能力上对齐 Claude Sonnet 4，成为国内顶尖的 Coding 模型。',
+      "Zhipu's flagship model GLM-4.6 (355B) fully surpasses its predecessors in advanced coding, long-text processing, reasoning, and agent capabilities. It particularly aligns with Claude Sonnet 4 in programming ability, becoming China's top Coding model.",
     displayName: 'GLM-4.6',
     id: 'glm-4.6',
     type: 'chat',

package/packages/model-bank/src/aiModels/siliconcloud.ts

@@ -9,7 +9,7 @@ const siliconcloudChatModels: AIChatModelCard[] = [
     },
     contextWindowTokens: 200_000,
     description:
-      'GLM-4.7 是智谱新一代旗舰模型，总参数量 355B，激活参数量 32B，在通用对话、推理和智能体能力方面全面升级。GLM-4.7 增强了 Interleaved Thinking（交错思考），并引入了 Preserved Thinking（保留思考）和 Turn-level Thinking（轮级思考）。',
+      "GLM-4.7 is Zhipu's new generation flagship model with 355B total parameters and 32B active parameters, fully upgraded in general dialogue, reasoning, and agent capabilities. GLM-4.7 enhances Interleaved Thinking and introduces Preserved Thinking and Turn-level Thinking.",
     displayName: 'GLM-4.7 (Pro)',
     id: 'Pro/zai-org/glm-4.7',
     pricing: {

package/packages/model-bank/src/aiModels/volcengine.ts

@@ -14,7 +14,7 @@ const doubaoChatModels: AIChatModelCard[] = [
     },
     contextWindowTokens: 256_000,
     description:
-      'Doubao-Seed-1.8 有着更强的多模态理解能力和 Agent 能力，支持文本/图片/视频输入与上下文缓存，可在复杂任务中提供更出色的表现。',
+      'Doubao-Seed-1.8 has stronger multimodal understanding and Agent capabilities, supports text/image/video input and context caching, and can deliver excellent performance in complex tasks.',
     displayName: 'Doubao Seed 1.8',
     enabled: true,
     id: 'doubao-seed-1.8',
@@ -127,7 +127,7 @@ const doubaoChatModels: AIChatModelCard[] = [
     },
     contextWindowTokens: 131_072,
     description:
-      'DeepSeek-V3.2 是深度求索推出的首个将思考融入工具使用的混合推理模型，用高效架构省算力、大规模强化学习提能力、大规模合成任务数据强泛化，三者结合性能媲美 GPT-5-High，输出长度大幅降低，显著减少了计算开销与用户等待时间。',
+      'DeepSeek-V3.2 is the first hybrid reasoning model from DeepSeek that integrates thinking into tool usage. It uses efficient architecture to save computation, large-scale reinforcement learning to enhance capabilities, and large-scale synthetic task data to strengthen generalization. The combination of these three achieves performance comparable to GPT-5-High, with significantly reduced output length, notably decreasing computational overhead and user wait times.',
     displayName: 'DeepSeek V3.2',
     enabled: true,
     id: 'deepseek-v3.2',

package/packages/model-bank/src/aiModels/zhipu.ts

@@ -12,7 +12,7 @@ const zhipuChatModels: AIChatModelCard[] = [
     },
     contextWindowTokens: 200_000,
     description:
-      'GLM-4.7 是智谱最新旗舰模型，面向 Agentic Coding 场景强化了编码能力、长程任务规划与工具协同，并在多个公开基准的当期榜单中取得开源模型中的领先表现。通用能力提升，回复更简洁自然，写作更具沉浸感。在执行复杂智能体任务，在工具调用时指令遵循更强，Artifacts 与 Agentic Coding 的前端美感和长程任务完成效率进一步提升。',
+      "GLM-4.7 is Zhipu's latest flagship model, enhanced for Agentic Coding scenarios with improved coding capabilities, long-term task planning, and tool collaboration. It achieves leading performance among open-source models on multiple public benchmarks. General capabilities are improved with more concise and natural responses and more immersive writing. For complex agent tasks, instruction following during tool calls is stronger, and the frontend aesthetics and long-term task completion efficiency of Artifacts and Agentic Coding are further enhanced.",
     displayName: 'GLM-4.7',
     enabled: true,
     id: 'glm-4.7',
@@ -75,7 +75,7 @@ const zhipuChatModels: AIChatModelCard[] = [
     },
     contextWindowTokens: 200_000,
     description:
-      '智谱最新旗舰模型 GLM-4.6 (355B) 在高级编码、长文本处理、推理与智能体能力上全面超越前代，尤其在编程能力上对齐 Claude Sonnet 4，成为国内顶尖的 Coding 模型。',
+      "Zhipu's latest flagship model GLM-4.6 (355B) fully surpasses its predecessors in advanced coding, long-text processing, reasoning, and agent capabilities. It particularly aligns with Claude Sonnet 4 in programming ability, becoming China's top Coding model.",
     displayName: 'GLM-4.6',
     id: 'glm-4.6',
     maxOutput: 131_072,

package/packages/model-bank/src/modelProviders/comfyui.ts

@@ -3,8 +3,8 @@ import { type ModelProviderCard } from '@/types/llm';
 /**
  * ComfyUI Provider Configuration
  *
- * 支持本地和远程 ComfyUI 服务器连接
- * 提供 FLUX 系列模型的图像生成能力
+ * Supports local and remote ComfyUI server connections
+ * Provides image generation capabilities for FLUX series models
  *
  * @see https://www.comfy.org/
  */
@@ -16,22 +16,22 @@ const ComfyUI: ModelProviderCard = {
   id: 'comfyui',
   name: 'ComfyUI',
   settings: {
-    // 禁用浏览器直接请求，通过服务端代理
+    // Disable direct browser requests, proxy through server
     disableBrowserRequest: true,
 
-    // SDK 类型标识
+    // SDK type identifier
     sdkType: 'comfyui',
 
-    // 不显示添加新模型按钮（模型通过配置管理）
+    // Hide add new model button (models managed via configuration)
     showAddNewModel: false,
 
-    // 显示 API 密钥配置（用于认证配置）
+    // Show API key configuration (for authentication setup)
     showApiKey: true,
 
-    // 不显示连通性检查（图像生成不支持聊天接口检查）
+    // Hide connectivity check (image generation doesn't support chat interface checks)
     showChecker: false,
 
-    // 不显示模型获取器（使用预定义模型）
+    // Hide model fetcher (use predefined models)
     showModelFetcher: false,
   },
   url: 'https://www.comfy.org/',

package/packages/model-bank/src/modelProviders/moonshot.ts

@@ -1,6 +1,6 @@
 import { type ModelProviderCard } from '@/types/llm';
 
-// ref: https://platform.moonshot.cn/docs/intro#模型列表
+// ref: https://platform.moonshot.cn/docs/intro#model-list
 const Moonshot: ModelProviderCard = {
   chatModels: [],
   checkModel: 'kimi-latest',

package/packages/model-bank/src/modelProviders/stepfun.ts

@@ -1,7 +1,7 @@
 import { type ModelProviderCard } from '@/types/llm';
 
 // ref: https://platform.stepfun.com/docs/llm/text
-// 根据文档，阶级星辰大模型的上下文长度，其 k 的含义均为 1000
+// According to the documentation, for Stepfun models, the 'k' in context length refers to 1000
 const Stepfun: ModelProviderCard = {
   chatModels: [],
   checkModel: 'step-2-mini',

package/packages/model-bank/src/modelProviders/zeroone.ts

@@ -8,7 +8,7 @@ const ZeroOne: ModelProviderCard = {
     '01.AI drives a human-centered AI 2.0 revolution, using LLMs to create economic and social value and build new AI ecosystems and business models.',
   id: 'zeroone',
   modelList: { showModelFetcher: true },
-  modelsUrl: 'https://platform.lingyiwanwu.com/docs#模型与计费',
+  modelsUrl: 'https://platform.lingyiwanwu.com/docs#models-and-pricing',
   name: '01.AI',
   settings: {
     proxyUrl: {

package/packages/model-runtime/src/core/streams/anthropic.ts

@@ -223,7 +223,7 @@ export const transformAnthropicStream = (
 
 export interface AnthropicStreamOptions {
   callbacks?: ChatStreamCallbacks;
-  enableStreaming?: boolean; // 选择 TPS 计算方式（非流式时传 false）
+  enableStreaming?: boolean; // Select TPS calculation method (pass false for non-streaming)
   inputStartAt?: number;
   payload?: ChatPayloadForTransformStream;
 }

package/packages/model-runtime/src/core/streams/google/index.ts

@@ -241,8 +241,8 @@ const transformGoogleGenerativeAIStream = (
         {
           data: {
             citations: groundingChunks?.map((chunk) => ({
-              // google 返回的 uri 是经过 google 自己处理过的 url，因此无法展现真实的 favicon
-              // 需要使用 title 作为替换
+              // Google returns a uri processed by Google itself, so it cannot display the real favicon
+              // Need to use title as a replacement
               favicon: chunk.web?.title,
               title: chunk.web?.title,
               url: chunk.web?.uri,
@@ -293,7 +293,7 @@ const transformGoogleGenerativeAIStream = (
           ...usageChunks,
         ].filter(Boolean) as StreamProtocolChunk[];
       }
-      // 当有 finishReason 但没有 text 内容时,发送一个空的 text 块以停止加载动画
+      // When there is finishReason but no text content, send an empty text chunk to stop the loading animation
       return [
         { data: '', id: context?.id, type: 'text' },
         { data: candidate.finishReason, id: context?.id, type: 'stop' },
@@ -312,7 +312,7 @@ const transformGoogleGenerativeAIStream = (
 
 export interface GoogleAIStreamOptions {
   callbacks?: ChatStreamCallbacks;
-  enableStreaming?: boolean; // 选择 TPS 计算方式（非流式时传 false）
+  enableStreaming?: boolean; // Select TPS calculation method (pass false for non-streaming)
   inputStartAt?: number;
   payload?: ChatPayloadForTransformStream;
 }

package/packages/model-runtime/src/core/streams/model.ts

@@ -1,5 +1,5 @@
 /**
- * 将异步迭代器转换为 JSON 格式的 ReadableStream
+ * Convert async iterator to JSON format ReadableStream
  */
 export const createModelPullStream = <
   T extends { completed?: number; digest?: string; status: string; total?: number },
@@ -7,48 +7,48 @@ export const createModelPullStream = <
   iterable: AsyncIterable<T>,
   model: string,
   {
-    onCancel, // 新增：取消时调用的回调函数
+    onCancel, // Added: callback function to call on cancellation
   }: {
-    onCancel?: (reason?: any) => void; // 回调函数签名
+    onCancel?: (reason?: any) => void; // Callback function signature
   } = {},
 ): ReadableStream => {
-  let iterator: AsyncIterator<T>; // 在外部跟踪迭代器以便取消时可以调用 return
+  let iterator: AsyncIterator<T>; // Track iterator externally so we can call return on cancellation
 
   return new ReadableStream({
-    // 实现 cancel 方法
+    // Implement cancel method
     cancel(reason) {
-      // 调用传入的 onCancel 回调，执行外部的清理逻辑（如 client.abort()）
+      // Call the onCancel callback to execute external cleanup logic (e.g., client.abort())
       if (onCancel) {
         onCancel(reason);
       }
 
-      // 尝试优雅地终止迭代器
-      // 注意：这依赖于 AsyncIterable 的实现是否支持 return/throw
+      // Attempt to gracefully terminate the iterator
+      // Note: This depends on whether the AsyncIterable implementation supports return/throw
       if (iterator && typeof iterator.return === 'function') {
-        // 不需要 await，让它在后台执行清理
+        // No need to await, let it execute cleanup in the background
         iterator.return().catch();
       }
     },
     async start(controller) {
-      iterator = iterable[Symbol.asyncIterator](); // 获取迭代器
+      iterator = iterable[Symbol.asyncIterator](); // Get iterator
 
       const encoder = new TextEncoder();
 
       try {
         // eslint-disable-next-line no-constant-condition
         while (true) {
-          // 等待下一个数据块或迭代完成
+          // Wait for the next data chunk or iteration completion
           const { value: progress, done } = await iterator.next();
 
-          // 如果迭代完成，跳出循环
+          // If iteration is complete, break the loop
           if (done) {
             break;
           }
 
-          // 忽略 'pulling manifest' 状态，因为它不包含进度
+          // Ignore 'pulling manifest' status as it does not contain progress
           if (progress.status === 'pulling manifest') continue;
 
-          // 格式化为标准格式并写入流
+          // Format to standard format and write to stream
           const progressData =
             JSON.stringify({
               completed: progress.completed,
@@ -61,24 +61,24 @@ export const createModelPullStream = <
           controller.enqueue(encoder.encode(progressData));
         }
 
-        // 正常完成
+        // Normal completion
         controller.close();
       } catch (error) {
-        // 处理错误
+        // Handle errors
 
-        // 如果错误是由于中止操作引起的，则静默处理或记录日志，然后尝试关闭流
+        // If error is caused by abort operation, handle silently or log, then try to close stream
         if (error instanceof DOMException && error.name === 'AbortError') {
-          // 不需要再 enqueue 错误信息，因为连接可能已断开
-          // 尝试正常关闭，如果已经取消，controller 可能已关闭或出错
+          // No need to enqueue error message as connection may already be disconnected
+          // Try to close normally; if already cancelled, controller may be closed or errored
           try {
             controller.enqueue(new TextEncoder().encode(JSON.stringify({ status: 'cancelled' })));
             controller.close();
           } catch {
-            // 忽略关闭错误，可能流已经被取消机制处理了
+            // Ignore close errors, stream may already be handled by cancellation mechanism
           }
         } else {
           console.error('[createModelPullStream] model download stream error:', error);
-          // 对于其他错误，尝试将错误信息发送给客户端
+          // For other errors, try to send error message to client
           const errorMessage = error instanceof Error ? error.message : String(error);
           const errorData =
             JSON.stringify({
@@ -88,20 +88,20 @@ export const createModelPullStream = <
             }) + '\n';
 
           try {
-            // 只有在流还期望数据时才尝试 enqueue
+            // Only try to enqueue if stream is still expecting data
             if (controller.desiredSize !== null && controller.desiredSize > 0) {
               controller.enqueue(encoder.encode(errorData));
             }
           } catch (enqueueError) {
             console.error('[createModelPullStream] Error enqueueing error message:', enqueueError);
-            // 如果这里也失败，很可能连接已断开
+            // If this also fails, connection is likely disconnected
           }
 
-          // 尝试关闭流或标记为错误状态
+          // Try to close stream or mark as error state
           try {
-            controller.close(); // 尝试正常关闭
+            controller.close(); // Try to close normally
           } catch {
-            controller.error(error); // 如果关闭失败，则将流置于错误状态
+            controller.error(error); // If closing fails, put stream in error state
           }
         }
       }

package/packages/model-runtime/src/core/streams/ollama.ts

@@ -36,14 +36,14 @@ const transformOllamaStream = (chunk: ChatResponse, stack: StreamContext): Strea
     return { data: 'finished', id: stack.id, type: 'stop' };
   }
 
-  // 判断是否有 <think> 或 </think> 标签，更新 thinkingInContent 状态
+  // Check for <think> or </think> tags and update thinkingInContent state
   if (chunk.message.content.includes('<think>')) {
     stack.thinkingInContent = true;
   } else if (chunk.message.content.includes('</think>')) {
     stack.thinkingInContent = false;
   }
 
-  // 清除 <think> 及 </think> 标签，并根据当前思考模式确定返回类型
+  // Remove <think> and </think> tags, and determine return type based on current thinking mode
   return {
     data: chunk.message.content.replaceAll(/<\/?think>/g, ''),
     id: stack.id,

package/packages/model-runtime/src/core/streams/openai/openai.ts

@@ -88,8 +88,8 @@ const transformOpenAIStream = (
     return { data: errorData, id: 'first_chunk_error', type: 'error' };
   }
 
-  // MiniMax 会在 base_resp 中返回业务错误（如余额不足），但不走 FIRST_CHUNK_ERROR_KEY
-  // 典型返回：{ id: '...', choices: null, base_resp: { status_code: 1008, status_msg: 'insufficient balance' }, usage: {...} }
+  // MiniMax returns business errors (e.g., insufficient balance) in base_resp, but not through FIRST_CHUNK_ERROR_KEY
+  // Typical response: { id: '...', choices: null, base_resp: { status_code: 1008, status_msg: 'insufficient balance' }, usage: {...} }
   if ((chunk as any).base_resp && typeof (chunk as any).base_resp.status_code === 'number') {
     const baseResp = (chunk as any).base_resp as {
       message?: string;
@@ -98,29 +98,29 @@ const transformOpenAIStream = (
     };
 
     if (baseResp.status_code !== 0) {
-      // 根据 MiniMax 错误码映射到对应的错误类型
+      // Map MiniMax error codes to corresponding error types
       let errorType: ILobeAgentRuntimeErrorType = AgentRuntimeErrorType.ProviderBizError;
 
       switch (baseResp.status_code) {
-        // 1004 - 未授权 / Token 不匹配 / 2049 - 无效的 API Key
+        // 1004 - Unauthorized / Token mismatch / 2049 - Invalid API Key
         case 1004:
         case 2049: {
           errorType = AgentRuntimeErrorType.InvalidProviderAPIKey;
           break;
         }
-        // 1008 - 余额不足
+        // 1008 - Insufficient balance
         case 1008: {
           errorType = AgentRuntimeErrorType.InsufficientQuota;
           break;
         }
-        // 1002 - 请求频率超限 / 1041 - 连接数限制 / 2045 - 请求频率增长超限
+        // 1002 - Request rate limit exceeded / 1041 - Connection limit / 2045 - Request rate growth limit exceeded
         case 1002:
         case 1041:
         case 2045: {
           errorType = AgentRuntimeErrorType.QuotaLimitReached;
           break;
         }
-        // 1039 - Token 限制
+        // 1039 - Token limit
         case 1039: {
           errorType = AgentRuntimeErrorType.ExceededContextWindow;
           break;

package/packages/model-runtime/src/core/streams/protocol.ts

@@ -402,25 +402,25 @@ export const createFirstErrorHandleTransformer = (
 export const createSSEDataExtractor = () =>
   new TransformStream({
     transform(chunk: Uint8Array, controller) {
-      // 将 Uint8Array 转换为字符串
+      // Convert Uint8Array to string
       const text = new TextDecoder().decode(chunk, { stream: true });
 
-      // 处理多行数据的情况
+      // Handle multi-line data case
       const lines = text.split('\n');
 
       for (const line of lines) {
-        // 只处理以 "data: " 开头的行
+        // Only process lines starting with "data: "
         if (line.startsWith('data: ')) {
-          // 提取 "data: " 后面的实际数据
+          // Extract the actual data after "data: "
           const jsonText = line.slice(6);
 
-          // 跳过心跳消息
+          // Skip heartbeat messages
           if (jsonText === '[DONE]') continue;
 
           try {
-            // 解析 JSON 数据
+            // Parse JSON data
             const data = JSON.parse(jsonText);
-            // 将解析后的数据传递给下一个处理器
+            // Pass parsed data to the next processor
             controller.enqueue(data);
           } catch {
             console.warn('Failed to parse SSE data:', jsonText);
@@ -441,7 +441,7 @@ export const createTokenSpeedCalculator = (
   {
     inputStartAt,
     streamStack,
-    enableStreaming = true, // 选择 TPS 计算方式（非流式时传 false）
+    enableStreaming = true, // Select TPS calculation method (pass false for non-streaming)
   }: { enableStreaming?: boolean; inputStartAt?: number; streamStack?: StreamContext } = {},
 ) => {
   let outputStartAt: number | undefined;

package/packages/model-runtime/src/core/streams/spark.ts

@@ -23,7 +23,7 @@ export function transformSparkResponseToStream(data: OpenAI.ChatCompletion) {
             ? Array.isArray(choice.message.tool_calls)
               ? choice.message.tool_calls
               : [choice.message.tool_calls]
-            : []; // 如果不是数组，包装成数组
+            : []; // If not an array, wrap it in an array
 
           return {
             delta: {
@@ -91,7 +91,7 @@ export const transformSparkStream = (chunk: OpenAI.ChatCompletionChunk): StreamP
   if (item.delta?.tool_calls) {
     const toolCallsArray = Array.isArray(item.delta.tool_calls)
       ? item.delta.tool_calls
-      : [item.delta.tool_calls]; // 如果不是数组，包装成数组
+      : [item.delta.tool_calls]; // If not an array, wrap it in an array
 
     if (toolCallsArray.length > 0) {
       return {
@@ -108,7 +108,7 @@ export const transformSparkStream = (chunk: OpenAI.ChatCompletionChunk): StreamP
   }
 
   if (item.finish_reason) {
-    // one-api 的流式接口，会出现既有 finish_reason ，也有 content 的情况
+    // one-api's streaming interface can have both finish_reason and content
     //  {"id":"demo","model":"deepl-en","choices":[{"index":0,"delta":{"role":"assistant","content":"Introduce yourself."},"finish_reason":"stop"}]}
 
     if (typeof item.delta?.content === 'string' && !!item.delta.content) {
@@ -129,7 +129,7 @@ export const transformSparkStream = (chunk: OpenAI.ChatCompletionChunk): StreamP
 
   if (typeof item.delta?.content === 'string') {
     /*
-    处理 v1 endpoint usage，混合在最后一个 content 内容中
+    Handle v1 endpoint usage, mixed in the last content
     {"code":0,"message":"Success","sid":"cha000d05ef@dx196553ae415b80a432","id":"cha000d05ef@dx196553ae415b80a432","created":1745186655,"choices":[{"delta":{"role":"assistant","content":"😊"},"index":0}],"usage":{"prompt_tokens":1,"completion_tokens":418,"total_tokens":419}}
     */
     if (chunk.usage) {
@@ -146,7 +146,7 @@ export const transformSparkStream = (chunk: OpenAI.ChatCompletionChunk): StreamP
     return { data: item.delta, id: chunk.id, type: 'data' };
   }
 
-  // 处理 v2 endpoint usage
+  // Handle v2 endpoint usage
   if (chunk.usage) {
     return { data: convertOpenAIUsage(chunk.usage), id: chunk.id, type: 'usage' };
   }

package/packages/model-runtime/src/core/streams/vertex-ai.ts

@@ -35,7 +35,7 @@ const transformVertexAIStream = (
   }
 
   if (
-    candidate && // 首先检查是否为 reasoning 内容 (thought: true)
+    candidate && // First check if this is reasoning content (thought: true)
     Array.isArray(candidate.content?.parts) &&
     candidate.content.parts.length > 0
   ) {
@@ -88,8 +88,8 @@ const transformVertexAIStream = (
         {
           data: {
             citations: groundingChunks?.map((chunk) => ({
-              // google 返回的 uri 是经过 google 自己处理过的 url，因此无法展现真实的 favicon
-              // 需要使用 title 作为替换
+              // Google returns a uri processed by Google itself, so it cannot display the real favicon
+              // Need to use title as a replacement
               favicon: chunk.web?.title,
               title: chunk.web?.title,
               url: chunk.web?.uri,

package/src/app/[variants]/(main)/agent/_layout/AgentIdSync.tsx

@@ -26,8 +26,12 @@ const AgentIdSync = () => {
 
   // Clear activeAgentId when unmounting (leaving chat page)
   useUnmount(() => {
-    useAgentStore.setState({ activeAgentId: undefined });
-    useChatStore.setState({ activeAgentId: undefined, activeTopicId: undefined });
+    useAgentStore.setState({ activeAgentId: undefined }, false, 'AgentIdSync/unmountAgentId');
+    useChatStore.setState(
+      { activeAgentId: undefined, activeTopicId: undefined },
+      false,
+      'AgentIdSync/unmountAgentId',
+    );
   });
 
   return null;

package/src/app/[variants]/(main)/agent/features/Conversation/Header/ShareButton/index.tsx

@@ -6,6 +6,7 @@ import dynamic from 'next/dynamic';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { withSuspense } from '@/components/withSuspense';
 import { DESKTOP_HEADER_ICON_SIZE, MOBILE_HEADER_ICON_SIZE } from '@/const/layoutTokens';
 import { useWorkspaceModal } from '@/hooks/useWorkspaceModal';
 import { useChatStore } from '@/store/chat';
@@ -54,4 +55,4 @@ const ShareButton = memo<ShareButtonProps>(({ mobile, setOpen, open }) => {
   );
 });
 
-export default ShareButton;
+export default withSuspense(ShareButton);

package/src/app/[variants]/(main)/agent/features/Conversation/index.tsx

@@ -1,7 +1,8 @@
 import { Flexbox, TooltipGroup } from '@lobehub/ui';
-import React, { memo } from 'react';
+import React, { Suspense, memo } from 'react';
 
 import DragUploadZone, { useUploadFiles } from '@/components/DragUploadZone';
+import Loading from '@/components/Loading/BrandTextLoading';
 import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/selectors';
 import { useGlobalStore } from '@/store/global';
@@ -25,14 +26,20 @@ const ChatConversation = memo(() => {
   const { handleUploadFiles } = useUploadFiles({ model, provider });
 
   return (
-    <DragUploadZone onUploadFiles={handleUploadFiles} style={wrapperStyle}>
-      <Flexbox height={'100%'} style={{ overflow: 'hidden', position: 'relative' }} width={'100%'}>
-        {showHeader && <ChatHeader />}
-        <TooltipGroup>
-          <ConversationArea />
-        </TooltipGroup>
-      </Flexbox>
-    </DragUploadZone>
+    <Suspense fallback={<Loading debugId="Agent > ChatConversation" />}>
+      <DragUploadZone onUploadFiles={handleUploadFiles} style={wrapperStyle}>
+        <Flexbox
+          height={'100%'}
+          style={{ overflow: 'hidden', position: 'relative' }}
+          width={'100%'}
+        >
+          {showHeader && <ChatHeader />}
+          <TooltipGroup>
+            <ConversationArea />
+          </TooltipGroup>
+        </Flexbox>
+      </DragUploadZone>
+    </Suspense>
   );
 });
 

package/src/app/[variants]/(main)/group/profile/{features/ProfileHydration.tsx → StoreSync.tsx}

@@ -10,7 +10,7 @@ import { parseAsString, useQueryState } from '@/hooks/useQueryParam';
 import { useChatStore } from '@/store/chat';
 import { useGroupProfileStore } from '@/store/groupProfile';
 
-const ProfileHydration = memo(() => {
+const StoreSync = memo(() => {
   const editor = useEditor();
   const editorState = useEditorState(editor);
   const flushSave = useGroupProfileStore((s) => s.flushSave);
@@ -32,6 +32,11 @@ const ProfileHydration = memo(() => {
   useEffect(() => {
     const urlTopicId = builderTopicId ?? undefined;
     useChatStore.setState({ activeTopicId: urlTopicId });
+
+    return () => {
+      // Clear activeTopicId when unmounting (leaving group profile page)
+      useChatStore.setState({ activeTopicId: undefined }, false, 'GroupProfileUnmounted');
+    };
   }, [builderTopicId]);
 
   // Register hotkeys
@@ -40,15 +45,19 @@ const ProfileHydration = memo(() => {
 
   // Clear state when unmounting
   useUnmount(() => {
-    useGroupProfileStore.setState({
-      activeTabId: 'group',
-      editor: undefined,
-      editorState: undefined,
-      saveStateMap: {},
-    });
+    useGroupProfileStore.setState(
+      {
+        activeTabId: 'group',
+        editor: undefined,
+        editorState: undefined,
+        saveStateMap: {},
+      },
+      false,
+      'GroupProfileUnmounted',
+    );
   });
 
   return null;
 });
 
-export default ProfileHydration;
+export default StoreSync;

package/src/app/[variants]/(main)/group/profile/features/Header/index.tsx

@@ -7,9 +7,12 @@ import { memo, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import AddGroupMemberModal from '@/app/[variants]/(main)/group/_layout/Sidebar/AddGroupMemberModal';
+import ToggleLeftPanelButton from '@/features/NavPanel/ToggleLeftPanelButton';
 import { parseAsString, useQueryState } from '@/hooks/useQueryParam';
 import { useAgentGroupStore } from '@/store/agentGroup';
 import { agentGroupSelectors } from '@/store/agentGroup/selectors';
+import { useGlobalStore } from '@/store/global';
+import { systemStatusSelectors } from '@/store/global/selectors';
 
 import AgentBuilderToggle from './AgentBuilderToggle';
 import ChromeTabs, { type ChromeTabItem } from './ChromeTabs';
@@ -46,6 +49,7 @@ const Header = memo(() => {
   const members = useAgentGroupStore(agentGroupSelectors.currentGroupAgents);
   const activeGroupId = useAgentGroupStore(agentGroupSelectors.activeGroupId);
   const addAgentsToGroup = useAgentGroupStore((s) => s.addAgentsToGroup);
+  const showLeftPanel = useGlobalStore(systemStatusSelectors.showLeftPanel);
 
   // Use URL query param for selected tab
   const [selectedTabId, setSelectedTabId] = useQueryState(
@@ -86,7 +90,8 @@ const Header = memo(() => {
 
   return (
     <>
-      <Flexbox align="center" className={styles.header} horizontal justify="space-between">
+      <Flexbox align="center" className={styles.header} gap={4} horizontal justify="space-between">
+        {!showLeftPanel && <ToggleLeftPanelButton />}
         <div className={styles.tabsWrapper}>
           <ChromeTabs
             activeId={selectedTabId}

package/src/app/[variants]/(main)/group/profile/index.tsx

@@ -9,11 +9,11 @@ import { useAgentGroupStore } from '@/store/agentGroup';
 import { agentGroupSelectors } from '@/store/agentGroup/selectors';
 import { useGroupProfileStore } from '@/store/groupProfile';
 
+import StoreSync from './StoreSync';
 import AgentBuilder from './features/AgentBuilder';
 import GroupProfileSettings from './features/GroupProfile';
 import Header from './features/Header';
 import MemberProfile from './features/MemberProfile';
-import ProfileHydration from './features/ProfileHydration';
 
 const ProfileArea = memo(() => {
   const editor = useGroupProfileStore((s) => s.editor);
@@ -51,7 +51,7 @@ const ProfileArea = memo(() => {
 const GroupProfile: FC = () => {
   return (
     <Suspense fallback={<Loading debugId="GroupProfile" />}>
-      <ProfileHydration />
+      <StoreSync />
       <Flexbox height={'100%'} horizontal width={'100%'}>
         <ProfileArea />
         <AgentBuilder />

package/src/features/AgentBuilder/TopicSelector.tsx

@@ -37,7 +37,9 @@ const TopicSelector = memo<TopicSelectorProps>(({ agentId }) => {
   const { t } = useTranslation('topic');
 
   // Fetch topics for the agent builder
-  useChatStore((s) => s.useFetchTopics)(true, { agentId });
+  const useFetchTopics = useChatStore((s) => s.useFetchTopics);
+
+  useFetchTopics(true, { agentId });
 
   const [activeTopicId, switchTopic, topics] = useChatStore((s) => [
     s.activeTopicId,

package/src/features/Conversation/Messages/Assistant/index.tsx

@@ -58,7 +58,7 @@ const AssistantMessage = memo<AssistantMessageProps>(
     const editing = useConversationStore(messageStateSelectors.isMessageEditing(id));
     const generating = useConversationStore(messageStateSelectors.isMessageGenerating(id));
     const creating = useConversationStore(messageStateSelectors.isMessageCreating(id));
-    const newScreen = useNewScreen({ creating, isLatestItem });
+    const newScreen = useNewScreen({ creating: creating || generating, isLatestItem });
 
     const errorContent = useErrorContent(error);
 

package/src/features/Conversation/Messages/AssistantGroup/components/MessageContent.tsx

@@ -1,9 +1,9 @@
 import { createStaticStyles, cx } from 'antd-style';
 import { memo } from 'react';
 
-import BubblesLoading from '@/components/BubblesLoading';
 import { LOADING_FLAT } from '@/const/message';
 import MarkdownMessage from '@/features/Conversation/Markdown';
+import ContentLoading from '@/features/Conversation/Messages/components/ContentLoading';
 
 import { normalizeThinkTags, processWithArtifact } from '../../../utils/markdown';
 import { useMarkdown } from '../useMarkdown';
@@ -25,12 +25,12 @@ const MessageContent = memo<ContentBlockProps>(({ content, hasTools, id }) => {
   const message = normalizeThinkTags(processWithArtifact(content));
   const markdownProps = useMarkdown(id);
 
-  if (!content && !hasTools) return <BubblesLoading />;
+  if (!content && !hasTools) return <ContentLoading id={id} />;
 
   if (content === LOADING_FLAT) {
     if (hasTools) return null;
 
-    return <BubblesLoading />;
+    return <ContentLoading id={id} />;
   }
 
   return (

package/src/features/Conversation/Messages/Supervisor/components/MessageContent.tsx

@@ -1,11 +1,11 @@
 import { memo } from 'react';
 
-import BubblesLoading from '@/components/BubblesLoading';
 import { LOADING_FLAT } from '@/const/message';
 import MarkdownMessage from '@/features/Conversation/Markdown';
 
 import { normalizeThinkTags, processWithArtifact } from '../../../utils/markdown';
 import { useMarkdown } from '../../AssistantGroup/useMarkdown';
+import ContentLoading from '../../components/ContentLoading';
 
 interface ContentBlockProps {
   content: string;
@@ -20,7 +20,7 @@ const MessageContent = memo<ContentBlockProps>(({ content, id, hasTools }) => {
   if (!content || content === LOADING_FLAT) {
     if (hasTools) return null;
 
-    return <BubblesLoading />;
+    return <ContentLoading id={id} />;
   }
 
   return content && <MarkdownMessage {...markdownProps}>{message}</MarkdownMessage>;

package/src/features/Conversation/Messages/components/ContentLoading.tsx

@@ -9,17 +9,17 @@ import type { OperationType } from '@/store/chat/slices/operation/types';
 
 const ELAPSED_TIME_THRESHOLD = 2100; // Show elapsed time after 2 seconds
 
+const NO_NEED_SHOW_DOT_OP_TYPES = new Set<OperationType>(['reasoning']);
+
 interface ContentLoadingProps {
   id: string;
 }
 
 const ContentLoading = memo<ContentLoadingProps>(({ id }) => {
   const { t } = useTranslation('chat');
-  const operations = useChatStore(operationSelectors.getOperationsByMessage(id));
+  const runningOp = useChatStore(operationSelectors.getDeepestRunningOperationByMessage(id));
   const [elapsedSeconds, setElapsedSeconds] = useState(0);
 
-  // Get the running operation
-  const runningOp = operations.find((op) => op.status === 'running');
   const operationType = runningOp?.type as OperationType | undefined;
   const startTime = runningOp?.metadata?.startTime;
 
@@ -48,6 +48,8 @@ const ContentLoading = memo<ContentLoadingProps>(({ id }) => {
 
   const showElapsedTime = elapsedSeconds >= ELAPSED_TIME_THRESHOLD / 1000;
 
+  if (operationType && NO_NEED_SHOW_DOT_OP_TYPES.has(operationType)) return null;
+
   return (
     <Flexbox align={'center'} horizontal>
       <BubblesLoading />

package/src/store/chat/slices/operation/__tests__/selectors.test.ts

@@ -188,6 +188,171 @@ describe('Operation Selectors', () => {
     });
   });
 
+  describe('getDeepestRunningOperationByMessage', () => {
+    it('should return undefined when no operations exist', () => {
+      const { result } = renderHook(() => useChatStore());
+
+      const deepestOp = operationSelectors.getDeepestRunningOperationByMessage('msg1')(
+        result.current,
+      );
+
+      expect(deepestOp).toBeUndefined();
+    });
+
+    it('should return undefined when no running operations exist', () => {
+      const { result } = renderHook(() => useChatStore());
+
+      let opId: string;
+      act(() => {
+        opId = result.current.startOperation({
+          type: 'execAgentRuntime',
+          context: { agentId: 'session1', messageId: 'msg1' },
+        }).operationId;
+        result.current.associateMessageWithOperation('msg1', opId);
+        result.current.completeOperation(opId);
+      });
+
+      const deepestOp = operationSelectors.getDeepestRunningOperationByMessage('msg1')(
+        result.current,
+      );
+
+      expect(deepestOp).toBeUndefined();
+    });
+
+    it('should return the only running operation when there is one', () => {
+      const { result } = renderHook(() => useChatStore());
+
+      let opId: string;
+      act(() => {
+        opId = result.current.startOperation({
+          type: 'execAgentRuntime',
+          context: { agentId: 'session1', messageId: 'msg1' },
+        }).operationId;
+        result.current.associateMessageWithOperation('msg1', opId);
+      });
+
+      const deepestOp = operationSelectors.getDeepestRunningOperationByMessage('msg1')(
+        result.current,
+      );
+
+      expect(deepestOp).toBeDefined();
+      expect(deepestOp?.type).toBe('execAgentRuntime');
+    });
+
+    it('should return the leaf operation in a parent-child tree', () => {
+      const { result } = renderHook(() => useChatStore());
+
+      let parentOpId: string;
+      let childOpId: string;
+
+      act(() => {
+        // Start parent operation
+        parentOpId = result.current.startOperation({
+          type: 'execAgentRuntime',
+          context: { agentId: 'session1', messageId: 'msg1' },
+        }).operationId;
+        result.current.associateMessageWithOperation('msg1', parentOpId);
+
+        // Start child operation
+        childOpId = result.current.startOperation({
+          type: 'reasoning',
+          context: { agentId: 'session1', messageId: 'msg1' },
+          parentOperationId: parentOpId,
+        }).operationId;
+        result.current.associateMessageWithOperation('msg1', childOpId);
+      });
+
+      const deepestOp = operationSelectors.getDeepestRunningOperationByMessage('msg1')(
+        result.current,
+      );
+
+      // Should return the child (reasoning) not the parent (execAgentRuntime)
+      expect(deepestOp).toBeDefined();
+      expect(deepestOp?.type).toBe('reasoning');
+      expect(deepestOp?.id).toBe(childOpId!);
+    });
+
+    it('should return the deepest leaf in a multi-level tree', () => {
+      const { result } = renderHook(() => useChatStore());
+
+      let rootOpId: string;
+      let level1OpId: string;
+      let level2OpId: string;
+
+      act(() => {
+        // Level 0: root operation
+        rootOpId = result.current.startOperation({
+          type: 'execAgentRuntime',
+          context: { agentId: 'session1', messageId: 'msg1' },
+        }).operationId;
+        result.current.associateMessageWithOperation('msg1', rootOpId);
+
+        // Level 1: child of root
+        level1OpId = result.current.startOperation({
+          type: 'callLLM',
+          context: { agentId: 'session1', messageId: 'msg1' },
+          parentOperationId: rootOpId,
+        }).operationId;
+        result.current.associateMessageWithOperation('msg1', level1OpId);
+
+        // Level 2: grandchild (deepest)
+        level2OpId = result.current.startOperation({
+          type: 'reasoning',
+          context: { agentId: 'session1', messageId: 'msg1' },
+          parentOperationId: level1OpId,
+        }).operationId;
+        result.current.associateMessageWithOperation('msg1', level2OpId);
+      });
+
+      const deepestOp = operationSelectors.getDeepestRunningOperationByMessage('msg1')(
+        result.current,
+      );
+
+      // Should return the deepest leaf (reasoning at level 2)
+      expect(deepestOp).toBeDefined();
+      expect(deepestOp?.type).toBe('reasoning');
+      expect(deepestOp?.id).toBe(level2OpId!);
+    });
+
+    it('should return parent when child operation completes', () => {
+      const { result } = renderHook(() => useChatStore());
+
+      let parentOpId: string;
+      let childOpId: string;
+
+      act(() => {
+        parentOpId = result.current.startOperation({
+          type: 'execAgentRuntime',
+          context: { agentId: 'session1', messageId: 'msg1' },
+        }).operationId;
+        result.current.associateMessageWithOperation('msg1', parentOpId);
+
+        childOpId = result.current.startOperation({
+          type: 'reasoning',
+          context: { agentId: 'session1', messageId: 'msg1' },
+          parentOperationId: parentOpId,
+        }).operationId;
+        result.current.associateMessageWithOperation('msg1', childOpId);
+      });
+
+      // Before completing child
+      let deepestOp = operationSelectors.getDeepestRunningOperationByMessage('msg1')(
+        result.current,
+      );
+      expect(deepestOp?.type).toBe('reasoning');
+
+      // Complete child operation
+      act(() => {
+        result.current.completeOperation(childOpId);
+      });
+
+      // After completing child, parent should be the deepest running
+      deepestOp = operationSelectors.getDeepestRunningOperationByMessage('msg1')(result.current);
+      expect(deepestOp?.type).toBe('execAgentRuntime');
+      expect(deepestOp?.id).toBe(parentOpId!);
+    });
+  });
+
   describe('isMessageProcessing', () => {
     it('should return true if message has running operations', () => {
       const { result } = renderHook(() => useChatStore());

package/src/store/chat/slices/operation/selectors.ts

@@ -355,6 +355,28 @@ const isAnyMessageLoading =
     return messageIds.some((id) => isMessageProcessing(id)(s));
   };
 
+/**
+ * Get the deepest running operation for a message (leaf node in operation tree)
+ * Operations form a tree structure via parentOperationId/childOperationIds
+ * This returns the most specific (deepest) running operation for UI display
+ */
+const getDeepestRunningOperationByMessage =
+  (messageId: string) =>
+  (s: ChatStoreState): Operation | undefined => {
+    const operations = getOperationsByMessage(messageId)(s);
+    const runningOps = operations.filter((op) => op.status === 'running');
+
+    if (runningOps.length === 0) return undefined;
+
+    const runningOpIds = new Set(runningOps.map((op) => op.id));
+
+    // A leaf running operation has no running children
+    return runningOps.find((op) => {
+      const childIds = op.childOperationIds || [];
+      return !childIds.some((childId) => runningOpIds.has(childId));
+    });
+  };
+
 /**
  * Check if a specific message is being regenerated
  */
@@ -440,6 +462,7 @@ export const operationSelectors = {
   getCurrentContextOperations,
   getCurrentOperationLabel,
   getCurrentOperationProgress,
+  getDeepestRunningOperationByMessage,
   getOperationById,
   getOperationContextFromMessage,
   getOperationsByContext,

package/src/tools/streamings.ts

@@ -1,3 +1,7 @@
+import {
+  AgentBuilderManifest,
+  AgentBuilderStreamings,
+} from '@lobechat/builtin-tool-agent-builder/client';
 import {
   CloudSandboxManifest,
   CloudSandboxStreamings,
@@ -28,6 +32,7 @@ import { type BuiltinStreaming } from '@lobechat/types';
  * The component should fetch streaming content from store internally.
  */
 const BuiltinToolStreamings: Record<string, Record<string, BuiltinStreaming>> = {
+  [AgentBuilderManifest.identifier]: AgentBuilderStreamings as Record<string, BuiltinStreaming>,
   [CloudSandboxManifest.identifier]: CloudSandboxStreamings as Record<string, BuiltinStreaming>,
   [GroupAgentBuilderManifest.identifier]: GroupAgentBuilderStreamings as Record<
     string,

package/vercel.json

@@ -1,4 +1,4 @@
 {
   "buildCommand": "bun run build:vercel",
-  "installCommand": "npx bun@1.2.23 install"
+  "installCommand": "npx pnpm@10.26.2 install"
 }