fix(frontend): avoid render-time subtask context mutation

frontend/src/components/workspace/messages/message-list.tsx

@@ -16,7 +16,6 @@ import {
 import {
   extractContentFromMessage,
   extractPresentFilesFromMessage,
-  extractTextFromMessage,
   getAssistantTurnCopyData,
   getAssistantTurnUsageMessages,
   getMessageGroups,
@@ -27,9 +26,7 @@ import {
   isAssistantMessageGroupStreaming,
 } from "@/core/messages/utils";
 import { useRehypeSplitWordsIntoSpans } from "@/core/rehype";
-import type { Subtask } from "@/core/tasks";
-import { useUpdateSubtask } from "@/core/tasks/context";
-import { parseSubtaskResult } from "@/core/tasks/subtask-result";
+import { buildSubtaskMapFromMessages } from "@/core/tasks/derive";
 import type { AgentThreadState } from "@/core/threads";
 import { cn } from "@/lib/utils";
 
@@ -177,8 +174,8 @@ export function MessageList({
 }) {
   const { t } = useI18n();
   const rehypePlugins = useRehypeSplitWordsIntoSpans(thread.isLoading);
-  const updateSubtask = useUpdateSubtask();
   const messages = thread.messages;
+  const tasks = useMemo(() => buildSubtaskMapFromMessages(messages), [messages]);
   const groupedMessages = getMessageGroups(messages);
   const turnUsageMessagesByGroupIndex =
     getAssistantTurnUsageMessages(groupedMessages);
@@ -354,42 +351,29 @@ export function MessageList({
               </div>
             );
           } else if (group.type === "assistant:subagent") {
-            const tasks = new Set<Subtask>();
-            for (const message of group.messages) {
-              if (message.type === "ai") {
-                for (const toolCall of message.tool_calls ?? []) {
-                  if (toolCall.name === "task") {
-                    const task: Subtask = {
-                      id: toolCall.id!,
-                      subagent_type: toolCall.args.subagent_type,
-                      description: toolCall.args.description,
-                      prompt: toolCall.args.prompt,
-                      status: "in_progress",
-                    };
-                    updateSubtask(task);
-                    tasks.add(task);
-                  }
-                }
-              } else if (message.type === "tool") {
-                const taskId = message.tool_call_id;
-                if (taskId) {
-                  const parsed = parseSubtaskResult(
-                    extractTextFromMessage(message),
-                  );
-                  updateSubtask({ id: taskId, ...parsed });
-                }
-              }
-            }
-
             const results: React.ReactNode[] = [];
             const subagentDebugMessageIds: string[] = [];
-            if (tasks.size > 0) {
+            const groupTaskIds = Array.from(
+              new Set(
+                group.messages.flatMap((message) =>
+                  message.type === "ai"
+                    ? (message.tool_calls ?? [])
+                        .map((toolCall) =>
+                          toolCall.name === "task" ? toolCall.id : null,
+                        )
+                        .filter((taskId): taskId is string => Boolean(taskId))
+                    : [],
+                ),
+              ),
+            );
+
+            if (groupTaskIds.length > 0) {
               results.push(
                 <div
                   key="subtask-count"
                   className="text-muted-foreground pt-2 text-sm font-normal"
                 >
-                  {t.subtasks.executing(tasks.size)}
+                  {t.subtasks.executing(groupTaskIds.length)}
                 </div>,
               );
             }
@@ -417,10 +401,14 @@ export function MessageList({
                 ?.filter((toolCall) => toolCall.name === "task")
                 .map((toolCall) => toolCall.id);
               for (const taskId of taskIds ?? []) {
+                const task = taskId ? tasks[taskId] : undefined;
+                if (!taskId || !task) {
+                  continue;
+                }
                 results.push(
                   <SubtaskCard
                     key={"task-group-" + taskId}
-                    taskId={taskId!}
+                    task={task}
                     isLoading={thread.isLoading}
                   />,
                 );

frontend/src/components/workspace/messages/subtask-card.tsx

@@ -20,7 +20,8 @@ import { useI18n } from "@/core/i18n/hooks";
 import { hasToolCalls } from "@/core/messages/utils";
 import { useRehypeSplitWordsIntoSpans } from "@/core/rehype";
 import { streamdownPluginsWithWordAnimation } from "@/core/streamdown";
-import { useSubtask } from "@/core/tasks/context";
+import type { Subtask } from "@/core/tasks";
+import { useLatestSubtaskMessage } from "@/core/tasks/context";
 import { explainLastToolCall } from "@/core/tools/utils";
 import { cn } from "@/lib/utils";
 
@@ -31,26 +32,30 @@ import { MarkdownContent } from "./markdown-content";
 
 export function SubtaskCard({
   className,
-  taskId,
+  task,
   isLoading,
 }: {
   className?: string;
-  taskId: string;
+  task: Subtask;
   isLoading: boolean;
 }) {
   const { t } = useI18n();
   const [collapsed, setCollapsed] = useState(true);
   const rehypePlugins = useRehypeSplitWordsIntoSpans(isLoading);
-  const task = useSubtask(taskId)!;
+  const latestMessage = useLatestSubtaskMessage(task.id);
+  const mergedTask = useMemo(
+    () => (latestMessage ? { ...task, latestMessage } : task),
+    [latestMessage, task],
+  );
   const icon = useMemo(() => {
-    if (task.status === "completed") {
+    if (mergedTask.status === "completed") {
       return <CheckCircleIcon className="size-3" />;
-    } else if (task.status === "failed") {
+    } else if (mergedTask.status === "failed") {
       return <XCircleIcon className="size-3 text-red-500" />;
-    } else if (task.status === "in_progress") {
+    } else if (mergedTask.status === "in_progress") {
       return <Loader2Icon className="size-3 animate-spin" />;
     }
-  }, [task.status]);
+  }, [mergedTask.status]);
   return (
     <ChainOfThought
       className={cn("relative w-full gap-2 rounded-lg border py-0", className)}
@@ -59,10 +64,10 @@ export function SubtaskCard({
       <div
         className={cn(
           "ambilight z-[-1]",
-          task.status === "in_progress" ? "enabled" : "",
+          mergedTask.status === "in_progress" ? "enabled" : "",
         )}
       ></div>
-      {task.status === "in_progress" && (
+      {mergedTask.status === "in_progress" && (
         <>
           <ShineBorder
             borderWidth={1.5}
@@ -81,12 +86,12 @@ export function SubtaskCard({
               <ChainOfThoughtStep
                 className="font-normal"
                 label={
-                  task.status === "in_progress" ? (
+                  mergedTask.status === "in_progress" ? (
                     <Shimmer duration={3} spread={3}>
-                      {task.description}
+                      {mergedTask.description}
                     </Shimmer>
                   ) : (
-                    task.description
+                    mergedTask.description
                   )
                 }
                 icon={<ClipboardListIcon />}
@@ -96,19 +101,21 @@ export function SubtaskCard({
                   <div
                     className={cn(
                       "text-muted-foreground flex items-center gap-1 text-xs font-normal",
-                      task.status === "failed" ? "text-red-500 opacity-67" : "",
+                      mergedTask.status === "failed"
+                        ? "text-red-500 opacity-67"
+                        : "",
                     )}
                   >
                     {icon}
                     <FlipDisplay
                       className="max-w-[420px] truncate pb-1"
-                      uniqueKey={task.latestMessage?.id ?? ""}
+                      uniqueKey={mergedTask.latestMessage?.id ?? ""}
                     >
-                      {task.status === "in_progress" &&
-                      task.latestMessage &&
-                      hasToolCalls(task.latestMessage)
-                        ? explainLastToolCall(task.latestMessage, t)
-                        : t.subtasks[task.status]}
+                      {mergedTask.status === "in_progress" &&
+                      mergedTask.latestMessage &&
+                      hasToolCalls(mergedTask.latestMessage)
+                        ? explainLastToolCall(mergedTask.latestMessage, t)
+                        : t.subtasks[mergedTask.status]}
                     </FlipDisplay>
                   </div>
                 )}
@@ -123,29 +130,29 @@ export function SubtaskCard({
           </Button>
         </div>
         <ChainOfThoughtContent className="px-4 pb-4">
-          {task.prompt && (
+          {mergedTask.prompt && (
             <ChainOfThoughtStep
               label={
                 <Streamdown
                   {...streamdownPluginsWithWordAnimation}
                   components={{ a: CitationLink }}
                 >
-                  {task.prompt}
+                  {mergedTask.prompt}
                 </Streamdown>
               }
             ></ChainOfThoughtStep>
           )}
-          {task.status === "in_progress" &&
-            task.latestMessage &&
-            hasToolCalls(task.latestMessage) && (
+          {mergedTask.status === "in_progress" &&
+            mergedTask.latestMessage &&
+            hasToolCalls(mergedTask.latestMessage) && (
               <ChainOfThoughtStep
                 label={t.subtasks.in_progress}
                 icon={<Loader2Icon className="size-4 animate-spin" />}
               >
-                {explainLastToolCall(task.latestMessage, t)}
+                {explainLastToolCall(mergedTask.latestMessage, t)}
               </ChainOfThoughtStep>
             )}
-          {task.status === "completed" && (
+          {mergedTask.status === "completed" && (
             <>
               <ChainOfThoughtStep
                 label={t.subtasks.completed}
@@ -153,9 +160,9 @@ export function SubtaskCard({
               ></ChainOfThoughtStep>
               <ChainOfThoughtStep
                 label={
-                  task.result ? (
+                  mergedTask.result ? (
                     <MarkdownContent
-                      content={task.result}
+                      content={mergedTask.result}
                       isLoading={false}
                       rehypePlugins={rehypePlugins}
                     />
@@ -164,9 +171,9 @@ export function SubtaskCard({
               ></ChainOfThoughtStep>
             </>
           )}
-          {task.status === "failed" && (
+          {mergedTask.status === "failed" && (
             <ChainOfThoughtStep
-              label={<div className="text-red-500">{task.error}</div>}
+              label={<div className="text-red-500">{mergedTask.error}</div>}
               icon={<XCircleIcon className="size-4 text-red-500" />}
             ></ChainOfThoughtStep>
           )}

frontend/src/core/tasks/context.tsx

@@ -1,23 +1,26 @@
+import type { AIMessage } from "@langchain/langgraph-sdk";
 import { createContext, useCallback, useContext, useState } from "react";
 
-import type { Subtask } from "./types";
-
 export interface SubtaskContextValue {
-  tasks: Record<string, Subtask>;
-  setTasks: (tasks: Record<string, Subtask>) => void;
+  latestMessages: Record<string, AIMessage>;
+  setLatestMessages: React.Dispatch<
+    React.SetStateAction<Record<string, AIMessage>>
+  >;
 }
 
 export const SubtaskContext = createContext<SubtaskContextValue>({
-  tasks: {},
-  setTasks: () => {
+  latestMessages: {},
+  setLatestMessages: () => {
     /* noop */
   },
 });
 
 export function SubtasksProvider({ children }: { children: React.ReactNode }) {
-  const [tasks, setTasks] = useState<Record<string, Subtask>>({});
+  const [latestMessages, setLatestMessages] = useState<Record<string, AIMessage>>(
+    {},
+  );
   return (
-    <SubtaskContext.Provider value={{ tasks, setTasks }}>
+    <SubtaskContext.Provider value={{ latestMessages, setLatestMessages }}>
       {children}
     </SubtaskContext.Provider>
   );
@@ -33,21 +36,21 @@ export function useSubtaskContext() {
   return context;
 }
 
-export function useSubtask(id: string) {
-  const { tasks } = useSubtaskContext();
-  return tasks[id];
+export function useLatestSubtaskMessage(id: string) {
+  const { latestMessages } = useSubtaskContext();
+  return latestMessages[id];
 }
 
-export function useUpdateSubtask() {
-  const { tasks, setTasks } = useSubtaskContext();
-  const updateSubtask = useCallback(
-    (task: Partial<Subtask> & { id: string }) => {
-      tasks[task.id] = { ...tasks[task.id], ...task } as Subtask;
-      if (task.latestMessage) {
-        setTasks({ ...tasks });
-      }
+export function useUpdateLatestMessage() {
+  const { setLatestMessages } = useSubtaskContext();
+  const updateLatestMessage = useCallback(
+    (taskId: string, message: AIMessage) => {
+      setLatestMessages((current) => ({
+        ...current,
+        [taskId]: message,
+      }));
     },
-    [tasks, setTasks],
+    [setLatestMessages],
   );
-  return updateSubtask;
+  return updateLatestMessage;
 }

frontend/src/core/tasks/derive.ts

@@ -0,0 +1,47 @@
+import type { Message } from "@langchain/langgraph-sdk";
+
+import { extractTextFromMessage } from "@/core/messages/utils";
+
+import { parseSubtaskResult } from "./subtask-result";
+import type { Subtask } from "./types";
+
+export function buildSubtaskMapFromMessages(
+  messages: Message[],
+): Record<string, Subtask> {
+  const tasks: Record<string, Subtask> = {};
+
+  for (const message of messages) {
+    if (message.type === "ai") {
+      for (const toolCall of message.tool_calls ?? []) {
+        if (toolCall.name !== "task" || !toolCall.id) {
+          continue;
+        }
+
+        tasks[toolCall.id] = {
+          id: toolCall.id,
+          status: "in_progress",
+          subagent_type: String(toolCall.args?.subagent_type ?? ""),
+          description: String(toolCall.args?.description ?? ""),
+          prompt: String(toolCall.args?.prompt ?? ""),
+        };
+      }
+      continue;
+    }
+
+    if (message.type !== "tool" || !message.tool_call_id) {
+      continue;
+    }
+
+    const task = tasks[message.tool_call_id];
+    if (!task) {
+      continue;
+    }
+
+    tasks[message.tool_call_id] = {
+      ...task,
+      ...parseSubtaskResult(extractTextFromMessage(message)),
+    };
+  }
+
+  return tasks;
+}

frontend/src/core/threads/hooks.ts

@@ -19,7 +19,7 @@ import { useI18n } from "../i18n/hooks";
 import { isHiddenFromUIMessage } from "../messages/utils";
 import type { FileInMessage } from "../messages/utils";
 import type { LocalSettings } from "../settings";
-import { useUpdateSubtask } from "../tasks/context";
+import { useUpdateLatestMessage } from "../tasks/context";
 import type { UploadedFileInfo } from "../uploads";
 import { promptInputFilePartToFile, uploadFiles } from "../uploads";
 
@@ -393,7 +393,7 @@ export function useThreadStream({
   }, []);
 
   const queryClient = useQueryClient();
-  const updateSubtask = useUpdateSubtask();
+  const updateLatestMessage = useUpdateLatestMessage();
 
   const thread = useStream<AgentThreadState>({
     client: getAPIClient(isMock),
@@ -503,7 +503,7 @@ export function useThreadStream({
           task_id: string;
           message: AIMessage;
         };
-        updateSubtask({ id: e.task_id, latestMessage: e.message });
+        updateLatestMessage(e.task_id, e.message);
         return;
       }