feat: Add collapsed/expanded states to ReasoningBlock

- Add collapsible UI with chevron icon that shows on hover
- Default to collapsed state showing only last 2 lines
- Move elapsed time counter next to thinking label
- Add smooth transitions and gradient mask for collapsed state

Author: roomote

webview-ui/src/components/chat/ReasoningBlock.tsx

@@ -1,8 +1,10 @@
 import React, { useEffect, useRef, useState } from "react"
 import { useTranslation } from "react-i18next"
+import { useExtensionState } from "@src/context/ExtensionStateContext"
 
 import MarkdownBlock from "../common/MarkdownBlock"
-import { Lightbulb } from "lucide-react"
+import { Lightbulb, ChevronDown, ChevronRight } from "lucide-react"
+import { cn } from "@/lib/utils"
 
 interface ReasoningBlockProps {
 	content: string
@@ -16,12 +18,23 @@ interface ReasoningBlockProps {
  * Render reasoning with a heading and a simple timer.
  * - Heading uses i18n key chat:reasoning.thinking
  * - Timer runs while reasoning is active (no persistence)
+ * - Can be collapsed to show only last 2 lines of content
  */
 export const ReasoningBlock = ({ content, isStreaming, isLast }: ReasoningBlockProps) => {
 	const { t } = useTranslation()
+	const { reasoningBlockCollapsed } = useExtensionState()
+
+	// Initialize collapsed state based on global setting (default to collapsed)
+	const [isCollapsed, setIsCollapsed] = useState(reasoningBlockCollapsed !== false)
 
 	const startTimeRef = useRef<number>(Date.now())
 	const [elapsed, setElapsed] = useState<number>(0)
+	const contentRef = useRef<HTMLDivElement>(null)
+
+	// Update collapsed state when global setting changes
+	useEffect(() => {
+		setIsCollapsed(reasoningBlockCollapsed !== false)
+	}, [reasoningBlockCollapsed])
 
 	// Simple timer that runs while streaming
 	useEffect(() => {
@@ -36,22 +49,50 @@ export const ReasoningBlock = ({ content, isStreaming, isLast }: ReasoningBlockP
 	const seconds = Math.floor(elapsed / 1000)
 	const secondsLabel = t("chat:reasoning.seconds", { count: seconds })
 
+	const handleToggle = () => {
+		setIsCollapsed(!isCollapsed)
+	}
+
 	return (
-		<div>
-			<div className="flex items-center justify-between mb-2.5 pr-2">
+		<div className="group">
+			<div
+				className="flex items-center justify-between mb-2.5 pr-2 cursor-pointer select-none"
+				onClick={handleToggle}>
 				<div className="flex items-center gap-2">
 					<Lightbulb className="w-4" />
 					<span className="font-bold text-vscode-foreground">{t("chat:reasoning.thinking")}</span>
+					{elapsed > 0 && (
+						<span className="text-sm text-vscode-descriptionForeground tabular-nums">{secondsLabel}</span>
+					)}
+				</div>
+				<div className="opacity-0 group-hover:opacity-100 transition-opacity">
+					{isCollapsed ? <ChevronRight className="w-4" /> : <ChevronDown className="w-4" />}
 				</div>
-				{elapsed > 0 && (
-					<span className="text-sm text-vscode-descriptionForeground tabular-nums flex items-center gap-1">
-						{secondsLabel}
-					</span>
-				)}
 			</div>
 			{(content?.trim()?.length ?? 0) > 0 && (
-				<div className="border-l border-vscode-descriptionForeground/20 ml-2 pl-4 pb-1 text-vscode-descriptionForeground">
-					<MarkdownBlock markdown={content} />
+				<div
+					ref={contentRef}
+					className={cn(
+						"border-l border-vscode-descriptionForeground/20 ml-2 pl-4 pb-1 text-vscode-descriptionForeground",
+						isCollapsed && "relative overflow-hidden",
+					)}
+					style={
+						isCollapsed
+							? {
+									maxHeight: "3em", // Approximately 2 lines
+									maskImage: "linear-gradient(to top, transparent 0%, black 30%)",
+									WebkitMaskImage: "linear-gradient(to top, transparent 0%, black 30%)",
+								}
+							: undefined
+					}>
+					{isCollapsed ? (
+						// When collapsed, render content in a container that shows bottom-aligned text
+						<div className="flex flex-col justify-end" style={{ minHeight: "3em" }}>
+							<MarkdownBlock markdown={content} />
+						</div>
+					) : (
+						<MarkdownBlock markdown={content} />
+					)}
 				</div>
 			)}
 		</div>

webview-ui/src/context/ExtensionStateContext.tsx

@@ -26,6 +26,7 @@ import { convertTextMateToHljs } from "@src/utils/textMateToHljs"
 
 export interface ExtensionStateContextType extends ExtensionState {
 	historyPreviewCollapsed?: boolean // Add the new state property
+	reasoningBlockCollapsed?: boolean // Add reasoning block collapsed state
 	didHydrateState: boolean
 	showWelcome: boolean
 	theme: any
@@ -142,6 +143,7 @@ export interface ExtensionStateContextType extends ExtensionState {
 	terminalCompressProgressBar?: boolean
 	setTerminalCompressProgressBar: (value: boolean) => void
 	setHistoryPreviewCollapsed: (value: boolean) => void
+	setReasoningBlockCollapsed: (value: boolean) => void
 	autoCondenseContext: boolean
 	setAutoCondenseContext: (value: boolean) => void
 	autoCondenseContextPercent: number
@@ -280,6 +282,7 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
 		global: {},
 	})
 	const [includeTaskHistoryInEnhance, setIncludeTaskHistoryInEnhance] = useState(true)
+	const [reasoningBlockCollapsed, setReasoningBlockCollapsed] = useState(true) // Default to collapsed
 
 	const setListApiConfigMeta = useCallback(
 		(value: ProviderSettingsEntry[]) => setState((prevState) => ({ ...prevState, listApiConfigMeta: value })),
@@ -317,6 +320,10 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
 					if ((newState as any).includeTaskHistoryInEnhance !== undefined) {
 						setIncludeTaskHistoryInEnhance((newState as any).includeTaskHistoryInEnhance)
 					}
+					// Update reasoningBlockCollapsed if present in state message
+					if ((newState as any).reasoningBlockCollapsed !== undefined) {
+						setReasoningBlockCollapsed((newState as any).reasoningBlockCollapsed)
+					}
 					// Handle marketplace data if present in state message
 					if (newState.marketplaceItems !== undefined) {
 						setMarketplaceItems(newState.marketplaceItems)
@@ -413,6 +420,7 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
 
 	const contextValue: ExtensionStateContextType = {
 		...state,
+		reasoningBlockCollapsed,
 		didHydrateState,
 		showWelcome,
 		theme,
@@ -528,6 +536,7 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
 			}),
 		setHistoryPreviewCollapsed: (value) =>
 			setState((prevState) => ({ ...prevState, historyPreviewCollapsed: value })),
+		setReasoningBlockCollapsed,
 		setHasOpenedModeSelector: (value) => setState((prevState) => ({ ...prevState, hasOpenedModeSelector: value })),
 		setAutoCondenseContext: (value) => setState((prevState) => ({ ...prevState, autoCondenseContext: value })),
 		setAutoCondenseContextPercent: (value) =>