OrgTJWater/next-tjwater-drainage-frontend
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: stabilize agent progress display

Browse Source
This commit is contained in:
jiang
2026-07-20 19:13:43 +08:00
parent 3c0271bae8
commit 72c8190a78
2 changed files with 134 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
features/agent/components/agent-message-details.tsx
+34 -19
View File
@@ -157,7 +157,7 @@ export function AgentMessageProgress({
return null;
}
return <ProgressList key={running ? "running" : "settled"} progress={progress} running={running} />;
return <ProgressList progress={progress} running={running} />;
}
function AgentNestedBlock({
@@ -200,35 +200,35 @@ function AnimatedDetailItem({ children }: { children: ReactNode }) {
function ProgressList({ progress, running }: { progress: AgentChatProgress[]; running: boolean }) {
const [expanded, setExpanded] = useState(false);
const visibleProgress = running
? progress.slice(-STREAMING_PROGRESS_LIMIT)
: expanded
? progress
const compact = running && !expanded;
const visibleProgress = expanded
? progress
: running
? progress.slice(-STREAMING_PROGRESS_LIMIT)
: [];
const listMode = running ? "streaming" : expanded ? "expanded" : "collapsed";
const listMode = expanded ? "expanded" : running ? "streaming" : "collapsed";
return (
<div className="agent-panel-nested rounded-xl p-2.5">
<button
type="button"
className="flex w-full items-center gap-2 text-left text-xs font-semibold text-slate-600 disabled:cursor-default"
aria-expanded={running || expanded}
disabled={running}
className="flex w-full items-center gap-2 text-left text-xs font-semibold text-slate-600"
aria-expanded={expanded}
onClick={() => setExpanded((current) => !current)}
>
<ListTree size={16} className="shrink-0 text-blue-700" aria-hidden="true" />
<span>执行进度</span>
<span className="flex-1" />
<span className="shrink-0 font-normal text-slate-400">
{running
? `最近 ${Math.min(progress.length, STREAMING_PROGRESS_LIMIT)} 条`
: expanded
? `全部 ${progress.length} 条`
{expanded
? `全部 ${progress.length} 条`
: running
? `最近 ${Math.min(progress.length, STREAMING_PROGRESS_LIMIT)} 条`
: `共 ${progress.length} 条`}
</span>
<ChevronDown
size={14}
className={cn("shrink-0 text-slate-400 transition-transform", !running && expanded && "rotate-180")}
className={cn("shrink-0 text-slate-400 transition-transform", expanded && "rotate-180")}
aria-hidden="true"
/>
</button>
@@ -236,18 +236,21 @@ function ProgressList({ progress, running }: { progress: AgentChatProgress[]; ru
{visibleProgress.length ? (
<motion.ol
key={listMode}
aria-label={!running && expanded ? "全部执行进度" : "最近执行进度"}
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}
>
<AnimatePresence initial={false} mode={expanded ? "sync" : "wait"}>
<AnimatePresence initial={false} mode="popLayout">
{visibleProgress.map((item) => (
<motion.li
key={item.id}
className="grid h-12 grid-cols-[16px_minmax(0,1fr)_auto] items-start gap-2 overflow-hidden text-xs"
className={cn(
"grid grid-cols-[16px_minmax(0,1fr)_auto] items-start gap-2 text-xs",
compact && "h-12 overflow-hidden"
)}
initial={{ opacity: 0, y: 4 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -2 }}
@@ -275,11 +278,23 @@ function ProgressList({ progress, running }: { progress: AgentChatProgress[]; ru
}
/>
<span className="min-w-0">
<span className="block truncate font-semibold text-slate-800" title={item.title}>
<span
className={cn(
"block font-semibold text-slate-800",
compact ? "truncate" : "break-words"
)}
title={item.title}
>
{item.title}
</span>
{item.detail ? (
<span className="block truncate leading-5 text-slate-500" title={item.detail}>
<span
className={cn(
"block leading-5 text-slate-500",
compact ? "truncate" : "break-words"
)}
title={item.detail}
>
{item.detail}
</span>
) : null}
tests/browser/agent-streaming-stability.e2e.ts
+100 -13
View File
@@ -7,6 +7,7 @@ const STREAM_CHUNK_DELAY_MS = 20;
let streamServer: Server;
let streamServerUrl: string;
let appendProgress: (() => void) | null = null;
let failProgress: (() => void) | null = null;
let releaseStream: (() => void) | null = null;
@@ -121,18 +122,20 @@ test.beforeAll(async () => {
while (index < 3 && index < chunks.length) {
sendNextTextChunk();
}
send({
type: "data-progress",
id: "assess-risk",
data: {
appendProgress = () => {
send({
type: "data-progress",
id: "assess-risk",
phase: "analysis",
status: "running",
title: "正在判断溢流风险",
detail: "结合流量突变与液位趋势形成判断。",
started_at: Date.now()
}
});
data: {
id: "assess-risk",
phase: "analysis",
status: "running",
title: "正在判断溢流风险",
detail: "结合流量突变与液位趋势形成判断。",
started_at: Date.now()
}
});
};
failProgress = () => {
send({
@@ -262,14 +265,65 @@ test("stream completion and the plan card remain positionally stable", async ({
await sendButton.click();
const liveProgress = page.getByRole("list", { name: "最近执行进度" });
await expect(liveProgress.locator("li")).toHaveCount(3);
await expect(liveProgress.getByText("正在分析运行上下文", { exact: true })).toBeVisible();
await page.evaluate(() => {
const state = window as typeof window & {
__agentMinVisibleProgressRows?: number;
__agentProgressWindowSampleDone?: boolean;
};
const startedAt = performance.now();
state.__agentMinVisibleProgressRows = Number.POSITIVE_INFINITY;
state.__agentProgressWindowSampleDone = false;
const sample = () => {
const rows = document.querySelectorAll('ol[aria-label="最近执行进度"] > li').length;
state.__agentMinVisibleProgressRows = Math.min(state.__agentMinVisibleProgressRows ?? rows, rows);
if (performance.now() - startedAt < 400) {
requestAnimationFrame(sample);
} else {
state.__agentProgressWindowSampleDone = true;
}
};
requestAnimationFrame(sample);
});
triggerProgressAppend();
await expect(liveProgress.getByText("正在判断溢流风险", { exact: true })).toBeVisible();
await expect(liveProgress.locator("li")).toHaveCount(3);
await expect(liveProgress.getByText("正在分析运行上下文", { exact: true })).toHaveCount(0);
await expect.poll(() =>
page.evaluate(() =>
(window as typeof window & { __agentProgressWindowSampleDone?: boolean }).__agentProgressWindowSampleDone ?? false
)
).toBe(true);
expect(
await page.evaluate(() =>
(window as typeof window & { __agentMinVisibleProgressRows?: number }).__agentMinVisibleProgressRows
)
).toBeGreaterThanOrEqual(3);
const liveProgressRowHeights = await liveProgress.locator("li").evaluateAll((rows) =>
rows.map((row) => row.getBoundingClientRect().height)
);
expect(liveProgressRowHeights.every((height) => Math.abs(height - 48) <= 0.01)).toBe(true);
await expect(liveProgress.locator("li").first().locator("span.min-w-0 > span").first()).toHaveCSS(
"white-space",
"nowrap"
);
const progressToggle = page.getByRole("button", { name: /执行进度/ }).filter({ visible: true }).first();
await expect(progressToggle).toBeEnabled();
await progressToggle.click();
const expandedLiveProgress = page.getByRole("list", { name: "全部执行进度" });
await expect(expandedLiveProgress.locator("li")).toHaveCount(4);
await expect(expandedLiveProgress.getByText("正在分析运行上下文", { exact: true })).toBeVisible();
await expect(expandedLiveProgress.getByText("正在核对降雨过程与汇水区响应关系", { exact: true })).toHaveCSS(
"white-space",
"normal"
);
await progressToggle.click();
await expect(page.getByRole("list", { name: "最近执行进度" }).locator("li")).toHaveCount(3);
await page.evaluate(() => {
const state = window as typeof window & { __agentFailureMotionObserved?: boolean };
@@ -300,7 +354,6 @@ test("stream completion and the plan card remain positionally stable", async ({
await expect(page.getByText("分析完成", { exact: true }).filter({ visible: true }).first()).toBeVisible({
timeout: 10_000
});
const progressToggle = page.getByRole("button", { name: /执行进度/ }).filter({ visible: true }).first();
await expect(progressToggle).toContainText("共 4 条");
await expect(page.getByRole("list", { name: "最近执行进度" })).toHaveCount(0);
await expect(page.getByText("溢流风险判断完成", { exact: true }).filter({ visible: true })).toHaveCount(0);
@@ -358,8 +411,32 @@ test("stream completion and the plan card remain positionally stable", async ({
).toBeLessThanOrEqual(2);
await progressToggle.click();
await expect(page.getByRole("list", { name: "全部执行进度" }).locator("li")).toHaveCount(4);
const expandedProgress = page.getByRole("list", { name: "全部执行进度" });
await expect(expandedProgress.locator("li")).toHaveCount(4);
await expect(page.getByText("正在分析运行上下文", { exact: true }).filter({ visible: true }).first()).toBeVisible();
const expandedLongTitle = expandedProgress.getByText("正在核对降雨过程与汇水区响应关系", { exact: true });
await expect(expandedLongTitle).toHaveCSS("white-space", "normal");
await expect(expandedProgress.locator("li").nth(1)).not.toHaveCSS("height", "48px");
await progressToggle.click();
await prompt.fill("验证展开状态在流结束后保持");
await sendButton.click();
const latestProgressToggle = page.getByRole("button", { name: /执行进度/ }).filter({ visible: true }).last();
await expect(latestProgressToggle).toContainText("最近 3 条");
triggerProgressAppend();
await expect(
page.getByRole("list", { name: "最近执行进度" }).getByText("正在判断溢流风险", { exact: true })
).toBeVisible();
await latestProgressToggle.click();
await expect(latestProgressToggle).toContainText("全部 4 条");
resumeStream();
await expect(latestProgressToggle).toContainText("全部 4 条", { timeout: 10_000 });
await expect(page.getByRole("list", { name: "全部执行进度" })).toBeVisible();
await expect(
page.getByRole("list", { name: "全部执行进度" }).getByText("溢流风险判断完成", { exact: true })
).toBeVisible();
});
function createLongMarkdownResponse() {
@@ -393,6 +470,16 @@ function resumeStream() {
resume();
}
function triggerProgressAppend() {
if (!appendProgress) {
throw new Error("Progress append checkpoint was not reached");
}
const append = appendProgress;
appendProgress = null;
append();
}
function triggerProgressFailure() {
if (!failProgress) {
throw new Error("Progress failure checkpoint was not reached");