fix(site/src/pages/AgentsPage/components/ChatConversation): bound thinking preview work and use an ellipsis character

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

@@ -2102,6 +2102,42 @@ export const ThinkingBlockAlwaysCollapsed: Story = {
 	},
 };
 
+export const ThinkingBlockLongPreview: Story = {
+	parameters: {
+		queries: [
+			{
+				key: ["me", "preferences"],
+				data: {
+					thinking_display_mode: "always_collapsed" as const,
+					shell_tool_display_mode: "auto" as const,
+					code_diff_display_mode: "auto" as const,
+					agent_chat_send_shortcut: "enter" as const,
+				},
+			},
+		],
+	},
+	args: {
+		...defaultArgs,
+		parsedMessages: buildMessages([
+			{
+				...baseMessage,
+				id: 1,
+				role: "assistant",
+				content: [
+					{
+						type: "reasoning",
+						text: "This pattern looks like stacked merges through a merge queue or Graphite-style tool, where commits land in order once each parent branch is merged.",
+					},
+					{
+						type: "text",
+						text: "Here is the answer.",
+					},
+				],
+			},
+		]),
+	},
+};
+
 export const SequentialReadFilesCollapsed: Story = {
 	args: {
 		...defaultArgs,

site/src/pages/AgentsPage/components/ChatConversation/thinkingTitle.test.ts

@@ -12,7 +12,15 @@ describe("getThinkingDisclosureDisplay", () => {
 	it("truncates long text without a heading into the title", () => {
 		const text = `${"a".repeat(120)} more`;
 		expect(getThinkingDisclosureDisplay(text)).toEqual({
-			title: `${"a".repeat(100)}...`,
+			title: `${"a".repeat(100)}…`,
+			body: text,
+		});
+	});
+
+	it("strips inline Markdown from the preview title", () => {
+		const text = "Check **the** `config` in [docs](https://example.com)\nnow.";
+		expect(getThinkingDisclosureDisplay(text)).toEqual({
+			title: "Check the config in docs now.",
 			body: text,
 		});
 	});

site/src/pages/AgentsPage/components/ChatConversation/thinkingTitle.ts

@@ -222,14 +222,17 @@ const removeHeading = (text: string, heading: HeadingMatch): string => {
 };
 
 const getPreviewTitle = (text: string): string => {
-	const preview = cleanHeadingText(text);
+	// Bound the cleanup work: this runs on every streamed chunk of reasoning
+	// that can grow to many kilobytes.
+	const preview = cleanHeadingText(text.slice(0, PREVIEW_TITLE_MAX_LENGTH * 4));
 	if (!preview) {
 		return DEFAULT_THINKING_TITLE;
 	}
-	if (preview.length <= PREVIEW_TITLE_MAX_LENGTH) {
+	const characters = Array.from(preview);
+	if (characters.length <= PREVIEW_TITLE_MAX_LENGTH) {
 		return preview;
 	}
-	return `${preview.slice(0, PREVIEW_TITLE_MAX_LENGTH).trimEnd()}...`;
+	return `${characters.slice(0, PREVIEW_TITLE_MAX_LENGTH).join("").trimEnd()}…`;
 };
 
 export const getThinkingDisclosureDisplay = (