@lobehub/lobehub 2.0.9 → 2.0.11

package/src/store/chat/agents/GroupOrchestration/__tests__/batch-exec-async-tasks.test.ts

@@ -139,8 +139,8 @@ describe('createGroupOrchestrationExecutors', () => {
         {
           payload: {
             tasks: [
-              { agentId: TEST_IDS.AGENT_1_ID, task: 'Task 1', title: 'Task 1 Title' },
-              { agentId: TEST_IDS.AGENT_2_ID, task: 'Task 2', title: 'Task 2 Title' },
+              { agentId: TEST_IDS.AGENT_1_ID, instruction: 'Task 1', title: 'Task 1 Title' },
+              { agentId: TEST_IDS.AGENT_2_ID, instruction: 'Task 2', title: 'Task 2 Title' },
             ],
             toolMessageId: TEST_IDS.TOOL_MESSAGE_ID,
           },
@@ -187,8 +187,8 @@ describe('createGroupOrchestrationExecutors', () => {
         {
           payload: {
             tasks: [
-              { agentId: TEST_IDS.AGENT_1_ID, task: 'Task 1', title: 'Task 1 Title' },
-              { agentId: TEST_IDS.AGENT_2_ID, task: 'Task 2', title: 'Task 2 Title' },
+              { agentId: TEST_IDS.AGENT_1_ID, instruction: 'Task 1', title: 'Task 1 Title' },
+              { agentId: TEST_IDS.AGENT_2_ID, instruction: 'Task 2', title: 'Task 2 Title' },
             ],
             toolMessageId: TEST_IDS.TOOL_MESSAGE_ID,
           },
@@ -263,8 +263,8 @@ describe('createGroupOrchestrationExecutors', () => {
         {
           payload: {
             tasks: [
-              { agentId: TEST_IDS.AGENT_1_ID, task: 'Task 1', title: 'Task 1 Title' },
-              { agentId: TEST_IDS.AGENT_2_ID, task: 'Task 2', title: 'Task 2 Title' },
+              { agentId: TEST_IDS.AGENT_1_ID, instruction: 'Task 1', title: 'Task 1 Title' },
+              { agentId: TEST_IDS.AGENT_2_ID, instruction: 'Task 2', title: 'Task 2 Title' },
             ],
             toolMessageId: TEST_IDS.TOOL_MESSAGE_ID,
           },
@@ -327,8 +327,8 @@ describe('createGroupOrchestrationExecutors', () => {
         {
           payload: {
             tasks: [
-              { agentId: TEST_IDS.AGENT_1_ID, task: 'Task 1', title: 'Task 1 Title' },
-              { agentId: TEST_IDS.AGENT_2_ID, task: 'Task 2', title: 'Task 2 Title' },
+              { agentId: TEST_IDS.AGENT_1_ID, instruction: 'Task 1', title: 'Task 1 Title' },
+              { agentId: TEST_IDS.AGENT_2_ID, instruction: 'Task 2', title: 'Task 2 Title' },
             ],
             toolMessageId: TEST_IDS.TOOL_MESSAGE_ID,
           },
@@ -386,8 +386,8 @@ describe('createGroupOrchestrationExecutors', () => {
         {
           payload: {
             tasks: [
-              { agentId: TEST_IDS.AGENT_1_ID, task: 'Task 1', title: 'Task 1 Title' },
-              { agentId: TEST_IDS.AGENT_2_ID, task: 'Task 2', title: 'Task 2 Title' },
+              { agentId: TEST_IDS.AGENT_1_ID, instruction: 'Task 1', title: 'Task 1 Title' },
+              { agentId: TEST_IDS.AGENT_2_ID, instruction: 'Task 2', title: 'Task 2 Title' },
             ],
             toolMessageId: TEST_IDS.TOOL_MESSAGE_ID,
           },
@@ -445,8 +445,8 @@ describe('createGroupOrchestrationExecutors', () => {
         {
           payload: {
             tasks: [
-              { agentId: TEST_IDS.AGENT_1_ID, task: 'Task 1', title: 'Task 1 Title' },
-              { agentId: TEST_IDS.AGENT_2_ID, task: 'Task 2', title: 'Task 2 Title' },
+              { agentId: TEST_IDS.AGENT_1_ID, instruction: 'Task 1', title: 'Task 1 Title' },
+              { agentId: TEST_IDS.AGENT_2_ID, instruction: 'Task 2', title: 'Task 2 Title' },
             ],
             toolMessageId: TEST_IDS.TOOL_MESSAGE_ID,
           },
@@ -498,7 +498,7 @@ describe('createGroupOrchestrationExecutors', () => {
       const result = await batchExecTasksExecutor(
         {
           payload: {
-            tasks: [{ agentId: TEST_IDS.AGENT_1_ID, task: 'Task 1', title: 'Task 1 Title' }],
+            tasks: [{ agentId: TEST_IDS.AGENT_1_ID, instruction: 'Task 1', title: 'Task 1 Title' }],
             toolMessageId: TEST_IDS.TOOL_MESSAGE_ID,
           },
           type: 'batch_exec_async_tasks',
@@ -546,7 +546,7 @@ describe('createGroupOrchestrationExecutors', () => {
       const result = await batchExecTasksExecutor(
         {
           payload: {
-            tasks: [{ agentId: TEST_IDS.AGENT_1_ID, task: 'Task 1', title: 'Task 1 Title' }],
+            tasks: [{ agentId: TEST_IDS.AGENT_1_ID, instruction: 'Task 1', title: 'Task 1 Title' }],
             toolMessageId: TEST_IDS.TOOL_MESSAGE_ID,
           },
           type: 'batch_exec_async_tasks',
@@ -604,7 +604,7 @@ describe('createGroupOrchestrationExecutors', () => {
       await batchExecTasksExecutor(
         {
           payload: {
-            tasks: [{ agentId: TEST_IDS.AGENT_1_ID, task: 'Task 1', title: 'Task 1 Title' }],
+            tasks: [{ agentId: TEST_IDS.AGENT_1_ID, instruction: 'Task 1', title: 'Task 1 Title' }],
             toolMessageId: TEST_IDS.TOOL_MESSAGE_ID,
           },
           type: 'batch_exec_async_tasks',

package/src/store/chat/agents/GroupOrchestration/createGroupOrchestrationExecutors.ts

@@ -369,14 +369,17 @@ export const createGroupOrchestrationExecutors = (
      *
      * Returns: task_completed result
      */
-    exec_async_task: async (instruction, state): Promise<GroupOrchestrationExecutorOutput> => {
-      const { agentId, task, timeout, title, toolMessageId } = (
-        instruction as SupervisorInstructionExecAsyncTask
+    exec_async_task: async (
+      supervisorInstruction,
+      state,
+    ): Promise<GroupOrchestrationExecutorOutput> => {
+      const { agentId, instruction, timeout, title, toolMessageId } = (
+        supervisorInstruction as SupervisorInstructionExecAsyncTask
       ).payload;
 
       const sessionLogId = `${state.operationId}:exec_async_task`;
       log(
-        `[${sessionLogId}] Executing async task for agent: ${agentId}, task: ${task}, timeout: ${timeout}`,
+        `[${sessionLogId}] Executing async task for agent: ${agentId}, instruction: ${instruction}, timeout: ${timeout}`,
       );
 
       const { groupId, topicId } = messageContext;
@@ -400,7 +403,7 @@ export const createGroupOrchestrationExecutors = (
             agentId,
             content: '',
             groupId,
-            metadata: { instruction: task, taskTitle: title },
+            metadata: { instruction, taskTitle: title },
             parentId: toolMessageId,
             role: 'task',
             topicId,
@@ -427,7 +430,7 @@ export const createGroupOrchestrationExecutors = (
         const createResult = await aiAgentService.execSubAgentTask({
           agentId,
           groupId,
-          instruction: task,
+          instruction,
           parentMessageId: taskMessageId,
           title,
           topicId,
@@ -600,9 +603,12 @@ export const createGroupOrchestrationExecutors = (
      *
      * Returns: task_completed result
      */
-    exec_client_async_task: async (instruction, state): Promise<GroupOrchestrationExecutorOutput> => {
-      const { agentId, task, title, toolMessageId } = (
-        instruction as SupervisorInstructionExecClientAsyncTask
+    exec_client_async_task: async (
+      supervisorInstruction,
+      state,
+    ): Promise<GroupOrchestrationExecutorOutput> => {
+      const { agentId, instruction, title, toolMessageId } = (
+        supervisorInstruction as SupervisorInstructionExecClientAsyncTask
       ).payload;
 
       const sessionLogId = `${state.operationId}:exec_client_async_task`;
@@ -629,7 +635,7 @@ export const createGroupOrchestrationExecutors = (
             agentId,
             content: '',
             groupId,
-            metadata: { instruction: task, taskTitle: title },
+            metadata: { instruction, taskTitle: title },
             parentId: toolMessageId,
             role: 'task',
             topicId,
@@ -656,7 +662,7 @@ export const createGroupOrchestrationExecutors = (
         // Use Group-specific API that handles different agentIds in thread context
         const threadResult = await aiAgentService.createClientGroupAgentTaskThread({
           groupId: groupId!,
-          instruction: task,
+          instruction,
           parentMessageId: taskMessageId,
           subAgentId: agentId,
           title,
@@ -861,9 +867,9 @@ export const createGroupOrchestrationExecutors = (
       interface TaskTracker {
         agentId: string;
         error?: string;
+        instruction: string;
         result?: string;
         status: 'pending' | 'running' | 'completed' | 'failed';
-        task: string;
         taskMessageId?: string;
         threadId?: string;
         timeout: number;
@@ -873,7 +879,7 @@ export const createGroupOrchestrationExecutors = (
       const taskTrackers: TaskTracker[] = tasks.map((t) => ({
         agentId: t.agentId,
         status: 'pending',
-        task: t.task,
+        instruction: t.instruction,
         timeout: t.timeout || 1_800_000, // Default 30 minutes
         title: t.title,
       }));
@@ -887,8 +893,9 @@ export const createGroupOrchestrationExecutors = (
               {
                 agentId: tracker.agentId,
                 content: '',
+                createdAt: Date.now() + index,
                 groupId,
-                metadata: { instruction: tracker.task, taskTitle: tracker.title },
+                metadata: { instruction: tracker.instruction, taskTitle: tracker.title },
                 parentId: toolMessageId,
                 role: 'task',
                 topicId,
@@ -922,7 +929,7 @@ export const createGroupOrchestrationExecutors = (
             const createResult = await aiAgentService.execSubAgentTask({
               agentId: tracker.agentId,
               groupId,
-              instruction: tracker.task,
+              instruction: tracker.instruction,
               parentMessageId: tracker.taskMessageId,
               title: tracker.title,
               topicId,

package/src/store/chat/agents/__tests__/createAgentExecutors/exec-tasks.test.ts

@@ -66,7 +66,8 @@ describe('exec_tasks executor', () => {
       expect(result.nextContext).toBeDefined();
       expect((result.nextContext as AgentRuntimeContext).phase).toBe('tasks_batch_result');
 
-      const payload = (result.nextContext as AgentRuntimeContext).payload as TasksBatchResultPayload;
+      const payload = (result.nextContext as AgentRuntimeContext)
+        .payload as TasksBatchResultPayload;
       expect(payload.results).toHaveLength(1);
       expect(payload.results[0].success).toBe(true);
       expect(payload.results[0].threadId).toBe('thread_1');
@@ -131,7 +132,8 @@ describe('exec_tasks executor', () => {
 
       // Then
       expect(result.nextContext).toBeDefined();
-      const payload = (result.nextContext as AgentRuntimeContext).payload as TasksBatchResultPayload;
+      const payload = (result.nextContext as AgentRuntimeContext)
+        .payload as TasksBatchResultPayload;
       expect(payload.results).toHaveLength(3);
       expect(payload.results.every((r) => r.success)).toBe(true);
     });
@@ -170,7 +172,8 @@ describe('exec_tasks executor', () => {
 
       // Then
       expect(result.nextContext).toBeDefined();
-      const payload = (result.nextContext as AgentRuntimeContext).payload as TasksBatchResultPayload;
+      const payload = (result.nextContext as AgentRuntimeContext)
+        .payload as TasksBatchResultPayload;
       expect(payload.results).toHaveLength(1);
       expect(payload.results[0].success).toBe(false);
       expect(payload.results[0].error).toBe('No valid context available');
@@ -196,7 +199,8 @@ describe('exec_tasks executor', () => {
       });
 
       // Then
-      const payload = (result.nextContext as AgentRuntimeContext).payload as TasksBatchResultPayload;
+      const payload = (result.nextContext as AgentRuntimeContext)
+        .payload as TasksBatchResultPayload;
       expect(payload.results[0].success).toBe(false);
       expect(payload.results[0].error).toBe('Failed to create task message');
     });
@@ -228,7 +232,8 @@ describe('exec_tasks executor', () => {
       });
 
       // Then
-      const payload = (result.nextContext as AgentRuntimeContext).payload as TasksBatchResultPayload;
+      const payload = (result.nextContext as AgentRuntimeContext)
+        .payload as TasksBatchResultPayload;
       expect(payload.results[0].success).toBe(false);
       expect(payload.results[0].error).toBe('API error');
       expect(mockStore.optimisticUpdateMessageContent).toHaveBeenCalledWith(
@@ -270,7 +275,8 @@ describe('exec_tasks executor', () => {
       });
 
       // Then
-      const payload = (result.nextContext as AgentRuntimeContext).payload as TasksBatchResultPayload;
+      const payload = (result.nextContext as AgentRuntimeContext)
+        .payload as TasksBatchResultPayload;
       expect(payload.results[0].success).toBe(false);
       expect(payload.results[0].error).toBe('Execution error');
     });
@@ -318,7 +324,8 @@ describe('exec_tasks executor', () => {
         },
         { operationId: 'test-op' },
       );
-      const payload = (result.nextContext as AgentRuntimeContext).payload as TasksBatchResultPayload;
+      const payload = (result.nextContext as AgentRuntimeContext)
+        .payload as TasksBatchResultPayload;
       expect(payload.results[0].success).toBe(true);
     });
 
@@ -353,7 +360,8 @@ describe('exec_tasks executor', () => {
       });
 
       // Then
-      const payload = (result.nextContext as AgentRuntimeContext).payload as TasksBatchResultPayload;
+      const payload = (result.nextContext as AgentRuntimeContext)
+        .payload as TasksBatchResultPayload;
       expect(payload.results[0].success).toBe(false);
       expect(payload.results[0].error).toBe('Task was cancelled');
       expect(mockStore.optimisticUpdateMessageContent).toHaveBeenCalledWith(
@@ -402,7 +410,8 @@ describe('exec_tasks executor', () => {
       });
 
       // Then
-      const payload = (result.nextContext as AgentRuntimeContext).payload as TasksBatchResultPayload;
+      const payload = (result.nextContext as AgentRuntimeContext)
+        .payload as TasksBatchResultPayload;
       expect(payload.results[0].success).toBe(false);
       expect(payload.results[0].error).toBe('Operation cancelled');
       // getSubAgentTaskStatus should not be called since operation was cancelled before poll
@@ -532,6 +541,7 @@ describe('exec_tasks executor', () => {
         {
           agentId: 'agent_1',
           content: '',
+          createdAt: expect.any(Number),
           metadata: { instruction: 'Do something important' },
           parentId: 'msg_parent',
           role: 'task',
@@ -588,7 +598,8 @@ describe('exec_tasks executor', () => {
       });
 
       // Then
-      const payload = (result.nextContext as AgentRuntimeContext).payload as TasksBatchResultPayload;
+      const payload = (result.nextContext as AgentRuntimeContext)
+        .payload as TasksBatchResultPayload;
       expect(payload.results).toHaveLength(2);
       expect(payload.results[0].success).toBe(true);
       expect(payload.results[1].success).toBe(false);

package/src/store/chat/agents/createAgentExecutors.ts

@@ -1349,6 +1349,7 @@ export const createAgentExecutors = (context: {
               {
                 agentId,
                 content: '',
+                createdAt: Date.now() + taskIndex,
                 metadata: { instruction: task.instruction },
                 parentId: parentMessageId,
                 role: 'task',
@@ -2035,6 +2036,7 @@ export const createAgentExecutors = (context: {
               {
                 agentId,
                 content: '',
+                createdAt: Date.now() + taskIndex,
                 metadata: { instruction: task.instruction, taskTitle: task.description },
                 parentId: parentMessageId,
                 role: 'task',

package/src/store/chat/slices/aiAgent/actions/groupOrchestration.ts

@@ -216,17 +216,17 @@ export const groupOrchestrationSlice: StateCreator<
     const {
       supervisorAgentId,
       agentId,
-      task,
+      instruction,
       timeout,
       toolMessageId,
       skipCallSupervisor,
       runInClient,
     } = params;
     log(
-      '[triggerExecuteTask] Starting orchestration with execute_task: supervisorAgentId=%s, agentId=%s, task=%s, timeout=%s, toolMessageId=%s, skipCallSupervisor=%s, runInClient=%s',
+      '[triggerExecuteTask] Starting orchestration with execute_task: supervisorAgentId=%s, agentId=%s, instruction=%s, timeout=%s, toolMessageId=%s, skipCallSupervisor=%s, runInClient=%s',
       supervisorAgentId,
       agentId,
-      task,
+      instruction,
       timeout,
       toolMessageId,
       skipCallSupervisor,
@@ -248,7 +248,7 @@ export const groupOrchestrationSlice: StateCreator<
         type: 'supervisor_decided',
         payload: {
           decision: 'execute_task',
-          params: { agentId, runInClient, task, timeout, toolMessageId },
+          params: { agentId, instruction, runInClient, timeout, toolMessageId },
           skipCallSupervisor: skipCallSupervisor ?? false,
         },
       },
@@ -446,12 +446,15 @@ export const groupOrchestrationSlice: StateCreator<
         revalidateOnReconnect: false,
         refreshInterval: POLLING_INTERVAL,
         onSuccess: (data) => {
-          if (data?.taskDetail && messageId) {
-            // Update taskDetail
+          if (data && messageId) {
+            // Update taskDetail and tasks (intermediate messages)
             get().internal_dispatchMessage({
               id: messageId,
               type: 'updateMessage',
-              value: { taskDetail: data.taskDetail },
+              value: {
+                taskDetail: data.taskDetail,
+                tasks: data.messages,
+              },
             });
 
             // Update content when task is completed or failed

package/src/features/Conversation/Messages/Task/ClientTaskDetail/CompletedState.tsx

@@ -1,108 +0,0 @@
-'use client';
-
-import { type AssistantContentBlock } from '@lobechat/types';
-import { Accordion, AccordionItem, Block, Flexbox, Icon, Text } from '@lobehub/ui';
-import { cssVar } from 'antd-style';
-import { Workflow } from 'lucide-react';
-import { memo, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import ContentBlock from '../../AssistantGroup/components/ContentBlock';
-import { formatDuration } from '../../Tasks/shared/utils';
-import Usage from '../../components/Extras/Usage';
-
-interface CompletedStateProps {
-  assistantId: string;
-  blocks: AssistantContentBlock[];
-  duration?: number;
-  model?: string;
-  provider?: string;
-  totalCost?: number;
-  totalTokens?: number;
-  totalToolCalls?: number;
-}
-
-const CompletedState = memo<CompletedStateProps>(
-  ({ blocks, assistantId, duration, totalToolCalls, model, provider, totalTokens, totalCost }) => {
-    const { t } = useTranslation('chat');
-
-    // Split blocks: intermediate steps (all but last) and final result (last)
-    const { intermediateBlocks, finalBlock } = useMemo(() => {
-      if (blocks.length === 0) return { finalBlock: null, intermediateBlocks: [] };
-      if (blocks.length === 1) return { finalBlock: blocks[0], intermediateBlocks: [] };
-
-      return {
-        finalBlock: blocks.at(-1)!,
-        intermediateBlocks: blocks.slice(0, -1),
-      };
-    }, [blocks]);
-
-    if (!finalBlock) return null;
-
-    const title = (
-      <Flexbox align="center" gap={8} horizontal>
-        <Block
-          align="center"
-          flex="none"
-          gap={4}
-          height={24}
-          horizontal
-          justify="center"
-          style={{ fontSize: 12 }}
-          variant="outlined"
-          width={24}
-        >
-          <Icon color={cssVar.colorTextSecondary} icon={Workflow} />
-        </Block>
-        <Flexbox align="center" gap={4} horizontal>
-          <Text as="span" type="secondary" weight={500}>
-            {totalToolCalls}
-          </Text>
-          <Text as="span" type="secondary">
-            {t('task.metrics.toolCallsShort')}
-          </Text>
-          {/* Duration display */}
-          {duration && (
-            <Text as="span" type="secondary">
-              {t('task.metrics.duration', { duration: formatDuration(duration) })}
-            </Text>
-          )}
-        </Flexbox>
-      </Flexbox>
-    );
-
-    return (
-      <Flexbox gap={8}>
-        {/* Intermediate steps - collapsed by default */}
-        {intermediateBlocks.length > 0 && (
-          <Accordion defaultExpandedKeys={[]} gap={8}>
-            <AccordionItem itemKey="intermediate" paddingBlock={4} paddingInline={4} title={title}>
-              <Flexbox gap={8} paddingInline={4} style={{ marginTop: 8 }}>
-                {intermediateBlocks.map((block) => (
-                  <ContentBlock
-                    {...block}
-                    assistantId={assistantId}
-                    disableEditing
-                    key={block.id}
-                  />
-                ))}
-              </Flexbox>
-            </AccordionItem>
-          </Accordion>
-        )}
-
-        {/* Final result - always visible */}
-        <ContentBlock {...finalBlock} assistantId={assistantId} disableEditing />
-
-        {/* Usage display */}
-        {model && provider && (
-          <Usage model={model} provider={provider} usage={{ cost: totalCost, totalTokens }} />
-        )}
-      </Flexbox>
-    );
-  },
-);
-
-CompletedState.displayName = 'ClientCompletedState';
-
-export default CompletedState;

package/src/features/Conversation/Messages/Task/ClientTaskDetail/InstructionAccordion.tsx

@@ -1,63 +0,0 @@
-import { Accordion, AccordionItem, Block, Flexbox, Icon, Markdown, Text } from '@lobehub/ui';
-import { cssVar } from 'antd-style';
-import { ScrollText } from 'lucide-react';
-import { memo, useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-
-interface InstructionAccordionProps {
-  childrenCount: number;
-  instruction: string;
-}
-
-const InstructionAccordion = memo<InstructionAccordionProps>(({ instruction, childrenCount }) => {
-  const { t } = useTranslation('chat');
-
-  // Auto-collapse instruction when children count exceeds threshold
-  const [expandedKeys, setExpandedKeys] = useState<string[]>(['instruction']);
-
-  useEffect(() => {
-    if (childrenCount > 1) {
-      setExpandedKeys([]);
-    }
-  }, [childrenCount > 1]);
-
-  return (
-    <Accordion
-      expandedKeys={expandedKeys}
-      gap={8}
-      onExpandedChange={(keys) => setExpandedKeys(keys as string[])}
-    >
-      <AccordionItem
-        itemKey="instruction"
-        paddingBlock={4}
-        paddingInline={4}
-        title={
-          <Flexbox align="center" gap={8} horizontal>
-            <Block
-              align="center"
-              flex="none"
-              gap={4}
-              height={24}
-              horizontal
-              justify="center"
-              style={{ fontSize: 12 }}
-              variant="outlined"
-              width={24}
-            >
-              <Icon color={cssVar.colorTextSecondary} icon={ScrollText} />
-            </Block>
-            <Text as="span" type="secondary">
-              {t('task.instruction')}
-            </Text>
-          </Flexbox>
-        }
-      >
-        <Block padding={12} style={{ marginBlock: 8, maxHeight: 300, overflow: 'auto' }} variant={'outlined'}>
-          <Markdown variant={'chat'}>{instruction}</Markdown>
-        </Block>
-      </AccordionItem>
-    </Accordion>
-  );
-});
-
-export default InstructionAccordion;

package/src/features/Conversation/Messages/Task/ClientTaskDetail/ProcessingState.tsx

@@ -1,123 +0,0 @@
-'use client';
-
-import { type AssistantContentBlock } from '@lobechat/types';
-import { Block, Flexbox, ScrollShadow, Text } from '@lobehub/ui';
-import { createStaticStyles } from 'antd-style';
-import { type RefObject, memo, useEffect, useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import NeuralNetworkLoading from '@/components/NeuralNetworkLoading';
-import AnimatedNumber from '@/features/Conversation/Messages/components/Extras/Usage/UsageDetail/AnimatedNumber';
-import { useAutoScroll } from '@/hooks/useAutoScroll';
-
-import ContentBlock from '../../AssistantGroup/components/ContentBlock';
-import { accumulateUsage, formatElapsedTime } from '../../Tasks/shared/utils';
-import Usage from '../../components/Extras/Usage';
-
-const styles = createStaticStyles(({ css }) => ({
-  contentScroll: css`
-    max-height: min(50vh, 300px);
-  `,
-}));
-
-interface ProcessingStateProps {
-  assistantId: string;
-  blocks: AssistantContentBlock[];
-  model?: string;
-  provider?: string;
-  startTime?: number;
-}
-
-const ProcessingState = memo<ProcessingStateProps>(
-  ({ blocks, assistantId, startTime, model, provider }) => {
-    const { t } = useTranslation('chat');
-    const [elapsedTime, setElapsedTime] = useState(0);
-    const { ref, handleScroll } = useAutoScroll<HTMLDivElement>({
-      deps: [blocks],
-      enabled: true,
-    });
-
-    const totalToolCalls = useMemo(
-      () => blocks.reduce((sum, block) => sum + (block.tools?.length || 0), 0),
-      [blocks],
-    );
-
-    // Accumulate usage from all blocks
-    const accumulatedUsage = useMemo(() => accumulateUsage(blocks), [blocks]);
-
-    // Calculate initial elapsed time
-    useEffect(() => {
-      if (startTime) {
-        setElapsedTime(Math.max(0, Date.now() - startTime));
-      }
-    }, [startTime]);
-
-    // Timer for updating elapsed time every second
-    useEffect(() => {
-      if (!startTime) return;
-
-      const timer = setInterval(() => {
-        setElapsedTime(Math.max(0, Date.now() - startTime));
-      }, 1000);
-
-      return () => clearInterval(timer);
-    }, [startTime]);
-
-    return (
-      <Flexbox gap={8}>
-        <Flexbox align="center" gap={8} horizontal paddingInline={4}>
-          <Block
-            align="center"
-            flex="none"
-            gap={4}
-            height={24}
-            horizontal
-            justify="center"
-            style={{ fontSize: 12 }}
-            variant="outlined"
-            width={24}
-          >
-            <NeuralNetworkLoading size={16} />
-          </Block>
-          <Flexbox align="center" gap={4} horizontal>
-            <Text as="span" type="secondary" weight={500}>
-              <AnimatedNumber
-                duration={500}
-                formatter={(v) => Math.round(v).toString()}
-                value={totalToolCalls}
-              />
-            </Text>
-            <Text as="span" type="secondary">
-              {t('task.metrics.toolCallsShort')}
-            </Text>
-            {startTime && (
-              <Text as="span" type="secondary">
-                ({formatElapsedTime(elapsedTime)})
-              </Text>
-            )}
-          </Flexbox>
-        </Flexbox>
-        <ScrollShadow
-          className={styles.contentScroll}
-          offset={12}
-          onScroll={handleScroll}
-          ref={ref as RefObject<HTMLDivElement>}
-          size={8}
-        >
-          <Flexbox gap={8}>
-            {blocks.map((block) => (
-              <ContentBlock {...block} assistantId={assistantId} disableEditing key={block.id} />
-            ))}
-          </Flexbox>
-        </ScrollShadow>
-
-        {/* Usage display */}
-        {model && provider && <Usage model={model} provider={provider} usage={accumulatedUsage} />}
-      </Flexbox>
-    );
-  },
-);
-
-ProcessingState.displayName = 'ClientProcessingState';
-
-export default ProcessingState;