fix(site): normalize thinking transcript row (#25749)

site/src/pages/AgentsPage/components/ChatConversation/ChatStatusCallout.tsx

@@ -1,8 +1,9 @@
-import { BrainIcon } from "lucide-react";
 import { type FC, useEffect, useState } from "react";
 import { Alert, AlertDescription, AlertTitle } from "#/components/Alert/Alert";
 import { Link } from "#/components/Link/Link";
-import { Response, Shimmer } from "../ChatElements";
+import { Shimmer } from "../ChatElements";
+import { TranscriptRow } from "../ChatElements/TranscriptRow";
+import { ToolIcon } from "../ChatElements/tools/ToolIcon";
 import { getProviderStatusURL } from "./chatStatusHelpers";
 import type { LiveStatusModel } from "./liveStatusModel";
 
@@ -22,26 +23,18 @@ const StatusPlaceholder: FC<{
 	showThinkingIcon?: boolean;
 }> = ({ text, shimmer = false, showThinkingIcon = false }) => {
 	return (
-		<div className="relative min-h-6">
-			{/* Reserve the final response height without exposing a selectable copy. */}
-			<Response aria-hidden className="invisible select-none">
-				{text}
-			</Response>
-			<div className="pointer-events-none absolute inset-0 flex items-center gap-2 text-content-secondary">
-				{showThinkingIcon && (
-					<BrainIcon className="size-4 shrink-0 stroke-[1.5] text-current" />
-				)}
-				{shimmer ? (
-					<Shimmer as="div" className="text-[13px] leading-relaxed">
-						{text}
-					</Shimmer>
-				) : (
-					<span className="text-[13px] leading-relaxed text-content-secondary">
-						{text}
-					</span>
-				)}
-			</div>
-		</div>
+		<TranscriptRow className="gap-2 text-content-secondary">
+			{showThinkingIcon && <ToolIcon name="thinking" isError={false} />}
+			{shimmer ? (
+				<Shimmer as="span" className="text-[13px] leading-6">
+					{text}
+				</Shimmer>
+			) : (
+				<span className="text-[13px] leading-6 text-content-secondary">
+					{text}
+				</span>
+			)}
+		</TranscriptRow>
 	);
 };
 

site/src/pages/AgentsPage/components/ChatConversation/ConversationTimeline.tsx

@@ -1,9 +1,4 @@
-import {
-	BrainIcon,
-	ChevronLeftIcon,
-	ChevronRightIcon,
-	PencilIcon,
-} from "lucide-react";
+import { ChevronLeftIcon, ChevronRightIcon, PencilIcon } from "lucide-react";
 import {
 	type FC,
 	Fragment,
@@ -44,6 +39,7 @@ import {
 } from "../ChatElements/tools/ReadFileTool";
 import type { SubagentVariant } from "../ChatElements/tools/subagentDescriptor";
 import { ToolCollapsible } from "../ChatElements/tools/ToolCollapsible";
+import { ToolIcon } from "../ChatElements/tools/ToolIcon";
 import { ImageLightbox } from "../ImageLightbox";
 import { TextPreviewDialog } from "../TextPreviewDialog";
 import {
@@ -166,7 +162,7 @@ const ReasoningDisclosure = memo<{
 					onExpandedChange={(open) => setManualToggle(open)}
 					header={
 						<>
-							<BrainIcon className="size-4 shrink-0 stroke-[1.5] text-current" />
+							<ToolIcon name="thinking" isError={false} />
 							{isStreaming ? (
 								<Shimmer as="span" className="text-[13px] leading-6">
 									{title}

site/src/pages/AgentsPage/components/ChatConversation/StreamingOutput.tsx

@@ -1,4 +1,3 @@
-import { BrainIcon } from "lucide-react";
 import type { FC } from "react";
 import type { UrlTransform } from "streamdown";
 import type * as TypesGen from "#/api/typesGenerated";
@@ -10,6 +9,7 @@ import {
 } from "../ChatElements";
 import { TranscriptRow } from "../ChatElements/TranscriptRow";
 import type { SubagentVariant } from "../ChatElements/tools/subagentDescriptor";
+import { ToolIcon } from "../ChatElements/tools/ToolIcon";
 import { ChatStatusCallout } from "./ChatStatusCallout";
 import { BlockList } from "./ConversationTimeline";
 import type { LiveStatusModel } from "./liveStatusModel";
@@ -37,7 +37,7 @@ const hasTextOrReasoningBlock = (blocks: readonly RenderBlock[]): boolean =>
 const StreamingThinkingPlaceholder: FC = () => (
 	<div data-transcript-row="" className="text-content-secondary">
 		<TranscriptRow className="w-full gap-2">
-			<BrainIcon className="size-4 shrink-0 stroke-[1.5] text-current" />
+			<ToolIcon name="thinking" isError={false} />
 			<Shimmer as="span" className="text-[13px] leading-6">
 				Thinking
 			</Shimmer>

site/src/pages/AgentsPage/components/ChatElements/Conversation.stories.tsx

@@ -2,7 +2,6 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Conversation, ConversationItem } from "./Conversation";
 import { Message, MessageContent } from "./Message";
 import { Shimmer } from "./Shimmer";
-import { Thinking } from "./Thinking";
 
 const meta: Meta<typeof Conversation> = {
 	title: "pages/AgentsPage/ChatElements/Conversation",
@@ -37,10 +36,6 @@ export const ConversationWithMessages: Story = {
 					<Message className="w-full">
 						<MessageContent className="whitespace-normal">
 							<div className="space-y-3">
-								<Thinking>
-									Inspecting auth state and recent command output before
-									suggesting a fix.
-								</Thinking>
 								<div className="text-sm text-content-primary">
 									The remote command failed because external auth needs to be
 									refreshed.

site/src/pages/AgentsPage/components/ChatElements/Thinking.tsx

@@ -1,21 +0,0 @@
-import { BrainIcon } from "lucide-react";
-import type { ComponentPropsWithRef } from "react";
-import { cn } from "#/utils/cn";
-
-type ThinkingProps = ComponentPropsWithRef<"div">;
-
-export const Thinking = ({ className, ref, ...props }: ThinkingProps) => {
-	return (
-		<div
-			ref={ref}
-			className={cn(
-				"flex items-start gap-2 rounded-lg border border-border bg-surface-primary px-3 py-2 text-xs text-content-secondary",
-				className,
-			)}
-			{...props}
-		>
-			<BrainIcon className="mt-0.5 size-4 shrink-0 stroke-[1.5] text-current" />
-			<div className="min-w-0 flex-1">{props.children}</div>
-		</div>
-	);
-};

site/src/pages/AgentsPage/components/ChatElements/tools/ToolIcon.tsx

@@ -9,6 +9,7 @@ import {
 	PowerIcon,
 	RouteIcon,
 	ServerIcon,
+	SparklesIcon,
 	TerminalIcon,
 	WrenchIcon,
 } from "lucide-react";
@@ -116,6 +117,8 @@ export const ToolIcon: React.FC<{
 			return <PowerIcon className={base} />;
 		case "chat_summarized":
 			return <BotIcon className={base} />;
+		case "thinking":
+			return <SparklesIcon className={base} />;
 		case "propose_plan":
 			return <RouteIcon className={base} />;
 		case "ask_user_question":