fix: stabilize agent UI and SCADA card

features/agent/components/agent-collapsed-rail.tsx

@@ -14,7 +14,10 @@ type AgentCollapsedRailProps = {
 
 export function AgentCollapsedRail({ personaState, statusLabel = "Agent", onExpand }: AgentCollapsedRailProps) {
   return (
-    <aside className={cn("agent-rail-enter acrylic-panel pointer-events-auto w-[136px] border p-1.5", MAP_MAJOR_PANEL_RADIUS_CLASS_NAME)}>
+    <aside
+      aria-label="Agent 折叠栏"
+      className={cn("agent-rail-enter acrylic-panel pointer-events-auto w-[136px] border p-1.5", MAP_MAJOR_PANEL_RADIUS_CLASS_NAME)}
+    >
       <button
         type="button"
         aria-label="展开排水助手面板"

features/agent/components/agent-command-panel.tsx

@@ -43,7 +43,6 @@ import { cn } from "@/lib/utils";
 import type { AgentChatSessionSummary } from "../api/client";
 import { AgentPersona } from "./agent-persona";
 import {
-  agentLayoutTransition,
   agentPanelItemVariants,
   agentPanelListVariants,
   agentPanelSectionVariants
@@ -157,6 +156,7 @@ export function AgentCommandPanel({
   return (
     <MotionConfig reducedMotion="user">
       <aside
+        aria-label="Agent 命令面板"
         className={cn(
           "pointer-events-auto flex h-full min-h-0 w-full flex-col overflow-hidden",
           "agent-panel-shell",
@@ -166,7 +166,7 @@ export function AgentCommandPanel({
         )}
       >
       <Agent className="flex h-full min-h-0 flex-col border-0 bg-transparent">
-        <div className="agent-panel-band border-b border-slate-200">
+        <header className="agent-panel-header acrylic-panel">
           <div className="flex min-h-16 items-center justify-between gap-2 px-3 py-2">
             <div className="flex min-w-0 flex-1 items-center gap-2.5 text-slate-900">
               <AgentPersona
@@ -274,7 +274,7 @@ export function AgentCommandPanel({
               </motion.div>
             ) : null}
           </AnimatePresence>
-        </div>
+        </header>
 
         <AgentContent className="flex min-h-0 flex-1 flex-col gap-0 p-0">
           <Conversation className="agent-panel-conversation min-h-0">
@@ -310,8 +310,6 @@ export function AgentCommandPanel({
               activeSessionId={activeSessionId}
               messages={messages}
               scrollRequestId={scrollRequestId}
-              streaming={streaming}
-              uiResults={uiResults}
             />
             <ConversationScrollButton className="bottom-3" />
           </Conversation>
@@ -382,33 +380,27 @@ type AgentConversationScrollSnapshot = {
   activeSessionId?: string | null;
   lastUserMessageId: string | null;
   scrollRequestId: number;
-  signature: string;
 };
 
 function AgentConversationScrollManager({
   activeSessionId,
   messages,
-  scrollRequestId,
-  streaming,
-  uiResults
+  scrollRequestId
 }: {
   activeSessionId?: string | null;
   messages: AgentChatMessage[];
   scrollRequestId: number;
-  streaming: boolean;
-  uiResults: AgentUiResult[];
 }) {
-  const { escapedFromLock, isAtBottom, scrollToBottom, state } = useStickToBottomContext();
+  const { scrollToBottom } = useStickToBottomContext();
   const previousSnapshotRef = useRef<AgentConversationScrollSnapshot | null>(null);
-  const wasPinnedToBottom = !escapedFromLock && (isAtBottom || state.isAtBottom || state.isNearBottom);
+  const lastUserMessageId = getLastUserMessageId(messages);
   const snapshot = useMemo<AgentConversationScrollSnapshot>(
     () => ({
       activeSessionId,
-      lastUserMessageId: getLastUserMessageId(messages),
-      scrollRequestId,
-      signature: createAgentConversationScrollSignature(messages, streaming, uiResults)
+      lastUserMessageId,
+      scrollRequestId
     }),
-    [activeSessionId, messages, scrollRequestId, streaming, uiResults]
+    [activeSessionId, lastUserMessageId, scrollRequestId]
   );
 
   useEffect(() => {
@@ -420,22 +412,21 @@ function AgentConversationScrollManager({
       previousSnapshot.activeSessionId !== snapshot.activeSessionId ||
       previousSnapshot.scrollRequestId !== snapshot.scrollRequestId ||
       (Boolean(snapshot.lastUserMessageId) && previousSnapshot.lastUserMessageId !== snapshot.lastUserMessageId);
-    const contentChanged = !previousSnapshot || previousSnapshot.signature !== snapshot.signature;
 
-    if (!forceScroll && (!contentChanged || !wasPinnedToBottom)) {
+    if (!forceScroll) {
       return;
     }
 
     const animationFrameId = window.requestAnimationFrame(() => {
       void scrollToBottom({
         animation: "instant",
-        ignoreEscapes: forceScroll,
-        wait: !forceScroll
+        ignoreEscapes: true,
+        wait: false
       });
     });
 
     return () => window.cancelAnimationFrame(animationFrameId);
-  }, [scrollToBottom, snapshot, wasPinnedToBottom]);
+  }, [scrollToBottom, snapshot]);
 
   return null;
 }
@@ -450,30 +441,6 @@ function getLastUserMessageId(messages: AgentChatMessage[]) {
   return null;
 }
 
-function createAgentConversationScrollSignature(
-  messages: AgentChatMessage[],
-  streaming: boolean,
-  uiResults: AgentUiResult[]
-) {
-  return [
-    streaming ? "streaming" : "idle",
-    messages.map(createAgentMessageScrollSignature).join("|"),
-    uiResults.map((result) => result.id).join("|")
-  ].join("#");
-}
-
-function createAgentMessageScrollSignature(message: AgentChatMessage) {
-  return [
-    message.id,
-    message.role,
-    message.content.length,
-    message.progress?.map((item) => `${item.id}:${item.status}:${item.title.length}:${item.detail?.length ?? 0}`).join(",") ?? "",
-    message.todos?.todos.map((todo) => `${todo.id}:${todo.status}:${todo.content.length}`).join(",") ?? "",
-    message.permissions?.map((permission) => `${permission.requestId}:${permission.status}:${permission.error?.length ?? 0}`).join(",") ?? "",
-    message.questions?.map((question) => `${question.requestId}:${question.status}:${question.error?.length ?? 0}`).join(",") ?? ""
-  ].join(":");
-}
-
 function AgentModelSelect({
   models,
   value,
@@ -675,13 +642,11 @@ function BackendMessageList({
         {messages.map((message, index) => (
           <motion.div
             key={message.id}
-            layout
             className={cn("w-full", message.role === "user" && "flex justify-end")}
             initial="initial"
             animate="animate"
             exit="exit"
             variants={agentPanelItemVariants}
-            transition={agentLayoutTransition}
           >
             <Message
               from={message.role}

features/agent/components/agent-message-details.tsx

@@ -16,6 +16,7 @@ import { useState, type ReactNode } from "react";
 import { cn } from "@/lib/utils";
 import { Button } from "@/shared/ui/button";
 import {
+  agentEase,
   agentLayoutTransition,
   agentPanelItemVariants,
   agentPanelListVariants,
@@ -117,20 +118,20 @@ export function AgentMessageDetails({
   }
 
   return (
-    <motion.div className="space-y-2" layout variants={agentPanelListVariants} animate="animate">
+    <motion.div className="space-y-2" variants={agentPanelListVariants} animate="animate">
       <AnimatePresence initial={false} mode="popLayout">
         {message.todos ? (
-          <motion.div key="todos" layout initial="initial" animate="animate" exit="exit" variants={agentPanelItemVariants}>
+          <motion.div key="todos" initial="initial" animate="animate" exit="exit" variants={agentPanelItemVariants}>
             <TodoCard todoUpdate={message.todos} />
           </motion.div>
         ) : null}
         {message.permissions?.length ? (
-          <motion.div key="permissions" layout initial="initial" animate="animate" exit="exit" variants={agentPanelItemVariants}>
+          <motion.div key="permissions" initial="initial" animate="animate" exit="exit" variants={agentPanelItemVariants}>
             <PermissionList permissions={message.permissions} onReplyPermission={onReplyPermission} />
           </motion.div>
         ) : null}
         {message.questions?.length ? (
-          <motion.div key="questions" layout initial="initial" animate="animate" exit="exit" variants={agentPanelItemVariants}>
+          <motion.div key="questions" initial="initial" animate="animate" exit="exit" variants={agentPanelItemVariants}>
             <QuestionList
               questions={message.questions}
               onReplyQuestion={onReplyQuestion}
@@ -184,7 +185,6 @@ function AgentNestedBlock({
 function AnimatedDetailItem({ children }: { children: ReactNode }) {
   return (
     <motion.div
-      layout
       initial="initial"
       animate="animate"
       exit="exit"
@@ -198,8 +198,8 @@ function AnimatedDetailItem({ children }: { children: ReactNode }) {
 
 function ProgressList({ progress, running }: { progress: AgentChatProgress[]; running: boolean }) {
   const [expanded, setExpanded] = useState(false);
-  const recentProgress = progress.slice(-3);
-  const visibleProgress = expanded ? progress : running ? recentProgress : [];
+  const visibleProgress = expanded ? progress : progress.slice(-1);
+  const listMode = expanded ? "expanded" : "summary";
 
   return (
     <div className="agent-panel-nested rounded-xl p-2.5">
@@ -216,7 +216,7 @@ function ProgressList({ progress, running }: { progress: AgentChatProgress[]; ru
           {expanded
             ? `全部 ${progress.length} 条`
             : running
-              ? `最近 ${recentProgress.length} 条`
+              ? "当前步骤"
               : `共 ${progress.length} 条`}
         </span>
         <ChevronDown
@@ -225,43 +225,68 @@ function ProgressList({ progress, running }: { progress: AgentChatProgress[]; ru
           aria-hidden="true"
         />
       </button>
-      <AnimatePresence initial={false}>
+      <AnimatePresence initial={false} mode="wait">
         {visibleProgress.length ? (
           <motion.ol
+            key={listMode}
+            aria-label={expanded ? "全部执行进度" : "当前执行进度"}
             className="mt-2 space-y-1.5 overflow-hidden"
             initial={{ height: 0, opacity: 0 }}
             animate={{ height: "auto", opacity: 1 }}
             exit={{ height: 0, opacity: 0 }}
             transition={agentLayoutTransition}
           >
-            {visibleProgress.map((item) => (
-              <li key={item.id} className="grid grid-cols-[16px_1fr_auto] items-start gap-2 text-xs">
-                <span
-                  className={cn(
-                    "mt-0.5 h-3.5 w-3.5 rounded-full border",
-                    progressStatusMeta[item.status].dotClassName
-                  )}
-                />
-                <span className="min-w-0">
-                  <span className="block truncate font-semibold text-slate-800" title={item.title}>
-                    {item.title}
-                  </span>
-                  {item.detail ? (
-                    <span className="block line-clamp-2 whitespace-pre-wrap leading-5 text-slate-500">
-                      {item.detail}
-                    </span>
-                  ) : null}
-                </span>
-                <span
-                  className={cn(
-                    "rounded-full px-2 py-0.5 font-semibold",
-                    progressStatusMeta[item.status].className
-                  )}
+            <AnimatePresence initial={false} mode={expanded ? "sync" : "wait"}>
+              {visibleProgress.map((item) => (
+                <motion.li
+                  key={item.id}
+                  className="grid min-h-7 grid-cols-[16px_1fr_auto] items-start gap-2 text-xs"
+                  initial={{ opacity: 0, y: 4 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  exit={{ opacity: 0, y: -2 }}
+                  transition={{ duration: 0.16, ease: agentEase }}
                 >
-                  {progressStatusMeta[item.status].label}
-                </span>
-              </li>
-            ))}
+                  <motion.span
+                    aria-hidden="true"
+                    className={cn(
+                      "mt-0.5 h-3.5 w-3.5 rounded-full border transition-colors duration-150",
+                      progressStatusMeta[item.status].dotClassName
+                    )}
+                    animate={item.status === "running" ? { opacity: [0.45, 1, 0.45] } : { opacity: 1 }}
+                    transition={
+                      item.status === "running"
+                        ? { duration: 1.2, ease: "easeInOut", repeat: Infinity }
+                        : { duration: 0.14 }
+                    }
+                  />
+                  <span className="min-w-0">
+                    <span className="block truncate font-semibold text-slate-800" title={item.title}>
+                      {item.title}
+                    </span>
+                    {item.detail ? (
+                      <span className="block line-clamp-2 whitespace-pre-wrap leading-5 text-slate-500">
+                        {item.detail}
+                      </span>
+                    ) : null}
+                  </span>
+                  <AnimatePresence initial={false} mode="wait">
+                    <motion.span
+                      key={item.status}
+                      className={cn(
+                        "min-w-12 rounded-full px-2 py-0.5 text-center font-semibold",
+                        progressStatusMeta[item.status].className
+                      )}
+                      initial={{ opacity: 0 }}
+                      animate={{ opacity: 1 }}
+                      exit={{ opacity: 0 }}
+                      transition={{ duration: 0.14 }}
+                    >
+                      {progressStatusMeta[item.status].label}
+                    </motion.span>
+                  </AnimatePresence>
+                </motion.li>
+              ))}
+            </AnimatePresence>
           </motion.ol>
         ) : null}
       </AnimatePresence>
@@ -277,7 +302,6 @@ function TodoCard({ todoUpdate }: { todoUpdate: AgentTodoUpdate }) {
           {todoUpdate.todos.slice(0, 6).map((todo) => (
             <motion.li
               key={todo.id}
-              layout
               className="grid grid-cols-[16px_1fr_auto] items-start gap-2 text-xs"
               initial="initial"
               animate="animate"

features/agent/components/agent-ui-envelope-renderer.tsx

@@ -29,7 +29,6 @@ export function AgentUiEnvelopeRenderer({ results }: AgentUiEnvelopeRendererProp
           {results.map((result) => (
             <motion.div
               key={result.id}
-              layout
               initial="initial"
               animate="animate"
               exit="exit"

features/agent/components/streaming-token-response-state.ts

@@ -1,301 +0,0 @@
-export const DEFAULT_STREAMING_TOKEN_LOCALE = "zh";
-export const STREAMING_TOKEN_BLOCK_SIZE = 4;
-
-const FALLBACK_CHUNK_SIZE = 2;
-
-export function splitStreamingText(text: string, locale = DEFAULT_STREAMING_TOKEN_LOCALE) {
-  if (!text) {
-    return [];
-  }
-
-  const segmenter =
-    typeof Intl !== "undefined" && "Segmenter" in Intl
-      ? new Intl.Segmenter(locale, { granularity: "word" })
-      : null;
-
-  if (segmenter) {
-    return Array.from(segmenter.segment(text), (item) => item.segment).filter(Boolean);
-  }
-
-  return splitStreamingTextFallback(text);
-}
-
-export function splitStreamingTextFallback(text: string) {
-  const codePoints = Array.from(text);
-  const chunks: string[] = [];
-  for (let index = 0; index < codePoints.length; index += FALLBACK_CHUNK_SIZE) {
-    chunks.push(codePoints.slice(index, index + FALLBACK_CHUNK_SIZE).join(""));
-  }
-  return chunks;
-}
-
-function takeStreamingTokenBlock(pending: string[], blockSize = STREAMING_TOKEN_BLOCK_SIZE) {
-  return pending.splice(0, blockSize).join("");
-}
-
-export type StreamingMarkdownBufferState = {
-  content: string;
-  displayContent: string;
-  locale: string;
-};
-
-type FenceMarker = {
-  char: "`" | "~";
-  length: number;
-};
-
-const FENCE_START_PATTERN = /^ {0,3}(`{3,}|~{3,})/;
-const HEADING_OPENER_PATTERN = /^ {0,3}#{1,6}[ \t]+\S/;
-const PARTIAL_HEADING_OPENER_PATTERN = /^ {0,3}#{1,6}[ \t]*$/;
-const LIST_OPENER_PATTERN = /^ {0,3}(?:[-+*]|\d{1,9}[.)])[ \t]+\S/;
-const PARTIAL_LIST_OPENER_PATTERN = /^ {0,3}(?:[-+*]|\d{1,9}[.)])[ \t]*$/;
-const BLOCKQUOTE_OPENER_PATTERN = /^ {0,3}>[ \t]?\S/;
-const PARTIAL_BLOCKQUOTE_OPENER_PATTERN = /^ {0,3}>[ \t]*$/;
-const HORIZONTAL_RULE_PATTERN = /^ {0,3}(?:-{3,}|\*{3,}|_{3,})[ \t]*(?:\r?\n|$)/;
-const TABLE_SEPARATOR_PATTERN = /^ {0,3}\|?(?:\s*:?-{3,}:?\s*\|)+\s*:?-{3,}:?\s*\|?\s*$/;
-const POSSIBLE_TABLE_HEADER_PATTERN = /^ {0,3}\|.*\||^ {0,3}\S.*\|.*\|/;
-const LINE_START_PATTERN = /(?:^|\n)(?= {0,3}(?:#{1,6}|[-+*]|\d{1,9}[.)]|>|`{3,}|~{3,}|\|))/g;
-
-function readFenceStart(line: string): FenceMarker | null {
-  const match = FENCE_START_PATTERN.exec(line);
-  if (!match) {
-    return null;
-  }
-
-  const marker = match[1];
-  return {
-    char: marker[0] as FenceMarker["char"],
-    length: marker.length,
-  };
-}
-
-function readLineEnd(content: string) {
-  const newlineIndex = content.indexOf("\n");
-  if (newlineIndex === -1) {
-    return content.length;
-  }
-  return newlineIndex + 1;
-}
-
-function isTableLine(line: string) {
-  return line.includes("|") && line.trim().length > 0;
-}
-
-function isTableSeparatorLine(line: string) {
-  return TABLE_SEPARATOR_PATTERN.test(line);
-}
-
-type MarkdownOpenerMatch = {
-  chunk: string;
-};
-
-export function createStreamingMarkdownBufferState(
-  content = "",
-  displayContent = "",
-  locale = DEFAULT_STREAMING_TOKEN_LOCALE
-): StreamingMarkdownBufferState {
-  return { content, displayContent, locale };
-}
-
-export function resolveStreamingMarkdownDisplayContent(
-  content: string,
-  displayContent: string,
-  streamDone: boolean
-) {
-  if (streamDone) {
-    return content;
-  }
-
-  return content.startsWith(displayContent) ? displayContent : "";
-}
-
-function isLineStart(content: string, offset: number) {
-  return offset === 0 || content[offset - 1] === "\n";
-}
-
-function takeMarkdownTableOpener(content: string): MarkdownOpenerMatch | null {
-  const headerEnd = readLineEnd(content);
-  const headerLine = content.slice(0, headerEnd).replace(/\r?\n$/, "");
-
-  if (!POSSIBLE_TABLE_HEADER_PATTERN.test(headerLine)) {
-    return null;
-  }
-
-  if (headerEnd >= content.length && !content.endsWith("\n")) {
-    return { chunk: "" };
-  }
-
-  const afterHeader = content.slice(headerEnd);
-  const separatorEnd = readLineEnd(afterHeader);
-  const separatorLine = afterHeader.slice(0, separatorEnd).replace(/\r?\n$/, "");
-
-  if (!separatorLine) {
-    return { chunk: "" };
-  }
-
-  if (!isTableSeparatorLine(separatorLine)) {
-    return null;
-  }
-
-  return {
-    chunk: content.slice(0, headerEnd + separatorEnd),
-  };
-}
-
-function isStreamingTableOpen(displayContent: string) {
-  const lines = displayContent.replace(/\r\n/g, "\n").split("\n");
-
-  while (lines.at(-1) === "") {
-    lines.pop();
-  }
-
-  const blockLines: string[] = [];
-  for (let index = lines.length - 1; index >= 0; index -= 1) {
-    const line = lines[index];
-    if (!line.trim()) {
-      break;
-    }
-    if (!isTableLine(line)) {
-      break;
-    }
-    blockLines.unshift(line);
-  }
-
-  return (
-    blockLines.length >= 2 &&
-    blockLines.every(isTableLine) &&
-    blockLines.some(isTableSeparatorLine)
-  );
-}
-
-function takeMarkdownOpener(
-  content: string,
-  { allowTable = true }: { allowTable?: boolean } = {}
-): MarkdownOpenerMatch | null {
-  if (!content) {
-    return null;
-  }
-
-  const lineEnd = readLineEnd(content);
-  const firstLine = content.slice(0, lineEnd);
-  const lineWithoutEnding = firstLine.replace(/\r?\n$/, "");
-  const fence = readFenceStart(lineWithoutEnding);
-
-  if (fence) {
-    return firstLine.endsWith("\n") ? { chunk: firstLine } : { chunk: "" };
-  }
-
-  const tableOpener = allowTable ? takeMarkdownTableOpener(content) : null;
-  if (tableOpener) {
-    return tableOpener;
-  }
-
-  const firstNonSyntaxIndex = (pattern: RegExp) => {
-    const match = pattern.exec(content);
-    return match ? match[0].length : 0;
-  };
-
-  const headingLength = firstNonSyntaxIndex(HEADING_OPENER_PATTERN);
-  if (headingLength > 0) {
-    return { chunk: content.slice(0, headingLength) };
-  }
-  if (PARTIAL_HEADING_OPENER_PATTERN.test(lineWithoutEnding)) {
-    return { chunk: "" };
-  }
-
-  const listLength = firstNonSyntaxIndex(LIST_OPENER_PATTERN);
-  if (listLength > 0) {
-    return { chunk: content.slice(0, listLength) };
-  }
-  if (PARTIAL_LIST_OPENER_PATTERN.test(lineWithoutEnding)) {
-    return { chunk: "" };
-  }
-
-  const blockquoteLength = firstNonSyntaxIndex(BLOCKQUOTE_OPENER_PATTERN);
-  if (blockquoteLength > 0) {
-    return { chunk: content.slice(0, blockquoteLength) };
-  }
-  if (PARTIAL_BLOCKQUOTE_OPENER_PATTERN.test(lineWithoutEnding)) {
-    return { chunk: "" };
-  }
-
-  const ruleMatch = HORIZONTAL_RULE_PATTERN.exec(content);
-  if (ruleMatch) {
-    return { chunk: ruleMatch[0] };
-  }
-
-  return null;
-}
-
-export function isMarkdownOpenerBoundary(content: string, offset = 0) {
-  if (!isLineStart(content, offset)) {
-    return false;
-  }
-
-  const opener = takeMarkdownOpener(content.slice(offset));
-  return Boolean(opener?.chunk);
-}
-
-function findNextPotentialMarkdownOpenerIndex(content: string) {
-  LINE_START_PATTERN.lastIndex = 0;
-
-  for (const match of content.matchAll(LINE_START_PATTERN)) {
-    const index = match.index + (match[0] === "\n" ? 1 : 0);
-    if (index > 0) {
-      return index;
-    }
-  }
-
-  return -1;
-}
-
-function takeSegmentedMarkdownChunk(
-  content: string,
-  locale: string,
-  blockSize = STREAMING_TOKEN_BLOCK_SIZE
-) {
-  const pendingSegments = splitStreamingText(content, locale);
-  const candidate = takeStreamingTokenBlock(pendingSegments, blockSize);
-
-  if (!candidate) {
-    return "";
-  }
-
-  const nextOpenerIndex = findNextPotentialMarkdownOpenerIndex(candidate);
-  return nextOpenerIndex > 0 ? candidate.slice(0, nextOpenerIndex) : candidate;
-}
-
-export function takeNextStreamingMarkdownChunk(
-  state: StreamingMarkdownBufferState,
-  blockSize = STREAMING_TOKEN_BLOCK_SIZE
-) {
-  const displayContent = state.content.startsWith(state.displayContent)
-    ? state.displayContent
-    : "";
-  const pendingContent = state.content.slice(displayContent.length);
-
-  if (!pendingContent) {
-    return {
-      chunk: "",
-      state: { ...state, displayContent },
-    };
-  }
-
-  const opener = isLineStart(state.content, displayContent.length)
-    ? takeMarkdownOpener(pendingContent, {
-        allowTable: !isStreamingTableOpen(displayContent),
-      })
-    : null;
-  const chunk = opener
-    ? opener.chunk
-    : takeSegmentedMarkdownChunk(pendingContent, state.locale, blockSize);
-  const nextDisplayContent = `${displayContent}${chunk}`;
-
-  return {
-    chunk,
-    state: {
-      ...state,
-      displayContent: nextDisplayContent,
-    },
-  };
-}

features/agent/components/streaming-token-response.tsx

@@ -1,14 +1,7 @@
 "use client";
 
-import { useEffect, useState } from "react";
-
 import { cn } from "@/lib/utils";
 import { MessageResponse } from "@/shared/ai-elements/message";
-import {
-  createStreamingMarkdownBufferState,
-  resolveStreamingMarkdownDisplayContent,
-  takeNextStreamingMarkdownChunk,
-} from "./streaming-token-response-state";
 
 type StreamingTokenResponseProps = {
   content: string;
@@ -18,66 +11,26 @@ type StreamingTokenResponseProps = {
   messageId?: string;
 };
 
-const STREAMING_MARKDOWN_FRAME_MS = 45;
-
 export function StreamingTokenResponse({
   content,
   streaming,
   streamDone = !streaming,
   className,
-  messageId,
 }: StreamingTokenResponseProps) {
-  const [displayContent, setDisplayContent] = useState(() =>
-    streamDone ? content : ""
-  );
-
-  useEffect(() => {
-    setDisplayContent((currentDisplayContent) =>
-      resolveStreamingMarkdownDisplayContent(
-        content,
-        currentDisplayContent,
-        streamDone
-      )
-    );
-  }, [content, messageId, streamDone]);
-
-  useEffect(() => {
-    if (streamDone || !streaming) {
-      return;
-    }
-
-    const showNextChunk = () => {
-      setDisplayContent((currentDisplayContent) => {
-        const { chunk, state } = takeNextStreamingMarkdownChunk(
-          createStreamingMarkdownBufferState(content, currentDisplayContent)
-        );
-
-        if (chunk || state.displayContent !== currentDisplayContent) {
-          return state.displayContent;
-        }
-
-        return currentDisplayContent;
-      });
-    };
-
-    showNextChunk();
-    const timer = window.setInterval(showNextChunk, STREAMING_MARKDOWN_FRAME_MS);
-
-    return () => window.clearInterval(timer);
-  }, [content, streamDone, streaming]);
-
-  if (!displayContent) {
+  if (!content) {
     return null;
   }
 
+  const isAnimating = streaming && !streamDone;
+
   return (
     <MessageResponse
       className={cn("agent-streaming-response", className)}
-      isAnimating={streaming}
+      isAnimating={isAnimating}
       mode="streaming"
       parseIncompleteMarkdown={true}
     >
-      {displayContent}
+      {content}
     </MessageResponse>
   );
 }

features/agent/streaming-token-response-state.test.ts

@@ -1,132 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { readFileSync } from "node:fs";
-import { join } from "node:path";
-
-import {
-  createStreamingMarkdownBufferState,
-  isMarkdownOpenerBoundary,
-  resolveStreamingMarkdownDisplayContent,
-  splitStreamingText,
-  splitStreamingTextFallback,
-  takeNextStreamingMarkdownChunk,
-} from "./components/streaming-token-response-state";
-
-describe("streaming token response state", () => {
-  it("splits streaming text without dropping content", () => {
-    const content = "管网压力异常需要继续分析";
-    const chunks = splitStreamingText(content, "zh");
-
-    expect(chunks.length).toBeGreaterThan(0);
-    expect(chunks.join("")).toBe(content);
-  });
-
-  it("uses bounded code point chunks for fallback segmentation", () => {
-    expect(splitStreamingTextFallback("管网压力")).toEqual(["管网", "压力"]);
-  });
-
-  it("emits continuous Chinese text without waiting for markdown block closure", () => {
-    let state = createStreamingMarkdownBufferState("正在分析管网压力异常需要继续分析");
-    const chunks: string[] = [];
-
-    for (let index = 0; index < 20; index += 1) {
-      const next = takeNextStreamingMarkdownChunk(state);
-      state = next.state;
-      if (!next.chunk) {
-        break;
-      }
-      chunks.push(next.chunk);
-    }
-
-    expect(chunks.length).toBeGreaterThan(0);
-    expect(chunks.join("")).toBe("正在分析管网压力异常需要继续分析");
-  });
-
-  it("flushes a heading opener atomically", () => {
-    const next = takeNextStreamingMarkdownChunk(
-      createStreamingMarkdownBufferState("### 压力分析")
-    );
-
-    expect(next.chunk).toBe("### 压");
-    expect(isMarkdownOpenerBoundary("### 压力分析")).toBe(true);
-  });
-
-  it("waits for a heading opener to include text", () => {
-    const next = takeNextStreamingMarkdownChunk(
-      createStreamingMarkdownBufferState("### ")
-    );
-
-    expect(next.chunk).toBe("");
-    expect(next.state.displayContent).toBe("");
-  });
-
-  it("flushes list and quote openers atomically", () => {
-    expect(
-      takeNextStreamingMarkdownChunk(
-        createStreamingMarkdownBufferState("- 节点 A")
-      ).chunk
-    ).toBe("- 节");
-    expect(
-      takeNextStreamingMarkdownChunk(
-        createStreamingMarkdownBufferState("> 注意压力")
-      ).chunk
-    ).toBe("> 注");
-  });
-
-  it("flushes code and mermaid fence openers as complete lines", () => {
-    expect(
-      takeNextStreamingMarkdownChunk(
-        createStreamingMarkdownBufferState("```ts\nconst pressure = 1;")
-      ).chunk
-    ).toBe("```ts\n");
-    expect(
-      takeNextStreamingMarkdownChunk(
-        createStreamingMarkdownBufferState("```mermaid\ngraph TD")
-      ).chunk
-    ).toBe("```mermaid\n");
-  });
-
-  it("waits for fenced code openers to reach the line ending", () => {
-    const next = takeNextStreamingMarkdownChunk(
-      createStreamingMarkdownBufferState("```ts")
-    );
-
-    expect(next.chunk).toBe("");
-    expect(next.state.displayContent).toBe("");
-  });
-
-  it("flushes table header and separator rows atomically", () => {
-    const content = "| 节点 | 压力 |\n| --- | --- |\n| J1 | 0.32 |\n\n后续";
-
-    expect(
-      takeNextStreamingMarkdownChunk(
-        createStreamingMarkdownBufferState(content)
-      ).chunk
-    ).toBe("| 节点 | 压力 |\n| --- | --- |\n");
-  });
-
-  it("grows table rows after the table opener is visible", () => {
-    const tableOpener = "| 节点 | 压力 |\n| --- | --- |\n";
-    const state = createStreamingMarkdownBufferState(
-      `${tableOpener}| J1 | 0.32 |`,
-      tableOpener
-    );
-
-    expect(takeNextStreamingMarkdownChunk(state).chunk).not.toBe("");
-  });
-
-  it("flushes all display content after streaming is done", () => {
-    const content = "前文\n\n```ts\nconst pressure = 1;";
-
-    expect(resolveStreamingMarkdownDisplayContent(content, "前文", true)).toBe(content);
-  });
-
-  it("StreamingTokenResponse does not use closed-block markdown gating", () => {
-    const source = readFileSync(
-      join(process.cwd(), "features/agent/components/streaming-token-response.tsx"),
-      "utf8"
-    );
-
-    expect(source).not.toContain("splitStreamingMarkdownContent");
-  });
-
-});

features/agent/streaming-token-response.test.ts

@@ -0,0 +1,17 @@
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+import { describe, expect, it } from "vitest";
+
+describe("StreamingTokenResponse", () => {
+  it("renders the backend-smoothed stream without a second timer buffer", () => {
+    const source = readFileSync(
+      join(process.cwd(), "features/agent/components/streaming-token-response.tsx"),
+      "utf8"
+    );
+
+    expect(source).not.toContain("setInterval");
+    expect(source).not.toContain("useState");
+    expect(source).not.toContain("streaming-token-response-state");
+    expect(source).toContain("{content}");
+  });
+});