feat(chat): 优化分析过程与结果展示

2026-08-26 18:05:03 +08:00
parent fee4fc6ce1
commit 0dad61ff1f
13 changed files with 1049 additions and 292 deletions
@@ -0,0 +1,384 @@
+"use client";
+
+import React, { useEffect, useMemo, useState } from "react";
+import {
+  Box,
+  Collapse,
+  IconButton,
+  LinearProgress,
+  Stack,
+  Typography,
+  alpha,
+  useMediaQuery,
+  useTheme,
+} from "@mui/material";
+import AutoAwesomeRounded from "@mui/icons-material/AutoAwesomeRounded";
+import CheckCircleRounded from "@mui/icons-material/CheckCircleRounded";
+import ErrorOutlineRounded from "@mui/icons-material/ErrorOutlineRounded";
+import KeyboardArrowDownRounded from "@mui/icons-material/KeyboardArrowDownRounded";
+import KeyboardArrowUpRounded from "@mui/icons-material/KeyboardArrowUpRounded";
+import RadioButtonUncheckedRounded from "@mui/icons-material/RadioButtonUncheckedRounded";
+import StopCircleRounded from "@mui/icons-material/StopCircleRounded";
+
+import type { AgentActivity, AgentActivityAction } from "@/lib/chatStream";
+
+const activityAccent = "#0097a7";
+
+type TimedActivityItem = {
+  status: "running" | "completed" | "error" | "cancelled";
+  startedAt: number;
+  endedAt?: number;
+  elapsedMs?: number;
+  elapsedSnapshotAt?: number;
+  durationMs?: number;
+};
+
+const formatDuration = (durationMs: number | undefined) => {
+  if (durationMs === undefined || !Number.isFinite(durationMs)) return undefined;
+  if (durationMs < 10_000) return `${(durationMs / 1000).toFixed(1)}s`;
+  const seconds = Math.round(durationMs / 1000);
+  return seconds < 60 ? `${seconds}s` : `${Math.floor(seconds / 60)}m ${seconds % 60}s`;
+};
+
+const getElapsedMs = (
+  item: TimedActivityItem,
+  now: number,
+) => {
+  if (item.durationMs !== undefined) return item.durationMs;
+  if (item.status === "running") {
+    if (item.elapsedMs !== undefined && item.elapsedSnapshotAt !== undefined) {
+      return Math.max(0, item.elapsedMs + now - item.elapsedSnapshotAt);
+    }
+    return Math.max(0, now - item.startedAt);
+  }
+  return item.endedAt ? Math.max(0, item.endedAt - item.startedAt) : undefined;
+};
+
+const StatusIcon = ({
+  status,
+  size = 18,
+}: {
+  status: AgentActivity["status"];
+  size?: number;
+}) => {
+  if (status === "completed") {
+    return <CheckCircleRounded color="success" sx={{ fontSize: size }} />;
+  }
+  if (status === "error") {
+    return <ErrorOutlineRounded color="error" sx={{ fontSize: size }} />;
+  }
+  if (status === "cancelled") {
+    return <StopCircleRounded color="disabled" sx={{ fontSize: size }} />;
+  }
+  return <AutoAwesomeRounded sx={{ fontSize: size, color: activityAccent }} />;
+};
+
+const ActionStatusIcon = ({ status }: { status: AgentActivityAction["status"] }) => {
+  if (status === "error") {
+    return <ErrorOutlineRounded sx={{ mt: "2px", fontSize: 14, color: "error.main" }} />;
+  }
+  if (status === "completed") {
+    return <CheckCircleRounded sx={{ mt: "2px", fontSize: 14, color: "success.main" }} />;
+  }
+  return (
+    <RadioButtonUncheckedRounded
+      sx={{ mt: "2px", fontSize: 14, color: activityAccent }}
+    />
+  );
+};
+
+const ActionRow = ({ action, now }: { action: AgentActivityAction; now: number }) => {
+  const elapsed = getElapsedMs(action, now);
+  return (
+    <Stack
+      direction="row"
+      spacing={1}
+      alignItems="flex-start"
+      sx={{ minWidth: 0, py: 0.55 }}
+    >
+      <ActionStatusIcon status={action.status} />
+      <Box sx={{ minWidth: 0, flex: 1 }}>
+        <Stack
+          direction={{ xs: "column", sm: "row" }}
+          spacing={{ xs: 0.2, sm: 1 }}
+          justifyContent="space-between"
+        >
+          <Typography variant="body2" fontWeight={650} sx={{ lineHeight: 1.45 }}>
+            {action.title}
+          </Typography>
+          <Typography variant="caption" color="text.secondary" sx={{ flexShrink: 0 }}>
+            {formatDuration(elapsed)}
+          </Typography>
+        </Stack>
+        {action.target ? (
+          <Typography
+            variant="caption"
+            color="text.secondary"
+            sx={{
+              display: "block",
+              mt: 0.2,
+              fontFamily: "monospace",
+              wordBreak: "break-word",
+              whiteSpace: "pre-wrap",
+            }}
+          >
+            {action.target}
+          </Typography>
+        ) : null}
+        {action.error ? (
+          <Typography
+            variant="caption"
+            color="error.main"
+            sx={{ display: "block", mt: 0.2, wordBreak: "break-word" }}
+          >
+            {action.error}
+          </Typography>
+        ) : null}
+      </Box>
+    </Stack>
+  );
+};
+
+export const AgentActivityTimeline = ({
+  activities,
+}: {
+  activities: AgentActivity[];
+}) => {
+  const theme = useTheme();
+  const reduceMotion = useMediaQuery("(prefers-reduced-motion: reduce)");
+  const hasRunning = activities.some((activity) => activity.status === "running");
+  const hasError = activities.some((activity) => activity.status === "error");
+  const hasCancelled = activities.some((activity) => activity.status === "cancelled");
+  const [expanded, setExpanded] = useState(false);
+  const [now, setNow] = useState(() => Date.now());
+
+  useEffect(() => {
+    if (!hasRunning) return;
+    const timer = window.setInterval(() => setNow(Date.now()), 500);
+    return () => window.clearInterval(timer);
+  }, [hasRunning]);
+
+  const current = [...activities]
+    .reverse()
+    .find((activity) => activity.status === "running") ?? activities.at(-1);
+  const totalDuration = useMemo(() => {
+    if (!activities.length) return undefined;
+    const start = Math.min(...activities.map((activity) => activity.startedAt));
+    const end = hasRunning
+      ? now
+      : Math.max(
+          ...activities.map((activity) => activity.endedAt ?? activity.startedAt),
+        );
+    return formatDuration(Math.max(0, end - start));
+  }, [activities, hasRunning, now]);
+  const overallStatus: AgentActivity["status"] = hasRunning
+    ? "running"
+    : hasError
+      ? "error"
+      : hasCancelled
+        ? "cancelled"
+        : "completed";
+  const statusLabel = {
+    running: "进行中",
+    completed: "已完成",
+    error: "失败",
+    cancelled: "已停止",
+  }[overallStatus];
+  const statusColor = {
+    running: activityAccent,
+    completed: theme.palette.success.main,
+    error: theme.palette.error.main,
+    cancelled: theme.palette.text.secondary,
+  }[overallStatus];
+  const summary = hasRunning
+    ? (current?.title ?? "正在分析")
+    : hasError
+      ? "分析未完成"
+      : hasCancelled
+        ? "分析已停止"
+        : `已完成 ${activities.length} 个阶段`;
+
+  return (
+    <Box
+      sx={{
+        overflow: "hidden",
+        borderRadius: 3,
+        border: `1px solid ${alpha(activityAccent, 0.16)}`,
+        bgcolor: alpha(activityAccent, 0.035),
+      }}
+    >
+      <Stack
+        direction="row"
+        spacing={1}
+        alignItems="center"
+        sx={{ px: 1.4, py: 1.05 }}
+      >
+        <Box
+          sx={{
+            width: 28,
+            height: 28,
+            flex: "0 0 auto",
+            display: "grid",
+            placeItems: "center",
+            borderRadius: 2,
+            color: activityAccent,
+            bgcolor: alpha(activityAccent, 0.1),
+          }}
+        >
+          <AutoAwesomeRounded sx={{ fontSize: 17 }} />
+        </Box>
+        <Box sx={{ minWidth: 0, flex: 1 }}>
+          <Stack direction="row" spacing={0.75} alignItems="center">
+            <Typography variant="body2" fontWeight={750}>
+              分析过程
+            </Typography>
+            <Stack
+              component="span"
+              direction="row"
+              spacing={0.45}
+              alignItems="center"
+              sx={{ color: statusColor }}
+            >
+              <Box
+                component="span"
+                sx={{
+                  width: 5,
+                  height: 5,
+                  borderRadius: "50%",
+                  bgcolor: "currentColor",
+                }}
+              />
+              <Typography
+                component="span"
+                variant="caption"
+                fontWeight={700}
+                color="inherit"
+              >
+                {statusLabel}
+              </Typography>
+            </Stack>
+          </Stack>
+          <Typography
+            variant="caption"
+            color="text.secondary"
+            noWrap
+            sx={{ display: "block", mt: 0.1 }}
+          >
+            {summary}
+            {totalDuration ? ` · ${totalDuration}` : ""}
+          </Typography>
+        </Box>
+        <IconButton
+          size="small"
+          aria-label={expanded ? "收起分析过程" : "展开分析过程"}
+          onClick={() => setExpanded((current) => !current)}
+          sx={{
+            width: 28,
+            height: 28,
+            flex: "0 0 auto",
+            color: "text.secondary",
+            bgcolor: alpha("#000", 0.035),
+            "&:hover": { bgcolor: alpha("#000", 0.07) },
+          }}
+        >
+          {expanded ? (
+            <KeyboardArrowUpRounded sx={{ fontSize: 18 }} />
+          ) : (
+            <KeyboardArrowDownRounded sx={{ fontSize: 18 }} />
+          )}
+        </IconButton>
+      </Stack>
+      {hasRunning ? (
+        <LinearProgress
+          sx={{
+            height: 2,
+            bgcolor: alpha(activityAccent, 0.08),
+            "& .MuiLinearProgress-bar": { bgcolor: activityAccent },
+          }}
+        />
+      ) : null}
+      <Collapse in={expanded} timeout={reduceMotion ? 0 : 180}>
+        <Stack
+          spacing={1.1}
+          sx={{
+            px: 1.4,
+            py: 1.15,
+          }}
+        >
+          {activities.map((activity, index) => {
+            const elapsed = formatDuration(getElapsedMs(activity, now));
+            return (
+              <Stack
+                key={activity.id}
+                direction="row"
+                spacing={1}
+                sx={{
+                  position: "relative",
+                  minWidth: 0,
+                }}
+              >
+                <Box
+                  sx={{
+                    width: 18,
+                    flex: "0 0 18px",
+                    position: "relative",
+                    pt: "2px",
+                  }}
+                >
+                  {index < activities.length - 1 ? (
+                    <Box
+                      sx={{
+                        position: "absolute",
+                        top: 19,
+                        bottom: -14,
+                        left: 8.5,
+                        width: "1px",
+                        bgcolor: alpha(activityAccent, 0.18),
+                      }}
+                    />
+                  ) : null}
+                  <StatusIcon status={activity.status} size={17} />
+                </Box>
+                <Box sx={{ minWidth: 0, flex: 1 }}>
+                  <Stack direction="row" spacing={1} justifyContent="space-between">
+                    <Typography variant="body2" fontWeight={700} sx={{ lineHeight: 1.45 }}>
+                      {activity.title}
+                    </Typography>
+                    <Typography
+                      variant="caption"
+                      color="text.secondary"
+                      sx={{ flexShrink: 0 }}
+                    >
+                      {elapsed}
+                    </Typography>
+                  </Stack>
+                  <Typography
+                    variant="caption"
+                    color="text.secondary"
+                    sx={{ display: "block", mt: 0.25, lineHeight: 1.5 }}
+                  >
+                    {activity.reason}
+                  </Typography>
+                  {activity.actions.length ? (
+                    <Stack
+                      spacing={0}
+                      sx={{
+                        mt: 0.6,
+                        pl: 1,
+                        borderLeft: `1px solid ${alpha(activityAccent, 0.2)}`,
+                      }}
+                    >
+                      {activity.actions.map((action) => (
+                        <ActionRow key={action.id} action={action} now={now} />
+                      ))}
+                    </Stack>
+                  ) : null}
+                </Box>
+              </Stack>
+            );
+          })}
+        </Stack>
+      </Collapse>
+    </Box>
+  );
+};
@@ -118,19 +118,10 @@ const PermissionRequestCard = ({
      sx={{
        borderRadius: 3,
        overflow: "hidden",
-        border: `1px solid ${alpha("#fff", 0.72)}`,
-        bgcolor: alpha("#fff", 0.5),
-        boxShadow: `0 8px 24px ${alpha("#000", 0.05)}`,
-        backdropFilter: "blur(20px)",
+        border: `1px solid ${alpha(accentColor, 0.18)}`,
+        bgcolor: alpha(accentColor, 0.035),
+        boxShadow: `0 6px 18px ${alpha("#000", 0.04)}`,
        position: "relative",
-        "&::before": {
-          content: '""',
-          position: "absolute",
-          inset: "10px auto 10px 0",
-          width: 3,
-          borderRadius: "0 999px 999px 0",
-          bgcolor: accentColor,
-        },
      }}
    >
      <Stack
@@ -180,6 +171,22 @@ const PermissionRequestCard = ({
      </Stack>

      <Stack spacing={1.15} sx={{ px: 1.5, pt: 1.25, pb: 1.35, pl: 1.75 }}>
+        <Box
+          sx={{
+            px: 1.25,
+            py: 1,
+            borderRadius: 2.5,
+            bgcolor: alpha(accentColor, 0.055),
+            border: `1px solid ${alpha(accentColor, 0.12)}`,
+          }}
+        >
+          <Typography variant="caption" color="text.secondary" fontWeight={800}>
+            执行目的
+          </Typography>
+          <Typography variant="body2" sx={{ mt: 0.25, lineHeight: 1.55 }}>
+            {permission.reason?.trim() || "Agent 未提供执行目的"}
+          </Typography>
+        </Box>
        <Box
          sx={{
            px: 1.25,
@@ -29,7 +29,9 @@ export const TodoPlanCard = ({
  const theme = useTheme();
  const total = todoUpdate.todos.length;
  const completed = todoUpdate.todos.filter((todo) => todo.status === "completed").length;
-  const running = todoUpdate.todos.find((todo) => todo.status === "in_progress");
+  const runningCount = todoUpdate.todos.filter(
+    (todo) => todo.status === "in_progress",
+  ).length;
  const cancelled = todoUpdate.todos.filter((todo) => todo.status === "cancelled").length;
  const pending = todoUpdate.todos.filter((todo) => todo.status === "pending").length;
  const progress = total > 0 ? Math.round((completed / total) * 100) : 0;
@@ -77,7 +79,7 @@ export const TodoPlanCard = ({
    ? `${completed} 完成 / ${cancelled} 中止`
    : [
        completed ? `${completed} 完成` : null,
-        running ? "1 进行中" : null,
+        runningCount ? `${runningCount} 进行中` : null,
        pending ? `${pending} 待办` : null,
        cancelled ? `${cancelled} 中止` : null,
      ].filter(Boolean).join(" / ") || "等待任务";
@@ -221,14 +223,14 @@ export const TodoPlanCard = ({
              </Typography>
              <Chip
                size="small"
-                label={running ? "执行中" : isAborted ? "已中止" : completed === total ? "已完成" : "已同步"}
+                label={runningCount ? "执行中" : isAborted ? "已中止" : completed === total ? "已完成" : "已同步"}
                sx={{
                  height: 20,
                  borderRadius: "10px",
                  fontSize: "0.66rem",
                  fontWeight: 800,
-                  color: running ? "#0277bd" : isAborted ? "text.secondary" : "#00838f",
-                  bgcolor: alpha(running ? "#0288d1" : isAborted ? "#64748b" : "#00838f", 0.08),
+                  color: runningCount ? "#0277bd" : isAborted ? "text.secondary" : "#00838f",
+                  bgcolor: alpha(runningCount ? "#0288d1" : isAborted ? "#64748b" : "#00838f", 0.08),
                  "& .MuiChip-label": { px: 0.75 },
                }}
              />
@@ -305,4 +307,3 @@ export const TodoPlanCard = ({
  );
 };

-
@@ -14,6 +14,7 @@ jest.mock("next/image", () => ({

 jest.mock("framer-motion", () => ({
  AnimatePresence: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  useReducedMotion: () => false,
  motion: {
    div: ({
      children,
@@ -44,6 +45,47 @@ jest.mock("./AgentMarkdownBlock", () => ({
 }));

 describe("AgentTurn speech selection", () => {
+  it("mounts the answer only after the complete response is available", () => {
+    const sharedProps = {
+      messageSpeechState: "idle" as const,
+      onSpeak: jest.fn(),
+      onPause: jest.fn(),
+      onResume: jest.fn(),
+      onStopSpeech: jest.fn(),
+      isTtsSupported: true,
+      onCreateBranch: jest.fn(),
+      onReplyPermission: jest.fn(),
+      onReplyQuestion: jest.fn(),
+      onRejectQuestion: jest.fn(),
+    };
+    const { rerender } = render(
+      <AgentTurn
+        {...sharedProps}
+        message={{ id: "assistant-buffered", role: "assistant", content: "" }}
+        isStreaming
+      />,
+    );
+
+    expect(screen.queryByTestId("agent-answer-content")).not.toBeInTheDocument();
+    expect(screen.getByText("正在生成")).toBeInTheDocument();
+
+    rerender(
+      <AgentTurn
+        {...sharedProps}
+        message={{
+          id: "assistant-buffered",
+          role: "assistant",
+          content: "完整分析结果已生成。",
+        }}
+        isStreaming
+      />,
+    );
+
+    expect(screen.getByTestId("agent-answer-content")).toHaveTextContent(
+      "完整分析结果已生成。",
+    );
+  });
+
  it("shows a floating action and reads from the selected text", async () => {
    const content = "第一段内容。\n\n第二段内容。";
    const speechText = "第一段内容。\n第二段内容。";
@@ -136,6 +178,7 @@ describe("AgentTurn speech selection", () => {
              permission: "bash",
              patterns: ["npm test"],
              target: "npm test",
+              reason: "需要运行测试确认本次改动没有引入回归。",
              always: ["npm test"],
              createdAt: 1,
              status: "pending",
@@ -158,10 +201,151 @@ describe("AgentTurn speech selection", () => {

    expect(screen.getByRole("button", { name: "允许一次" })).toBeInTheDocument();
    expect(screen.getByText("保存授权范围")).toBeInTheDocument();
+    expect(screen.getByText("执行目的")).toBeInTheDocument();
+    expect(screen.getByText("需要运行测试确认本次改动没有引入回归。")).toBeInTheDocument();
    expect(screen.getAllByText("npm test")).toHaveLength(2);
    expect(screen.getByTestId("GppGoodRoundedIcon")).toBeInTheDocument();
    fireEvent.click(screen.getByRole("button", { name: "保存授权" }));
    expect(onReplyPermission).toHaveBeenCalledWith("permission-1", "always");
    expect(screen.getByRole("button", { name: "拒绝" })).toBeInTheDocument();
  });
+
+  it("groups concrete actions under a business activity", () => {
+    render(
+      <AgentTurn
+        message={{
+          id: "assistant-activity",
+          role: "assistant",
+          content: "",
+          activities: [
+            {
+              id: "activity-1",
+              title: "准备供水分区数据",
+              reason: "需要确认拓扑与水库属性完整，才能计算服务范围。",
+              status: "running",
+              startedAt: Date.now(),
+              actions: [
+                {
+                  id: "action-1",
+                  tool: "tjwater_cli",
+                  title: "查询后端数据",
+                  status: "completed",
+                  target: "network get-all-reservoirs-properties",
+                  startedAt: Date.now() - 100,
+                  endedAt: Date.now(),
+                  durationMs: 100,
+                },
+              ],
+            },
+          ],
+        }}
+        isStreaming
+        messageSpeechState="idle"
+        onSpeak={jest.fn()}
+        onPause={jest.fn()}
+        onResume={jest.fn()}
+        onStopSpeech={jest.fn()}
+        isTtsSupported
+        onCreateBranch={jest.fn()}
+        onReplyPermission={jest.fn()}
+        onReplyQuestion={jest.fn()}
+        onRejectQuestion={jest.fn()}
+      />,
+    );
+
+    expect(screen.getByText("分析过程")).toBeInTheDocument();
+    expect(screen.getByText("进行中")).toBeInTheDocument();
+    expect(screen.getAllByText("准备供水分区数据").length).toBeGreaterThan(0);
+    expect(screen.getByTestId("KeyboardArrowDownRoundedIcon")).toBeInTheDocument();
+    expect(
+      screen.queryByText("需要确认拓扑与水库属性完整，才能计算服务范围。"),
+    ).not.toBeVisible();
+    expect(screen.queryByText("查询后端数据")).not.toBeVisible();
+
+    fireEvent.click(screen.getByRole("button", { name: "展开分析过程" }));
+    expect(screen.getByTestId("KeyboardArrowUpRoundedIcon")).toBeInTheDocument();
+    expect(screen.getByText("需要确认拓扑与水库属性完整，才能计算服务范围。")).toBeVisible();
+    expect(screen.getByText("查询后端数据")).toBeVisible();
+  });
+
+  it("shows the actual number of in-progress session tasks", () => {
+    render(
+      <AgentTurn
+        message={{
+          id: "assistant-todos",
+          role: "assistant",
+          content: "",
+          todos: {
+            sessionId: "session-1",
+            createdAt: 1,
+            todos: [
+              { id: "todo-1", content: "准备数据", status: "completed" },
+              { id: "todo-2", content: "分析结果", status: "completed" },
+              { id: "todo-3", content: "生成建议", status: "in_progress" },
+              { id: "todo-4", content: "生成图表", status: "in_progress" },
+            ],
+          },
+        }}
+        isStreaming
+        messageSpeechState="idle"
+        onSpeak={jest.fn()}
+        onPause={jest.fn()}
+        onResume={jest.fn()}
+        onStopSpeech={jest.fn()}
+        isTtsSupported
+        onCreateBranch={jest.fn()}
+        onReplyPermission={jest.fn()}
+        onReplyQuestion={jest.fn()}
+        onRejectQuestion={jest.fn()}
+      />,
+    );
+
+    expect(screen.getByText(/2 完成 \/ 2 进行中/u)).toBeInTheDocument();
+  });
+
+  it("keeps a failed activity compact until the user expands it", () => {
+    render(
+      <AgentTurn
+        message={{
+          id: "assistant-activity-error",
+          role: "assistant",
+          content: "⚠️ **错误：** 模型请求失败",
+          activities: [
+            {
+              id: "activity-error",
+              title: "正在准备分析",
+              reason: "正在理解请求并确定本次分析需要完成的业务步骤。",
+              status: "error",
+              startedAt: Date.now() - 4100,
+              endedAt: Date.now(),
+              durationMs: 4100,
+              actions: [],
+            },
+          ],
+        }}
+        isStreaming={false}
+        messageSpeechState="idle"
+        onSpeak={jest.fn()}
+        onPause={jest.fn()}
+        onResume={jest.fn()}
+        onStopSpeech={jest.fn()}
+        isTtsSupported
+        onCreateBranch={jest.fn()}
+        onReplyPermission={jest.fn()}
+        onReplyQuestion={jest.fn()}
+        onRejectQuestion={jest.fn()}
+      />,
+    );
+
+    expect(screen.getByText("失败")).toBeInTheDocument();
+    expect(screen.getByText("分析未完成 · 4.1s")).toBeInTheDocument();
+    expect(
+      screen.queryByText("正在理解请求并确定本次分析需要完成的业务步骤。"),
+    ).not.toBeVisible();
+
+    fireEvent.click(screen.getByRole("button", { name: "展开分析过程" }));
+    expect(
+      screen.getByText("正在理解请求并确定本次分析需要完成的业务步骤。"),
+    ).toBeInTheDocument();
+  });
 });
@@ -2,7 +2,7 @@

 import Image from "next/image";
 import React, { useMemo } from "react";
-import { motion } from "framer-motion";
+import { motion, useReducedMotion } from "framer-motion";
 import {
  Avatar,
  Box,
@@ -33,6 +33,7 @@ import type {
 import { stripMarkdown } from "./globalChatboxUtils";
 import { findSpeechSelectionStartOffset } from "./speechStartOptions";
 import { AgentProgressTimeline } from "./AgentProgressTimeline";
+import { AgentActivityTimeline } from "./AgentActivityTimeline";
 import { ChartGenerationSkeleton, ChatInlineChart } from "./ChatInlineChart";
 import { ChatToolCallBlock } from "./ChatToolCallBlock";
 import { MarkdownBlock, normalizeClipboardText } from "./AgentMarkdownBlock";
@@ -149,61 +150,6 @@ const StreamingStatus = () => {
  );
 };

-const StreamingMarkdownBlock = ({
-  text,
-  isStreaming,
-  segmentKey,
-}: {
-  text: string;
-  isStreaming: boolean;
-  segmentKey: string;
-}) => {
-  const [streamTextState, setStreamTextState] = React.useState<{
-    displayText: string;
-    animatedTailLength: number;
-  }>({
-    displayText: text,
-    animatedTailLength: 0,
-  });
-
-  React.useLayoutEffect(() => {
-    setStreamTextState((current) => {
-      if (current.displayText === text) {
-        return current;
-      }
-
-      if (!isStreaming) {
-        return {
-          displayText: text,
-          animatedTailLength: 0,
-        };
-      }
-
-      if (current.displayText === text) {
-        return current;
-      }
-
-      return {
-        displayText: text,
-        animatedTailLength:
-          text.length > current.displayText.length &&
-          text.startsWith(current.displayText)
-            ? Math.min(48, text.length - current.displayText.length)
-            : 0,
-      };
-    });
-  }, [isStreaming, text]);
-
-  return (
-    <MarkdownBlock
-      streamFadeKey={`${segmentKey}-${streamTextState.displayText.length}`}
-      streamFadeLength={streamTextState.animatedTailLength}
-    >
-      {streamTextState.displayText}
-    </MarkdownBlock>
-  );
-};
-
 export const AgentTurn = React.memo(
  ({
    message,
@@ -220,9 +166,11 @@ export const AgentTurn = React.memo(
    onRejectQuestion,
  }: AgentTurnProps) => {
    const theme = useTheme();
+    const reduceMotion = useReducedMotion();
    const isUser = message.role === "user";
    const isErrorMessage = Boolean(message.isError);
    const isStreamingAssistant = !isUser && !isErrorMessage && isStreaming;
+    const hasFinalAnswer = message.content.trim().length > 0;
    const [isHovered, setIsHovered] = React.useState(false);
    const answerContentRef = React.useRef<HTMLDivElement | null>(null);
    const [speechSelection, setSpeechSelection] = React.useState<SpeechSelection | null>(null);
@@ -230,7 +178,8 @@ export const AgentTurn = React.memo(
      (item) => item.phase === "complete" && item.status === "completed",
    ) ?? false;
    const isProgressRunning = !isErrorMessage && !isProgressComplete && (
-      message.progress?.some((item) => item.status === "running") ?? false
+      (message.activities?.some((item) => item.status === "running") ?? false) ||
+      (message.progress?.some((item) => item.status === "running") ?? false)
    );

    const parsedAssistantSections = useMemo(
@@ -456,7 +405,9 @@ export const AgentTurn = React.memo(
            }}
          >
            <Stack spacing={1.5}>
-              {message.progress?.length ? (
+              {message.activities?.length ? (
+                <AgentActivityTimeline activities={message.activities} />
+              ) : message.progress?.length ? (
                <AgentProgressTimeline progress={message.progress} isAborted={isErrorMessage} />
              ) : null}

@@ -493,63 +444,98 @@ export const AgentTurn = React.memo(
                }}
              >
                <Stack spacing={1.2}>
-                  <Stack direction="row" alignItems="center" justifyContent="space-between" spacing={1}>
-                    <Typography variant="caption" color="text.secondary" fontWeight={800} sx={{ letterSpacing: 0.5 }}>
+                  <Stack
+                    direction="row"
+                    alignItems="center"
+                    justifyContent="space-between"
+                    spacing={1}
+                  >
+                    <Typography
+                      variant="caption"
+                      color="text.secondary"
+                      fontWeight={800}
+                      sx={{ letterSpacing: 0.5 }}
+                    >
                      分析结果
                    </Typography>
                    {isStreamingAssistant ? <StreamingStatus /> : null}
                  </Stack>
-                  {contentSegments.map((segment, segIdx) => {
-                    if (segment.type === "text") {
-                      const text = segment.content.trim();
-                      if (!text && contentSegments.length > 1) return null;
-                      return (
-                        <StreamingMarkdownBlock
-                          key={segIdx}
-                          text={text || "..."}
-                          isStreaming={isStreamingAssistant}
-                          segmentKey={`${message.id}-${segIdx}`}
-                        />
-                      );
-                    }
-                    if (segment.type === "tool_call") {
-                      if (
-                        segment.toolCall.tool === "chart" ||
-                        segment.toolCall.tool === "show_chart"
-                      ) {
-                        const p = segment.toolCall.params;
-                        return (
-                          <ChatInlineChart
-                            key={segment.toolCall.id}
-                            title={(p.title as string) ?? undefined}
-                            chart_type={
-                              (p.chart_type as "line" | "bar" | "pie") ?? "line"
-                            }
-                            x_data={p.x_data ?? p.xData ?? p.labels ?? p.categories}
-                            series={p.series}
-                            x_axis_name={(p.x_axis_name as string) ?? undefined}
-                            y_axis_name={(p.y_axis_name as string) ?? undefined}
-                            isStreaming={isStreamingAssistant}
-                          />
-                        );
+                  {hasFinalAnswer || !isStreamingAssistant ? (
+                    <motion.div
+                      data-testid="agent-answer-content"
+                      initial={
+                        reduceMotion
+                          ? false
+                          : { opacity: 0, y: 6, filter: "blur(2px)" }
                      }
-                      return (
-                        <ChatToolCallBlock
-                          key={segment.toolCall.id}
-                          toolCall={segment.toolCall}
-                        />
-                      );
-                    }
-                    if (segment.type === "tool_call_pending") {
-                      return (
-                        <ChartGenerationSkeleton
-                          key="tool-pending"
-                          status={<StreamingStatus />}
-                        />
-                      );
-                    }
-                    return null;
-                  })}
+                      animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
+                      transition={{
+                        duration: reduceMotion ? 0 : 0.24,
+                        ease: [0.16, 1, 0.3, 1],
+                      }}
+                    >
+                      <Stack spacing={1.2}>
+                        {contentSegments.map((segment, segIdx) => {
+                          if (segment.type === "text") {
+                            const text = segment.content.trim();
+                            if (!text && contentSegments.length > 1) return null;
+                            return (
+                              <MarkdownBlock key={segIdx}>
+                                {text || "..."}
+                              </MarkdownBlock>
+                            );
+                          }
+                          if (segment.type === "tool_call") {
+                            if (
+                              segment.toolCall.tool === "chart" ||
+                              segment.toolCall.tool === "show_chart"
+                            ) {
+                              const p = segment.toolCall.params;
+                              return (
+                                <ChatInlineChart
+                                  key={segment.toolCall.id}
+                                  title={(p.title as string) ?? undefined}
+                                  chart_type={
+                                    (p.chart_type as "line" | "bar" | "pie") ??
+                                    "line"
+                                  }
+                                  x_data={
+                                    p.x_data ??
+                                    p.xData ??
+                                    p.labels ??
+                                    p.categories
+                                  }
+                                  series={p.series}
+                                  x_axis_name={
+                                    (p.x_axis_name as string) ?? undefined
+                                  }
+                                  y_axis_name={
+                                    (p.y_axis_name as string) ?? undefined
+                                  }
+                                  isStreaming={isStreamingAssistant}
+                                />
+                              );
+                            }
+                            return (
+                              <ChatToolCallBlock
+                                key={segment.toolCall.id}
+                                toolCall={segment.toolCall}
+                              />
+                            );
+                          }
+                          if (segment.type === "tool_call_pending") {
+                            return (
+                              <ChartGenerationSkeleton
+                                key="tool-pending"
+                                status={<StreamingStatus />}
+                              />
+                            );
+                          }
+                          return null;
+                        })}
+                      </Stack>
+                    </motion.div>
+                  ) : null}
                </Stack>
              </Box>

@@ -229,18 +229,23 @@ export const GlobalChatbox: React.FC<Props> = ({ open, onClose }) => {

  useEffect(() => {
    if (isStreaming) {
+      const latestAssistant = [...messages]
+        .reverse()
+        .find((message) => message.role === "assistant");
+      if (latestAssistant?.content.trim()) {
+        cancelStreamingScroll();
+        return;
+      }
      if (!isNearBottomRef.current) return;
      scheduleStreamingScrollToBottom();
      return;
    }
    cancelStreamingScroll();
-    scrollToBottom("smooth");
  }, [
    cancelStreamingScroll,
    isStreaming,
    messages,
    scheduleStreamingScrollToBottom,
-    scrollToBottom,
  ]);

  useEffect(
@@ -1,4 +1,5 @@
 import type {
+  AgentActivity,
  AgentQuestionRequest,
  AgentTodoUpdate,
 } from "@/lib/chatStream";
@@ -42,6 +43,8 @@ export type AgentPermissionRequest = {
  permission: string;
  patterns: string[];
  target?: string;
+  activityId?: string;
+  reason?: string;
  always: string[];
  tool?: {
    messageID: string;
@@ -59,6 +62,7 @@ export type Message = {
  content: string;
  isError?: boolean;
  progress?: ChatProgress[];
+  activities?: AgentActivity[];
  artifacts?: AgentArtifact[];
  permissions?: AgentPermissionRequest[];
  questions?: AgentQuestionRequest[];
@@ -1,4 +1,5 @@
 import type {
+  AgentActivity,
  AgentQuestionRequest,
  AgentTodoUpdate,
  PermissionReply,
@@ -79,6 +80,48 @@ export const completeRunningProgress = (progress: ChatProgress[] | undefined) =>
    };
  });

+export const upsertActivity = (
+  activities: AgentActivity[] | undefined,
+  event: StreamEvent & { type: "activity_update" },
+) => {
+  const next = [...(activities ?? [])];
+  const index = next.findIndex((activity) => activity.id === event.activity.id);
+  if (index >= 0) next[index] = event.activity;
+  else next.push(event.activity);
+  return next;
+};
+
+export const completeRunningActivities = (
+  activities: AgentActivity[] | undefined,
+  status: "completed" | "error" | "cancelled" = "completed",
+) => activities?.map((activity) => {
+  if (activity.status !== "running") return activity;
+  const endedAt = Date.now();
+  return {
+    ...activity,
+    status,
+    actions: activity.actions.map((action) =>
+      action.status === "running"
+        ? {
+            ...action,
+            status: status === "error" ? "error" as const : "completed" as const,
+            endedAt,
+            elapsedMs: undefined,
+            elapsedSnapshotAt: undefined,
+            durationMs: Math.max(0, endedAt - action.startedAt),
+            ...(status === "error"
+              ? { error: action.error ?? "活动执行失败" }
+              : {}),
+          }
+        : action,
+    ),
+    endedAt,
+    elapsedMs: undefined,
+    elapsedSnapshotAt: undefined,
+    durationMs: Math.max(0, endedAt - activity.startedAt),
+  };
+});
+
 export const cancelRunningTodos = (todoUpdate: AgentTodoUpdate | undefined) =>
  todoUpdate
    ? {
@@ -107,6 +150,8 @@ export const upsertPermission = (
    permission: event.permission,
    patterns: event.patterns,
    target: event.target,
+    activityId: event.activityId,
+    reason: event.reason,
    always: event.always,
    tool: event.tool,
    createdAt: event.createdAt,
@@ -405,6 +450,7 @@ export const rejectOpenQuestionsAfterAbort = (

 export const finalizeAssistantMessageAfterAbort = (message: Message): Message => {
  const completedProgress = completeRunningProgress(message.progress);
+  const cancelledActivities = completeRunningActivities(message.activities, "cancelled");
  const cancelledTodos = cancelRunningTodos(message.todos);
  const abortedPermissions = abortOpenPermissionsAfterAbort(message.permissions);
  const rejectedQuestions = rejectOpenQuestionsAfterAbort(message.questions);
@@ -414,6 +460,7 @@ export const finalizeAssistantMessageAfterAbort = (message: Message): Message =>
    Boolean(abortedPermissions?.length) ||
    Boolean(rejectedQuestions?.length) ||
    Boolean(completedProgress?.length) ||
+    Boolean(cancelledActivities?.length) ||
    Boolean(cancelledTodos);

  if (!hasVisibleOutput) {
@@ -425,6 +472,7 @@ export const finalizeAssistantMessageAfterAbort = (message: Message): Message =>
    content: message.content || "⚠️ **请求已中断**",
    isError: true,
    progress: completedProgress,
+    activities: cancelledActivities,
    permissions: abortedPermissions,
    questions: rejectedQuestions,
    todos: cancelledTodos,
@@ -132,6 +132,80 @@ describe("useAgentChatSession actions", () => {
    );
  });

+  it("applies an activity phase and todo snapshot atomically before revealing the final answer", async () => {
+    listChatSessions.mockResolvedValue([]);
+    jest.mocked(streamAgentChat).mockImplementationOnce(async ({ onEvent }) => {
+      onEvent({
+        type: "activity_update",
+        sessionId: "session-1",
+        activity: {
+          id: "activity-analyze",
+          title: "分析管网数据",
+          reason: "需要识别影响供水能力的关键管段。",
+          status: "running",
+          actions: [],
+          startedAt: 1000,
+        },
+        todos: [
+          {
+            id: "todo-data",
+            content: "准备管网数据",
+            status: "completed",
+            priority: "high",
+          },
+          {
+            id: "todo-analysis",
+            content: "识别瓶颈管段",
+            status: "in_progress",
+            priority: "high",
+          },
+        ],
+        todosCreatedAt: 1001,
+      });
+      onEvent({
+        type: "final_answer",
+        sessionId: "session-1",
+        content: "已识别关键瓶颈管段。",
+      });
+      onEvent({ type: "done", sessionId: "session-1" });
+    });
+
+    const { result } = renderHook(() =>
+      useAgentChatSession({
+        projectId: "project-1",
+        onToolCall: jest.fn(),
+      }),
+    );
+
+    await waitFor(() => expect(result.current.isHydrating).toBe(false));
+
+    await act(async () => {
+      await result.current.sendPrompt("分析管网瓶颈");
+    });
+
+    const assistantMessage = result.current.messages.at(-1);
+    expect(assistantMessage).toMatchObject({
+      role: "assistant",
+      content: "已识别关键瓶颈管段。",
+      todos: {
+        sessionId: "session-1",
+        createdAt: 1001,
+        todos: [
+          expect.objectContaining({ id: "todo-data", status: "completed" }),
+          expect.objectContaining({ id: "todo-analysis", status: "completed" }),
+        ],
+      },
+    });
+    expect(
+      assistantMessage?.activities?.find(
+        (activity) => activity.id === "activity-analyze",
+      ),
+    ).toMatchObject({
+      title: "分析管网数据",
+      status: "completed",
+    });
+  });
+
  it("finalizes running progress when aborting an active prompt", async () => {
    listChatSessions.mockResolvedValue([]);
    jest.mocked(streamAgentChat).mockImplementationOnce(
@@ -340,7 +340,7 @@ describe("useAgentChatSession lifecycle and resume", () => {
          }),
          expect.objectContaining({
            id: "todo-2",
-            status: "in_progress",
+            status: "completed",
          }),
        ],
      }),
@@ -31,6 +31,7 @@ import {
 import {
  applyQuestionResponse,
  cancelRunningTodos,
+  completeRunningActivities,
  completeRunningProgress,
  createAssistantMessage,
  createTodoUpdateFromEvent,
@@ -40,6 +41,7 @@ import {
  normalizeSessionTodos,
  toPermissionStatus,
  upsertPermission,
+  upsertActivity,
  upsertProgress,
  upsertQuestionAcrossMessages,
 } from "./agentChatSessionState";
@@ -48,68 +50,21 @@ import type {
  UseAgentChatSessionOptions,
 } from "./useAgentChatSession.types";

-const TOKEN_PLAYBACK_INTERVAL_MS = 16;
-const TOKEN_PLAYBACK_BASE_CHARS = 28;
-const TOKEN_PLAYBACK_MAX_CHARS = 160;
-
-const sliceCodePoints = (value: string, count: number) =>
-  Array.from(value).slice(0, count).join("");
-
-let cachedSegmenter: Intl.Segmenter | null | undefined;
-
-const getSegmenter = () => {
-  if (cachedSegmenter !== undefined) return cachedSegmenter;
-  cachedSegmenter =
-    typeof Intl !== "undefined" && "Segmenter" in Intl
-      ? new Intl.Segmenter("zh", { granularity: "word" })
-      : null;
-  return cachedSegmenter;
-};
-
-const getPlaybackChunkSize = (bufferLength: number) => {
-  if (bufferLength >= 600) return TOKEN_PLAYBACK_MAX_CHARS;
-  if (bufferLength >= 300) return 112;
-  if (bufferLength >= 140) return 72;
-  if (bufferLength >= 64) return 44;
-  return TOKEN_PLAYBACK_BASE_CHARS;
-};
-
-const takeNextTokenPlaybackChunk = (content: string, maxChars: number) => {
-  if (content.length <= maxChars) return content;
-  const targetChars = Math.max(12, Math.floor(maxChars * 0.68));
-
-  const segmenter = getSegmenter();
-  if (segmenter) {
-    let chunk = "";
-    for (const segment of segmenter.segment(content)) {
-      chunk += segment.segment;
-      if (
-        chunk.length >= maxChars ||
-        (chunk.length >= targetChars &&
-          /[\s，。！？、；：,.!?;:]/u.test(segment.segment))
-      ) {
-        return chunk;
+const completeTodos = (todoUpdate: Message["todos"]) =>
+  todoUpdate
+    ? {
+        ...todoUpdate,
+        todos: todoUpdate.todos.map((todo) =>
+          todo.status === "pending" || todo.status === "in_progress"
+            ? {
+                ...todo,
+                status: "completed" as const,
+                updatedAt: Date.now(),
+              }
+            : todo,
+        ),
      }
-    }
-  }
-
-  const phrase = content.match(/^.{1,12}?[\s，。！？、；：,.!?;:]+/u)?.[0];
-  if (phrase) return phrase;
-
-  const cjkChunk = content.match(
-    /^[\p{Script=Han}\p{Script=Hiragana}\p{Script=Katakana}\p{Script=Hangul}]+/u,
-  )?.[0];
-  if (cjkChunk) return sliceCodePoints(cjkChunk, Math.min(maxChars, 18));
-
-  const wordChunk = content.match(/^\S+\s*/u)?.[0];
-  if (wordChunk) {
-    return wordChunk.length <= maxChars
-      ? wordChunk
-      : sliceCodePoints(wordChunk, maxChars);
-  }
-
-  return sliceCodePoints(content, Math.min(maxChars, 12));
-};
+    : undefined;

 export const useAgentChatSession = ({
  projectId,
@@ -136,11 +91,6 @@ export const useAgentChatSession = ({
  const isSessionTitleManuallyEditedRef = useRef(false);
  const cancelPromiseRef = useRef<Promise<void> | null>(null);
  const titleUpdateNonceRef = useRef(0);
-  const pendingTokenRef = useRef<{
-    assistantMessageId: string;
-    content: string;
-  } | null>(null);
-  const tokenPlaybackIntervalRef = useRef<number | null>(null);
  const credentialRefreshRequestIdsRef = useRef(new Set<string>());

  useEffect(() => {
@@ -168,83 +118,6 @@ export const useAgentChatSession = ({
    });
  }, []);

-  const cancelTokenPlayback = useCallback(() => {
-    const intervalId = tokenPlaybackIntervalRef.current;
-    if (intervalId === null) return;
-    window.clearInterval(intervalId);
-    tokenPlaybackIntervalRef.current = null;
-  }, []);
-
-  const flushPendingTokens = useCallback(() => {
-    const pending = pendingTokenRef.current;
-    pendingTokenRef.current = null;
-    cancelTokenPlayback();
-    if (!pending) return;
-    applyTokenContent(pending.assistantMessageId, pending.content);
-  }, [applyTokenContent, cancelTokenPlayback]);
-
-  const scheduleTokenPlayback = useCallback(() => {
-    if (tokenPlaybackIntervalRef.current !== null) return;
-    const id = window.setInterval(() => {
-      const pending = pendingTokenRef.current;
-      if (!pending) {
-        window.clearInterval(id);
-        tokenPlaybackIntervalRef.current = null;
-        return;
-      }
-
-      const chunk = takeNextTokenPlaybackChunk(
-        pending.content,
-        getPlaybackChunkSize(pending.content.length),
-      );
-      if (!chunk) {
-        window.clearInterval(id);
-        tokenPlaybackIntervalRef.current = null;
-        pendingTokenRef.current = null;
-        return;
-      }
-
-      const remaining = pending.content.slice(chunk.length);
-      pendingTokenRef.current = remaining
-        ? { assistantMessageId: pending.assistantMessageId, content: remaining }
-        : null;
-      applyTokenContent(pending.assistantMessageId, chunk);
-
-      if (!remaining) {
-        window.clearInterval(id);
-        tokenPlaybackIntervalRef.current = null;
-      }
-    }, TOKEN_PLAYBACK_INTERVAL_MS);
-    tokenPlaybackIntervalRef.current = id;
-  }, [applyTokenContent]);
-
-  const queueTokenContent = useCallback(
-    (assistantMessageId: string, content: string) => {
-      const pending = pendingTokenRef.current;
-      if (pending && pending.assistantMessageId !== assistantMessageId) {
-        flushPendingTokens();
-      }
-      pendingTokenRef.current = {
-        assistantMessageId,
-        content:
-          pending?.assistantMessageId === assistantMessageId
-            ? pending.content + content
-            : content,
-      };
-      scheduleTokenPlayback();
-    },
-    [flushPendingTokens, scheduleTokenPlayback],
-  );
-
-  useEffect(
-    () => () => {
-      pendingTokenRef.current = null;
-      cancelTokenPlayback();
-    },
-    [cancelTokenPlayback],
-  );
-
-
  useEffect(() => {
    isSessionTitleManuallyEditedRef.current = isSessionTitleManuallyEdited;
  }, [isSessionTitleManuallyEdited]);
@@ -391,10 +264,6 @@ export const useAgentChatSession = ({
        assistantMessageId?: string;
      },
    ) => {
-      if (event.type !== "token") {
-        flushPendingTokens();
-      }
-
      if (
        event.type !== "session_title" &&
        "sessionId" in event &&
@@ -447,7 +316,36 @@ export const useAgentChatSession = ({
      }

      if (event.type === "token") {
-        queueTokenContent(assistantMessageId, event.content);
+        applyTokenContent(assistantMessageId, event.content);
+      } else if (event.type === "final_answer") {
+        setMessages((prev) => {
+          const next = prev.map((message) =>
+            message.id === assistantMessageId
+              ? { ...message, content: event.content, isError: false }
+              : message,
+          );
+          messagesRef.current = next;
+          return next;
+        });
+      } else if (event.type === "activity_update") {
+        setMessages((prev) => {
+          const next = prev.map((message) =>
+            message.id === assistantMessageId
+              ? { ...message, activities: upsertActivity(message.activities, event) }
+              : message,
+          );
+          return event.todos
+            ? normalizeSessionTodos(
+                next,
+                {
+                  sessionId: event.sessionId,
+                  todos: event.todos,
+                  createdAt: event.todosCreatedAt ?? Date.now(),
+                },
+                assistantMessageId,
+              )
+            : next;
+        });
      } else if (event.type === "progress") {
        setMessages((prev) =>
          prev.map((message) =>
@@ -583,6 +481,7 @@ export const useAgentChatSession = ({
          prev.map((message) => {
            if (message.id !== assistantMessageId) return message;
            const completedProgress = completeRunningProgress(message.progress);
+            const completedActivities = completeRunningActivities(message.activities);
            if (
              message.content.trim().length === 0 &&
              !(message.artifacts?.length)
@@ -592,9 +491,16 @@ export const useAgentChatSession = ({
                content:
                  "Agent 已完成处理，但没有生成文本回答。请查看过程记录，或换个更具体的问题重试。",
                progress: completedProgress,
+                activities: completedActivities,
+                todos: completeTodos(message.todos),
              };
            }
-            return { ...message, progress: completedProgress };
+            return {
+              ...message,
+              progress: completedProgress,
+              activities: completedActivities,
+              todos: completeTodos(message.todos),
+            };
          }),
        );
        setIsStreaming(false);
@@ -607,6 +513,7 @@ export const useAgentChatSession = ({
                  content: message.content || `⚠️ **错误：** ${event.message}`,
                  isError: true,
                  progress: completeRunningProgress(message.progress),
+                  activities: completeRunningActivities(message.activities, "error"),
                  todos: cancelRunningTodos(message.todos),
                }
              : message,
@@ -623,6 +530,7 @@ export const useAgentChatSession = ({
                  content: message.content || `⚠️ **${event.message}**`,
                  isError: true,
                  progress: completeRunningProgress(message.progress),
+                  activities: completeRunningActivities(message.activities, "error"),
                  todos: cancelRunningTodos(message.todos),
                }
              : message,
@@ -632,12 +540,11 @@ export const useAgentChatSession = ({
      }
    },
    [
+      applyTokenContent,
      appendArtifact,
-      flushPendingTokens,
      getLastAssistantMessageId,
      handleCredentialRefresh,
      onToolCall,
-      queueTokenContent,
    ],
  );

@@ -654,20 +561,18 @@ export const useAgentChatSession = ({
        onEvent: (event) => applyStreamEvent(event),
      })
        .catch((error) => {
-          flushPendingTokens();
          if (!controller.signal.aborted) {
            console.error("[GlobalChatbox] Failed to resume chat stream:", error);
            setIsStreaming(false);
          }
        })
        .finally(() => {
-          flushPendingTokens();
          if (abortRef.current === controller) {
            abortRef.current = null;
          }
        });
    },
-    [applyStreamEvent, flushPendingTokens],
+    [applyStreamEvent],
  );
  resumeStreamingSessionRef.current = resumeStreamingSession;

@@ -716,7 +621,6 @@ export const useAgentChatSession = ({
            }),
        });
      } catch (error) {
-        flushPendingTokens();
        if (controller.signal.aborted) {
          setMessages((prev) =>
            prev
@@ -733,6 +637,7 @@ export const useAgentChatSession = ({
                    message.content.trim().length === 0 &&
                    !(message.artifacts?.length) &&
                    !(message.progress?.length) &&
+                    !(message.activities?.length) &&
                    !message.todos
                  ),
              ),
@@ -747,20 +652,19 @@ export const useAgentChatSession = ({
                  content: `⚠️ **错误：** ${String(error)}`,
                  isError: true,
                  progress: completeRunningProgress(message.progress),
+                  activities: completeRunningActivities(message.activities, "error"),
                }
              : message,
          ),
        );
        setIsStreaming(false);
      } finally {
-        flushPendingTokens();
        abortRef.current = null;
        setIsStreaming(false);
      }
    },
    [
      applyStreamEvent,
-      flushPendingTokens,
      getApprovalMode,
      getModel,
      isHydrating,
@@ -773,7 +677,6 @@ export const useAgentChatSession = ({
  const abort = useCallback(() => {
    const controller = abortRef.current;
    controller?.abort();
-    flushPendingTokens();
    setIsStreaming(false);
    const assistantMessageId = getLastAssistantMessageId();

@@ -796,7 +699,7 @@ export const useAgentChatSession = ({
      }
    });
    cancelPromiseRef.current = trackedCancelPromise;
-  }, [flushPendingTokens, getLastAssistantMessageId]);
+  }, [getLastAssistantMessageId]);

  const replyPermission = useCallback(
    async (requestId: string, reply: PermissionDecision) => {
@@ -1009,7 +912,6 @@ export const useAgentChatSession = ({
  const createSession = useCallback(() => {
    if (isHydrating || isStreaming) return;

-    flushPendingTokens();
    const controller = abortRef.current;
    controller?.abort();
    hydrationNonceRef.current += 1;
@@ -1020,7 +922,7 @@ export const useAgentChatSession = ({
    setIsSessionTitleManuallyEdited(false);
    setSessionId(undefined);
    setIsStreaming(false);
-  }, [flushPendingTokens, isHydrating, isStreaming]);
+  }, [isHydrating, isStreaming]);

  const switchSession = useCallback(
    async (nextSessionId: string, optimisticTitle?: string) => {