Commit a924fbe08e681ef56d8cfb8b99e1e803d52aa463 | the-knife

apps/web/src/components/chat/MessagesTimeline.logic.test.ts+53-38

 @@ -826,7 +826,7 @@ describe("deriveMessagesTimelineRows", () => {
       "assistant-final-entry",
       "user-followup-entry",
       "working-indicator-row",
-      "thinking-indicator-row",
+      "live-activity-row",
     ]);
     const finalRow = rows.find((row) => row.id === "assistant-final-entry");
     expect(finalRow?.kind === "message" && finalRow.showAssistantMeta).toBe(true);
 @@ -879,11 +879,11 @@ describe("deriveMessagesTimelineRows", () => {
     expect(rows.map((row) => row.id)).toEqual([
       "working-indicator-row",
       "assistant-thought-entry",
-      "work-live:work-entry-1",
+      "live-activity-row",
     ]);
   });
-  it("keeps adjacent active tool calls in one replacing row", () => {
+  it("keeps an actually running tool in the shared activity row", () => {
     const rows = deriveMessagesTimelineRows({
       timelineEntries: [
         {
 @@ -948,6 +948,7 @@ describe("deriveMessagesTimelineRows", () => {
     expect(rows.some((row) => row.kind === "thinking")).toBe(false);
     expect(rows.find((row) => row.kind === "work-live")).toMatchObject({
       entry: { id: "running-command" },
+      active: true,
       groupedEntries: [
         { id: "running-command" },
         { id: "completed-edit" },
 @@ -1196,40 +1197,54 @@ describe("deriveMessagesTimelineRows", () => {
     ]);
   });
-  it("shows thinking after the latest tool call completes while the turn is running", () => {
+  it("reuses one activity row for initial thinking and the latest tool", () => {
-    const rows = deriveMessagesTimelineRows({
+    const deriveRows = (toolLifecycleStatus: "inProgress" | "completed" | null) =>
-      timelineEntries: [
+      deriveMessagesTimelineRows({
-        {
+        timelineEntries:
-          id: "latest-command-entry",
+          toolLifecycleStatus === null
-          kind: "work",
+            ? []
-          createdAt: "2026-01-01T00:00:05Z",
+            : [
-          entry: {
+                {
-            id: "latest-command",
+                  id: "latest-command-entry",
-            createdAt: "2026-01-01T00:00:05Z",
+                  kind: "work",
-            turnId: "turn-1" as never,
+                  createdAt: "2026-01-01T00:00:05Z",
-            label: "Ran rg",
+                  entry: {
-            command: "rg toolCall",
+                    id: "latest-command",
-            requestKind: "command",
+                    createdAt: "2026-01-01T00:00:05Z",
-            tone: "tool" as const,
+                    turnId: "turn-1" as never,
-            toolLifecycleStatus: "completed" as const,
+                    label: toolLifecycleStatus === "inProgress" ? "Running rg" : "Ran rg",
-          },
+                    command: "rg toolCall",
+                    requestKind: "command",
+                    tone: "tool" as const,
+                    toolLifecycleStatus,
+                  },
+                },
+              ],
+        latestTurn: {
+          turnId: "turn-1" as never,
+          state: "running",
+          startedAt: "2026-01-01T00:00:00Z",
+          completedAt: null,
         },
-      ],
+        isWorking: true,
-      latestTurn: {
+        activeTurnStartedAt: "2026-01-01T00:00:00Z",
-        turnId: "turn-1" as never,
+        turnDiffSummaryByAssistantMessageId: new Map(),
-        state: "running",
+        revertTurnCountByUserMessageId: new Map(),
-        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", "thinking"]);
+    const initialRows = deriveRows(null);
-    expect(rows.find((row) => row.kind === "work-live")).toMatchObject({ active: false });
+    const runningRows = deriveRows("inProgress");
-    expect(rows.at(-1)).toMatchObject({ kind: "thinking" });
+    const completedRows = deriveRows("completed");
+    const initialActivityRow = initialRows.find((row) => row.id === "live-activity-row");
+    const runningActivityRow = runningRows.find((row) => row.id === "live-activity-row");
+    const completedActivityRow = completedRows.find((row) => row.id === "live-activity-row");
+    expect(initialActivityRow).toMatchObject({ kind: "thinking" });
+    expect(runningActivityRow).toMatchObject({ kind: "work-live", active: true });
+    expect(completedActivityRow).toMatchObject({ kind: "work-live", active: false });
+    expect(initialRows.filter((row) => row.id === "live-activity-row")).toHaveLength(1);
+    expect(runningRows.filter((row) => row.id === "live-activity-row")).toHaveLength(1);
+    expect(completedRows.filter((row) => row.id === "live-activity-row")).toHaveLength(1);
   });
   it("does not fold the session's running turn when latestTurn regresses", () => {
 @@ -1290,7 +1305,7 @@ describe("deriveMessagesTimelineRows", () => {
     expect(rows.filter((row) => row.kind === "turn-fold").map((row) => row.turnId)).toEqual([
       "turn-1",
     ]);
-    expect(rows.map((row) => row.id)).toContain("work-live:running-work-entry");
+    expect(rows.map((row) => row.id)).toContain("live-activity-row");
   });
   it("only shows assistant metadata on the terminal assistant message", () => {
 @@ -1587,8 +1602,8 @@ describe("computeStableMessagesTimelineRows", () => {
       initial,
     );
-    const initialThinking = initial.byId.get("thinking-indicator-row");
+    const initialThinking = initial.byId.get("live-activity-row");
-    const updatedThinking = updated.byId.get("thinking-indicator-row");
+    const updatedThinking = updated.byId.get("live-activity-row");
     expect(initialThinking).toMatchObject({ kind: "thinking" });
     expect(updatedThinking).toBe(initialThinking);
     expect(updated.result.at(-1)).toBe(updatedThinking);

apps/web/src/components/chat/MessagesTimeline.logic.ts+10-9

 @@ -188,6 +188,8 @@ export type TimelineLatestTurn = Pick<
   "turnId" | "state" | "startedAt" | "completedAt"
 >;
+const LIVE_ACTIVITY_ROW_ID = "live-activity-row";
 export type MessagesTimelineRow =
   | {
       kind: "work";
 @@ -598,17 +600,16 @@ export function deriveMessagesTimelineRows(input: {
   const latestRunningToolEntry = visibleActiveToolEntries.findLast((entry) =>
     workEntryIsActiveTurnActivity(entry.entry),
   );
-  const displayedToolEntry = latestRunningToolEntry ?? latestVisibleToolEntry;
   const activeWorkPlacementEntryId = latestVisibleToolEntry?.id;
   const activeWorkRow =
-    activeWorkAnchor && displayedToolEntry
+    activeWorkAnchor && latestVisibleToolEntry
       ? (() => {
           const groupId = workGroupId(activeWorkAnchor.id, activeWorkAnchor.entry);
           return {
             kind: "work-live" as const,
-            id: `work-live:${workGroupIdentity(activeWorkAnchor.id, activeWorkAnchor.entry)}`,
+            id: LIVE_ACTIVITY_ROW_ID,
             createdAt: activeWorkAnchor.createdAt,
-            entry: displayedToolEntry.entry,
+            entry: (latestRunningToolEntry ?? latestVisibleToolEntry).entry,
             groupedEntries: visibleActiveToolEntries.map((entry) => entry.entry),
             groupId,
             expanded: input.expandedWorkGroupIds?.has(groupId) ?? false,
 @@ -626,11 +627,11 @@ export function deriveMessagesTimelineRows(input: {
       createdAt: input.activeTurnStartedAt,
     });
   };
-  let hasLiveWorkRow = false;
+  let hasActivityRow = false;
   const appendActiveWorkRows = () => {
     if (activeWorkRow === null) return;
     nextRows.push(activeWorkRow);
-    hasLiveWorkRow ||= activeWorkRow.active;
+    hasActivityRow = true;
     if (!activeWorkRow.expanded) return;
     for (const [entryIndex, workEntry] of activeWorkRow.groupedEntries.entries()) {
       nextRows.push({
 @@ -730,7 +731,7 @@ export function deriveMessagesTimelineRows(input: {
             expanded,
             active: true,
           });
-          hasLiveWorkRow = true;
+          hasActivityRow = true;
           if (expanded) {
             for (const [entryIndex, workEntry] of visibleGroupedEntries.entries()) {
               nextRows.push({
 @@ -832,10 +833,10 @@ export function deriveMessagesTimelineRows(input: {
   if (input.isWorking && activeTurnHeaderIndex === input.timelineEntries.length) {
     appendWorkingRow();
   }
-  if (input.isWorking && !hasLiveWorkRow) {
+  if (input.isWorking && !hasActivityRow) {
     nextRows.push({
       kind: "thinking",
-      id: "thinking-indicator-row",
+      id: LIVE_ACTIVITY_ROW_ID,
       createdAt: input.activeTurnStartedAt,
     });
   }

apps/web/src/components/chat/MessagesTimeline.test.tsx+34-8

 @@ -1308,7 +1308,30 @@ describe("MessagesTimeline", () => {
     expect(markup).not.toContain("tool call failed");
   });
-  it("keeps declined command copy visible while thinking continues", () => {
+  it("renders initial thinking as the shared live activity row", () => {
+    const turnId = TurnId.make("turn-live");
+    const markup = renderToStaticMarkup(
+      <MessagesTimeline
+        {...buildProps()}
+        isWorking
+        activeTurnStartedAt={MESSAGE_CREATED_AT}
+        latestTurn={{
+          turnId,
+          state: "running",
+          startedAt: MESSAGE_CREATED_AT,
+          completedAt: null,
+        }}
+        runningTurnId={turnId}
+        timelineEntries={[]}
+      />,
+    );
+    expect(markup).toContain("Thinking");
+    expect(markup).toContain("lucide-brain");
+    expect(markup).toContain('data-timeline-row-id="live-activity-row"');
+  });
+  it("keeps the completed command in the shared activity row", () => {
     const turnId = TurnId.make("turn-live");
     const markup = renderToStaticMarkup(
       <MessagesTimeline
 @@ -1324,28 +1347,31 @@ describe("MessagesTimeline", () => {
         runningTurnId={turnId}
         timelineEntries={[
           {
-            id: "entry-declined",
+            id: "entry-completed",
             kind: "work",
             createdAt: MESSAGE_CREATED_AT,
             entry: {
-              id: "work-declined",
+              id: "work-completed",
               createdAt: MESSAGE_CREATED_AT,
               turnId,
-              toolCallId: "call-declined",
+              toolCallId: "call-completed",
               label: "Run lint",
               tone: "tool",
               itemType: "command_execution",
               command: "pnpm lint",
-              toolLifecycleStatus: "declined",
+              toolLifecycleStatus: "completed",
             },
           },
         ]}
       />,
     );
-    expect(markup).toContain("Declined pnpm");
+    expect(markup).toContain("Ran pnpm");
-    expect(markup).toContain("Thinking");
+    expect(markup).toContain("lucide-terminal");
-    expect(markup).toContain("tool call failed");
+    expect(markup).not.toContain("live-activity-focus");
+    expect(markup).not.toContain("Running pnpm");
+    expect(markup).not.toContain("Thinking");
+    expect(markup).not.toContain('data-timeline-row-kind="thinking"');
   });
   it("renders review comment contexts as structured cards instead of raw tags", () => {

apps/web/src/components/chat/MessagesTimeline.tsx+9-4

...	@@ -62,6 +62,7 @@ import {	...	@@ -62,6 +62,7 @@ import {
62	import ChatMarkdown, { ChatMarkdownAssetImage } from "../ChatMarkdown";	62	import ChatMarkdown, { ChatMarkdownAssetImage } from "../ChatMarkdown";
63	import {	63	import {
64	BotIcon,	64	BotIcon,
		65	BrainIcon,
65	CheckIcon,	66	CheckIcon,
66	ChevronDownIcon,	67	ChevronDownIcon,
67	ChevronRightIcon,	68	ChevronRightIcon,
...	@@ -985,14 +986,15 @@ const TimelineRowContent = memo(function TimelineRowContent({ row }: { row: Time	...	@@ -985,14 +986,15 @@ const TimelineRowContent = memo(function TimelineRowContent({ row }: { row: Time
985	: "pb-0"	986	: "pb-0"
986	: isExpandedToolGroupHeader	987	: isExpandedToolGroupHeader
987	? "pb-0"	988	? "pb-0"
988	: row.kind === "turn-fold" \|\| row.kind === "working" \|\| row.kind === "thinking"	989	: row.kind === "turn-fold" \|\| row.kind === "working"
989	? "pb-1.5"	990	? "pb-1.5"
990	: (row.kind === "message" &&	991	: (row.kind === "message" &&
991	row.message.role === "assistant" &&	992	row.message.role === "assistant" &&
992	!row.showAssistantMeta) \|\|	993	!row.showAssistantMeta) \|\|
993	row.kind === "work" \|\|	994	row.kind === "work" \|\|
994	row.kind === "work-live" \|\|	995	row.kind === "work-live" \|\|
995	row.kind === "work-toggle"	996	row.kind === "work-toggle" \|\|
		997	row.kind === "thinking"
996	? "pb-2"	998	? "pb-2"
997	: "pb-4",	999	: "pb-4",
998	row.kind === "message" && row.message.role === "assistant" ? "group/assistant" : null,	1000	row.kind === "message" && row.message.role === "assistant" ? "group/assistant" : null,
...	@@ -1364,7 +1366,7 @@ function ThinkingTimelineRow() {	...	@@ -1364,7 +1366,7 @@ function ThinkingTimelineRow() {
1364	// Reserve the activity row during setup so the handoff keeps the same height.	1366	// Reserve the activity row during setup so the handoff keeps the same height.
1365	return (	1367	return (
1366	<div className="min-h-7">	1368	<div className="min-h-7">
1367	{isPreparingWorktree ? null : <LiveActivityRow label="Thinking" />}	1369	{isPreparingWorktree ? null : <LiveActivityRow label="Thinking" iconName="brain" />}
1368	</div>	1370	</div>
1369	);	1371	);
1370	}	1372	}
...	@@ -2123,6 +2125,7 @@ function formatWorkingTimerNow(startIso: string): string {	...	@@ -2123,6 +2125,7 @@ function formatWorkingTimerNow(startIso: string): string {
2123		2125
2124	type WorkEntryIconName =	2126	type WorkEntryIconName =
2125	\| "bot"	2127	\| "bot"
		2128	\| "brain"
2126	\| "check"	2129	\| "check"
2127	\| "circle-alert"	2130	\| "circle-alert"
2128	\| "eye"	2131	\| "eye"
...	@@ -2140,6 +2143,8 @@ function WorkEntryIconSvg({ name, className }: { name: WorkEntryIconName; classN	...	@@ -2140,6 +2143,8 @@ function WorkEntryIconSvg({ name, className }: { name: WorkEntryIconName; classN
2140	switch (name) {	2143	switch (name) {
2141	case "bot":	2144	case "bot":
2142	return <BotIcon className={className} aria-hidden />;	2145	return <BotIcon className={className} aria-hidden />;
		2146	case "brain":
		2147	return <BrainIcon className={className} aria-hidden />;
2143	case "check":	2148	case "check":
2144	return <CheckIcon className={className} aria-hidden />;	2149	return <CheckIcon className={className} aria-hidden />;
2145	case "circle-alert":	2150	case "circle-alert":
...	@@ -2179,7 +2184,7 @@ function workToneIcon(tone: TimelineWorkEntry["tone"]): {	...	@@ -2179,7 +2184,7 @@ function workToneIcon(tone: TimelineWorkEntry["tone"]): {
2179	}	2184	}
2180	if (tone === "thinking") {	2185	if (tone === "thinking") {
2181	return {	2186	return {
2182	iconName: "bot",	2187	iconName: "brain",
2183	className: "text-foreground",	2188	className: "text-foreground",
2184	};	2189	};
2185	}	2190	}

author	maria <maria@kuuro.net> 2026-09-01 16:48:27-04:00
committer	GitHub <noreply@github.com> 2026-09-01 16:48:27-04:00
log	a924fbe08e681ef56d8cfb8b99e1e803d52aa463
tree	5c79508e318cfec9c1e946bd6e8db63772e98204
parent	cb007469161ff0db2bc2dc8123c4b30e186aae50
signature	Signed by PGP key B5690EEEBB952194

fix(chat): reuse one row for live activity (#9062)