# Files changed · PR \#7152 · pingdotgg/t3code [View on GitCafe](https://git.cafe/pingdotgg/t3code/pull/7152/diffs) Repository: [pingdotgg/t3code](https://git.cafe/pingdotgg/t3code) Visibility: public [feat\(web\): collapse tool activity into one line](https://git.cafe/pingdotgg/t3code/pull/7152.md) Version: 166 Head commit: 60218aec86a15f1a563cb910cab495b8faf1c3d7 Base commit: b2e2ccfdb462c45a8de394ff9ff0f58a4a689900 Comparison base: b2e2ccfdb462c45a8de394ff9ff0f58a4a689900 Showing up to 20 entries from this revision. If the pull request changes, reopen the first page before continuing. ## apps/web/src/components/ChatView.tsx Status: modified; +7; −3 ```diff @@ -561,8 +561,10 @@ threadError: string | null | undefined; }) { const [localDispatch, setLocalDispatch] = useState(null); + const latestUserMessage = input.activeThread?.messages.findLast( + (message) => message.role === "user", + ); - const latestUserMessageId = - input.activeThread?.messages.findLast((message) => message.role === "user")?.id ?? null; + const latestUserMessageId = latestUserMessage?.id ?? null; const resetLocalDispatch = useCallback(() => { setLocalDispatch(null); @@ -612,6 +614,7 @@ beginLocalDispatch, resetLocalDispatch, localDispatchStartedAt: activeLocalDispatch?.startedAt ?? null, + latestUserMessageAt: latestUserMessage?.createdAt ?? null, isPreparingWorktree: activeLocalDispatch?.preparingWorktree ?? false, isSendBusy: activeLocalDispatch !== null, }; @@ -2325,6 +2328,7 @@ beginLocalDispatch, resetLocalDispatch, localDispatchStartedAt, + latestUserMessageAt, isPreparingWorktree, isSendBusy, } = useLocalDispatchState({ @@ -2340,6 +2344,7 @@ activeLatestTurn, activeThread?.session ?? null, localDispatchStartedAt, + latestUserMessageAt, ); useEffect(() => { attachmentPreviewHandoffByMessageIdRef.current = attachmentPreviewHandoffByMessageId; @@ -6389,7 +6394,6 @@ key={activeThread.id} isWorking={isWorking} workingStepLabel={workingStepLabel} - activeTurnInProgress={isWorking || !latestTurnSettled} activeTurnStartedAt={activeWorkStartedAt} listRef={legendListRef} timelineEntries={timelineEntries} ``` ## apps/web/src/components/chat/MessagesTimeline.logic.test.ts Status: modified; +358; −7 ```diff @@ -545,7 +545,7 @@ "user-entry", "turn-fold:turn-1", "assistant-thought-entry", - "work-entry-1", + "work-toggle:work-entry-1", "assistant-final-entry", ]); expect( @@ -800,12 +800,362 @@ expect(rows.some((row) => row.kind === "turn-fold")).toBe(false); expect(rows.map((row) => row.id)).toEqual([ + "working-indicator-row", "assistant-thought-entry", + "work-live:work-entry-1", + ]); + }); + + it("keeps adjacent active tool calls in one replacing row", () => { + const rows = deriveMessagesTimelineRows({ + timelineEntries: [ + { + id: "completed-command-entry", + kind: "work", + createdAt: "2026-01-01T00:00:05Z", + entry: { + id: "completed-command", + createdAt: "2026-01-01T00:00:05Z", + turnId: "turn-1" as never, + label: "Ran rg", + command: "rg toolCall", + requestKind: "command", + tone: "tool" as const, + toolLifecycleStatus: "completed" as const, + }, + }, + { + id: "completed-edit-entry", + kind: "work", + createdAt: "2026-01-01T00:00:06Z", + entry: { + id: "completed-edit", + createdAt: "2026-01-01T00:00:06Z", + turnId: "turn-1" as never, + label: "Edited files", + requestKind: "file-change", + changedFiles: ["src/one.ts", "src/two.ts"], + tone: "tool" as const, + toolLifecycleStatus: "completed" as const, + }, + }, + { + id: "running-command-entry", + kind: "work", + createdAt: "2026-01-01T00:00:07Z", + entry: { + id: "running-command", + createdAt: "2026-01-01T00:00:07Z", + turnId: "turn-1" as never, + label: "Running tests", + command: "vp test run", + requestKind: "command", + tone: "tool" as const, + toolLifecycleStatus: "inProgress" as const, + }, + }, + ], + latestTurn: { + turnId: "turn-1" as never, + state: "running", + startedAt: "2026-01-01T00:00:00Z", + completedAt: null, + }, + isWorking: true, + activeTurnStartedAt: "2026-01-01T00:00:00Z", + turnDiffSummaryByAssistantMessageId: new Map(), + revertTurnCountByUserMessageId: new Map(), + }); + + expect(rows.map((row) => row.kind)).toEqual(["working", "work-live"]); + expect(rows.find((row) => row.kind === "work-live")).toMatchObject({ + entry: { id: "running-command" }, + groupedEntries: [ + { id: "completed-command" }, + { id: "completed-edit" }, + { id: "running-command" }, + ], + }); + }); + + it("summarizes a tool run after commentary starts a new run", () => { + const rows = deriveMessagesTimelineRows({ + timelineEntries: [ + { + id: "completed-command-entry", + kind: "work", + createdAt: "2026-01-01T00:00:05Z", + entry: { + id: "completed-command", + createdAt: "2026-01-01T00:00:05Z", + turnId: "turn-1" as never, + label: "Ran rg", + command: "rg toolCall", + requestKind: "command", + tone: "tool" as const, + toolLifecycleStatus: "completed" as const, + }, + }, + { + id: "assistant-commentary-entry", + kind: "message", + createdAt: "2026-01-01T00:00:06Z", + message: { + id: "assistant-commentary" as never, + role: "assistant", + text: "Checking another thing.", + turnId: "turn-1" as never, + createdAt: "2026-01-01T00:00:06Z", + updatedAt: "2026-01-01T00:00:06Z", + streaming: false, + }, + }, + { + id: "running-command-entry", + kind: "work", + createdAt: "2026-01-01T00:00:07Z", + entry: { + id: "running-command", + createdAt: "2026-01-01T00:00:07Z", + turnId: "turn-1" as never, + label: "Running tests", + command: "vp test run", + requestKind: "command", + tone: "tool" as const, + toolLifecycleStatus: "inProgress" as const, + }, + }, + ], + latestTurn: { + turnId: "turn-1" as never, + state: "running", + startedAt: "2026-01-01T00:00:00Z", + completedAt: null, + }, + isWorking: true, + activeTurnStartedAt: "2026-01-01T00:00:00Z", + turnDiffSummaryByAssistantMessageId: new Map(), + revertTurnCountByUserMessageId: new Map(), + }); + + expect(rows.map((row) => row.kind)).toEqual(["working", "work-toggle", "message", "work-live"]); + expect(rows.find((row) => row.kind === "work-toggle")).toMatchObject({ + hiddenCount: 1, + summary: "Ran 1 command", + }); + }); + + it("keeps separated in-progress tool runs visible", () => { + const rows = deriveMessagesTimelineRows({ + timelineEntries: [ + { + id: "first-running-entry", + kind: "work", + createdAt: "2026-01-01T00:00:05Z", + entry: { + id: "first-running", + createdAt: "2026-01-01T00:00:05Z", + turnId: "turn-1" as never, + label: "Running first command", + command: "rg first", + requestKind: "command", + tone: "tool" as const, + toolLifecycleStatus: "inProgress" as const, + }, + }, + { + id: "assistant-commentary-entry", + kind: "message", + createdAt: "2026-01-01T00:00:06Z", + message: { + id: "assistant-commentary" as never, + role: "assistant", + text: "Starting another command.", + turnId: "turn-1" as never, + createdAt: "2026-01-01T00:00:06Z", + updatedAt: "2026-01-01T00:00:06Z", + streaming: false, + }, + }, + { + id: "second-running-entry", + kind: "work", + createdAt: "2026-01-01T00:00:07Z", + entry: { + id: "second-running", + createdAt: "2026-01-01T00:00:07Z", + turnId: "turn-1" as never, + label: "Running second command", + command: "rg second", + requestKind: "command", + tone: "tool" as const, + toolLifecycleStatus: "inProgress" as const, + }, + }, + ], + latestTurn: { + turnId: "turn-1" as never, + state: "running", + startedAt: "2026-01-01T00:00:00Z", + completedAt: null, + }, + isWorking: true, + activeTurnStartedAt: "2026-01-01T00:00:00Z", + turnDiffSummaryByAssistantMessageId: new Map(), + revertTurnCountByUserMessageId: new Map(), - "work-entry-1", - "working-indicator-row", + }); + + expect(rows.map((row) => row.kind)).toEqual(["working", "work-live", "message", "work-live"]); + expect(rows.filter((row) => row.kind === "work-live").map((row) => row.entry.id)).toEqual([ + "first-running", + "second-running", ]); }); + it("does not revive stale in-progress tools before a fresh send has a turn id", () => { + const rows = deriveMessagesTimelineRows({ + timelineEntries: [ + { + id: "stale-running-entry", + kind: "work", + createdAt: "2026-01-01T00:00:05Z", + entry: { + id: "stale-running", + createdAt: "2026-01-01T00:00:05Z", + turnId: "turn-1" as never, + label: "Running stale command", + command: "rg stale", + requestKind: "command", + tone: "tool" as const, + toolLifecycleStatus: "inProgress" as const, + }, + }, + { + id: "user-followup-entry", + kind: "message", + createdAt: "2026-01-01T00:01:00Z", + message: { + id: "user-followup" as never, + role: "user", + text: "continue", + turnId: null, + createdAt: "2026-01-01T00:01:00Z", + updatedAt: "2026-01-01T00:01:00Z", + streaming: false, + }, + }, + ], + latestTurn: null, + isWorking: true, + activeTurnStartedAt: "2026-01-01T00:01:00Z", + turnDiffSummaryByAssistantMessageId: new Map(), + revertTurnCountByUserMessageId: new Map(), + }); + + expect(rows.some((row) => row.kind === "work-live")).toBe(false); + }); + + it("does not revive separated historical task progress", () => { + const rows = deriveMessagesTimelineRows({ + timelineEntries: [ + { + id: "stale-progress-entry", + kind: "work", + createdAt: "2026-01-01T00:00:05Z", + entry: { + id: "stale-progress", + createdAt: "2026-01-01T00:00:05Z", + turnId: "turn-1" as never, + label: "Old progress", + tone: "thinking" as const, + sourceActivityKind: "task.progress" as const, + }, + }, + { + id: "assistant-commentary-entry", + kind: "message", + createdAt: "2026-01-01T00:00:06Z", + message: { + id: "assistant-commentary" as never, + role: "assistant", + text: "Starting another command.", + turnId: "turn-1" as never, + createdAt: "2026-01-01T00:00:06Z", + updatedAt: "2026-01-01T00:00:06Z", + streaming: false, + }, + }, + { + id: "running-command-entry", + kind: "work", + createdAt: "2026-01-01T00:00:07Z", + entry: { + id: "running-command", + createdAt: "2026-01-01T00:00:07Z", + turnId: "turn-1" as never, + label: "Running command", + command: "rg current", + requestKind: "command", + tone: "tool" as const, + toolLifecycleStatus: "inProgress" as const, + }, + }, + ], + latestTurn: { + turnId: "turn-1" as never, + state: "running", + startedAt: "2026-01-01T00:00:00Z", + completedAt: null, + }, + isWorking: true, + activeTurnStartedAt: "2026-01-01T00:00:00Z", + turnDiffSummaryByAssistantMessageId: new Map(), + revertTurnCountByUserMessageId: new Map(), + }); + + expect(rows.filter((row) => row.kind === "work-live").map((row) => row.entry.id)).toEqual([ + "running-command", + ]); + }); + + it("keeps the latest completed tool call live while the turn is running", () => { + const rows = deriveMessagesTimelineRows({ + timelineEntries: [ + { + id: "latest-command-entry", + kind: "work", + createdAt: "2026-01-01T00:00:05Z", + entry: { + id: "latest-command", + createdAt: "2026-01-01T00:00:05Z", + turnId: "turn-1" as never, + label: "Ran rg", + command: "rg toolCall", + requestKind: "command", + tone: "tool" as const, + toolLifecycleStatus: "completed" as const, + }, + }, + ], + latestTurn: { + turnId: "turn-1" as never, + state: "running", + startedAt: "2026-01-01T00:00:00Z", + completedAt: null, + }, + isWorking: true, + activeTurnStartedAt: "2026-01-01T00:00:00Z", + turnDiffSummaryByAssistantMessageId: new Map(), + revertTurnCountByUserMessageId: new Map(), + }); + + expect(rows.map((row) => row.kind)).toEqual(["working", "work-live"]); + expect(rows.find((row) => row.kind === "work-live")).toMatchObject({ + entry: { id: "latest-command" }, + groupedEntries: [{ id: "latest-command" }], + }); + }); + it("does not fold the session's running turn when latestTurn regresses", () => { const rows = deriveMessagesTimelineRows({ timelineEntries: [ @@ -864,7 +1214,7 @@ expect(rows.filter((row) => row.kind === "turn-fold").map((row) => row.turnId)).toEqual([ "turn-1", ]); - expect(rows.map((row) => row.id)).toContain("running-work-entry"); + expect(rows.map((row) => row.id)).toContain("work-live:running-work-entry"); }); it("only shows assistant metadata on the terminal assistant message", () => { @@ -1006,18 +1356,19 @@ expandedWorkGroupIds: new Set(["work-group:work-entry-1"]), }); + expect(collapsedRows.map((row) => row.id)).toEqual(["work-toggle:work-entry-1"]); - expect(collapsedRows.map((row) => row.id)).toEqual(["work-3", "work-toggle:work-entry-1"]); expect(collapsedRows.find((row) => row.kind === "work-toggle")).toMatchObject({ groupId: "work-group:work-entry-1", - hiddenCount: 2, + hiddenCount: 3, expanded: false, onlyToolEntries: true, + summary: "Used 3 tools", }); expect(expandedRows.map((row) => row.id)).toEqual([ + "work-toggle:work-entry-1", "work-1", "work-2", "work-3", - "work-toggle:work-entry-1", ]); expect(expandedRows.find((row) => row.kind === "work-toggle")).toMatchObject({ expanded: true, ``` ## apps/web/src/components/chat/MessagesTimeline.logic.ts Status: modified; +436; −24 ```diff @@ -1,6 +1,7 @@ import * as Equal from "effect/Equal"; import { formatDuration, + workEntryDisplayIndicatesToolFailure, workEntryIndicatesToolNeutralStatus, workLogEntryIsToolLike, type TimelineEntry, @@ -17,6 +18,18 @@ export const TIMELINE_CONTENT_MAX_WIDTH = 768; export const TIMELINE_MINIMAP_PERSISTENT_GUTTER = 48; +export function workEntryIsVisibleInGroup( + entry: WorkLogEntry, + expandedToolGroupEntry = false, +): boolean { + return ( + (expandedToolGroupEntry && + (entry.toolLifecycleStatus === "inProgress" || + entry.sourceActivityKind === "task.progress")) || + !workEntryIndicatesToolNeutralStatus(entry) + ); +} + export interface TimelineEndState { readonly isAtEnd?: boolean; readonly contentLength?: number; @@ -170,8 +183,19 @@ id: string; createdAt: string; groupedEntries: WorkLogEntry[]; + isExpandedToolGroupEntry: boolean; + isLastExpandedToolGroupEntry: boolean; } | { + kind: "work-live"; + id: string; + createdAt: string; + entry: WorkLogEntry; + groupedEntries: WorkLogEntry[]; + groupId: string; + expanded: boolean; + } + | { kind: "work-toggle"; id: string; createdAt: string; @@ -179,6 +203,9 @@ hiddenCount: number; expanded: boolean; onlyToolEntries: boolean; + summary: string | null; + summaryKind: ToolGroupSummaryKind | null; + hasFailure: boolean; } | { kind: "turn-fold"; @@ -212,7 +239,12 @@ createdAt: string; turnPlan: TurnPlanEntry; } + | { - | { kind: "working"; id: string; createdAt: string | null }; + kind: "working"; + id: string; + createdAt: string | null; + showThinking: boolean; + }; export interface StableMessagesTimelineRowsState { byId: Map; @@ -242,6 +274,161 @@ return value.replace(/\s+(?:complete|completed)\s*$/i, "").trim(); } +type ToolGroupAction = "read" | "edit" | "command" | "code-search" | "search" | "other"; +type ToolGroupSummaryKind = ToolGroupAction | "dynamic-tool" | "agent-tool" | "tone-tool" | "mixed"; + +export function workLogEntryIsLocalCodeSearch(entry: WorkLogEntry): boolean { + return ( + entry.itemType === "web_search" && + /\bgrep\b/i.test(normalizeCompactToolLabel(entry.toolTitle ?? entry.label)) + ); +} + +export function toolGroupAction(entry: WorkLogEntry): ToolGroupAction { + if ( + entry.requestKind === "file-read" || + entry.itemType === "image_view" || + (entry.itemType === "dynamic_tool_call" && entry.toolTitle === "Read File") + ) { + return "read"; + } + if ( + entry.requestKind === "file-change" || + entry.itemType === "file_change" || + (entry.changedFiles?.length ?? 0) > 0 + ) { + return "edit"; + } + if (entry.requestKind === "command" || entry.itemType === "command_execution" || entry.command) { + return "command"; + } + if (workLogEntryIsLocalCodeSearch(entry)) return "code-search"; + if (entry.itemType === "web_search") return "search"; + return "other"; +} + +function toolGroupActionCount( + action: ToolGroupAction, + entries: ReadonlyArray, +): number { + if (action !== "edit") return entries.length; + + const changedFiles = new Set(); + let editsWithoutFileDetails = 0; + for (const entry of entries) { + if (!entry.changedFiles || entry.changedFiles.length === 0) { + editsWithoutFileDetails += 1; + continue; + } + for (const file of entry.changedFiles) changedFiles.add(file); + } + return changedFiles.size + editsWithoutFileDetails; +} + +function toolGroupActionLabel(action: ToolGroupAction, count: number): string { + switch (action) { + case "read": + return `Read ${count} ${count === 1 ? "file" : "files"}`; + case "edit": + return `Changed ${count} ${count === 1 ? "file" : "files"}`; + case "command": + return `Ran ${count} ${count === 1 ? "command" : "commands"}`; + case "search": + return `Searched the web ${count} ${count === 1 ? "time" : "times"}`; + case "code-search": + return `Searched code ${count} ${count === 1 ? "time" : "times"}`; + case "other": + return `Used ${count} ${count === 1 ? "tool" : "tools"}`; + } +} + +/** Immediate, provider-neutral fallback while generated tool summaries are disabled or unavailable. */ +export function summarizeToolGroup(entries: ReadonlyArray): string { + const summaryEntries = omitSupersededLifecycleMarkers(entries, (entry) => entry); + const groupedEntries = new Map(); + for (const entry of summaryEntries) { + const action = toolGroupAction(entry); + const group = groupedEntries.get(action); + if (group) group.push(entry); + else groupedEntries.set(action, [entry]); + } + const labels = [...groupedEntries].map(([action, actionEntries]) => + toolGroupActionLabel(action, toolGroupActionCount(action, actionEntries)), + ); + const sentenceLabels = labels.map((label, index) => + index === 0 ? label : label.charAt(0).toLowerCase() + label.slice(1), + ); + if (sentenceLabels.length < 2) return sentenceLabels[0] ?? ""; + if (sentenceLabels.length === 2) return sentenceLabels.join(" and "); + return `${sentenceLabels.slice(0, -1).join(", ")}, and ${sentenceLabels.at(-1)}`; +} + +function omitSupersededLifecycleMarkers( + entries: readonly T[], + workEntryFor: (entry: T) => WorkLogEntry, +): T[] { + const laterTerminalIdentities = new Set(); + const reversedEntries: T[] = []; + + for (let index = entries.length - 1; index >= 0; index -= 1) { + const entry = entries[index]!; + const workEntry = workEntryFor(entry); + const normalizedLabel = normalizeCompactToolLabel(workEntry.toolTitle ?? workEntry.label); + const identity = [ + workEntry.turnId ?? "no-turn", + workEntry.itemType ?? "", + normalizedLabel, + ].join("\u001f"); + const isStatuslessIdlessMarker = + workEntry.toolCallId === undefined && + workEntry.toolLifecycleStatus === undefined && + (workEntry.sourceActivityKind === "tool.started" || + workEntry.sourceActivityKind === "tool.updated"); + if (isStatuslessIdlessMarker && laterTerminalIdentities.has(identity)) continue; + + reversedEntries.push(entry); + if ( + workEntry.sourceActivityKind === "tool.completed" || + (workEntry.toolLifecycleStatus !== undefined && + workEntry.toolLifecycleStatus !== "inProgress") + ) { + laterTerminalIdentities.add(identity); + } + } + + return reversedEntries.toReversed(); +} + +function toolGroupSummaryKind(entries: ReadonlyArray): ToolGroupSummaryKind { + const actions = new Set(entries.map(toolGroupAction)); + if (actions.size !== 1) return "mixed"; + + const action = actions.values().next().value!; + if (action !== "other") return action; + + const fallbackKinds = new Set( + entries.map((entry): ToolGroupSummaryKind => { + if (entry.itemType === "mcp_tool_call") return "other"; + if (entry.itemType === "dynamic_tool_call") return "dynamic-tool"; + if (entry.itemType === "collab_agent_tool_call" || entry.taskId) return "agent-tool"; + if (entry.tone === "thinking") return "agent-tool"; + if (entry.tone === "tool") return "tone-tool"; + return "other"; + }), + ); + return fallbackKinds.size === 1 ? fallbackKinds.values().next().value! : "mixed"; +} + +function workGroupIdentity(timelineEntryId: string, entry: WorkLogEntry): string { + return entry.toolCallId + ? `tool:${entry.turnId ?? "no-turn"}:${entry.toolCallId}` + : timelineEntryId; +} + +function workGroupId(timelineEntryId: string, entry: WorkLogEntry): string { + return `work-group:${workGroupIdentity(timelineEntryId, entry)}`; +} + export function resolveAssistantMessageCopyState({ text, showCopyButton, @@ -312,8 +499,27 @@ } const isSettled = latestTurn.completedAt !== null && latestTurn.state !== "running"; return isSettled ? null : latestTurn.turnId; +} + +function lastUserMessageIndex(timelineEntries: ReadonlyArray): number { + return timelineEntries.findLastIndex( + (entry) => entry.kind === "message" && entry.message.role === "user", + ); } +function timelineEntryTurnId(entry: TimelineEntry): TurnId | null { + if (entry.kind === "message") { + return entry.message.role === "assistant" ? (entry.message.turnId ?? null) : null; + } + if (entry.kind === "turn-plan") { + return entry.turnPlan.turnId; + } + if (entry.kind === "proposed-plan") { + return entry.proposedPlan.turnId; + } + return entry.kind === "work" ? (entry.entry.turnId ?? null) : null; +} + /** * Settled turns fold their commentary and tool activity behind a * "Worked for ..." row anchored at the turn's first foldable entry; the @@ -481,21 +687,132 @@ } } + let activeTurnHeaderIndex = input.timelineEntries.length; + if (input.isWorking) { + const latestUserMessageIndex = lastUserMessageIndex(input.timelineEntries); + const firstOwnedAfterUser = + unsettledTurnId === null + ? -1 + : input.timelineEntries.findIndex( + (entry, index) => + index > latestUserMessageIndex && timelineEntryTurnId(entry) === unsettledTurnId, + ); + activeTurnHeaderIndex = + firstOwnedAfterUser >= 0 ? firstOwnedAfterUser : latestUserMessageIndex + 1; + } + const entryBelongsToActiveTurn = (entry: TimelineEntry, index: number) => + input.isWorking && + index >= activeTurnHeaderIndex && + (unsettledTurnId === null || timelineEntryTurnId(entry) === unsettledTurnId); + const workEntryIsInActiveRun = (entry: WorkLogEntry) => + input.isWorking && + unsettledTurnId !== null && + entry.toolLifecycleStatus === "inProgress" && + entry.turnId === unsettledTurnId; + const isVisibleActiveToolEntry = (entry: WorkLogEntry) => + workLogEntryIsToolLike(entry) && workEntryIsVisibleInGroup(entry, true); + const activeEntries = input.isWorking + ? input.timelineEntries.filter((entry, index) => entryBelongsToActiveTurn(entry, index)) + : []; + const activeTurnHasVisibleContent = activeEntries.some((entry) => { + if (entry.kind === "message") { + return entry.message.role === "assistant" && (entry.message.text?.trim().length ?? 0) > 0; + } + if (entry.kind === "work") { + return ( + entry.entry.agentSpawn === undefined && + workLogEntryIsToolLike(entry.entry) && + entry.entry.toolLifecycleStatus === "inProgress" + ); + } + if (entry.kind === "proposed-plan" || entry.kind === "turn-plan") return true; + return false; + }); + + const activeToolEntries: Array> = []; + for (let index = input.timelineEntries.length - 1; index >= activeTurnHeaderIndex; index -= 1) { + const entry = input.timelineEntries[index]!; + if ( + !entryBelongsToActiveTurn(entry, index) || + entry.kind !== "work" || + entry.entry.agentSpawn !== undefined || + entry.entry.tone === "error" || + !workLogEntryIsToolLike(entry.entry) + ) { + break; + } + activeToolEntries.unshift(entry); + } + const activeWorkEntryIds = new Set(activeToolEntries.map((entry) => entry.id)); + const visibleActiveToolEntries = omitSupersededLifecycleMarkers( + activeToolEntries.filter((entry) => isVisibleActiveToolEntry(entry.entry)), + (entry) => entry.entry, + ); + const activeWorkAnchor = activeToolEntries[0]; + const latestActiveToolEntry = visibleActiveToolEntries.at(-1); + const activeWorkPlacementEntryId = latestActiveToolEntry?.id; + const activeWorkRow = + activeWorkAnchor && latestActiveToolEntry + ? (() => { + const groupId = workGroupId(activeWorkAnchor.id, activeWorkAnchor.entry); + return { + kind: "work-live" as const, + id: `work-live:${workGroupIdentity(activeWorkAnchor.id, activeWorkAnchor.entry)}`, + createdAt: activeWorkAnchor.createdAt, + entry: latestActiveToolEntry.entry, + groupedEntries: visibleActiveToolEntries.map((entry) => entry.entry), + groupId, + expanded: input.expandedWorkGroupIds?.has(groupId) ?? false, + }; + })() + : null; + const appendWorkingRow = () => { + nextRows.push({ + kind: "working", + id: "working-indicator-row", + createdAt: input.activeTurnStartedAt, + showThinking: activeWorkRow === null && !activeTurnHasVisibleContent, + }); + }; + const appendActiveWorkRows = () => { + if (activeWorkRow === null) return; + nextRows.push(activeWorkRow); + if (!activeWorkRow.expanded) return; + for (const [entryIndex, workEntry] of activeWorkRow.groupedEntries.entries()) { + nextRows.push({ + kind: "work", + id: workEntry.id, + createdAt: workEntry.createdAt, + groupedEntries: [workEntry], + isExpandedToolGroupEntry: true, + isLastExpandedToolGroupEntry: entryIndex === activeWorkRow.groupedEntries.length - 1, + }); + } + }; + for (let index = 0; index < input.timelineEntries.length; index += 1) { const timelineEntry = input.timelineEntries[index]; if (!timelineEntry) { continue; } + if (input.isWorking && index === activeTurnHeaderIndex) { + appendWorkingRow(); + } + + if (timelineEntry.id === activeWorkPlacementEntryId) { + appendActiveWorkRows(); + } + + const anchoredTurnFold = foldsByAnchorEntryId.get(timelineEntry.id); + if (anchoredTurnFold) { - const turnFold = foldsByAnchorEntryId.get(timelineEntry.id); - if (turnFold) { nextRows.push({ kind: "turn-fold", - id: `turn-fold:${turnFold.turnId}`, - createdAt: turnFold.createdAt, + id: `turn-fold:${anchoredTurnFold.turnId}`, + createdAt: anchoredTurnFold.createdAt, + turnId: anchoredTurnFold.turnId, - turnId: turnFold.turnId, - label: turnFold.label, - expanded: input.expandedTurnIds?.has(turnFold.turnId) ?? false, + label: anchoredTurnFold.label, + expanded: input.expandedTurnIds?.has(anchoredTurnFold.turnId) ?? false, }); } @@ -503,6 +820,10 @@ continue; } + if (activeWorkEntryIds.has(timelineEntry.id)) { + continue; + } + if (timelineEntry.kind === "work") { const groupedEntries = [timelineEntry.entry]; let cursor = index + 1; @@ -511,6 +832,7 @@ if ( !nextEntry || nextEntry.kind !== "work" || + activeWorkEntryIds.has(nextEntry.id) || collapsedEntryIds.has(nextEntry.id) || foldsByAnchorEntryId.has(nextEntry.id) ) { @@ -519,19 +841,86 @@ groupedEntries.push(nextEntry.entry); cursor += 1; } + const visibleGroupedEntries = omitSupersededLifecycleMarkers( + groupedEntries.filter((entry) => + workEntryIsVisibleInGroup(entry, workEntryIsInActiveRun(entry)), + ), - const visibleGroupedEntries = groupedEntries.filter( + (entry) => entry, - (entry) => !workEntryIndicatesToolNeutralStatus(entry), ); if (visibleGroupedEntries.length > 0) { + const onlyToolEntries = visibleGroupedEntries.every( + (entry) => + workLogEntryIsToolLike(entry) && + entry.agentSpawn === undefined && + entry.tone !== "error", + ); + const activeInProgressToolEntries = visibleGroupedEntries.filter(workEntryIsInActiveRun); + if (onlyToolEntries && activeInProgressToolEntries.length > 0) { + const groupId = workGroupId(timelineEntry.id, timelineEntry.entry); + const expanded = input.expandedWorkGroupIds?.has(groupId) ?? false; + const latestActiveToolEntry = activeInProgressToolEntries.at(-1)!; + nextRows.push({ + kind: "work-live", + id: `work-live:${workGroupIdentity(timelineEntry.id, timelineEntry.entry)}`, + createdAt: timelineEntry.createdAt, + entry: latestActiveToolEntry, + groupedEntries: visibleGroupedEntries, + groupId, + expanded, + }); + if (expanded) { + for (const [entryIndex, workEntry] of visibleGroupedEntries.entries()) { + nextRows.push({ + kind: "work", + id: workEntry.id, + createdAt: workEntry.createdAt, + groupedEntries: [workEntry], + isExpandedToolGroupEntry: true, + isLastExpandedToolGroupEntry: entryIndex === visibleGroupedEntries.length - 1, + }); + } + } + } else if (onlyToolEntries) { + const groupId = workGroupId(timelineEntry.id, timelineEntry.entry); + const expanded = input.expandedWorkGroupIds?.has(groupId) ?? false; + const summaryKind = toolGroupSummaryKind(visibleGroupedEntries); + nextRows.push({ + kind: "work-toggle", + id: `work-toggle:${timelineEntry.id}`, + createdAt: timelineEntry.createdAt, + groupId, + hiddenCount: visibleGroupedEntries.length, + expanded, + onlyToolEntries: true, + summary: summarizeToolGroup(visibleGroupedEntries), + summaryKind, + hasFailure: visibleGroupedEntries.some((entry) => + workEntryDisplayIndicatesToolFailure(entry), + ), + }); + if (expanded) { + for (const [entryIndex, workEntry] of visibleGroupedEntries.entries()) { + nextRows.push({ + kind: "work", + id: workEntry.id, + createdAt: workEntry.createdAt, + groupedEntries: [workEntry], + isExpandedToolGroupEntry: true, - if (visibleGroupedEntries.length <= MAX_VISIBLE_WORK_LOG_ENTRIES) { + isLastExpandedToolGroupEntry: entryIndex === visibleGroupedEntries.length - 1, + }); + } + } + } else if (visibleGroupedEntries.length <= MAX_VISIBLE_WORK_LOG_ENTRIES) { nextRows.push({ kind: "work", id: timelineEntry.id, createdAt: timelineEntry.createdAt, groupedEntries: visibleGroupedEntries, + isExpandedToolGroupEntry: false, + isLastExpandedToolGroupEntry: false, }); } else { - const groupId = `work-group:${timelineEntry.id}`; + const groupId = workGroupId(timelineEntry.id, timelineEntry.entry); const expanded = input.expandedWorkGroupIds?.has(groupId) ?? false; // Agent-spawn CTA rows are always visible: a running fleet must // never hide behind a "+N tool calls" toggle. Selection is by @@ -555,6 +944,8 @@ id: workEntry.id, createdAt: workEntry.createdAt, groupedEntries: [workEntry], + isExpandedToolGroupEntry: false, + isLastExpandedToolGroupEntry: false, }); } @@ -566,8 +957,11 @@ groupId, hiddenCount: hiddenEntries.length, expanded, + onlyToolEntries: hiddenEntries.every(workLogEntryIsToolLike), + summary: null, + summaryKind: null, - onlyToolEntries: visibleGroupedEntries.every((entry) => - workLogEntryIsToolLike(entry), + hasFailure: hiddenEntries.some((entry) => + workEntryDisplayIndicatesToolFailure(entry), ), }); } @@ -633,12 +1027,8 @@ }); } - if (input.isWorking) { - nextRows.push({ - kind: "working", - id: "working-indicator-row", - createdAt: input.activeTurnStartedAt, + if (input.isWorking && activeTurnHeaderIndex === input.timelineEntries.length) { + appendWorkingRow(); - }); } return nextRows; @@ -670,7 +1060,9 @@ switch (a.kind) { case "working": + return ( + a.createdAt === (b as typeof a).createdAt && a.showThinking === (b as typeof a).showThinking - return a.createdAt === (b as typeof a).createdAt; + ); case "turn-fold": { const bf = b as typeof a; @@ -687,9 +1079,26 @@ return a.createdAt === bp.createdAt && a.turnPlan.plan === bp.turnPlan.plan; } + case "work": { + const bw = b as typeof a; - case "work": + return ( - return Equal.equals(a.groupedEntries, (b as typeof a).groupedEntries); + a.isExpandedToolGroupEntry === bw.isExpandedToolGroupEntry && + a.isLastExpandedToolGroupEntry === bw.isLastExpandedToolGroupEntry && + Equal.equals(a.groupedEntries, bw.groupedEntries) + ); + } + case "work-live": { + const bw = b as typeof a; + return ( + a.createdAt === bw.createdAt && + a.groupId === bw.groupId && + a.expanded === bw.expanded && + Equal.equals(a.entry, bw.entry) && + Equal.equals(a.groupedEntries, bw.groupedEntries) + ); + } + case "work-toggle": { const bw = b as typeof a; return ( @@ -697,7 +1106,10 @@ a.groupId === bw.groupId && a.hiddenCount === bw.hiddenCount && a.expanded === bw.expanded && + a.onlyToolEntries === bw.onlyToolEntries && + a.summary === bw.summary && + a.summaryKind === bw.summaryKind && + a.hasFailure === bw.hasFailure - a.onlyToolEntries === bw.onlyToolEntries ); } ``` ## apps/web/src/components/chat/MessagesTimeline.test.tsx Status: modified; +189; −3 ```diff @@ -176,7 +176,6 @@ function buildProps() { return { isWorking: false, - activeTurnInProgress: false, activeTurnStartedAt: null, listRef: createRef(), latestTurn: null, @@ -237,6 +236,44 @@ } describe("MessagesTimeline", () => { + it("renders the worked-for row at assistant response text size", () => { + const turnId = TurnId.make("turn-with-fold"); + const assistantEntry = buildAssistantTimelineEntry("Done."); + const markup = renderToStaticMarkup( + , + ); + + expect(markup).toContain("Worked for 8.0s"); + expect(markup).toContain("px-1 text-sm leading-relaxed text-muted-foreground"); + }); + it("uses the larger leading inset only when the top fade is enabled", () => { const timelineEntries = [buildUserTimelineEntry("Hello")]; @@ -700,7 +737,7 @@ expect(markup).toContain("Work Log"); }); - it("formats changed file paths from the workspace root", () => { + it("summarizes changed files in one line", () => { const markup = renderToStaticMarkup( , ); - expect(markup).toContain("t3code/apps/web/src/session-logic.ts"); + expect(markup).toContain("Changed 1 file"); expect(markup).not.toContain("C:/Users/mike/dev-stuff/t3code/apps/web/src/session-logic.ts"); }); + it("shows the animated one-line label for a live tool group", () => { + const turnId = TurnId.make("turn-live"); + const markup = renderToStaticMarkup( + , + ); + + expect(markup).toContain("Working for"); + expect(markup).toContain("Running pnpm"); + expect(markup).toContain("live-activity-focus"); + }); + + it("scopes a live row failure to the tool named by the row", () => { + const turnId = TurnId.make("turn-live"); + const markup = renderToStaticMarkup( + , + ); + + expect(markup).toContain("Running pnpm"); + expect(markup).not.toContain("tool call failed"); + }); + + it("keeps terminal command copy live while the parent turn is active", () => { + const turnId = TurnId.make("turn-live"); + const markup = renderToStaticMarkup( + , + ); + + expect(markup).toContain("Running pnpm"); + expect(markup).toContain("tool call failed"); + }); + + it("aligns the iconless Thinking row with the working timer", () => { + const markup = renderToStaticMarkup( + , + ); + + expect(markup).toContain("Working for"); + expect(markup).toContain("Thinking"); + expect(markup).toContain("gap-1.5 py-0.5 px-1"); + }); + it("renders review comment contexts as structured cards instead of raw tags", () => { const markup = renderToStaticMarkup( void; isWorking: boolean; workingStepLabel?: string | null; - activeTurnInProgress: boolean; activeTurnStartedAt: string | null; listRef: React.RefObject; timelineEntries: ReturnType; @@ -251,7 +249,6 @@ export const MessagesTimeline = memo(function MessagesTimeline({ isWorking, workingStepLabel = null, - activeTurnInProgress, activeTurnStartedAt, agentPanelModel = EMPTY_AGENT_PANEL_MODEL, onOpenAgents = NOOP_OPEN_AGENTS, @@ -540,11 +537,10 @@ () => ({ isWorking, isRevertingCheckpoint, - activeTurnInProgress, latestTurnId: latestTurn?.turnId ?? null, workingStepLabel, }), + [isRevertingCheckpoint, isWorking, latestTurn?.turnId, workingStepLabel], - [activeTurnInProgress, isRevertingCheckpoint, isWorking, latestTurn?.turnId, workingStepLabel], ); // Stable renderItem — no closure deps. Row components read shared state @@ -921,17 +917,34 @@ type TimelineRow = MessagesTimelineRow; const TimelineRowContent = memo(function TimelineRowContent({ row }: { row: TimelineRow }) { + const isExpandedToolGroupEntry = row.kind === "work" && row.isExpandedToolGroupEntry; + const isLastExpandedToolGroupEntry = row.kind === "work" && row.isLastExpandedToolGroupEntry; + const isExpandedToolGroupHeader = + (row.kind === "work-toggle" && row.summary !== null && row.onlyToolEntries && row.expanded) || + (row.kind === "work-live" && row.expanded); + return (
+ {row.kind === "work" ? ( + + ) : null} - {row.kind === "work" ? : null} + {row.kind === "work-live" ? : null} {row.kind === "work-toggle" ? : null} {row.kind === "turn-fold" ? : null} {row.kind === "message" && row.message.role === "user" ? : null} @@ -1093,7 +1112,7 @@ aria-expanded={row.expanded} data-scroll-anchor-ignore onClick={() => ctx.onToggleTurnFold(row.turnId)} + className="flex cursor-pointer select-none items-center gap-1 rounded-md px-1 text-sm leading-relaxed text-muted-foreground tabular-nums transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring/70" - className="flex cursor-pointer select-none items-center gap-1 rounded-md px-1 text-xs text-muted-foreground tabular-nums transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring/70" > {row.label} @@ -1282,14 +1301,9 @@ function WorkingTimelineRow({ row }: { row: Extract }) { const { workingStepLabel } = use(TimelineRowActivityCtx); return ( -
-
- - - +
+
- - - +
{row.createdAt ? ( <> Working for @@ -1297,11 +1311,16 @@ ) : ( "Working..." )} + {workingStepLabel ? ( + · {workingStepLabel} + ) : null} +
- - {workingStepLabel ? ( - · {workingStepLabel} - ) : null}
+ {row.showThinking ? ( +
+ +
+ ) : null}
); } @@ -1342,13 +1361,16 @@ /** Renders one or more already-derived work log rows. Overflow expansion is modeled as LegendList data. */ const WorkGroupSection = memo(function WorkGroupSection({ groupedEntries, + isExpandedToolGroupEntry, }: { groupedEntries: Extract["groupedEntries"]; + isExpandedToolGroupEntry: boolean; }) { const { workspaceRoot } = use(TimelineRowCtx); const nonEmptyEntries = useMemo( + () => - () => groupedEntries.filter((entry) => !workEntryIndicatesToolNeutralStatus(entry)), - [groupedEntries], + groupedEntries.filter((entry) => workEntryIsVisibleInGroup(entry, isExpandedToolGroupEntry)), + [groupedEntries, isExpandedToolGroupEntry], ); const onlyToolEntries = nonEmptyEntries.every((entry) => workLogEntryIsToolLike(entry)); const groupLabel = onlyToolEntries @@ -1356,11 +1378,15 @@ ? "1 tool call" : `${nonEmptyEntries.length} tool calls` : "Work Log"; + const GroupContainer = isExpandedToolGroupEntry ? "div" : "section"; if (nonEmptyEntries.length === 0) return null; return ( -
+ {!onlyToolEntries && (

{groupLabel}

)} @@ -1370,19 +1396,170 @@ key={workEntry.id} workEntry={workEntry} workspaceRoot={workspaceRoot} + isExpandedToolGroupEntry={isExpandedToolGroupEntry} /> ))}
- + ); }); +function LiveActivityRow({ + label, + iconName, + failed = false, +}: { + label: string; + iconName?: WorkEntryIconName; + failed?: boolean; +}) { + return ( +
+ +
+
+
+ +
+
+
+
+ ); +} + +function ThinkingActivityRow() { + return ; +} + +function LiveActivityContent({ + label, + iconName, + failed = false, + announceFailure = false, + highlighted = false, +}: { + label: string; + iconName: WorkEntryIconName | undefined; + failed?: boolean; + announceFailure?: boolean; + highlighted?: boolean; +}) { + const resolvedIconName = failed ? "x" : iconName; + + return ( +
+ {resolvedIconName ? ( + + + + ) : null} + {label} +
+ ); +} + +function LiveWorkEntryTimelineRow({ row }: { row: Extract }) { + const ctx = use(TimelineRowCtx); + const label = liveWorkEntryLabel(row.entry, ctx.workspaceRoot); + const failed = workEntryDisplayIndicatesToolFailure(row.entry); + + return ( + + ); +} + +function toolGroupSummaryIconName( + kind: Extract["summaryKind"], +): WorkEntryIconName { + switch (kind) { + case "read": + return "eye"; + case "edit": + return "square-pen"; + case "command": + return "terminal"; + case "search": + return "globe"; + case "code-search": + return "search"; + case "other": + return "wrench"; + case "dynamic-tool": + return "hammer"; + case "agent-tool": + return "bot"; + case "tone-tool": + return "zap"; + case "mixed": + case null: + return "hammer"; + } +} + function WorkGroupToggleTimelineRow({ row, }: { row: Extract; }) { const ctx = use(TimelineRowCtx); + if (row.onlyToolEntries && row.summary) { + return ( + + ); + } const labelNoun = row.onlyToolEntries ? row.hiddenCount === 1 ? "tool call" @@ -1390,21 +1567,33 @@ : row.hiddenCount === 1 ? "log entry" : "log entries"; + const showHiddenFailure = row.hasFailure && !row.expanded; return (