+
+
+
+
+
+
+
+
+
+
diff --git a/crates/agent-gateway/web/test/chat-file-links.test.mjs b/crates/agent-gateway/web/test/chat-file-links.test.mjs
index 8bf6477d8..6be842a07 100644
--- a/crates/agent-gateway/web/test/chat-file-links.test.mjs
+++ b/crates/agent-gateway/web/test/chat-file-links.test.mjs
@@ -87,7 +87,6 @@ test("Gateway historical and streaming rows keep the explicit file-open prop cha
const files = [
"../src/app/GatewayAppView.tsx",
"../src/components/GatewayTranscript.tsx",
- "../../../agent-ui/src/components/chat/ThinkingActivity.tsx",
"../../../agent-ui/src/components/chat/AssistantBubble.tsx",
"../../../agent-ui/src/components/chat/assistant-bubble/RoundContent.tsx",
];
@@ -109,15 +108,20 @@ test("Gateway historical and streaming rows keep the explicit file-open prop cha
assert.ok((roundContent.match(/onOpenFileLink=\{onOpenFileLink\}/g) ?? []).length >= 2);
assert.ok((roundContent.match(/workdir=\{workdir\}/g) ?? []).length >= 2);
- const thinkingActivity = fs.readFileSync(
+ // Reasoning disclosures render Markdown, so file links inside reasoning
+ // text keep the same explicit open-prop chain as answer prose.
+ const thinkingDisclosure = fs.readFileSync(
fileURLToPath(
- new URL("../../../agent-ui/src/components/chat/ThinkingActivity.tsx", import.meta.url),
+ new URL(
+ "../../../agent-ui/src/components/chat/assistant-bubble/ThinkingDisclosure.tsx",
+ import.meta.url,
+ ),
),
"utf8",
);
- assert.match(thinkingActivity, /Settled · history
+
+ Streaming · compacting right now
+
+ Streaming · continuation after compaction
+
+ loadEarlierHistoryActionRef.current(conversationId),
isHistorySwitching: false,
- isAgentMode,
showUsage: isAgentDevExecutionMode,
usageContextWindow: paneContextWindow,
liveTranscriptStore: getConversationLiveTranscriptStore(conversationId),
diff --git a/crates/agent-gui/src/pages/chat/components/AssistantBubble.tsx b/crates/agent-gui/src/pages/chat/components/AssistantBubble.tsx
index 4df313e0c..253504bfc 100644
--- a/crates/agent-gui/src/pages/chat/components/AssistantBubble.tsx
+++ b/crates/agent-gui/src/pages/chat/components/AssistantBubble.tsx
@@ -1,8 +1,13 @@
import { AssistantAvatar } from "@liveagent/ui/components/chat/AssistantAvatar";
import { LiveAssistantStatus } from "@liveagent/ui/components/chat/AssistantStatus";
+import { AssistantWorkTrace } from "@liveagent/ui/components/chat/AssistantWorkTrace";
+import type { AssistantTurnLayoutEntry } from "@liveagent/ui/components/chat/assistant-bubble/assistantBubbleUtils";
+import {
+ resolveActiveThinkingEntryKey,
+ resolveActiveWorkEntry,
+} from "@liveagent/ui/components/chat/assistant-bubble/assistantBubbleUtils";
import { RoundBlockContent } from "@liveagent/ui/components/chat/assistant-bubble/RoundContent";
import { RetryDetailsBlock } from "@liveagent/ui/components/chat/RetryDetailsBlock";
-import { UsagePanel } from "@liveagent/ui/components/chat/UsagePanel";
import type { ChatFileLink } from "@liveagent/ui/lib/chat/chatFileLinks";
import { cn } from "@liveagent/ui/lib/shared/utils";
import { memo } from "react";
@@ -13,10 +18,8 @@ export { AssistantAvatar } from "@liveagent/ui/components/chat/AssistantAvatar";
export const AssistantBubbleUnit = memo(function AssistantBubbleUnit(props: {
row: AssistantUnitRow;
- showUsage?: boolean;
- usageContextWindow?: number;
- isAgentMode: boolean;
isCompactionRunning: boolean;
+ awaitingDecision?: boolean;
toolStatus: string | null;
retryAttempts?: RetryAttemptRecord[];
workdir?: string;
@@ -24,10 +27,8 @@ export const AssistantBubbleUnit = memo(function AssistantBubbleUnit(props: {
}) {
const {
row,
- showUsage,
- usageContextWindow,
- isAgentMode,
isCompactionRunning,
+ awaitingDecision = false,
toolStatus,
retryAttempts,
workdir,
@@ -36,17 +37,29 @@ export const AssistantBubbleUnit = memo(function AssistantBubbleUnit(props: {
const { unit } = row;
if (unit.kind === "footer") return null;
- // 只有仍在直播的状态单元才渲染转圈状态行。落定交接阶段的同一单元
- // (live:false) 若继续渲染，会在底部留下一个永远旋转的 spinner——运行早已
- // 结束，用户却以为任务还在后台跑。
- const status =
- unit.kind === "status" && row.live ? (
-
@@ -55,14 +68,7 @@ export const AssistantBubbleUnit = memo(function AssistantBubbleUnit(props: {
) : (
)}
- (null);
const scrollFollowRef = useRef(null);
const [composerOverlayHeight, setComposerOverlayHeight] = useState(0);
+ const [composerFloatingOverhang, setComposerFloatingOverhang] = useState(0);
+ const [composerCenterOffset, setComposerCenterOffset] = useState(0);
// Background panes send through their own conversation-scoped pipeline; the
// handler owns clear-on-send/restore-on-failure for this pane's composer.
const paneSendHandler = useMemo(
@@ -196,6 +198,7 @@ const RegisteredConversationPaneHost = forwardRef<
return (
{
const runtime = snapshot.runtime;
@@ -230,6 +233,8 @@ const RegisteredConversationPaneHost = forwardRef<
isSending={isSending}
isCompactionRunning={isCompactionRunning}
bottomReservePx={composerOverlayHeight}
+ floatingOverhangPx={composerFloatingOverhang}
+ composerCenterOffsetPx={composerCenterOffset}
/>
@@ -249,6 +254,8 @@ const RegisteredConversationPaneHost = forwardRef<
onManualCompactConfirm={controller.compact}
manualCompactBlocked={isCompactionRunning}
onHeightChange={setComposerOverlayHeight}
+ onFloatingOverhangChange={setComposerFloatingOverhang}
+ onCenterOffsetChange={setComposerCenterOffset}
taskProgressBar={
;
export type ConversationComposerBindings = Omit<
@@ -32,6 +34,8 @@ export type ConversationComposerBindings = Omit<
| "onManualCompactConfirm"
| "manualCompactBlocked"
| "onHeightChange"
+ | "onFloatingOverhangChange"
+ | "onCenterOffsetChange"
| "taskProgressBar"
| "approvalBar"
| "fileDropOverlay"
diff --git a/crates/agent-gui/src/pages/chat/surfaces/ConversationSurface.tsx b/crates/agent-gui/src/pages/chat/surfaces/ConversationSurface.tsx
index 9a6931205..f97d41f43 100644
--- a/crates/agent-gui/src/pages/chat/surfaces/ConversationSurface.tsx
+++ b/crates/agent-gui/src/pages/chat/surfaces/ConversationSurface.tsx
@@ -1,4 +1,5 @@
-import type { ReactNode } from "react";
+import { CHAT_TRANSCRIPT_WIDTH_CSS_VAR } from "@liveagent/ui/pages/chat/transcript/TranscriptWidthControls";
+import type { CSSProperties, ReactNode } from "react";
import type {
ConversationSurfaceController,
ConversationSurfaceSnapshot,
@@ -12,12 +13,13 @@ type ConversationSurfaceContent = {
type ConversationSurfaceProps = {
paneId: string;
+ contentWidth: number;
controller: ConversationSurfaceController;
renderContent(snapshot: ConversationSurfaceSnapshot): ConversationSurfaceContent;
};
export function ConversationSurface(props: ConversationSurfaceProps) {
- const { paneId, controller, renderContent } = props;
+ const { paneId, contentWidth, controller, renderContent } = props;
const snapshot = useConversationSurfaceSnapshot(controller);
const { transcript, composer } = renderContent(snapshot);
@@ -26,9 +28,15 @@ export function ConversationSurface(props: ConversationSurfaceProps) {
data-workbench-pane-id={paneId}
data-workbench-surface="conversation"
data-workbench-surface-id={`conversation:${snapshot.conversationId}`}
+ data-chat-width-owner=""
data-conversation-compaction-phase={snapshot.compaction.phase}
data-conversation-approval-count={snapshot.approvals.length}
className="relative flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden"
+ style={
+ {
+ [CHAT_TRANSCRIPT_WIDTH_CSS_VAR]: `${contentWidth}px`,
+ } as CSSProperties
+ }
>
- {status ?
diff --git a/crates/agent-gui/src/pages/chat/surfaces/ConversationPaneHost.tsx b/crates/agent-gui/src/pages/chat/surfaces/ConversationPaneHost.tsx
index 83ae476ac..81fdb487f 100644
--- a/crates/agent-gui/src/pages/chat/surfaces/ConversationPaneHost.tsx
+++ b/crates/agent-gui/src/pages/chat/surfaces/ConversationPaneHost.tsx
@@ -159,6 +159,8 @@ const RegisteredConversationPaneHost = forwardRef<
const composerRef = useRef{status}
: null}
-
+
{row.mutable && retryAttempts && retryAttempts.length > 0 ? (
0 || isCompactionRunning}
+ running={row.live}
+ >
+ {workEntries.map((entry) => renderWorkEntry(entry))}
+ {isCompactionRunning ? (
+
) : null}
{transcript}
diff --git a/crates/agent-gui/src/pages/chat/transcript/AssistantActivityRow.tsx b/crates/agent-gui/src/pages/chat/transcript/AssistantActivityRow.tsx
index aac8951e2..e73f83ab2 100644
--- a/crates/agent-gui/src/pages/chat/transcript/AssistantActivityRow.tsx
+++ b/crates/agent-gui/src/pages/chat/transcript/AssistantActivityRow.tsx
@@ -1,19 +1,32 @@
+import { isPendingUserInteractionBlock } from "@liveagent/ui/components/chat/assistant-bubble/assistantBubbleUtils";
+import { LiveSparkle } from "@liveagent/ui/components/chat/LiveSparkle";
import type { ChatFileLink } from "@liveagent/ui/lib/chat/chatFileLinks";
import type { ConversationMentionReference } from "@liveagent/ui/lib/chat/mentionReferences";
import type { PendingUploadedFile } from "@liveagent/ui/lib/chat/uploadedFiles";
-import { memo } from "react";
+import { memo, useMemo } from "react";
import type { HistoryMessageRef } from "../../../lib/chat/conversation/conversationState";
import type { RetryAttemptRecord } from "../../../lib/chat/conversation/liveTranscriptStore";
import { AssistantRenderUnit } from "./AssistantRenderUnit";
-import type { AssistantActivityRow as AssistantActivityRowModel } from "./rowModel";
+import type {
+ AssistantActivityRow as AssistantActivityRowModel,
+ AssistantUnitRow,
+} from "./rowModel";
+
+function hasPendingInteractionCard(units: AssistantUnitRow[]) {
+ return units.some(
+ (unit) => unit.unit.kind === "block" && isPendingUserInteractionBlock(unit.unit.block),
+ );
+}
export const AssistantActivityRow = memo(function AssistantActivityRow(props: {
row: AssistantActivityRowModel;
showUsage?: boolean;
usageContextWindow?: number;
- isAgentMode: boolean;
isCompactionRunning: boolean;
+ /** 本对话有工具卡在审批门上（审批发生在执行前，不体现为运行中的工具）。 */
+ hasPendingToolApproval?: boolean;
toolStatus: string | null;
+ actionsVisible?: boolean;
retryAttempts?: RetryAttemptRecord[];
workdir?: string;
onOpenFileLink?: (link: ChatFileLink) => void;
@@ -29,9 +42,10 @@ export const AssistantActivityRow = memo(function AssistantActivityRow(props: {
row,
showUsage,
usageContextWindow,
- isAgentMode,
isCompactionRunning,
+ hasPendingToolApproval = false,
toolStatus,
+ actionsVisible,
retryAttempts,
workdir,
onOpenFileLink,
@@ -39,6 +53,13 @@ export const AssistantActivityRow = memo(function AssistantActivityRow(props: {
onBranchConversation,
} = props;
+ // 回合停在用户身上（未应答的提问 / 计划卡，或卡在审批门上的工具）时没有任何
+ // 东西在跑：进度指示改为静态，闪烁会把「等你决策」误报成「正在处理」。
+ const awaitingDecision = useMemo(
+ () => row.live && (hasPendingToolApproval || hasPendingInteractionCard(row.units)),
+ [hasPendingToolApproval, row.live, row.units],
+ );
+
return (
);
});
diff --git a/crates/agent-gui/src/pages/chat/transcript/AssistantRenderUnit.tsx b/crates/agent-gui/src/pages/chat/transcript/AssistantRenderUnit.tsx
index b6ac96ac4..ca7e0fdb2 100644
--- a/crates/agent-gui/src/pages/chat/transcript/AssistantRenderUnit.tsx
+++ b/crates/agent-gui/src/pages/chat/transcript/AssistantRenderUnit.tsx
@@ -15,9 +15,10 @@ export type AssistantRenderUnitProps = {
row: AssistantUnitRow;
showUsage?: boolean;
usageContextWindow?: number;
- isAgentMode: boolean;
isCompactionRunning: boolean;
+ awaitingDecision?: boolean;
toolStatus: string | null;
+ actionsVisible?: boolean;
retryAttempts?: RetryAttemptRecord[];
workdir?: string;
onOpenFileLink?: (link: ChatFileLink) => void;
@@ -34,17 +35,41 @@ const AssistantFooterUnit = memo(function AssistantFooterUnit(props: {
unit: AssistantFooterRenderUnit;
showAvatar: boolean;
compacted: boolean;
+ showUsage?: boolean;
+ usageContextWindow?: number;
+ actionsVisible?: boolean;
onResendFromEdit: AssistantRenderUnitProps["onResendFromEdit"];
onBranchConversation?: AssistantRenderUnitProps["onBranchConversation"];
}) {
- const { unit, showAvatar, compacted, onResendFromEdit, onBranchConversation } = props;
+ const {
+ unit,
+ showAvatar,
+ compacted,
+ showUsage,
+ usageContextWindow,
+ actionsVisible,
+ onResendFromEdit,
+ onBranchConversation,
+ } = props;
const changedFiles = useMemo(
() => (unit.hasChangedFilesCandidate ? collectChangedFiles(unit.rounds) : null),
[unit.hasChangedFilesCandidate, unit.rounds],
);
+ const usageEntries = useMemo(
+ () =>
+ showUsage
+ ? unit.rounds.flatMap((round) =>
+ round.meta?.usage ? [{ key: round.key, usage: round.meta.usage }] : [],
+ )
+ : undefined,
+ [showUsage, unit.rounds],
+ );
return (
-
{row.units.map((unit, index) => (
@@ -47,10 +68,11 @@ export const AssistantActivityRow = memo(function AssistantActivityRow(props: {
row={unit}
showUsage={showUsage}
usageContextWindow={usageContextWindow}
- isAgentMode={isAgentMode}
isCompactionRunning={unit.mutable ? isCompactionRunning : false}
+ awaitingDecision={awaitingDecision}
toolStatus={unit.mutable ? toolStatus : null}
- retryAttempts={unit.mutable && unit.unit.kind === "status" ? retryAttempts : undefined}
+ actionsVisible={actionsVisible}
+ retryAttempts={unit.mutable ? retryAttempts : undefined}
workdir={workdir}
onOpenFileLink={onOpenFileLink}
onResendFromEdit={onResendFromEdit}
@@ -61,6 +83,9 @@ export const AssistantActivityRow = memo(function AssistantActivityRow(props: {
) : null}
))}
+ {/* 整个回合存活期间常驻的脉冲星标：工具/思考的空档、压缩总结阶段都
+ 保持可见，告诉用户对话仍在进行；回合落定（live=false）即消失。 */}
+ {row.live ?
+
{changedFiles ? (
{showAvatar ? (
@@ -65,6 +90,8 @@ const AssistantFooterUnit = memo(function AssistantFooterUnit(props: {
@@ -346,7 +335,6 @@ export const ChatTranscript = memo(function ChatTranscript(props: ChatTranscript
isViewportFollowing={scrollFollowHandle.isFollowing}
viewportFollowing={following}
isSending={isSending}
- isAgentMode={isAgentMode}
isCompactionRunning={isCompactionRunning}
showUsage={showUsage}
usageContextWindow={usageContextWindow}
@@ -390,8 +378,14 @@ export const ChatTranscript = memo(function ChatTranscript(props: ChatTranscript
aria-label={jumpToBottomLabel}
title={jumpToBottomLabel}
onClick={() => scrollFollowHandle.jumpToBottom()}
- className="chat-jump-to-bottom absolute left-1/2 z-10 flex h-8 w-8 items-center justify-center rounded-full text-muted-foreground transition-colors hover:text-foreground"
- style={{ bottom: Math.ceil(bottomReservePx) + 16 }}
+ className="chat-jump-to-bottom absolute z-10 flex h-8 w-8 items-center justify-center rounded-full text-muted-foreground transition-colors hover:text-foreground"
+ // Centered on the composer card (not the pane) and stacked above
+ // the task-progress pill / queue panel: the composer layer paints
+ // over the transcript, so any overlap would hide the button.
+ style={{
+ left: `calc(50% + ${Math.round(composerCenterOffsetPx)}px)`,
+ bottom: Math.ceil(bottomReservePx) + Math.ceil(floatingOverhangPx) + 16,
+ }}
>
("[data-assistant-reply-key]")?.dataset.assistantReplyKey ?? null
+ );
+}
+
// Measured row heights survive conversation switches: saved on unmount,
// restored (width-gated) on the next open so the switch lays out with exact
// heights instead of estimates. Persisted so revisited conversations skip
@@ -83,7 +95,6 @@ export type TranscriptListProps = {
isViewportFollowing?: () => boolean;
viewportFollowing: boolean;
isSending: boolean;
- isAgentMode: boolean;
isCompactionRunning: boolean;
showUsage: boolean;
usageContextWindow?: number;
@@ -121,7 +132,6 @@ export const TranscriptList = memo(function TranscriptList(props: TranscriptList
isViewportFollowing,
viewportFollowing,
isSending,
- isAgentMode,
isCompactionRunning,
showUsage,
usageContextWindow,
@@ -141,6 +151,19 @@ export const TranscriptList = memo(function TranscriptList(props: TranscriptList
liveTranscriptStore.getSnapshot,
);
+ // 审批门在工具执行「之前」挂起，转录里看不出运行中的工具；活跃回合据此把
+ // 进度指示冻结成静态（同一份 pending 表也驱动输入框上方的审批栏）。
+ const subscribeApprovals = useCallback(
+ (listener: () => void) => subscribeToolApprovalsForConversation(conversationId, listener),
+ [conversationId],
+ );
+ const getApprovalsSnapshot = useCallback(
+ () => getPendingToolApprovalsSnapshot(conversationId),
+ [conversationId],
+ );
+ const hasPendingToolApproval =
+ useSyncExternalStore(subscribeApprovals, getApprovalsSnapshot, getApprovalsSnapshot).length > 0;
+
// The component remounts per conversation (keyed by ChatTranscript), so
// per-conversation state initializes once per mount — no reset effects.
const [entranceRegistry] = useState(() => createEntranceRegistry());
@@ -176,6 +199,17 @@ export const TranscriptList = memo(function TranscriptList(props: TranscriptList
);
const [editingMessageKey, setEditingMessageKey] = useState(null);
+ const [hoveredAssistantReplyKey, setHoveredAssistantReplyKey] = useState(null);
+
+ const handleTranscriptPointerOver = useCallback((event: ReactPointerEvent) => {
+ const nextReplyKey = assistantReplyKeyFromEventTarget(event.target);
+ setHoveredAssistantReplyKey((currentReplyKey) =>
+ currentReplyKey === nextReplyKey ? currentReplyKey : nextReplyKey,
+ );
+ }, []);
+ const handleTranscriptPointerLeave = useCallback(() => {
+ setHoveredAssistantReplyKey(null);
+ }, []);
useEffect(() => {
if (!editingMessageKey) {
@@ -344,10 +378,19 @@ export const TranscriptList = memo(function TranscriptList(props: TranscriptList
useEffect(() => () => saveMeasurementsRef.current(), []);
return (
-
+
{virtualizer.getVirtualItems().map((virtualRow) => {
const row = rows[virtualRow.index];
if (!row) return null;
+ const assistantReplyKey =
+ row.kind === "assistant-unit" || row.kind === "assistant-activity" ? row.replyKey : null;
+ const actionsVisible =
+ assistantReplyKey !== null && assistantReplyKey === hoveredAssistantReplyKey;
let body: ReactNode;
if (row.kind === "summary") {
@@ -374,9 +417,10 @@ export const TranscriptList = memo(function TranscriptList(props: TranscriptList
row={row}
showUsage={showUsage}
usageContextWindow={usageContextWindow}
- isAgentMode={isAgentMode}
isCompactionRunning={isCompactionRunning}
+ hasPendingToolApproval={hasPendingToolApproval}
toolStatus={displayedToolStatus}
+ actionsVisible={actionsVisible}
retryAttempts={liveState.retryAttempts}
workdir={workspaceRoot}
onOpenFileLink={onOpenFileLink}
@@ -392,9 +436,9 @@ export const TranscriptList = memo(function TranscriptList(props: TranscriptList
row={row}
showUsage={showUsage}
usageContextWindow={usageContextWindow}
- isAgentMode={isAgentMode}
isCompactionRunning={row.mutable ? isCompactionRunning : false}
toolStatus={row.mutable ? displayedToolStatus : null}
+ actionsVisible={actionsVisible}
retryAttempts={row.mutable ? liveState.retryAttempts : undefined}
workdir={workspaceRoot}
onOpenFileLink={onOpenFileLink}
@@ -409,6 +453,7 @@ export const TranscriptList = memo(function TranscriptList(props: TranscriptList
-1, "assistant action chrome container not found");
+ assert.ok(timestamp > chromeOpen && timestamp < chromeClose, "timestamp must live inside the action chrome");
+ assert.equal(
+ assistantFn.includes("text-muted-foreground/70"),
+ false,
+ "timestamp must not use a color/opacity modifier that can fight hover hide",
+ );
+ assert.equal(
+ (assistantFn.match(/chat-row-hover-chrome/g) ?? []).length,
+ 2,
+ "assistant reply should have one hover-chrome container, not a sibling clock",
+ );
+});
diff --git a/crates/agent-gui/test/chat/transcript-row-model.test.mjs b/crates/agent-gui/test/chat/transcript-row-model.test.mjs
index 8059abe56..bcc50265d 100644
--- a/crates/agent-gui/test/chat/transcript-row-model.test.mjs
+++ b/crates/agent-gui/test/chat/transcript-row-model.test.mjs
@@ -5,6 +5,12 @@ import { createTsModuleLoader } from "../helpers/load-ts-module.mjs";
const loader = createTsModuleLoader();
const { createTranscriptRowModel } = loader.loadModule("src/pages/chat/transcript/rowModel.ts");
+const {
+ getToolActivityCategory,
+ resolveActiveThinkingEntryKey,
+ resolveActiveWorkEntry,
+ resolveAssistantTurnLayout,
+} = loader.loadModule("@liveagent/ui/components/chat/assistant-bubble/assistantBubbleUtils.ts");
const { createLiveTranscriptStore } = loader.loadModule(
"src/lib/chat/conversation/liveTranscriptStore.ts",
);
@@ -51,12 +57,37 @@ function round(key, text) {
};
}
+function toolBlock(id, name, result) {
+ return {
+ kind: "tool",
+ item: {
+ toolCall: { type: "toolCall", id, name, arguments: {} },
+ ...(result === undefined
+ ? {}
+ : {
+ toolResult: {
+ role: "toolResult",
+ toolCallId: id,
+ isError: result === "error",
+ content: [],
+ },
+ }),
+ },
+ };
+}
+
function blockRows(snapshot) {
return snapshot.rows
.flatMap((row) => (row.kind === "assistant-activity" ? row.units : [row]))
.filter((row) => row.kind === "assistant-unit" && row.unit.kind === "block");
}
+function workTraceRows(snapshot) {
+ return snapshot.rows
+ .flatMap((row) => (row.kind === "assistant-activity" ? row.units : [row]))
+ .filter((row) => row.kind === "assistant-unit" && row.unit.kind === "work-trace");
+}
+
function footerRows(snapshot) {
return snapshot.rows
.flatMap((row) => (row.kind === "assistant-activity" ? row.units : [row]))
@@ -72,7 +103,57 @@ const idleLive = {
isSettled: false,
};
-test("settling a live turn preserves every block-unit key and adds one footer unit", () => {
+test("live work trace keeps reasoning entries with their streaming flag", () => {
+ const model = createTranscriptRowModel();
+ const history = [userItem("u1")];
+
+ const waiting = model.build(history, { ...idleLive, isSending: true });
+ assert.equal(workTraceRows(waiting)[0].unit.entries.length, 0);
+
+ const reasoning = model.build(history, {
+ ...idleLive,
+ isSending: true,
+ liveRounds: [
+ {
+ round: 1,
+ key: "r1",
+ blocks: [{ kind: "thinking", id: "thinking-1", text: "检查当前请求" }],
+ runningToolCallIds: [],
+ thinkingOpen: true,
+ },
+ ],
+ });
+ const reasoningEntries = workTraceRows(reasoning)[0].unit.entries;
+ assert.deepEqual(
+ reasoningEntries.map((entry) => entry.block.kind),
+ ["thinking"],
+ );
+ assert.equal(reasoningEntries[0].block.text, "检查当前请求");
+ assert.equal(reasoningEntries[0].thinkingOpen, true);
+ assert.equal(resolveActiveThinkingEntryKey(reasoningEntries), reasoningEntries[0].key);
+
+ const runningTool = model.build(history, {
+ ...idleLive,
+ isSending: true,
+ liveRounds: [
+ {
+ round: 1,
+ key: "r1",
+ blocks: [toolBlock("read-1", "Read")],
+ runningToolCallIds: ["read-1"],
+ thinkingOpen: false,
+ },
+ ],
+ });
+ const toolEntries = workTraceRows(runningTool)[0].unit.entries;
+ assert.deepEqual(
+ toolEntries.map((entry) => entry.block.kind),
+ ["toolGroup"],
+ );
+ assert.equal(resolveActiveThinkingEntryKey(toolEntries), null);
+});
+
+test("settling a live turn promotes trailing prose out of the work trace", () => {
const model = createTranscriptRowModel();
const history = [userItem("u1")];
@@ -82,24 +163,29 @@ test("settling a live turn preserves every block-unit key and adds one footer un
liveRounds: [{ ...round("r1", "partial"), runningToolCallIds: [], thinkingOpen: false }],
});
assert.equal(streaming.liveStartIndex, 1);
- const liveBlockKey = blockRows(streaming)[0].key;
- assert.match(liveBlockKey, /^live-turn-/);
- assert.equal(blockRows(streaming)[0].renderMode, "streaming");
+ const liveWorkKey = workTraceRows(streaming)[0].key;
+ assert.match(liveWorkKey, /^live-turn-/);
+ assert.deepEqual(
+ workTraceRows(streaming)[0].unit.entries.map((entry) => entry.block.kind),
+ ["text"],
+ );
+ assert.equal(blockRows(streaming).length, 0);
const settledHistory = [userItem("u1"), assistantItem("a1", [round("r1", "full reply")])];
const settled = model.build(settledHistory, idleLive);
assert.equal(settled.liveStartIndex, -1);
assert.equal(settled.rows.length, 2);
- assert.equal(blockRows(settled)[0].key, liveBlockKey);
+ assert.ok(blockRows(settled)[0].key.startsWith(liveWorkKey.split(":work-trace")[0]));
assert.equal(blockRows(settled)[0].renderMode, "streaming");
assert.equal(footerRows(settled).length, 1);
- assert.ok(footerRows(settled)[0].key.startsWith(liveBlockKey.split(":round:")[0]));
+ assert.ok(footerRows(settled)[0].key.startsWith(liveWorkKey.split(":work-trace")[0]));
+ assert.equal(workTraceRows(settled).length, 0);
const rebuilt = model.build(
[userItem("u1"), assistantItem("a1", [round("r1", "full reply")])],
idleLive,
);
- assert.equal(blockRows(rebuilt)[0].key, liveBlockKey);
+ assert.equal(blockRows(rebuilt)[0].key, blockRows(settled)[0].key);
});
test("persist lag: block-unit aliases still land one build later", () => {
@@ -110,23 +196,23 @@ test("persist lag: block-unit aliases still land one build later", () => {
isSending: true,
liveRounds: [{ ...round("r1", "partial"), runningToolCallIds: [], thinkingOpen: false }],
});
- const liveBlockKey = blockRows(streaming)[0].key;
+ const liveWorkKey = workTraceRows(streaming)[0].key;
const waitingForHistory = model.build(history, idleLive);
assert.equal(waitingForHistory.rows.length, 2, "the live activity must not disappear while persistence lags");
- assert.equal(blockRows(waitingForHistory)[0].key, liveBlockKey);
+ assert.equal(workTraceRows(waitingForHistory)[0].key, liveWorkKey);
assert.equal(waitingForHistory.rows.at(-1).kind, "assistant-activity");
assert.equal(waitingForHistory.rows.at(-1).live, false);
assert.deepEqual(
waitingForHistory.rows.at(-1).units.map((unit) => unit.unit.kind),
- ["block"],
- "the settling activity must not retain an empty status row",
+ ["work-trace"],
+ "the settling activity retains only the processing trace",
);
const settled = model.build(
[userItem("u1"), assistantItem("a1", [round("r1", "full reply")])],
idleLive,
);
- assert.equal(blockRows(settled)[0].key, liveBlockKey);
+ assert.ok(blockRows(settled)[0].key.startsWith(liveWorkKey.split(":work-trace")[0]));
});
test("a new turn supersedes an unresolved settle so aliases never cross turns", () => {
@@ -138,17 +224,17 @@ test("a new turn supersedes an unresolved settle so aliases never cross turns",
};
const firstStreaming = model.build([userItem("u1")], sendingLive);
- const firstLiveBlockKey = blockRows(firstStreaming).at(-1).key;
+ const firstLiveWorkKey = workTraceRows(firstStreaming).at(-1).key;
model.build([userItem("u1")], idleLive);
const secondStreaming = model.build([userItem("u1"), userItem("u2")], sendingLive);
- const secondLiveBlockKey = blockRows(secondStreaming).at(-1).key;
+ const secondLiveWorkKey = workTraceRows(secondStreaming).at(-1).key;
const delayedFirstTwin = model.build(
[userItem("u1"), assistantItem("a1", [round("r1", "reply 1")]), userItem("u2")],
sendingLive,
);
- assert.equal(blockRows(delayedFirstTwin)[0].key, firstLiveBlockKey);
- assert.equal(blockRows(delayedFirstTwin).at(-1).key, secondLiveBlockKey);
+ assert.ok(blockRows(delayedFirstTwin)[0].key.startsWith(firstLiveWorkKey.split(":work-trace")[0]));
+ assert.equal(workTraceRows(delayedFirstTwin).at(-1).key, secondLiveWorkKey);
const settled = model.build(
[
@@ -159,21 +245,22 @@ test("a new turn supersedes an unresolved settle so aliases never cross turns",
],
idleLive,
);
- assert.equal(blockRows(settled)[0].key, firstLiveBlockKey);
- assert.equal(blockRows(settled).at(-1).key, secondLiveBlockKey);
+ assert.ok(blockRows(settled)[0].key.startsWith(firstLiveWorkKey.split(":work-trace")[0]));
+ assert.ok(blockRows(settled).at(-1).key.startsWith(secondLiveWorkKey.split(":work-trace")[0]));
});
-test("draft text becomes one complete text render unit", () => {
+test("draft text stays inside the live processing trace until the turn is terminal", () => {
const model = createTranscriptRowModel();
const streaming = model.build([userItem("u1")], {
...idleLive,
isSending: true,
draftAssistantText: "hello",
});
- const liveBlock = blockRows(streaming)[0];
- assert.equal(liveBlock.unit.block.kind, "text");
- assert.equal(liveBlock.unit.block.key, "text-1");
- assert.equal(liveBlock.unit.block.text, "hello");
+ const entry = workTraceRows(streaming)[0].unit.entries[0];
+ assert.equal(entry.block.kind, "text");
+ assert.equal(entry.block.key, "text-1");
+ assert.equal(entry.block.text, "hello");
+ assert.equal(blockRows(streaming).length, 0);
});
test("settled units reuse identities across live-store emits", () => {
@@ -254,12 +341,13 @@ test("a committed twin that races persistence is re-keyed at settle", () => {
model.build([userItem("u1")], sendingLive);
const midRun = [userItem("u1"), assistantItem("a1", [round("r1", "full reply")])];
const racing = model.build(midRun, sendingLive);
- const liveBlockKey = blockRows(racing).at(-1).key;
- assert.equal(blockRows(racing)[0].key, "a1:round:r1:block:text-1");
+ const racingBlockKey = blockRows(racing).at(-1).key;
+ assert.equal(racingBlockKey, "a1:round:r1:block:text-1");
const settled = model.build(midRun, idleLive);
assert.equal(settled.rows.length, 2);
- assert.equal(blockRows(settled)[0].key, liveBlockKey);
+ assert.ok(blockRows(settled)[0].key.startsWith("live-turn-1:"));
+ assert.notEqual(blockRows(settled)[0].key, racingBlockKey);
});
test("terminal settlement removes the live tail before sending clears", () => {
@@ -272,7 +360,7 @@ test("terminal settlement removes the live tail before sending clears", () => {
{ ...round("r1", "full reply"), runningToolCallIds: [], thinkingOpen: false },
]);
const streaming = model.build(history, { ...store.getSnapshot(), isSending: true });
- const liveBlockKey = blockRows(streaming)[0].key;
+ const liveWorkKey = workTraceRows(streaming)[0].key;
store.settle();
const committed = [userItem("u1"), assistantItem("a1", [round("r1", "full reply")])];
@@ -280,7 +368,7 @@ test("terminal settlement removes the live tail before sending clears", () => {
assert.equal(finalizing.rows.length, 2);
assert.equal(finalizing.liveStartIndex, -1);
- assert.equal(blockRows(finalizing)[0].key, liveBlockKey);
+ assert.ok(blockRows(finalizing)[0].key.startsWith(liveWorkKey.split(":work-trace")[0]));
assert.equal(blockRows(finalizing)[0].live, false);
const released = model.build(committed, { ...store.getSnapshot(), isSending: false });
@@ -315,13 +403,310 @@ test("assistant rounds hide task tools while preserving grouped top-level render
},
];
const snapshot = model.build([userItem("u1"), assistantItem("a1", rounds)], idleLive);
+ assert.deepEqual(
+ workTraceRows(snapshot)[0].unit.entries.map((entry) => entry.block.kind),
+ ["text", "thinking", "toolGroup"],
+ );
+ // The trailing hosted-search result is the durable answer-layer block.
assert.deepEqual(
blockRows(snapshot).map((row) => row.unit.block.kind),
- ["text", "thinking", "toolGroup", "hostedSearchGroup"],
+ ["hostedSearchGroup"],
);
assert.equal(footerRows(snapshot).length, 1);
- assert.equal(blockRows(snapshot)[0].showAvatar, true);
- assert.ok(blockRows(snapshot).slice(1).every((row) => !row.showAvatar));
+ assert.equal(workTraceRows(snapshot)[0].showAvatar, true);
+ assert.ok(blockRows(snapshot).every((row) => !row.showAvatar));
+});
+
+test("turn layout keeps every intermediate round in one trace and exposes only final prose", () => {
+ const rounds = [
+ {
+ round: 1,
+ key: "r1",
+ blocks: [
+ { kind: "thinking", id: "thinking-1", text: "inspect" },
+ toolBlock("read-1", "Read", "ok"),
+ { kind: "text", id: "progress-1", text: "I found the relevant component." },
+ ],
+ meta: { stopReason: "toolUse" },
+ },
+ {
+ round: 2,
+ key: "r2",
+ blocks: [
+ toolBlock("edit-1", "Edit", "ok"),
+ { kind: "text", id: "answer-1", text: "Implemented and verified." },
+ ],
+ meta: { stopReason: "stop" },
+ },
+ ];
+
+ const settled = resolveAssistantTurnLayout(rounds, { live: false });
+ assert.deepEqual(
+ settled.work.map((entry) => entry.block.kind),
+ ["thinking", "toolGroup", "text", "toolGroup"],
+ );
+ assert.deepEqual(
+ settled.answer.map((entry) => entry.block.kind),
+ ["text"],
+ );
+ assert.equal(settled.answer[0].block.text, "Implemented and verified.");
+
+ const streaming = resolveAssistantTurnLayout(
+ [{ ...rounds[1], meta: undefined, runningToolCallIds: ["edit-1"] }],
+ { live: true },
+ );
+ assert.equal(streaming.answer.length, 0);
+ assert.deepEqual(
+ streaming.work.map((entry) => entry.block.kind),
+ ["toolGroup", "text"],
+ );
+});
+
+test("turn layout keeps reasoning segments as stage boundaries between tool batches", () => {
+ const layout = resolveAssistantTurnLayout(
+ [
+ {
+ round: 1,
+ key: "r1",
+ blocks: [
+ { kind: "thinking", id: "thinking-1", text: "find the entry point" },
+ toolBlock("read-1", "Read", "ok"),
+ ],
+ meta: { stopReason: "toolUse" },
+ },
+ {
+ round: 2,
+ key: "r2",
+ blocks: [
+ { kind: "thinking", id: "thinking-2", text: "follow the component tree" },
+ toolBlock("grep-1", "Grep", "ok"),
+ toolBlock("list-1", "List", "ok"),
+ { kind: "text", id: "progress-1", text: "I found the relevant UI path." },
+ ],
+ meta: { stopReason: "toolUse" },
+ },
+ {
+ round: 3,
+ key: "r3",
+ blocks: [
+ { kind: "thinking", id: "thinking-3", text: "verify the result" },
+ toolBlock("bash-1", "Bash", "ok"),
+ { kind: "text", id: "answer-1", text: "Implemented and verified." },
+ ],
+ meta: { stopReason: "stop" },
+ },
+ ],
+ { live: false },
+ );
+
+ // Reasoning stays visible; tools merge into one batch only until the next
+ // reasoning segment or progress note starts a new stage.
+ assert.deepEqual(
+ layout.work.map((entry) => entry.block.kind),
+ ["thinking", "toolGroup", "thinking", "toolGroup", "text", "thinking", "toolGroup"],
+ );
+ assert.deepEqual(
+ layout.work[1].block.items.map((item) => item.toolCall.name),
+ ["Read"],
+ );
+ assert.deepEqual(
+ layout.work[3].block.items.map((item) => item.toolCall.name),
+ ["Grep", "List"],
+ );
+ assert.deepEqual(
+ layout.work[6].block.items.map((item) => item.toolCall.name),
+ ["Bash"],
+ );
+});
+
+test("live turn keeps reasoning rows and the tool-group anchor stable across phases", () => {
+ const layout = resolveAssistantTurnLayout(
+ [
+ {
+ round: 1,
+ key: "r1",
+ thinkingOpen: true,
+ blocks: [
+ { kind: "thinking", id: "thinking-1", text: "a very long private reasoning stream" },
+ toolBlock("read-1", "Read", "ok"),
+ ],
+ },
+ ],
+ { live: true },
+ );
+
+ assert.deepEqual(
+ layout.work.map((entry) => entry.block.kind),
+ ["thinking", "toolGroup"],
+ );
+
+ const betweenTools = resolveAssistantTurnLayout(
+ [
+ {
+ round: 1,
+ key: "r1",
+ thinkingOpen: false,
+ blocks: [
+ { kind: "thinking", id: "thinking-1", text: "finished reasoning" },
+ toolBlock("read-1", "Read", "ok"),
+ ],
+ },
+ ],
+ { live: true },
+ );
+ // Both the reasoning row and the tool group keep their identities while the
+ // streaming flag flips, so neither remounts between provider phases.
+ assert.equal(betweenTools.work[0].key, layout.work[0].key);
+ assert.equal(betweenTools.work[1].key, layout.work[1].key);
+ assert.equal(resolveActiveThinkingEntryKey(layout.work), layout.work[0].key);
+ assert.equal(resolveActiveThinkingEntryKey(betweenTools.work), null);
+});
+
+test("the collapsed-trace active entry tracks the newest in-progress block", () => {
+ const liveWork = (blocks, runningToolCallIds, thinkingOpen) =>
+ resolveAssistantTurnLayout(
+ [{ round: 1, key: "r1", blocks, runningToolCallIds, thinkingOpen }],
+ { live: true },
+ ).work;
+
+ const streamingThinking = liveWork(
+ [toolBlock("read-1", "Read", "ok"), { kind: "thinking", id: "thinking-1", text: "review" }],
+ [],
+ true,
+ );
+ assert.equal(resolveActiveWorkEntry(streamingThinking)?.block.kind, "thinking");
+
+ const runningTool = liveWork(
+ [{ kind: "thinking", id: "thinking-1", text: "review" }, toolBlock("edit-1", "Edit")],
+ ["edit-1"],
+ false,
+ );
+ assert.equal(resolveActiveWorkEntry(runningTool)?.block.kind, "toolGroup");
+
+ // A streaming progress note is the active tail while it lasts.
+ const streamingText = liveWork(
+ [
+ toolBlock("read-1", "Read", "ok"),
+ { kind: "text", id: "progress-1", text: "Reading the config now." },
+ ],
+ [],
+ false,
+ );
+ assert.equal(resolveActiveWorkEntry(streamingText)?.block.kind, "text");
+
+ // A settled trailing block yields nothing: the sparkle alone covers the gap.
+ const idleGap = liveWork(
+ [{ kind: "thinking", id: "thinking-1", text: "review" }, toolBlock("edit-1", "Edit", "ok")],
+ [],
+ false,
+ );
+ assert.equal(resolveActiveWorkEntry(idleGap), null);
+});
+
+test("interactive prose and cards render outside the processing disclosure", () => {
+ const liveRound = {
+ round: 1,
+ key: "r1",
+ thinkingOpen: false,
+ runningToolCallIds: ["ask-1"],
+ blocks: [
+ { kind: "thinking", id: "thinking-1", text: "inspect" },
+ toolBlock("read-1", "Read", "ok"),
+ { kind: "text", id: "question-context", text: "I need you to choose the target." },
+ toolBlock("ask-1", "AskUserQuestion"),
+ ],
+ meta: { stopReason: "toolUse" },
+ };
+ const layout = resolveAssistantTurnLayout([liveRound], { live: true });
+
+ assert.deepEqual(
+ layout.work.map((entry) => entry.block.kind),
+ ["thinking", "toolGroup"],
+ );
+ assert.deepEqual(
+ layout.interaction.map((entry) => entry.block.kind),
+ ["text", "tool"],
+ );
+ assert.equal(layout.interaction[1].block.item.toolCall.name, "AskUserQuestion");
+ assert.equal(layout.answer.length, 0);
+
+ const model = createTranscriptRowModel();
+ const snapshot = model.build([userItem("u1")], {
+ ...idleLive,
+ isSending: true,
+ liveRounds: [liveRound],
+ });
+ assert.deepEqual(
+ workTraceRows(snapshot)[0].unit.entries.map((entry) => entry.block.kind),
+ ["thinking", "toolGroup"],
+ );
+ assert.equal(
+ workTraceRows(snapshot)[0].unit.latestToolGroupKey,
+ workTraceRows(snapshot)[0].unit.entries[1].key,
+ );
+ assert.deepEqual(
+ blockRows(snapshot).map((row) => row.unit.block.kind),
+ ["text", "tool"],
+ );
+});
+
+test("an answered interaction card flows back into the trace timeline", () => {
+ const answeredRound = {
+ round: 1,
+ key: "r1",
+ thinkingOpen: false,
+ runningToolCallIds: [],
+ blocks: [
+ { kind: "text", id: "question-context", text: "I need you to choose the target." },
+ toolBlock("ask-1", "AskUserQuestion", "ok"),
+ { kind: "thinking", id: "thinking-2", text: "the user picked one" },
+ ],
+ meta: { stopReason: "toolUse" },
+ };
+ const layout = resolveAssistantTurnLayout([answeredRound], { live: true });
+
+ // Once answered, the card is ordinary timeline activity: later reasoning
+ // and tools stack below it instead of the card trailing the whole turn.
+ assert.equal(layout.interaction.length, 0);
+ assert.deepEqual(
+ layout.work.map((entry) => entry.block.kind),
+ ["text", "tool", "thinking"],
+ );
+ assert.equal(layout.work[1].block.item.toolCall.name, "AskUserQuestion");
+});
+
+test("failed operations stay inspectable in the trace while the failure summary remains outside", () => {
+ const layout = resolveAssistantTurnLayout(
+ [
+ {
+ round: 1,
+ key: "r1",
+ blocks: [
+ toolBlock("bash-1", "Bash", "error"),
+ { kind: "text", id: "failure", text: "The command failed; no files were changed." },
+ ],
+ meta: { stopReason: "error" },
+ },
+ ],
+ { live: false },
+ );
+ assert.equal(layout.work[0].block.kind, "toolGroup");
+ assert.equal(layout.work[0].block.items[0].toolResult.isError, true);
+ assert.equal(layout.answer[0].block.kind, "text");
+});
+
+test("tool activity taxonomy exposes all seven gallery categories", () => {
+ const categories = [
+ getToolActivityCategory("Read"),
+ getToolActivityCategory("Grep"),
+ getToolActivityCategory("Edit"),
+ getToolActivityCategory("Bash"),
+ getToolActivityCategory("List"),
+ getToolActivityCategory("Agent"),
+ getToolActivityCategory("mcp_github_search_issues"),
+ ];
+ assert.deepEqual(categories, ["read", "search", "edit", "command", "list", "agent", "other"]);
+ assert.equal(new Set(categories).size, 7);
});
test("Markdown text blocks stay whole instead of being string-sliced", () => {
@@ -354,19 +739,24 @@ test("one live activity is pinned while its completed prefix units keep stable k
isSending: true,
liveRounds: [liveRound],
});
- const units = blockRows(snapshot);
- assert.equal(units.length, 3);
+ const workUnits = workTraceRows(snapshot);
+ const answerUnits = blockRows(snapshot);
+ assert.equal(workUnits.length, 1);
assert.deepEqual(
- units.map((row) => row.mutable),
- [false, false, true],
+ workUnits[0].unit.entries.map((entry) => entry.block.kind),
+ ["text", "thinking", "text"],
);
+ assert.equal(workUnits[0].mutable, true);
+ assert.equal(answerUnits.length, 0);
const activity = snapshot.rows.find((row) => row.kind === "assistant-activity");
assert.ok(activity);
assert.deepEqual(
- activity.units.filter((unit) => unit.unit.kind === "block").map((unit) => unit.key),
- units.map((unit) => unit.key),
+ activity.units
+ .filter((unit) => unit.unit.kind === "work-trace" || unit.unit.kind === "block")
+ .map((unit) => unit.key),
+ workUnits.map((unit) => unit.key),
);
- assert.equal(activity.units.at(-1).unit.kind, "status");
+ assert.equal(activity.units.at(-1).unit.kind, "work-trace");
assert.equal(snapshot.liveStartIndex, snapshot.rows.indexOf(activity));
assert.equal(snapshot.liveStartIndex, snapshot.rows.length - 1);
});
@@ -389,8 +779,8 @@ test("the active assistant turn stays one outer activity row through growth and
const firstActivity = first.rows.find((row) => row.kind === "assistant-activity");
assert.ok(firstActivity);
assert.equal(first.rows.filter((row) => row.kind === "assistant-activity").length, 1);
- const stableStatusKey = firstActivity.units.at(-1).key;
- assert.equal(firstActivity.units.at(-1).unit.kind, "status");
+ const stableWorkKey = firstActivity.units.at(-1).key;
+ assert.equal(firstActivity.units.at(-1).unit.kind, "work-trace");
const toolItem = {
toolCall: { type: "toolCall", id: "call-1", name: "Bash", arguments: { command: "pwd" } },
@@ -410,15 +800,8 @@ test("the active assistant turn stays one outer activity row through growth and
assert.ok(grownActivity);
assert.equal(grownActivity.key, firstActivity.key);
assert.equal(grown.liveStartIndex, grown.rows.indexOf(grownActivity));
- assert.equal(grownActivity.units.at(-1).key, stableStatusKey);
- assert.equal(grownActivity.units.at(-1).unit.kind, "status");
- assert.deepEqual(
- grownActivity.units
- .filter((unit) => unit.unit.kind !== "status")
- .slice(0, firstActivity.units.length - 1)
- .map((unit) => unit.key),
- firstActivity.units.filter((unit) => unit.unit.kind !== "status").map((unit) => unit.key),
- );
+ assert.equal(grownActivity.units.at(-1).key, stableWorkKey);
+ assert.equal(grownActivity.units.at(-1).unit.kind, "work-trace");
const settledHistory = [
userItem("u1"),
@@ -430,14 +813,61 @@ test("the active assistant turn stays one outer activity row through growth and
const settledActivity = settled.rows.find((row) => row.kind === "assistant-activity");
assert.ok(settledActivity);
assert.equal(settledActivity.key, firstActivity.key);
- assert.equal(settledActivity.units.at(-1).key, stableStatusKey);
+ assert.equal(settledActivity.units[0].key, stableWorkKey);
assert.equal(settledActivity.units.at(-1).unit.kind, "footer");
- assert.deepEqual(
- settledActivity.units
- .filter((unit) => unit.unit.kind === "block")
- .map((unit) => unit.key),
- grownActivity.units.filter((unit) => unit.unit.kind === "block").map((unit) => unit.key),
+ assert.equal(settledActivity.units[0].unit.kind, "work-trace");
+});
+
+test("the work trace flags a final answer only once the turn has settled with one", () => {
+ const model = createTranscriptRowModel();
+ const history = [userItem("u1")];
+ const toolItem = {
+ toolCall: { type: "toolCall", id: "call-1", name: "Bash", arguments: { command: "pwd" } },
+ toolResult: { role: "toolResult", toolCallId: "call-1", isError: false, content: [] },
+ };
+ const liveRound = {
+ round: 1,
+ key: "r1",
+ blocks: [
+ { kind: "tool", item: toolItem },
+ { kind: "text", id: "text-1", text: "进度说明" },
+ ],
+ runningToolCallIds: [],
+ thinkingOpen: false,
+ };
+
+ // Live and non-terminal: trailing prose is still a progress note inside the
+ // trace, so nothing counts as an answer yet.
+ const streaming = model.build(history, { ...idleLive, isSending: true, liveRounds: [liveRound] });
+ const liveWorkTrace = workTraceRows(streaming)[0];
+ assert.equal(liveWorkTrace.unit.hasAnswer, false);
+
+ // Settled with trailing prose: the prose becomes the answer layer and the
+ // trace is flagged so the GUI auto-collapses it, matching the WebUI.
+ const settledWithAnswer = model.build(
+ [
+ userItem("u1"),
+ assistantItem("a1", [{ round: 1, key: "r1", blocks: liveRound.blocks }]),
+ ],
+ idleLive,
);
+ const settledWorkTrace = workTraceRows(settledWithAnswer)[0];
+ assert.equal(settledWorkTrace.key, liveWorkTrace.key);
+ assert.equal(settledWorkTrace.unit.hasAnswer, true);
+ assert.equal(blockRows(settledWithAnswer).length, 1);
+
+ // Settled with tools only: no answer layer, so the trace must not be told
+ // to collapse — it is the whole reply.
+ const toolOnlyModel = createTranscriptRowModel();
+ const settledToolOnly = toolOnlyModel.build(
+ [
+ userItem("u1"),
+ assistantItem("a1", [{ round: 1, key: "r1", blocks: [{ kind: "tool", item: toolItem }] }]),
+ ],
+ idleLive,
+ );
+ assert.equal(workTraceRows(settledToolOnly)[0].unit.hasAnswer, false);
+ assert.equal(blockRows(settledToolOnly).length, 0);
});
test("one outer activity row stays stable across one hundred appended tools", () => {
@@ -473,9 +903,11 @@ test("one outer activity row stays stable across one hundred appended tools", ()
});
const activity = snapshot.rows.find((row) => row.kind === "assistant-activity");
assert.ok(activity);
- const groupedTool = activity.units.find(
- (unit) => unit.unit.kind === "block" && unit.unit.block.kind === "toolGroup",
+ const workTrace = activity.units.find((unit) => unit.unit.kind === "work-trace");
+ const groupedTool = workTrace?.unit.entries.find(
+ (entry) => entry.block.kind === "toolGroup",
);
+ assert.ok(workTrace);
assert.ok(groupedTool);
if (count === 1) {
outerKey = activity.key;
@@ -512,7 +944,7 @@ test("assistant unit keys do not depend on the history-window-relative index", (
);
});
-test("usage stays on each round tail and changed files stay on the reply footer", () => {
+test("usage metadata stays available without reserving inline panel height", () => {
const model = createTranscriptRowModel();
const usage = {
input: 10,
@@ -546,12 +978,26 @@ test("usage stays on each round tail and changed files stay on the reply footer"
{ round: 2, key: "r2", blocks: [writeTool] },
];
const snapshot = model.build([userItem("u1"), assistantItem("a1", rounds)], idleLive);
- const units = blockRows(snapshot);
+ const entries = workTraceRows(snapshot)[0].unit.entries;
assert.deepEqual(
- units.map((row) => row.unit.isRoundTail),
- [false, true, true],
+ entries.map((entry) => entry.block.kind),
+ ["text", "text", "toolGroup"],
+ );
+ assert.equal(entries[1].roundMeta.usage, usage);
+ const withoutUsage = createTranscriptRowModel().build(
+ [
+ userItem("u1"),
+ assistantItem("a1", [
+ {
+ ...rounds[0],
+ meta: undefined,
+ },
+ rounds[1],
+ ]),
+ ],
+ idleLive,
);
- assert.equal(units[1].unit.roundMeta.usage, usage);
+ assert.equal(workTraceRows(snapshot)[0].estimate, workTraceRows(withoutUsage)[0].estimate);
const footer = footerRows(snapshot)[0];
assert.equal(footer.unit.hasChangedFilesCandidate, true);
assert.equal(collectChangedFiles(footer.unit.rounds).files[0].path, "src/result.ts");
@@ -613,7 +1059,7 @@ test("a status-only live tail (idle manual compaction) closes without a stranded
const compactingTail = compacting.rows.at(-1);
assert.equal(compactingTail.kind, "assistant-activity");
assert.equal(compactingTail.units.length, 1);
- assert.equal(compactingTail.units[0].unit.kind, "status");
+ assert.equal(compactingTail.units[0].unit.kind, "work-trace");
// 压缩落定：历史被重排成检查点卡片（没有可收养的 assistant 孪生项）。
// 无内容的 live 轮必须直接收尾，不能留下冻结的 settling 状态行。
@@ -707,3 +1153,210 @@ test("a Task-only run's twin (all blocks filtered) is adopted by the live turn (
assert.equal(settledActivity.replyKey, liveTurnKey);
assert.ok(settledActivity.units.every((unit) => unit.renderMode === "streaming"));
});
+
+// ---------------------------------------------------------------------------
+// Reply continuity across a mid-reply context compaction
+
+function summaryItem(key, summaryId = key) {
+ return {
+ kind: "summary",
+ key,
+ segmentIndex: 1,
+ summaryId,
+ content: "summary body",
+ coveredMessageCount: 7,
+ coversThroughMessageId: "m-7",
+ generatedBy: { providerId: "deepseek", model: "deepseek-v4-flash" },
+ contextUsageTokens: 9000,
+ timestamp: 3,
+ collapsed: true,
+ };
+}
+
+function writeBlock(id, path) {
+ return {
+ kind: "tool",
+ item: {
+ toolCall: { type: "toolCall", id, name: "Write", arguments: { path, content: "x\n" } },
+ toolResult: {
+ role: "toolResult",
+ toolCallId: id,
+ isError: false,
+ content: [],
+ details: { path },
+ },
+ },
+ };
+}
+
+test("history: a compaction inside a reply renders one avatar, one trace with a seam, one footer", () => {
+ const model = createTranscriptRowModel();
+ const history = [
+ userItem("u1"),
+ assistantItem("a1", [{ round: 1, key: "r1", blocks: [writeBlock("w1", "a.ts")] }]),
+ summaryItem("s1"),
+ assistantItem("a2", [
+ { round: 1, key: "r1", blocks: [writeBlock("w2", "b.ts")], meta: { stopReason: "toolUse" } },
+ { ...round("r2", "all done"), meta: { stopReason: "stop" } },
+ ]),
+ ];
+ const snapshot = model.build(history, idleLive);
+
+ assert.deepEqual(
+ snapshot.rows.map((row) => row.kind),
+ ["user", "assistant-unit", "assistant-unit", "assistant-unit"],
+ "no summary row and no second reply",
+ );
+ const units = snapshot.rows.slice(1);
+ assert.deepEqual(
+ units.map((row) => row.unit.kind),
+ ["work-trace", "block", "footer"],
+ );
+ assert.deepEqual(
+ units.map((row) => row.showAvatar),
+ [true, false, false],
+ "exactly one avatar for the whole reply",
+ );
+ assert.deepEqual(
+ units[0].unit.entries.map((entry) => entry.block.kind),
+ ["toolGroup", "checkpoint", "toolGroup"],
+ "the checkpoint is a seam inside the processing trace",
+ );
+ assert.equal(units[0].unit.entries[1].block.seam.summaryId, "s1");
+ assert.equal(units[0].unit.hasAnswer, true);
+ assert.equal(units[1].unit.block.text, "all done");
+ assert.equal(units[2].unit.hasChangedFilesCandidate, true);
+ assert.deepEqual(
+ collectChangedFiles(units[2].unit.rounds).files.map((file) => file.path),
+ ["a.ts", "b.ts"],
+ "changed files aggregate across the seam",
+ );
+ assert.equal(units[2].unit.replyText, "all done");
+ assert.equal(new Set(units[0].unit.entries.map((entry) => entry.key)).size, 3, "unique keys");
+});
+
+test("history: a checkpoint that ends an exchange stays a standalone divider card", () => {
+ const model = createTranscriptRowModel();
+ const history = [
+ userItem("u1"),
+ assistantItem("a1", [round("r1", "reply")]),
+ summaryItem("s1"),
+ userItem("u2"),
+ assistantItem("a2", [round("r1", "reply 2")]),
+ ];
+ const snapshot = model.build(history, idleLive);
+ assert.deepEqual(
+ snapshot.rows.map((row) => row.kind),
+ ["user", "assistant-unit", "assistant-unit", "summary", "user", "assistant-unit", "assistant-unit"],
+ );
+});
+
+test("live: a mid-run compaction absorbs the committed half into the live reply and settles remount-free", () => {
+ const model = createTranscriptRowModel();
+ const sending = (liveRounds) => ({ ...idleLive, isSending: true, liveRounds });
+ const firstHalfRound = {
+ round: 1,
+ key: "r1",
+ blocks: [writeBlock("w1", "a.ts")],
+ runningToolCallIds: [],
+ thinkingOpen: false,
+ };
+
+ // Streaming the first half.
+ const streaming = model.build([userItem("u1")], sending([firstHalfRound]));
+ const activityKey = streaming.rows.at(-1).key;
+ const workKey = workTraceRows(streaming)[0].key;
+
+ // Compaction lands: the first half + checkpoint are committed to history and
+ // the live transcript restarts empty (rebaseConversationStateDuringRun).
+ const committed = [
+ userItem("u1"),
+ assistantItem("a1", [{ round: 1, key: "r1", blocks: firstHalfRound.blocks }]),
+ summaryItem("s1"),
+ ];
+ const rebased = model.build(committed, sending([]));
+ assert.deepEqual(
+ rebased.rows.map((row) => row.kind),
+ ["user", "assistant-activity"],
+ "the committed half and the checkpoint fold into the live activity row",
+ );
+ assert.equal(rebased.rows.at(-1).key, activityKey);
+ assert.equal(rebased.liveStartIndex, 1);
+ const rebasedTrace = workTraceRows(rebased)[0];
+ assert.equal(rebasedTrace.key, workKey);
+ assert.deepEqual(
+ rebasedTrace.unit.entries.map((entry) => entry.block.kind),
+ ["toolGroup", "checkpoint"],
+ );
+
+ // The continuation streams.
+ const continuationRound = {
+ round: 1,
+ key: "r1",
+ blocks: [writeBlock("w2", "b.ts")],
+ runningToolCallIds: ["w2"],
+ thinkingOpen: false,
+ };
+ const continuing = model.build(committed, sending([continuationRound]));
+ const continuingTrace = workTraceRows(continuing)[0];
+ assert.equal(continuingTrace.key, workKey);
+ assert.deepEqual(
+ continuingTrace.unit.entries.map((entry) => entry.block.kind),
+ ["toolGroup", "checkpoint", "toolGroup"],
+ );
+ assert.equal(
+ new Set(continuingTrace.unit.entries.map((entry) => entry.key)).size,
+ 3,
+ "both halves' r1 rounds are re-keyed apart",
+ );
+ const liveContinuationKey = continuingTrace.unit.entries[2].key;
+
+ // Settle: the persisted twin is assistant → summary → assistant.
+ const settledHistory = [
+ ...committed,
+ assistantItem("a2", [
+ { round: 1, key: "r1", blocks: continuationRound.blocks, meta: { stopReason: "toolUse" } },
+ { ...round("r2", "all done"), meta: { stopReason: "stop" } },
+ ]),
+ ];
+ const settled = model.build(settledHistory, idleLive);
+ assert.deepEqual(
+ settled.rows.map((row) => row.kind),
+ ["user", "assistant-activity"],
+ "the settled reply is adopted as one activity row",
+ );
+ assert.equal(settled.rows.at(-1).key, activityKey, "zero remount: same activity key");
+ const settledTrace = workTraceRows(settled)[0];
+ assert.equal(settledTrace.key, workKey);
+ assert.equal(
+ settledTrace.unit.entries[2].key,
+ liveContinuationKey,
+ "the continuation entry keeps the key it streamed under",
+ );
+ assert.deepEqual(
+ settled.rows.at(-1).units.map((unit) => unit.unit.kind),
+ ["work-trace", "block", "footer"],
+ );
+ assert.deepEqual(
+ settled.rows.at(-1).units.map((unit) => unit.showAvatar),
+ [true, false, false],
+ );
+});
+
+test("live: an idle manual compaction still settles into a standalone checkpoint card", () => {
+ const model = createTranscriptRowModel();
+ const history = [userItem("u1"), assistantItem("a1", [round("r1", "reply")])];
+ model.build(history, { ...idleLive, isCompactionRunning: true });
+ const withCheckpoint = [...history, summaryItem("s1")];
+ const running = model.build(withCheckpoint, { ...idleLive, isCompactionRunning: true });
+ assert.equal(
+ running.rows.filter((row) => row.kind === "summary").length,
+ 1,
+ "no reply content ⇒ the checkpoint is not absorbed",
+ );
+ const settled = model.build(withCheckpoint, idleLive);
+ assert.deepEqual(
+ settled.rows.map((row) => row.kind),
+ ["user", "assistant-unit", "assistant-unit", "summary"],
+ );
+});
diff --git a/crates/agent-gui/test/chat/user-message-content.test.mjs b/crates/agent-gui/test/chat/user-message-content.test.mjs
index 0b673b284..b12886d94 100644
--- a/crates/agent-gui/test/chat/user-message-content.test.mjs
+++ b/crates/agent-gui/test/chat/user-message-content.test.mjs
@@ -245,11 +245,22 @@ test("trailing newlines render a visual line anchor without changing DOM text",
);
assert.equal(
html,
- 'alpha\n',
+ 'alpha\n',
);
assert.doesNotMatch(html, /\u200b/i);
});
+test("plain user message text is wrapped in an inline selection boundary", () => {
+ const html = renderToStaticMarkup(
+ jsxRuntime.jsx(renderedUserMessageContent.UserMessageContent, {
+ text: "只用 Edit 工具把第 1000 行改成 line 1000 changed，不要重写整个文件。",
+ }),
+ );
+
+ assert.match(html, /^/);
+ assert.match(html, /不要重写整个文件。<\/span>$/);
+});
+
test("code mention tokens round trip through transcript tokenization", () => {
const reference = mentionReferences.createCodeMentionReference({
path: "src/pages/ChatPage.tsx",
diff --git a/crates/agent-gui/test/chat/workbench-narrow-pane-transcript.test.mjs b/crates/agent-gui/test/chat/workbench-narrow-pane-transcript.test.mjs
index ecd9c8d68..3190d97e4 100644
--- a/crates/agent-gui/test/chat/workbench-narrow-pane-transcript.test.mjs
+++ b/crates/agent-gui/test/chat/workbench-narrow-pane-transcript.test.mjs
@@ -24,6 +24,26 @@ test("desktop transcript root is a container for pane-relative degradation", ()
assert.match(rootClass[1], /(^| )@container( |$)/);
});
+test("composer derives its body-aligned width from the live transcript width", () => {
+ const surfaceSource = read("../../src/pages/chat/surfaces/ConversationSurface.tsx");
+ const paneHostSource = read("../../src/pages/chat/surfaces/ConversationPaneHost.tsx");
+ const widthControlsSource = read(
+ "../../../agent-ui/src/pages/chat/transcript/TranscriptWidthControls.tsx",
+ );
+ const composerSource = read("../../../agent-ui/src/pages/chat/ChatComposerBar.tsx");
+
+ assert.match(surfaceSource, /data-chat-width-owner=""/);
+ assert.match(surfaceSource, /\[CHAT_TRANSCRIPT_WIDTH_CSS_VAR\]: `\$\{contentWidth\}px`/);
+ assert.match(paneHostSource, /contentWidth=\{transcript\.contentWidth\}/);
+ assert.match(widthControlsSource, /closest\("\[data-chat-width-owner\]"\)/);
+ assert.match(
+ composerSource,
+ /max-w-\[calc\(var\(--chat-transcript-content-width,768px\)-4\.75rem\)\]/,
+ );
+ assert.match(composerSource, /w-\[calc\(100%-2\.25rem\)\]/);
+ assert.match(composerSource, /translate-x-\[18px\]/);
+});
+
test("FloorNavRail clamps its panel to the container, not the viewport", () => {
const source = read("../../../agent-ui/src/pages/chat/transcript/FloorNavRail.tsx");
assert.match(source, /max-w-\[calc\(100cqw-2rem\)\]/);
diff --git a/crates/agent-gui/test/chat/workbench-window-session.test.mjs b/crates/agent-gui/test/chat/workbench-window-session.test.mjs
index c4fdc3a8f..1fe425a83 100644
--- a/crates/agent-gui/test/chat/workbench-window-session.test.mjs
+++ b/crates/agent-gui/test/chat/workbench-window-session.test.mjs
@@ -92,6 +92,11 @@ test("layout validation reports a terminal cwd outside its project", () => {
test("startup paints theme and shell before progressively hydrating pane contents", () => {
const htmlSource = readFileSync(new URL("../../index.html", import.meta.url), "utf8");
const appSource = readFileSync(new URL("../../src/App.tsx", import.meta.url), "utf8");
+ const appStyles = readFileSync(new URL("../../src/index.css", import.meta.url), "utf8");
+ const paneLoadingSource = readFileSync(
+ new URL("../../src/components/app/PaneLoadingSkeleton.tsx", import.meta.url),
+ "utf8",
+ );
const tauriConfigSource = readFileSync(
new URL("../../src-tauri/tauri.conf.json", import.meta.url),
"utf8",
@@ -212,6 +217,9 @@ test("startup paints theme and shell before progressively hydrating pane content
assert.match(settingsDbSource, /SCHEMA_INITIALIZED\.get\(\)\.is_none\(\)/);
assert.match(transcriptLoadingSource, / onOpenFileLink(parsed)}
@@ -354,7 +354,7 @@ function MarkdownReadOnlyLink(props: MarkdownAnchorFallbackProps) {
? href.trim()
: undefined;
return (
-
+
{children}
);
@@ -376,7 +376,7 @@ function MarkdownExternalLink(props: MarkdownAnchorFallbackProps) {
(items, {
+ classify: classifyTimelineItem,
+ roundsOf: (item) => (item.kind === "assistant" ? item.rounds : []),
+ seamOf: (item) => item as RenderSummaryCard,
+ rekeyParts: true,
+ });
+}
+
+/**
+ * The committed prefix of the reply that is still streaming. A compaction
+ * that fires mid-run commits the first half of the reply plus its checkpoint
+ * into history (`assistant → summary`) and restarts the live transcript for
+ * the continuation. Those trailing items belong to the live reply: they are
+ * absorbed into the live activity row so one avatar / one work trace / one
+ * footer covers the whole reply, and the checkpoint renders as a seam inside
+ * it instead of a card between two half-replies.
+ *
+ * Returns the index of the first absorbed item, or -1 when nothing should be
+ * absorbed: the trailing chain must end with a checkpoint (a trailing
+ * assistant item is the persisted twin of a settled reply — see
+ * adoptSettledTwin) and must either contain an assistant part or precede a
+ * live continuation that already has content (an idle manual compaction
+ * produces a checkpoint with neither, and that one is an exchange divider).
+ */
+function findLiveReplyLeader(
+ historyItems: readonly RenderTimelineItem[],
+ historyLenAtStart: number,
+ liveHasContent: boolean,
+): number {
+ const last = historyItems[historyItems.length - 1];
+ if (!last || last.kind !== "summary" || historyItems.length - 1 < historyLenAtStart) return -1;
+ let leader = -1;
+ let firstAssistant = -1;
+ for (let index = historyItems.length - 1; index >= historyLenAtStart; index -= 1) {
+ const item = historyItems[index];
+ if (!item || item.kind === "user") break;
+ leader = index;
+ if (item.kind === "assistant") firstAssistant = index;
+ }
+ if (firstAssistant !== -1) return firstAssistant;
+ return liveHasContent ? leader : -1;
+}
+
+/**
+ * Rounds of the live reply: the absorbed committed prefix (re-keyed exactly
+ * as the persisted twin will be) followed by the streaming continuation,
+ * re-keyed as the next part so settle lands on identical unit keys.
+ */
+function buildLiveReplyRounds(
+ absorbed: readonly RenderTimelineItem[],
+ tailRounds: readonly (UiRound | LiveRound)[],
+): ReplyRound[] {
+ if (absorbed.length === 0) return tailRounds as ReplyRound[];
+ const prefix = assembleHistoryReply(absorbed);
+ return [...prefix.rounds, ...rekeyContinuationRounds(tailRounds, prefix.partCount)];
+}
+
export type SummaryRow = {
kind: "summary";
key: string;
@@ -56,23 +137,28 @@ export type AssistantPlaceholderRenderUnit = {
showFallbackStatus: boolean;
};
+export type AssistantWorkTraceRenderUnit = {
+ kind: "work-trace";
+ durationMs?: number;
+ entries: AssistantTurnLayoutEntry[];
+ latestToolGroupKey: string | null;
+ /** 回合已有总结文案（answer 层非空）：落定后工作区块可自动折叠成一行。 */
+ hasAnswer: boolean;
+};
+
export type AssistantFooterRenderUnit = {
kind: "footer";
timestamp?: number;
replyText: string;
retryTarget: RenderUserMessage | null;
- rounds: (UiRound | LiveRound)[];
+ rounds: ReplyRound[];
hasChangedFilesCandidate: boolean;
};
-export type AssistantStatusRenderUnit = {
- kind: "status";
-};
-
export type AssistantRenderUnit =
| AssistantBlockRenderUnit
+ | AssistantWorkTraceRenderUnit
| AssistantPlaceholderRenderUnit
- | AssistantStatusRenderUnit
| AssistantFooterRenderUnit;
export type AssistantUnitRow = {
@@ -119,20 +205,18 @@ export type LiveTailInput = LiveTranscriptState & {
isCompactionRunning?: boolean;
};
-function buildReplyText(rounds: (UiRound | LiveRound)[]): string {
+function buildReplyText(rounds: readonly ReplyRound[]): string {
+ const finalAnswer = resolveAssistantTurnLayout(rounds, { live: false })
+ .answer.flatMap((entry) => (entry.block.kind === "text" ? [entry.block.text.trim()] : []))
+ .filter((text) => text.length > 0)
+ .join("\n\n");
+ if (finalAnswer) return finalAnswer;
return rounds
.map((round) => getRoundText(round).trim())
.filter((text) => text.length > 0)
.join("\n\n");
}
-function isVisibleGroupedBlock(block: GroupedRoundBlock) {
- if (block.kind === "text" || block.kind === "thinking") {
- return block.text.trim().length > 0;
- }
- return !isTaskToolBlock(block);
-}
-
function hasRunningToolCall(blocks: GroupedRoundBlock[], runningToolCallIds: string[]) {
if (runningToolCallIds.length === 0) return false;
const runningIds = new Set(runningToolCallIds);
@@ -149,7 +233,7 @@ function hasRunningToolCall(blocks: GroupedRoundBlock[], runningToolCallIds: str
});
}
-function hasChangedFilesCandidate(rounds: (UiRound | LiveRound)[]) {
+function hasChangedFilesCandidate(rounds: readonly ReplyRound[]) {
return rounds.some((round) =>
round.blocks.some(
(block) =>
@@ -162,7 +246,7 @@ function hasChangedFilesCandidate(rounds: (UiRound | LiveRound)[]) {
);
}
-function measureBlockUnit(block: GroupedRoundBlock, hasUsage: boolean) {
+function measureBlockUnit(block: GroupedRoundBlock) {
let estimate: number;
let renderCost: number;
if (block.kind === "text") {
@@ -195,12 +279,15 @@ function measureBlockUnit(block: GroupedRoundBlock, hasUsage: boolean) {
estimate = 96;
renderCost =
block.kind === "hostedSearchGroup" ? Math.min(6, 1 + Math.ceil(block.items.length / 3)) : 2;
+ } else if (block.kind === "checkpoint") {
+ estimate = 36;
+ renderCost = 1;
} else {
estimate = 72;
renderCost = 2;
}
return {
- estimate: Math.max(36, estimate) + (hasUsage ? 112 : 0),
+ estimate: Math.max(36, estimate),
renderCost,
};
}
@@ -223,6 +310,9 @@ function sameGroupedBlock(previous: GroupedRoundBlock, next: GroupedRoundBlock)
if (previous.kind === "hostedSearch") {
return next.kind === "hostedSearch" && previous.item === next.item;
}
+ if (previous.kind === "checkpoint") {
+ return next.kind === "checkpoint" && previous.seam === next.seam;
+ }
if (previous.kind === "toolGroup") {
return (
next.kind === "toolGroup" &&
@@ -250,11 +340,34 @@ function canReuseLiveUnit(previous: AssistantUnitRow, next: AssistantUnitRow) {
previous.renderMode !== next.renderMode ||
previous.compacted !== next.compacted ||
previous.showAvatar !== next.showAvatar ||
- previous.unit.kind !== "block" ||
- next.unit.kind !== "block"
+ previous.unit.kind !== next.unit.kind
) {
return false;
}
+
+ if (previous.unit.kind === "work-trace" && next.unit.kind === "work-trace") {
+ const nextWorkTrace = next.unit;
+ return (
+ previous.unit.entries.length === nextWorkTrace.entries.length &&
+ previous.unit.durationMs === nextWorkTrace.durationMs &&
+ previous.unit.entries.every((entry, index) => {
+ const nextEntry = nextWorkTrace.entries[index];
+ return Boolean(
+ nextEntry &&
+ entry.key === nextEntry.key &&
+ entry.roundKey === nextEntry.roundKey &&
+ entry.roundMeta === nextEntry.roundMeta &&
+ entry.thinkingOpen === nextEntry.thinkingOpen &&
+ sameStringArray(entry.runningToolCallIds, nextEntry.runningToolCallIds) &&
+ sameGroupedBlock(entry.block, nextEntry.block),
+ );
+ }) &&
+ previous.unit.latestToolGroupKey === nextWorkTrace.latestToolGroupKey &&
+ previous.unit.hasAnswer === nextWorkTrace.hasAnswer
+ );
+ }
+
+ if (previous.unit.kind !== "block" || next.unit.kind !== "block") return false;
return (
sameGroupedBlock(previous.unit.block, next.unit.block) &&
previous.unit.roundMeta === next.unit.roundMeta &&
@@ -297,7 +410,7 @@ type BuildAssistantUnitsInput = {
replyKey: string;
live: boolean;
renderMode: "streaming" | "static";
- rounds: (UiRound | LiveRound)[];
+ rounds: readonly ReplyRound[];
timestamp?: number;
compacted: boolean;
replyText: string;
@@ -320,49 +433,86 @@ function buildAssistantUnits(input: BuildAssistantUnitsInput): AssistantUnitRow[
liveUnitCache,
} = input;
const rows: AssistantUnitRow[] = [];
-
- rounds.forEach((round) => {
- const groupedBlocks = groupRoundBlocks(round.blocks).filter(isVisibleGroupedBlock);
- const runningToolCallIds = "runningToolCallIds" in round ? round.runningToolCallIds : [];
- const roundHasRunningToolCall = hasRunningToolCall(groupedBlocks, runningToolCallIds);
- let latestThinkingKey: string | null = null;
- for (let blockIndex = groupedBlocks.length - 1; blockIndex >= 0; blockIndex -= 1) {
- const block = groupedBlocks[blockIndex];
- if (block?.kind === "thinking") {
- latestThinkingKey = block.key;
- break;
- }
+ const layout = resolveAssistantTurnLayout(rounds, { live });
+ const visibleEntries = [...layout.work, ...layout.interaction, ...layout.answer];
+ const roundTailKeys = new Map();
+ for (const entry of visibleEntries) roundTailKeys.set(entry.roundKey, entry.key);
+
+ let latestToolGroupKey: string | null = null;
+ for (let index = layout.work.length - 1; index >= 0; index -= 1) {
+ const entry = layout.work[index];
+ if (entry?.block.kind === "toolGroup") {
+ latestToolGroupKey = entry.key;
+ break;
}
+ }
- groupedBlocks.forEach((block, blockIndex) => {
- const isRoundTail = blockIndex === groupedBlocks.length - 1;
- const measurement = measureBlockUnit(block, Boolean(isRoundTail && round.meta?.usage));
- rows.push({
- kind: "assistant-unit",
- key: `${replyKey}:round:${round.key}:block:${block.key}`,
- replyKey,
- estimate: measurement.estimate,
- renderCost: measurement.renderCost,
- gapAfter: ASSISTANT_UNIT_GAP_PX,
- anchorUserKey,
- live,
- mutable: false,
- renderMode,
- compacted,
- showAvatar: rows.length === 0,
- unit: {
- kind: "block",
- block,
- roundMeta: round.meta,
- runningToolCallIds,
- thinkingOpen: "thinkingOpen" in round ? round.thinkingOpen : false,
- isLatestThinking: block.kind === "thinking" && block.key === latestThinkingKey,
- isRoundTail,
- hasRunningToolCall: roundHasRunningToolCall,
- },
- });
+ if (layout.work.length > 0 || live) {
+ const workMeasurements = layout.work.map((entry) => measureBlockUnit(entry.block));
+ rows.push({
+ kind: "assistant-unit",
+ key: `${replyKey}:work-trace`,
+ replyKey,
+ estimate: live
+ ? Math.min(
+ 480,
+ 42 + workMeasurements.reduce((total, measurement) => total + measurement.estimate, 0),
+ )
+ : 42,
+ renderCost: Math.min(
+ 16,
+ Math.max(
+ 1,
+ workMeasurements.reduce((total, measurement) => total + measurement.renderCost, 0),
+ ),
+ ),
+ gapAfter: ASSISTANT_UNIT_GAP_PX,
+ anchorUserKey,
+ live,
+ mutable: false,
+ renderMode,
+ compacted,
+ showAvatar: true,
+ unit: {
+ kind: "work-trace",
+ durationMs:
+ !live && timestamp !== undefined && retryTarget?.timestamp !== undefined
+ ? Math.max(0, timestamp - retryTarget.timestamp)
+ : undefined,
+ entries: layout.work,
+ latestToolGroupKey,
+ hasAnswer: layout.answer.length > 0,
+ },
});
- });
+ }
+
+ for (const entry of [...layout.interaction, ...layout.answer]) {
+ const measurement = measureBlockUnit(entry.block);
+ rows.push({
+ kind: "assistant-unit",
+ key: `${replyKey}:round:${entry.roundKey}:block:${entry.block.key}`,
+ replyKey,
+ estimate: measurement.estimate,
+ renderCost: measurement.renderCost,
+ gapAfter: ASSISTANT_UNIT_GAP_PX,
+ anchorUserKey,
+ live,
+ mutable: false,
+ renderMode,
+ compacted,
+ showAvatar: rows.length === 0,
+ unit: {
+ kind: "block",
+ block: entry.block,
+ roundMeta: entry.roundMeta,
+ runningToolCallIds: entry.runningToolCallIds,
+ thinkingOpen: entry.thinkingOpen,
+ isLatestThinking: false,
+ isRoundTail: roundTailKeys.get(entry.roundKey) === entry.key,
+ hasRunningToolCall: hasRunningToolCall([entry.block], entry.runningToolCallIds),
+ },
+ });
+ }
if (live) {
const contentTailIndex = rows.length - 1;
@@ -374,21 +524,6 @@ function buildAssistantUnits(input: BuildAssistantUnitsInput): AssistantUnitRow[
mutable: true,
};
}
- rows.push({
- kind: "assistant-unit",
- key: `${replyKey}:footer`,
- replyKey,
- estimate: rows.length === 0 ? 64 : 32,
- renderCost: 1,
- gapAfter: TRANSCRIPT_ROW_GAP_PX,
- anchorUserKey,
- live: true,
- mutable: true,
- renderMode,
- compacted,
- showAvatar: rows.length === 0,
- unit: { kind: "status" },
- });
} else {
const changedFilesCandidate = hasChangedFilesCandidate(rounds);
const contentTailIndex = rows.length - 1;
@@ -417,7 +552,7 @@ function buildAssistantUnits(input: BuildAssistantUnitsInput): AssistantUnitRow[
timestamp,
replyText,
retryTarget,
- rounds,
+ rounds: rounds as ReplyRound[],
hasChangedFilesCandidate: changedFilesCandidate,
},
});
@@ -449,11 +584,16 @@ export type TranscriptRowModel = {
};
export function createTranscriptRowModel(options?: TranscriptRowModelOptions): TranscriptRowModel {
+ // Keyed by the FIRST item of a render group: a plain user/summary item, or
+ // the leading assistant part of a (possibly stitched) reply. `members`
+ // records every item the cached rows were built from so a group that grows
+ // (a checkpoint + continuation appended to the trailing reply) rebuilds.
let rowCache = new WeakMap<
RenderTimelineItem,
{
anchorUserKey: string | null;
retryTarget: RenderUserMessage | null;
+ members: readonly RenderTimelineItem[];
rows: TranscriptRow[];
}
>();
@@ -502,75 +642,128 @@ export function createTranscriptRowModel(options?: TranscriptRowModelOptions): T
return draftRoundCache.round;
};
+ // The persisted twin of a live turn is the whole reply it streamed. When
+ // that reply compacted mid-way it is persisted as several items
+ // (assistant → summary → assistant …); the origin alias attaches to the
+ // LEADING assistant part, because that item keys the stitched group. Walk
+ // back from the newest assistant item over assistant/summary items only —
+ // a user item ends the reply.
+ const findReplyLeader = (
+ historyItems: RenderTimelineItem[],
+ index: number,
+ lowerBound: number,
+ ) => {
+ let leader = index;
+ for (let cursor = index - 1; cursor >= lowerBound; cursor -= 1) {
+ const item = historyItems[cursor];
+ if (!item || item.kind === "user") break;
+ if (item.kind === "assistant") leader = cursor;
+ }
+ return leader;
+ };
+
const adoptSettledTwin = (
historyItems: RenderTimelineItem[],
turn: { replyKey: string; historyLenAtStart: number },
) => {
for (let index = historyItems.length - 1; index >= turn.historyLenAtStart; index -= 1) {
const item = historyItems[index];
- if (item?.kind === "assistant" && !streamOrigins.has(item.key)) {
- streamOrigins.set(item.key, turn.replyKey);
- if (rowCache.has(item)) {
- rowCache.delete(item);
- historyRowsCache = null;
- }
- return true;
+ if (item?.kind !== "assistant") continue;
+ const leader = historyItems[findReplyLeader(historyItems, index, turn.historyLenAtStart)];
+ if (!leader || leader.kind !== "assistant") return false;
+ if (streamOrigins.has(leader.key)) return false;
+ streamOrigins.set(leader.key, turn.replyKey);
+ if (rowCache.has(leader)) {
+ rowCache.delete(leader);
+ historyRowsCache = null;
}
+ return true;
}
return false;
};
+ const sameMembers = (
+ previous: readonly RenderTimelineItem[],
+ next: readonly RenderTimelineItem[],
+ ) => previous.length === next.length && previous.every((item, index) => item === next[index]);
+
const buildHistoryRows = (
- item: RenderTimelineItem,
+ members: readonly RenderTimelineItem[],
retryTarget: RenderUserMessage | null,
): TranscriptRow[] => {
- const anchorUserKey = item.kind === "user" ? item.key : (retryTarget?.key ?? null);
- const cached = rowCache.get(item);
- if (cached && cached.anchorUserKey === anchorUserKey && cached.retryTarget === retryTarget) {
+ const leader = members[0];
+ if (!leader) return [];
+ const anchorUserKey = leader.kind === "user" ? leader.key : (retryTarget?.key ?? null);
+ const cached = rowCache.get(leader);
+ if (
+ cached &&
+ cached.anchorUserKey === anchorUserKey &&
+ cached.retryTarget === retryTarget &&
+ sameMembers(cached.members, members)
+ ) {
return cached.rows;
}
let rows: TranscriptRow[];
- if (item.kind === "summary") {
+ if (leader.kind === "summary") {
rows = [
{
kind: "summary",
- key: item.key,
+ key: leader.key,
estimate: CHECKPOINT_ROW_ESTIMATE_PX,
renderCost: 1,
gapAfter: TRANSCRIPT_ROW_GAP_PX,
anchorUserKey,
- item,
+ item: leader,
},
];
- } else if (item.kind === "user") {
+ } else if (leader.kind === "user") {
rows = [
{
kind: "user",
- key: item.key,
- estimate: estimateUserRowHeight(item.text.length, item.attachments.length),
- renderCost: Math.min(4, 1 + item.attachments.length),
+ key: leader.key,
+ estimate: estimateUserRowHeight(leader.text.length, leader.attachments.length),
+ renderCost: Math.min(4, 1 + leader.attachments.length),
gapAfter: TRANSCRIPT_ROW_GAP_PX,
- anchorUserKey: item.key,
- item,
+ anchorUserKey: leader.key,
+ item: leader,
},
];
} else {
- const originKey = streamOrigins.get(item.key);
+ const originKey = streamOrigins.get(leader.key);
+ const reply = assembleHistoryReply(members);
+ const lastPart = members.reduce(
+ (last, item) => (item.kind === "assistant" ? item : last),
+ null,
+ );
const assistantUnits = buildAssistantUnits({
- replyKey: originKey ?? item.key,
+ replyKey: originKey ?? leader.key,
live: false,
renderMode: originKey ? "streaming" : "static",
- rounds: item.rounds,
- timestamp: item.timestamp,
- compacted: item.isFromCompactedSegment,
- replyText: buildReplyText(item.rounds),
+ rounds: reply.rounds,
+ timestamp: lastPart?.timestamp ?? leader.timestamp,
+ compacted: members.every((item) => item.kind === "summary" || item.isFromCompactedSegment),
+ replyText: buildReplyText(reply.rounds),
retryTarget,
anchorUserKey,
});
rows = originKey ? [buildAssistantActivityRow(originKey, assistantUnits)] : assistantUnits;
}
- rowCache.set(item, { anchorUserKey, retryTarget, rows });
+ rowCache.set(leader, { anchorUserKey, retryTarget, members, rows });
+ return rows;
+ };
+
+ // History rows for items[0, end): the same grouped/cached path as the full
+ // build, so the prefix shares row identities with the complete history.
+ const buildHistoryRowsUntil = (historyItems: RenderTimelineItem[], end: number) => {
+ const prefixItems = historyItems.slice(0, end);
+ const rows: TranscriptRow[] = [];
+ let retryTarget: RenderUserMessage | null = null;
+ for (const group of stitchCompactedReplies(prefixItems, classifyTimelineItem)) {
+ const members = group.kind === "reply" ? group.items : [group.item];
+ rows.push(...buildHistoryRows(members, retryTarget));
+ if (group.kind === "single" && group.item.kind === "user") retryTarget = group.item;
+ }
return rows;
};
@@ -616,7 +809,13 @@ export function createTranscriptRowModel(options?: TranscriptRowModelOptions): T
const adopted = adoptSettledTwin(historyItems, activeTurn);
if (adopted) {
activeTurn = null;
- } else if (activeTurn.lastLiveUnits.some((row) => row.unit.kind === "block")) {
+ } else if (
+ activeTurn.lastLiveUnits.some(
+ (row) =>
+ row.unit.kind === "block" ||
+ (row.unit.kind === "work-trace" && row.unit.entries.length > 0),
+ )
+ ) {
// 产出过内容 ⟹ 真实回复必将持久化：孪生行尚未落库（persist 滞后）时
// 登记 pendingSettle，待其落库后按同一 replyKey 认领（零 remount）。
pendingSettle = {
@@ -650,11 +849,12 @@ export function createTranscriptRowModel(options?: TranscriptRowModelOptions): T
} else {
historyRows = [];
let retryTarget: RenderUserMessage | null = null;
- for (const item of historyItems) {
- const itemRows = buildHistoryRows(item, retryTarget);
+ for (const group of stitchCompactedReplies(historyItems, classifyTimelineItem)) {
+ const members = group.kind === "reply" ? group.items : [group.item];
+ const itemRows = buildHistoryRows(members, retryTarget);
historyRows.push(...itemRows);
for (const row of itemRows) trackBirth(row.key);
- if (item.kind === "user") retryTarget = item;
+ if (group.kind === "single" && group.item.kind === "user") retryTarget = group.item;
}
historyRowsCache = { items: historyItems, rows: historyRows };
}
@@ -662,14 +862,31 @@ export function createTranscriptRowModel(options?: TranscriptRowModelOptions): T
let rows = historyRows;
let liveStartIndex = -1;
if ((liveTailVisible || pendingSettle) && activeTurn) {
+ // 运行中压缩：前半段回复已经作为历史项落库（assistant → summary），后半段
+ // 仍在流式。把从本 turn 起点开始的尾部历史项（只允许 assistant/summary，
+ // 遇 user 即止）并入 live 回合——前半段的轮次 + 检查点缝合轮 + 实时轮次
+ // 组成一条连续回复，只渲染一个头像 / 一个工作区块。这些历史项在本次
+ // 构建里不再单独出行；落定后由 adoptSettledTwin 以同一 replyKey 认领整条
+ // 缝合回复（首段 assistant 项为 leader），单元 key 逐一对上、零 remount。
+ const liveHasContent = live.liveRounds.length > 0 || Boolean(live.draftAssistantText);
+ const absorbedLeaderIndex = liveTailVisible
+ ? findLiveReplyLeader(historyItems, activeTurn.historyLenAtStart, liveHasContent)
+ : -1;
+ const absorbed = absorbedLeaderIndex === -1 ? [] : historyItems.slice(absorbedLeaderIndex);
+ const visibleHistoryRows =
+ absorbed.length > 0
+ ? buildHistoryRowsUntil(historyItems, absorbedLeaderIndex)
+ : historyRows;
+
let liveUnits = activeTurn.lastLiveUnits;
if (liveTailVisible) {
- const rounds: (UiRound | LiveRound)[] =
+ const tailRounds: readonly (UiRound | LiveRound)[] =
live.liveRounds.length > 0
? live.liveRounds
: live.draftAssistantText
? [draftRound(live.draftAssistantText)]
: [];
+ const rounds = buildLiveReplyRounds(absorbed, tailRounds);
liveUnits = buildAssistantUnits({
replyKey: activeTurn.replyKey,
live: true,
@@ -678,25 +895,23 @@ export function createTranscriptRowModel(options?: TranscriptRowModelOptions): T
compacted: false,
replyText: "",
retryTarget: null,
- anchorUserKey: historyRows.at(-1)?.anchorUserKey ?? null,
+ anchorUserKey: visibleHistoryRows.at(-1)?.anchorUserKey ?? null,
liveUnitCache: activeTurn.liveUnitCache,
});
activeTurn.lastLiveUnits = liveUnits;
activeTurn.settlingUnits = null;
} else {
if (!activeTurn.settlingUnits) {
- activeTurn.settlingUnits = activeTurn.lastLiveUnits
- .filter((row) => row.unit.kind !== "status")
- .map((row) => ({
- ...row,
- live: false,
- mutable: false,
- }));
+ activeTurn.settlingUnits = activeTurn.lastLiveUnits.map((row) => ({
+ ...row,
+ live: false,
+ mutable: false,
+ }));
}
liveUnits = activeTurn.settlingUnits;
}
const liveActivity = buildAssistantActivityRow(activeTurn.replyKey, liveUnits);
- rows = [...historyRows, liveActivity];
+ rows = [...visibleHistoryRows, liveActivity];
liveStartIndex = rows.length - 1;
trackBirth(liveActivity.key);
}
diff --git a/crates/agent-gui/src/pages/chat/transcript/transcriptTypes.ts b/crates/agent-gui/src/pages/chat/transcript/transcriptTypes.ts
index 5ed37eed7..b3ada936c 100644
--- a/crates/agent-gui/src/pages/chat/transcript/transcriptTypes.ts
+++ b/crates/agent-gui/src/pages/chat/transcript/transcriptTypes.ts
@@ -24,12 +24,20 @@ export type ChatTranscriptProps = {
onLoadEarlierHistory: () => Promise;
isHistorySwitching: boolean;
isSending: boolean;
- isAgentMode: boolean;
showUsage: boolean;
usageContextWindow?: number;
liveTranscriptStore: LiveTranscriptStore;
isCompactionRunning: boolean;
bottomReservePx?: number;
+ // Composer chrome floating above the reserve line (queue panel, task
+ // progress pill). Deliberately excluded from bottomReservePx so the
+ // transcript reserve stays put; overlays anchored above the composer must
+ // clear it or they end up hidden underneath.
+ floatingOverhangPx?: number;
+ // Horizontal offset of the composer card's center from the pane center
+ // (positive = right). The desktop card is shifted to align with the
+ // assistant message body; overlays centered above it must follow.
+ composerCenterOffsetPx?: number;
contentWidth: number;
onContentWidthChange: (width: number) => void;
onOpenFileLink?: (link: ChatFileLink) => void;
diff --git a/crates/agent-gui/test/chat/activity-disclosure-state.test.mjs b/crates/agent-gui/test/chat/activity-disclosure-state.test.mjs
new file mode 100644
index 000000000..9ac1f6fd5
--- /dev/null
+++ b/crates/agent-gui/test/chat/activity-disclosure-state.test.mjs
@@ -0,0 +1,410 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { createDomTestEnv } from "../helpers/dom-test-env.mjs";
+
+const EmptyIcon = () => null;
+const env = await createDomTestEnv({
+ mocks: {
+ "@liveagent/adapters/assistantBubble": { retainRunningToolContent: false },
+ "@liveagent/ui/components/chat/AssistantStatus": {
+ AssistantStatus: ({ children }) => children,
+ },
+ "@liveagent/ui/components/chat/LazyCollapse": {
+ LazyCollapse: ({ children, open }) => (open ? children() : null),
+ },
+ "@liveagent/ui/components/chat/assistant-bubble/ToolCallItem": {
+ MemoToolCallItem: () => null,
+ areToolTraceItemsEqual: () => false,
+ },
+ "@liveagent/ui/components/chat/assistant-bubble/assistantBubbleUtils": {
+ getToolActivityCategory: () => "read",
+ getToolTraceKey: (item, index) => item.toolCall.id ?? String(index),
+ },
+ "@liveagent/ui/components/IconSet": { Brain: EmptyIcon, ChevronDown: EmptyIcon },
+ "@liveagent/ui/i18n/index": {
+ useLocale: () => ({
+ locale: "zh-CN",
+ t: (key) =>
+ ({
+ "chat.tool.batch.read": "读取了文件",
+ "chat.tool.batch.command": "运行了命令",
+ "chat.tool.running": "运行中",
+ "chat.tool.waiting": "等待中",
+ "chat.tool.failed": "失败",
+ "chat.tool.success": "完成",
+ "chat.thinking": "思考中",
+ "chat.thinkingActive": "正在思考",
+ "chat.work.activity": "已处理",
+ "chat.work.running": "处理中",
+ "chat.tool.activity.read.running": "正在读取",
+ "chat.tool.activity.command.running": "正在运行",
+ "chat.tool.activity.other.running": "正在执行",
+ "chat.tool.file.read.running": "正在读取",
+ "chat.tool.file.create.running": "正在创建",
+ "chat.tool.file.edit.running": "正在编辑",
+ "chat.tool.file.delete.running": "正在删除",
+ })[key] ?? key,
+ }),
+ },
+ "@liveagent/ui/lib/shared/utils": {
+ cn: (...values) => values.filter(Boolean).join(" "),
+ },
+ "../../IconSet": {
+ Bot: EmptyIcon,
+ ChevronRight: EmptyIcon,
+ Eye: EmptyIcon,
+ FilePenLine: EmptyIcon,
+ FolderTree: EmptyIcon,
+ Search: EmptyIcon,
+ Terminal: EmptyIcon,
+ Wrench: EmptyIcon,
+ },
+ "./assistantBubbleUtils": {
+ compactInlineText: (value) => value,
+ getFileOperationDisplay: (item) => {
+ if (!["Read", "Write", "Edit", "Delete"].includes(item.toolCall.name)) return null;
+ const path = item.toolCall.arguments?.path;
+ if (typeof path !== "string" || !path) return null;
+ const kind =
+ item.toolCall.name === "Read"
+ ? "read"
+ : item.toolCall.name === "Write"
+ ? "create"
+ : item.toolCall.name.toLowerCase();
+ return { kind, path, fileName: path.split("/").at(-1), link: null };
+ },
+ getToolActivityCategory: (name) => (name === "Bash" ? "command" : "read"),
+ getToolDisplayName: (name) => name,
+ getToolTraceKey: (item, index) => item.toolCall.id ?? String(index),
+ hasActiveUserInteraction: (items, runningToolCallIds) =>
+ items.some(
+ (item) =>
+ !item.toolResult &&
+ ["AskUserQuestion", "ExitPlanMode"].includes(item.toolCall.name) &&
+ runningToolCallIds.includes(item.toolCall.id),
+ ),
+ },
+ "./ToolCallItem": {
+ MemoToolCallItem: () => null,
+ areToolTraceItemsEqual: () => false,
+ },
+ },
+});
+const { React, act, createRoot } = env;
+
+const { AssistantWorkTrace } = env.loadModule(
+ "@liveagent/ui/components/chat/AssistantWorkTrace.tsx",
+);
+const { ToolTraceGroup } = env.loadModule(
+ "@liveagent/ui/components/chat/assistant-bubble/ToolTraceGroup.tsx",
+);
+
+function click(element) {
+ act(() => element.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+}
+
+function renderWorkTrace(root, running, attentionRequired = false) {
+ act(() => {
+ root.render(
+ React.createElement(AssistantWorkTrace, {
+ hasDetails: true,
+ attentionRequired,
+ running,
+ children: React.createElement("div", { "data-testid": "work-details" }),
+ }),
+ );
+ });
+}
+
+const toolItem = {
+ toolCall: { id: "tool-1", name: "read_file", arguments: {} },
+ toolResult: { isError: false },
+};
+
+function renderToolTrace(root, running, items = [toolItem], showTurnStatus = false) {
+ act(() => {
+ root.render(
+ React.createElement(ToolTraceGroup, {
+ items,
+ runningToolCallIds: running ? items.map((item) => item.toolCall.id) : [],
+ showTurnStatus,
+ }),
+ );
+ });
+}
+
+test("manual work-trace disclosure survives running state transitions", () => {
+ const container = document.createElement("div");
+ const root = createRoot(container);
+
+ renderWorkTrace(root, true);
+ const button = container.querySelector("button");
+ assert.equal(button.getAttribute("aria-expanded"), "true");
+
+ click(button);
+ assert.equal(button.getAttribute("aria-expanded"), "false");
+
+ renderWorkTrace(root, false);
+ assert.equal(button.getAttribute("aria-expanded"), "false");
+ renderWorkTrace(root, true);
+ assert.equal(button.getAttribute("aria-expanded"), "false");
+
+ click(button);
+ assert.equal(button.getAttribute("aria-expanded"), "true");
+ renderWorkTrace(root, false);
+ assert.equal(button.getAttribute("aria-expanded"), "true");
+
+ act(() => root.unmount());
+});
+
+test("an empty running work trace shows the plain processing header, not a button", () => {
+ const container = document.createElement("div");
+ const root = createRoot(container);
+
+ act(() => {
+ root.render(
+ React.createElement(AssistantWorkTrace, {
+ hasDetails: false,
+ running: true,
+ children: null,
+ }),
+ );
+ });
+
+ assert.match(container.textContent, /处理中/);
+ assert.ok(container.querySelector("[data-chat-work-grid]"));
+ assert.equal(container.querySelector("button"), null);
+ assert.equal(container.querySelector("[data-chat-work-collapsed-tail]"), null);
+
+ act(() => root.unmount());
+});
+
+test("a work trace parked on a user decision renders a frozen header", () => {
+ const container = document.createElement("div");
+ const root = createRoot(container);
+
+ const render = (awaitingDecision) => {
+ act(() => {
+ root.render(
+ React.createElement(AssistantWorkTrace, {
+ hasDetails: false,
+ running: true,
+ awaitingDecision,
+ children: null,
+ }),
+ );
+ });
+ };
+
+ render(false);
+ assert.equal(container.querySelector("section").getAttribute("aria-busy"), "true");
+ assert.equal(container.querySelector(".chat-work-pixel[data-paused]"), null);
+ assert.match(container.innerHTML, /shimmer/);
+
+ render(true);
+ assert.equal(container.querySelector("section").getAttribute("aria-busy"), "false");
+ assert.equal(
+ container.querySelectorAll(".chat-work-pixel[data-paused]").length,
+ container.querySelectorAll(".chat-work-pixel").length,
+ );
+ assert.doesNotMatch(container.innerHTML, /shimmer/);
+
+ act(() => root.unmount());
+});
+
+test("collapsing a running work trace surfaces the active block outside it", () => {
+ const container = document.createElement("div");
+ const root = createRoot(container);
+ const tail = React.createElement("div", { "data-testid": "active-tail" }, "正在读取 App.tsx");
+
+ const render = (running) => {
+ act(() => {
+ root.render(
+ React.createElement(AssistantWorkTrace, {
+ hasDetails: true,
+ running,
+ collapsedTail: tail,
+ children: React.createElement("div", null, "details"),
+ }),
+ );
+ });
+ };
+
+ // Expanded by default while running: the trace body is visible, no tail.
+ render(true);
+ const button = container.querySelector("button");
+ assert.equal(button.getAttribute("aria-expanded"), "true");
+ assert.equal(container.querySelector("[data-chat-work-collapsed-tail]"), null);
+
+ // User collapses mid-run: the in-progress block re-homes below the header.
+ click(button);
+ assert.equal(button.getAttribute("aria-expanded"), "false");
+ assert.ok(container.querySelector("[data-chat-work-collapsed-tail]"));
+ assert.match(container.textContent, /正在读取 App\.tsx/);
+
+ // Re-expanding removes the duplicate; the body carries the content again.
+ click(button);
+ assert.equal(container.querySelector("[data-chat-work-collapsed-tail]"), null);
+
+ // Once the run settles, a collapsed trace shows no tail either.
+ click(button);
+ render(false);
+ assert.equal(container.querySelector("[data-chat-work-collapsed-tail]"), null);
+
+ act(() => root.unmount());
+});
+
+test("a new blocking interaction opens the work trace once without stealing later control", () => {
+ const container = document.createElement("div");
+ const root = createRoot(container);
+
+ renderWorkTrace(root, false, false);
+ const button = container.querySelector("button");
+ assert.equal(button.getAttribute("aria-expanded"), "false");
+
+ renderWorkTrace(root, true, true);
+ assert.equal(button.getAttribute("aria-expanded"), "true");
+
+ click(button);
+ assert.equal(button.getAttribute("aria-expanded"), "false");
+ renderWorkTrace(root, true, true);
+ assert.equal(button.getAttribute("aria-expanded"), "false");
+
+ renderWorkTrace(root, true, false);
+ assert.equal(button.getAttribute("aria-expanded"), "false");
+ renderWorkTrace(root, true, true);
+ assert.equal(button.getAttribute("aria-expanded"), "true");
+ renderWorkTrace(root, true, false);
+ assert.equal(button.getAttribute("aria-expanded"), "true");
+
+ act(() => root.unmount());
+});
+
+test("manual tool-batch disclosure survives tool completion and restart", () => {
+ const container = document.createElement("div");
+ const root = createRoot(container);
+
+ renderToolTrace(root, true);
+ const button = container.querySelector("button");
+ assert.equal(button.getAttribute("aria-expanded"), "false");
+
+ click(button);
+ assert.equal(button.getAttribute("aria-expanded"), "true");
+
+ renderToolTrace(root, false);
+ assert.equal(button.getAttribute("aria-expanded"), "true");
+ renderToolTrace(root, true);
+ assert.equal(button.getAttribute("aria-expanded"), "true");
+
+ click(button);
+ assert.equal(button.getAttribute("aria-expanded"), "false");
+ renderToolTrace(root, false);
+ assert.equal(button.getAttribute("aria-expanded"), "false");
+
+ act(() => root.unmount());
+});
+
+test("a tool batch opens when a pending user interaction appears inside it", () => {
+ const container = document.createElement("div");
+ const root = createRoot(container);
+ const interactionItem = {
+ toolCall: { id: "interaction-1", name: "ExitPlanMode", arguments: { plan: "Plan" } },
+ };
+
+ renderToolTrace(root, false, [interactionItem]);
+ const button = container.querySelector("button");
+ assert.equal(button.getAttribute("aria-expanded"), "false");
+
+ renderToolTrace(root, true, [interactionItem]);
+ assert.equal(button.getAttribute("aria-expanded"), "true");
+
+ click(button);
+ assert.equal(button.getAttribute("aria-expanded"), "false");
+ renderToolTrace(root, true, [interactionItem]);
+ assert.equal(button.getAttribute("aria-expanded"), "false");
+
+ act(() => root.unmount());
+});
+
+test("mixed tool batch labels are separated by a fullwidth bar", () => {
+ const container = document.createElement("div");
+ const root = createRoot(container);
+ const commandItem = {
+ toolCall: { id: "tool-2", name: "Bash", arguments: { command: "pnpm test" } },
+ toolResult: { isError: false },
+ };
+
+ act(() => {
+ root.render(
+ React.createElement(ToolTraceGroup, {
+ items: [toolItem, commandItem],
+ }),
+ );
+ });
+
+ const label = container.querySelector("button").textContent;
+ assert.equal(label, "读取了文件｜运行了命令");
+ assert.doesNotMatch(label, /[·•]/);
+
+ act(() => root.unmount());
+});
+
+test("a single-category tool batch renders no separator", () => {
+ const container = document.createElement("div");
+ const root = createRoot(container);
+ const secondReadItem = {
+ toolCall: { id: "tool-3", name: "Read", arguments: { path: "src/main.ts" } },
+ toolResult: { isError: false },
+ };
+
+ act(() => {
+ root.render(
+ React.createElement(ToolTraceGroup, {
+ items: [toolItem, secondReadItem],
+ }),
+ );
+ });
+
+ assert.equal(container.querySelector("button").textContent, "读取了文件");
+
+ act(() => root.unmount());
+});
+
+test("latest tool batch shows 运行中 while running and no filler status when idle", () => {
+ const container = document.createElement("div");
+ const root = createRoot(container);
+
+ // All tools settled: no fake "思考中" phase — the turn-level sparkle and
+ // real reasoning rows carry the live state instead.
+ renderToolTrace(root, false, [toolItem], true);
+ assert.doesNotMatch(container.querySelector("button").textContent, /思考中/);
+ assert.doesNotMatch(container.querySelector("button").textContent, /运行中/);
+
+ renderToolTrace(root, true, [toolItem], true);
+ assert.match(container.querySelector("button").textContent, /运行中/);
+ assert.doesNotMatch(container.querySelector("button").textContent, /思考中/);
+
+ act(() => root.unmount());
+});
+
+test("a running tool batch names the current operation and caps its expanded height", () => {
+ const container = document.createElement("div");
+ const root = createRoot(container);
+ const readItem = {
+ toolCall: { id: "read-1", name: "Read", arguments: { path: "src/App.tsx" } },
+ };
+
+ renderToolTrace(root, true, [readItem], true);
+ const button = container.querySelector("button");
+ assert.match(button.textContent, /正在读取 App\.tsx/);
+ assert.match(button.textContent, /运行中/);
+
+ click(button);
+ const scrollRegion = container.querySelector("[data-tool-trace-scroll]");
+ assert.match(scrollRegion.className, /max-h-\[400px\]/);
+ assert.match(scrollRegion.className, /overflow-y-auto/);
+
+ act(() => root.unmount());
+});
+
+test.after(() => env.cleanup());
diff --git a/crates/agent-gui/test/chat/ask-user-question-card.test.mjs b/crates/agent-gui/test/chat/ask-user-question-card.test.mjs
index 68297e87d..bf25f2008 100644
--- a/crates/agent-gui/test/chat/ask-user-question-card.test.mjs
+++ b/crates/agent-gui/test/chat/ask-user-question-card.test.mjs
@@ -55,6 +55,10 @@ function createHookHarness(initialState = {}) {
return factory();
},
useEffect() {},
+ useLayoutEffect() {},
+ useRef(initialValue) {
+ return { current: initialValue };
+ },
};
return {
@@ -79,6 +83,8 @@ function createCardHarness(initialState = {}) {
},
"@liveagent/ui/components/IconSet": {
Check: (props) => ({ type: "Check", props }),
+ ChevronDown: (props) => ({ type: "ChevronDown", props }),
+ ChevronUp: (props) => ({ type: "ChevronUp", props }),
Sparkles: (props) => ({ type: "Sparkles", props }),
},
"@liveagent/ui/lib/shared/utils": {
@@ -140,6 +146,23 @@ function deferred() {
return { promise, resolve };
}
+test("card surface avoids an outer shadow that the collapse viewport would clip", () => {
+ const card = createCardHarness();
+ const tree = card.render({ deadlineAt: Date.now() + 60_000 });
+ const surface = findAll(
+ tree,
+ (node) =>
+ node.type === "div" &&
+ typeof node.props?.className === "string" &&
+ node.props.className.includes("rounded-2xl") &&
+ node.props.className.includes("backdrop-blur-xl"),
+ )[0];
+
+ assert.ok(surface);
+ assert.match(surface.props.className, /shadow-\[inset_/);
+ assert.doesNotMatch(surface.props.className, /0_12px_40px|0_2px_6px/);
+});
+
async function flushPromises() {
await Promise.resolve();
await new Promise((resolve) => setImmediate(resolve));
@@ -167,7 +190,7 @@ test("expired countdown disables options, custom input, and submit before tool_r
);
assert.equal(optionButtons.length, 2);
assert.equal(optionButtons.every((button) => button.props.disabled === true), true);
- assert.equal(optionButtons.every((button) => button.props.className.includes("opacity-55")), true);
+ assert.equal(optionButtons.every((button) => button.props.className.includes("opacity-50")), true);
const customOption = findAll(
tree,
@@ -316,9 +339,12 @@ test("multi-question selection auto-advances and preserves a mixed custom payloa
findAll(
tree,
(node) =>
- node.type === "button" && ["One", "Two", "Three"].includes(treeText(node)),
+ node.type === "button" &&
+ ["chat.askUser.previousQuestion", "chat.askUser.nextQuestion"].includes(
+ node.props?.["aria-label"],
+ ),
).length,
- 3,
+ 2,
);
findAll(tree, (node) => node.type === "button" && node.props?.role === "radio")[1].props.onClick();
diff --git a/crates/agent-gui/test/chat/assistant-activity-spacing.test.mjs b/crates/agent-gui/test/chat/assistant-activity-spacing.test.mjs
new file mode 100644
index 000000000..5089934ee
--- /dev/null
+++ b/crates/agent-gui/test/chat/assistant-activity-spacing.test.mjs
@@ -0,0 +1,81 @@
+import assert from "node:assert/strict";
+import fs from "node:fs";
+import test from "node:test";
+
+const roundContentSource = fs.readFileSync(
+ new URL(
+ "../../../agent-ui/src/components/chat/assistant-bubble/RoundContent.tsx",
+ import.meta.url,
+ ),
+ "utf8",
+);
+const hostedSearchSource = fs.readFileSync(
+ new URL("../../../agent-ui/src/components/chat/HostedSearchGroupView.tsx", import.meta.url),
+ "utf8",
+);
+const workTraceSource = fs.readFileSync(
+ new URL("../../../agent-ui/src/components/chat/AssistantWorkTrace.tsx", import.meta.url),
+ "utf8",
+);
+const toolTraceSource = fs.readFileSync(
+ new URL(
+ "../../../agent-ui/src/components/chat/assistant-bubble/ToolTraceGroup.tsx",
+ import.meta.url,
+ ),
+ "utf8",
+);
+const toolCallSource = fs.readFileSync(
+ new URL(
+ "../../../agent-ui/src/components/chat/assistant-bubble/ToolCallItem.tsx",
+ import.meta.url,
+ ),
+ "utf8",
+);
+const markdownSource = fs.readFileSync(
+ new URL("../../../agent-ui/src/components/Markdown.tsx", import.meta.url),
+ "utf8",
+);
+const chatStylesSource = fs.readFileSync(
+ new URL("../../../agent-ui/src/styles/common-components.css", import.meta.url),
+ "utf8",
+);
+
+test("tool and operation blocks share the same compact rhythm as prose", () => {
+ assert.match(roundContentSource, /const isOperationBlock = block\.kind !== "text";/);
+ // Inside the work trace the operation wrapper owns its rhythm (my-1 matches
+ // thinking/tool-header pb-1). Standalone rows defer to the layout layer so
+ // margins never stack with unit gaps.
+ assert.match(roundContentSource, /isOperationBlock && !standalone && "my-1"/);
+ assert.match(roundContentSource, /data-assistant-operation=\{isOperationBlock \? "" : undefined\}/);
+});
+
+test("operation components defer outer spacing to the shared block wrapper", () => {
+ assert.doesNotMatch(hostedSearchSource, /className="[^"]*\bmy-/);
+});
+
+test("chat typography keeps body copy substantial and emphasis at weight 500", () => {
+ assert.match(chatStylesSource, /\.chat-markdown \{[\s\S]*?font-weight: 450;/);
+ assert.match(chatStylesSource, /\.chat-markdown p \{[\s\S]*?font-weight: 450;/);
+ assert.match(
+ chatStylesSource,
+ /\.chat-markdown strong,[\s\S]*?\[data-streamdown="strong"\][\s\S]*?@apply font-medium/,
+ );
+ assert.match(markdownSource, /\[&_strong\]:font-medium/);
+});
+
+test("inline code uses the higher-contrast transcript treatment", () => {
+ assert.match(chatStylesSource, /bg-foreground\/\[0\.085\]/);
+ assert.match(chatStylesSource, /rounded-xs/);
+ assert.match(markdownSource, /bg-foreground\/\[0\.085\]/);
+});
+
+test("operation rows use compact icons and reveal disclosure chevrons on intent", () => {
+ assert.match(hostedSearchSource, /Globe className="h-3 w-3/);
+ assert.match(toolTraceSource, /BatchIcon className="h-3 w-3/);
+ assert.match(toolCallSource, /ToolIcon className="h-3 w-3/);
+
+ assert.match(workTraceSource, /opacity-0[^"\n]*group-hover\/work-trace:opacity-100/);
+ assert.match(hostedSearchSource, /opacity-0[^"\n]*group-hover\/search-trace:opacity-100/);
+ assert.match(toolTraceSource, /opacity-0[^"\n]*group-hover\/tool-trace:opacity-100/);
+ assert.match(toolCallSource, /opacity-0[^"\n]*group-hover\/tool:opacity-100/);
+});
diff --git a/crates/agent-gui/test/chat/assistant-status.test.mjs b/crates/agent-gui/test/chat/assistant-status.test.mjs
index 869a57d6c..e4195cbea 100644
--- a/crates/agent-gui/test/chat/assistant-status.test.mjs
+++ b/crates/agent-gui/test/chat/assistant-status.test.mjs
@@ -4,27 +4,18 @@ import { fileURLToPath } from "node:url";
import { createTsModuleLoader } from "../helpers/load-ts-module.mjs";
-function Loader2(props) {
- return { type: "Loader2", props };
-}
-
const loader = createTsModuleLoader({
rootDir: fileURLToPath(new URL("../../", import.meta.url)),
- mocks: {
- "@liveagent/ui/components/IconSet": { Loader2 },
- },
});
const { AssistantStatus } = loader.loadModule("@liveagent/ui/components/chat/AssistantStatus");
-test("assistant running status respects reduced motion on desktop", () => {
+test("assistant running status renders one text-only label", () => {
const status = AssistantStatus({ children: "Vibing" });
- const icon = status.props.children[0];
- const text = status.props.children[1];
+ const text = status.props.children;
- assert.equal(icon.type, Loader2);
- assert.match(icon.props.className, /(?:^|\s)animate-spin(?:\s|$)/);
- assert.match(icon.props.className, /(?:^|\s)motion-reduce:animate-none(?:\s|$)/);
+ assert.equal(text.type, "span");
+ assert.equal(text.props.children, "Vibing");
assert.match(status.props.className, /(?:^|\s)min-w-0(?:\s|$)/);
assert.match(status.props.className, /(?:^|\s)max-w-full(?:\s|$)/);
assert.match(text.props.className, /(?:^|\s)truncate(?:\s|$)/);
diff --git a/crates/agent-gui/test/chat/compaction-seam-row.test.mjs b/crates/agent-gui/test/chat/compaction-seam-row.test.mjs
new file mode 100644
index 000000000..17da59a73
--- /dev/null
+++ b/crates/agent-gui/test/chat/compaction-seam-row.test.mjs
@@ -0,0 +1,139 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { createDomTestEnv } from "../helpers/dom-test-env.mjs";
+
+const EmptyIcon = () => null;
+
+const T = {
+ "chat.contextCheckpoint.title": "上下文检查点",
+ "chat.contextCheckpoint.seam": "已压缩上下文，继续处理",
+ "chat.contextCheckpoint.messageCount": "{count} 条消息",
+ "chat.contextCheckpoint.tokensAfter": "压缩后 {tokens}",
+ "chat.work.running": "处理中",
+ "chat.work.activity": "已处理",
+ "chat.thinking": "思考中",
+ "chat.thoughtFor": "思考了",
+ "chat.thinkingProcess": "思考过程",
+};
+
+const env = await createDomTestEnv({
+ mocks: {
+ "@liveagent/ui/components/Markdown": {
+ Markdown: ({ content }) => env.React.createElement("div", { "data-md": "" }, content),
+ },
+ "@liveagent/ui/i18n/index": {
+ useLocale: () => ({ locale: "zh-CN", t: (key) => T[key] ?? key }),
+ },
+ "@liveagent/ui/lib/shared/utils": {
+ cn: (...values) => values.filter(Boolean).join(" "),
+ },
+ "../../lib/shared/utils": {
+ cn: (...values) => values.filter(Boolean).join(" "),
+ },
+ "../../IconSet": new Proxy({}, { get: () => EmptyIcon }),
+ "@liveagent/ui/components/IconSet": new Proxy({}, { get: () => EmptyIcon }),
+ },
+});
+const { React, act, createRoot } = env;
+
+const { CompactionSeamRow } = env.loadModule(
+ "@liveagent/ui/components/chat/assistant-bubble/CompactionSeamRow.tsx",
+);
+const { AssistantTurnContent } = env.loadModule(
+ "@liveagent/ui/components/chat/assistant-bubble/RoundContent.tsx",
+);
+const { createCompactionSeamRound } = env.loadModule("@liveagent/ui/lib/chat/replyContinuity.ts");
+
+function click(element) {
+ act(() => element.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+}
+
+const seam = {
+ key: "summary-seg-1",
+ summaryId: "sum-1",
+ content: "## 摘要\n之前完成了前 3 项任务。",
+ coveredMessageCount: 94,
+ generatedBy: { providerId: "deepseek", model: "deepseek-v4-flash" },
+ contextUsageTokens: 18_400,
+};
+
+test("the seam row reads as one collapsed milestone and expands to the summary", () => {
+ const container = document.createElement("div");
+ const root = createRoot(container);
+ act(() => {
+ root.render(React.createElement(CompactionSeamRow, { seam }));
+ });
+
+ const row = container.querySelector("[data-compaction-seam]");
+ assert.ok(row);
+ assert.equal(row.dataset.summaryId, "sum-1");
+ const button = row.querySelector("button");
+ assert.equal(button.getAttribute("aria-expanded"), "false");
+ assert.match(button.textContent, /已压缩上下文，继续处理/);
+ assert.match(button.textContent, /94 条消息/);
+ assert.match(button.textContent, /压缩后 18\.4K/);
+ assert.equal(container.querySelector("[data-md]"), null, "summary body stays unmounted");
+
+ click(button);
+ assert.equal(button.getAttribute("aria-expanded"), "true");
+ assert.match(container.querySelector("[data-md]").textContent, /前 3 项任务/);
+ assert.match(container.textContent, /deepseek · deepseek-v4-flash/);
+
+ act(() => root.unmount());
+});
+
+test("a stitched reply renders one processing trace with the seam inline and one answer", () => {
+ const container = document.createElement("div");
+ const root = createRoot(container);
+ const write = (id, path) => ({
+ kind: "tool",
+ item: {
+ toolCall: { type: "toolCall", id, name: "Write", arguments: { path, content: "x\n" } },
+ toolResult: { role: "toolResult", toolCallId: id, isError: false, content: [], details: { path } },
+ },
+ });
+ const rounds = [
+ { round: 1, key: "r1", blocks: [write("w1", "a.ts")], meta: { stopReason: "toolUse" } },
+ createCompactionSeamRound(seam),
+ { round: 1, key: "p1:r1", blocks: [write("w2", "b.ts")], meta: { stopReason: "toolUse" } },
+ {
+ round: 2,
+ key: "p1:r2",
+ blocks: [{ kind: "text", id: "text-1", text: "第 3 轮测试已全部完成。" }],
+ meta: { stopReason: "stop" },
+ },
+ ];
+
+ act(() => {
+ root.render(
+ React.createElement(AssistantTurnContent, {
+ rounds,
+ isLive: false,
+ isStreaming: false,
+ renderMode: "static",
+ }),
+ );
+ });
+
+ const traces = container.querySelectorAll("[data-chat-work-trace]");
+ assert.equal(traces.length, 1, "exactly one processing section for the whole reply");
+ assert.match(container.textContent, /第 3 轮测试已全部完成/);
+
+ // A settled reply with an answer starts with its trace folded; the seam
+ // lives inside that fold, never as a standalone card outside it.
+ assert.equal(container.querySelectorAll("[data-compaction-seam]").length, 0);
+ const traceToggle = traces[0].querySelector("button");
+ assert.equal(traceToggle.getAttribute("aria-expanded"), "false");
+ click(traceToggle);
+
+ const seams = container.querySelectorAll("[data-compaction-seam]");
+ assert.equal(seams.length, 1, "the checkpoint renders inside the trace as a seam");
+ assert.ok(traces[0].contains(seams[0]));
+ const operations = traces[0].querySelectorAll("[data-assistant-operation]");
+ assert.equal(operations.length, 3, "edit batch → seam → edit batch, in order");
+ assert.ok(operations[1].contains(seams[0]));
+ const seamButton = seams[0].querySelector("button");
+ assert.equal(seamButton.getAttribute("aria-expanded"), "false");
+
+ act(() => root.unmount());
+});
diff --git a/crates/agent-gui/test/chat/composer-overlay-metrics.test.mjs b/crates/agent-gui/test/chat/composer-overlay-metrics.test.mjs
new file mode 100644
index 000000000..0cb72f045
--- /dev/null
+++ b/crates/agent-gui/test/chat/composer-overlay-metrics.test.mjs
@@ -0,0 +1,174 @@
+import assert from "node:assert/strict";
+import fs from "node:fs";
+import test from "node:test";
+import { createTsModuleLoader } from "../helpers/load-ts-module.mjs";
+
+const { measureComposerOverlay } = createTsModuleLoader().loadModule(
+ "@liveagent/ui/lib/chat/composerOverlayMetrics.ts",
+);
+
+// Composer layer anchored to the bottom of an 800px-tall, 1000px-wide pane.
+const layer = { top: 700, bottom: 800, height: 100, left: 0, width: 1000 };
+// Task pill wrapper: 32px tall, mb-3 (12px) above the card column top.
+const pill = (columnTop) => ({ top: columnTop - 44, bottom: columnTop - 12, height: 32 });
+// Desktop card column: centered in the layer, then translated 18px right.
+const column = { left: 20 + 18, width: 960 };
+
+test("no floating chrome: reserve equals layer height and nothing overhangs", () => {
+ const metrics = measureComposerOverlay({
+ layer,
+ queueHeight: 0,
+ floating: { top: 700, bottom: 700, height: 0 },
+ column,
+ });
+ assert.deepEqual(metrics, { heightPx: 100, floatingOverhangPx: 0, centerOffsetPx: 18 });
+
+ for (const floating of [null, undefined]) {
+ assert.deepEqual(measureComposerOverlay({ layer, queueHeight: 0, floating, column }), {
+ heightPx: 100,
+ floatingOverhangPx: 0,
+ centerOffsetPx: 18,
+ });
+ }
+});
+
+test("task pill overhangs the reserve line by its height plus gap without growing the reserve", () => {
+ const metrics = measureComposerOverlay({
+ layer,
+ queueHeight: 0,
+ floating: pill(layer.top),
+ column,
+ });
+ assert.deepEqual(metrics, { heightPx: 100, floatingOverhangPx: 44, centerOffsetPx: 18 });
+});
+
+test("queue panel is excluded from the reserve but counted as overhang", () => {
+ const withQueue = { ...layer, top: 640, height: 160 };
+ const queueOnly = measureComposerOverlay({
+ layer: withQueue,
+ queueHeight: 60,
+ floating: null,
+ column,
+ });
+ assert.deepEqual(queueOnly, { heightPx: 100, floatingOverhangPx: 60, centerOffsetPx: 18 });
+
+ const queueAndPill = measureComposerOverlay({
+ layer: withQueue,
+ queueHeight: 60,
+ floating: pill(withQueue.top),
+ column,
+ });
+ assert.deepEqual(queueAndPill, { heightPx: 100, floatingOverhangPx: 104, centerOffsetPx: 18 });
+});
+
+test("center offset follows the card column, not its width", () => {
+ // Narrow column (content width clamp) keeps the same center shift.
+ const clamped = measureComposerOverlay({
+ layer,
+ queueHeight: 0,
+ floating: null,
+ column: { left: (1000 - 692) / 2 + 18, width: 692 },
+ });
+ assert.equal(clamped.centerOffsetPx, 18);
+
+ // Column flush with the layer center (gateway-style) reports no shift.
+ const centered = measureComposerOverlay({
+ layer,
+ queueHeight: 0,
+ floating: null,
+ column: { left: 100, width: 800 },
+ });
+ assert.equal(centered.centerOffsetPx, 0);
+
+ // Offset layer (split pane not at x=0) still measures relative to itself.
+ const shiftedLayer = measureComposerOverlay({
+ layer: { ...layer, left: 500 },
+ queueHeight: 0,
+ floating: null,
+ column: { left: 500 + 38, width: 960 },
+ });
+ assert.equal(shiftedLayer.centerOffsetPx, 18);
+
+ for (const missing of [null, undefined, { left: 0, width: 0 }]) {
+ assert.equal(
+ measureComposerOverlay({ layer, queueHeight: 0, floating: null, column: missing })
+ .centerOffsetPx,
+ 0,
+ );
+ }
+});
+
+test("hidden composer layer reports zero for every metric", () => {
+ const metrics = measureComposerOverlay({
+ layer: { top: 0, bottom: 0, height: 0, left: 0, width: 0 },
+ queueHeight: 0,
+ floating: { top: 0, bottom: 0, height: 0 },
+ column: { left: 0, width: 0 },
+ });
+ assert.deepEqual(metrics, { heightPx: 0, floatingOverhangPx: 0, centerOffsetPx: 0 });
+});
+
+test("fractional geometry rounds and never goes negative", () => {
+ const fractional = { ...layer, top: 700.4, height: 99.6 };
+ const metrics = measureComposerOverlay({
+ layer: fractional,
+ queueHeight: 0,
+ floating: { top: 656.4, bottom: 688.4, height: 32 },
+ column: { left: 38.4, width: 960 },
+ });
+ assert.deepEqual(metrics, { heightPx: 100, floatingOverhangPx: 44, centerOffsetPx: 18 });
+
+ const belowLine = measureComposerOverlay({
+ layer,
+ queueHeight: 0,
+ // Floating rect that somehow sits inside the layer must not subtract.
+ floating: { top: 720, bottom: 752, height: 32 },
+ column,
+ });
+ assert.equal(belowLine.floatingOverhangPx, 0);
+});
+
+const composerBarSource = fs.readFileSync(
+ new URL("../../../agent-ui/src/pages/chat/ChatComposerBar.tsx", import.meta.url),
+ "utf8",
+);
+const transcriptSource = fs.readFileSync(
+ new URL("../../src/pages/chat/transcript/ChatTranscript.tsx", import.meta.url),
+ "utf8",
+);
+const paneHostSource = fs.readFileSync(
+ new URL("../../src/pages/chat/surfaces/ConversationPaneHost.tsx", import.meta.url),
+ "utf8",
+);
+
+test("composer bar measures the card column and task pill wrapper alongside the layer", () => {
+ assert.match(composerBarSource, /ref=\{composerColumnRef\}/);
+ assert.match(composerBarSource, /ref=\{setTaskProgressBarElement\}/);
+ assert.match(composerBarSource, /resizeObserver\?\.observe\(composerColumnRef\.current\)/);
+ assert.match(composerBarSource, /resizeObserver\?\.observe\(taskProgressBarElement\)/);
+ assert.match(
+ composerBarSource,
+ /measureComposerOverlay\(\{\s*layer:\s*composerLayer\.getBoundingClientRect\(\),\s*queueHeight:[^}]*floating:\s*taskProgressBarElement\?\.getBoundingClientRect\(\),\s*column:\s*composerColumnRef\.current\?\.getBoundingClientRect\(\),\s*\}\)/s,
+ );
+ assert.match(composerBarSource, /onFloatingOverhangChange\?\.\(metrics\.floatingOverhangPx\)/);
+ assert.match(composerBarSource, /onCenterOffsetChange\?\.\(metrics\.centerOffsetPx\)/);
+});
+
+test("jump-to-bottom centers on the composer card and clears its floating chrome", () => {
+ const jumpButton = transcriptSource.match(/chat-jump-to-bottom[\s\S]*? {
+ assert.equal(formatTokenCount(0, "zh-CN"), "0");
+ assert.equal(formatTokenCount(420, "zh-CN"), "420");
+ assert.equal(formatTokenCount(999, "zh-CN"), "999");
+ assert.equal(formatTokenCount(1_000, "zh-CN"), "1K");
+ assert.equal(formatTokenCount(1_840, "zh-CN"), "1.84K");
+ assert.equal(formatTokenCount(2_260, "zh-CN"), "2.26K");
+ assert.equal(formatTokenCount(128_000, "zh-CN"), "128K");
+});
+
test("threshold boundaries: <50% ok, 50-80% warn, >=80% danger", () => {
assert.equal(CONTEXT_USAGE_WARN_RATIO, 0.5);
assert.equal(CONTEXT_USAGE_DANGER_RATIO, 0.8);
@@ -86,22 +101,55 @@ test("WebUI manual compaction converges from the transcript store and a bounded
assert.match(gatewayAppSource, /chat\.manualCompactTimedOut/);
});
-test("context usage ring stays vertically centered in the shared composer", () => {
- assert.match(
- chatComposerBarSource,
- /className="absolute right-3 top-1\/2 z-20 -translate-y-1\/2"/,
+test("context usage ring lives in the stacked runtime control deck", () => {
+ assert.match(chatComposerBarSource, /composer-control-deck/);
+ assert.ok(
+ chatComposerBarSource.indexOf("composer-control-deck") <
+ chatComposerBarSource.indexOf(" {
+test("composer editor row reserves the right rail so the scrollbar clears expand", () => {
// 让位必须做在编辑器外层容器上：padding 不移动滚动条，编辑器自带 pr-8 时
- // 那条 6px 滚动轨会压在用量环/展开图标上（right-3 + w-8 的 44px 轨道）。
+ // 那条 6px 滚动轨仍会压在右上角展开按钮上。
assert.match(chatComposerBarSource, /"relative flex flex-1 pl-4 pr-12"/);
assert.doesNotMatch(chatComposerBarSource, /"relative flex flex-1 px-4"/);
assert.doesNotMatch(chatComposerBarSource, /"px-0 py-0 pr-8"/);
});
+test("composer uses the opaque Tessera surface and a compact idle height", () => {
+ assert.match(
+ chatComposerBarSource,
+ /composer-glass-card[^\n]+rounded-4xl[^\n]+border-border\/65 bg-muted/,
+ );
+ assert.match(
+ chatComposerBarSource,
+ /composer-input-surface[^\n]+rounded-4xl bg-background/,
+ );
+ assert.match(chatComposerBarSource, /composer-control-deck[^\n]+min-h-9[^\n]+bg-muted/);
+ assert.doesNotMatch(chatComposerBarSource, /composer-input-surface[^\n]+bg-white\/76/);
+ assert.doesNotMatch(chatComposerBarSource, /composer-glass-card[^\n]+bg-black\/\[0\.035\]/);
+ assert.match(mentionComposerSource, /mention-composer min-h-10 max-h-\[160px\]/);
+});
+
+test("composer expand toggle appears only after the editor overflows", () => {
+ assert.match(
+ chatComposerBarSource,
+ /const \[composerHasOverflow, setComposerHasOverflow\] = useState\(false\)/,
+ );
+ assert.match(
+ chatComposerBarSource,
+ /editor\.scrollHeight - editor\.clientHeight > 1/,
+ );
+ assert.match(chatComposerBarSource, /new MutationObserver\(scheduleMeasure\)/);
+ assert.match(
+ chatComposerBarSource,
+ /const showComposerExpandToggle = isComposerExpanded \|\| composerHasOverflow/,
+ );
+ assert.match(chatComposerBarSource, /\{showComposerExpandToggle \? \(\s*
", chromeOpen);
+ const timestamp = assistantFn.indexOf("