refactor: simplify ReasoningBlock by removing timer persistence

- Remove unnecessary persistence logic for timer state
- Remove updateMessageReasoningMeta handler from webviewMessageHandler
- Remove ReasoningMeta type and related fields from WebviewMessage
- Keep simple ephemeral timer that runs while reasoning is active
- Only show timer when elapsed time is greater than 0

Author: daniel-lxs

src/core/webview/webviewMessageHandler.ts

@@ -2865,35 +2865,6 @@ export const webviewMessageHandler = async (
 			}
 			break
 		}
-		case "updateMessageReasoningMeta": {
-			// Persist reasoning timer metadata on a specific message (by ts)
-			try {
-				const currentCline = provider.getCurrentTask()
-				if (!currentCline || !message.messageTs) {
-					break
-				}
-				const { messageIndex } = findMessageIndices(message.messageTs, currentCline)
-				if (messageIndex === -1) {
-					break
-				}
-				const msg = currentCline.clineMessages[messageIndex] as { metadata?: { reasoning?: { startedAt?: number; elapsedMs?: number } } }
-				const existingMeta = msg.metadata || {}
-				const existingReasoning = existingMeta.reasoning || {}
-				msg.metadata = {
-					...existingMeta,
-					reasoning: { ...existingReasoning, ...(message.reasoningMeta || {}) },
-				}
-
-				await saveTaskMessages({
-					messages: currentCline.clineMessages,
-					taskId: currentCline.taskId,
-					globalStoragePath: provider.contextProxy.globalStorageUri.fsPath,
-				})
-			} catch (error) {
-				console.error("[updateMessageReasoningMeta] Failed to persist reasoning metadata:", error)
-			}
-			break
-		}
 		case "showMdmAuthRequiredNotification": {
 			// Show notification that organization requires authentication
 			vscode.window.showWarningMessage(t("common:mdm.info.organization_requires_auth"))

src/shared/WebviewMessage.ts

@@ -23,11 +23,6 @@ export interface UpdateTodoListPayload {
 	todos: any[]
 }
 
-export interface ReasoningMeta {
-	startedAt?: number
-	elapsedMs?: number
-}
-
 export type EditQueuedMessagePayload = Pick<QueuedMessage, "id" | "text" | "images">
 
 export interface WebviewMessage {
@@ -226,7 +221,6 @@ export interface WebviewMessage {
 		| "queueMessage"
 		| "removeQueuedMessage"
 		| "editQueuedMessage"
-		| "updateMessageReasoningMeta"
 	text?: string
 	editedMessageContent?: string
 	tab?: "settings" | "history" | "mcp" | "modes" | "chat" | "marketplace" | "cloud"
@@ -262,7 +256,6 @@ export interface WebviewMessage {
 	terminalOperation?: "continue" | "abort"
 	messageTs?: number
 	restoreCheckpoint?: boolean
-	reasoningMeta?: ReasoningMeta
 	historyPreviewCollapsed?: boolean
 	filters?: { type?: string; search?: string; tags?: string[] }
 	settings?: any

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

@@ -1,114 +1,54 @@
-import React, { useEffect, useMemo, useRef, useState } from "react"
+import React, { useEffect, useRef, useState } from "react"
 import { useTranslation } from "react-i18next"
 
 import MarkdownBlock from "../common/MarkdownBlock"
-import { vscode } from "@src/utils/vscode"
-
-interface ReasoningMeta {
-	startedAt?: number
-	elapsedMs?: number
-}
+import { Clock, Lightbulb } from "lucide-react"
 
 interface ReasoningBlockProps {
 	content: string
 	ts: number
 	isStreaming: boolean
 	isLast: boolean
-	metadata?: { reasoning?: ReasoningMeta } | Record<string, any>
+	metadata?: any
 }
 
 /**
- * Render reasoning with a heading and a persistent timer.
+ * Render reasoning with a heading and a simple timer.
  * - Heading uses i18n key chat:reasoning.thinking
- * - Timer shown beside the heading and persists via message.metadata.reasoning { startedAt, elapsedMs }
+ * - Timer runs while reasoning is active (no persistence)
  */
-export const ReasoningBlock = ({ content, ts, isStreaming, isLast, metadata }: ReasoningBlockProps) => {
+export const ReasoningBlock = ({ content, isStreaming, isLast }: ReasoningBlockProps) => {
 	const { t } = useTranslation()
 
-	const persisted: ReasoningMeta = (metadata?.reasoning as ReasoningMeta) || {}
-	const startedAtRef = useRef<number>(persisted.startedAt ?? Date.now())
-	const [elapsed, setElapsed] = useState<number>(persisted.elapsedMs ?? 0)
-	const postedRef = useRef<boolean>(false)
-	const intervalRef = useRef<number | null>(null)
+	const startTimeRef = useRef<number>(Date.now())
+	const [elapsed, setElapsed] = useState<number>(0)
 
-	// Initialize startedAt on first mount if missing (persist to task) - guard with postedRef
+	// Simple timer that runs while streaming
 	useEffect(() => {
-		if (!persisted.startedAt && isLast && !postedRef.current) {
-			postedRef.current = true
-			vscode.postMessage({
-				type: "updateMessageReasoningMeta",
-				messageTs: ts,
-				reasoningMeta: { startedAt: startedAtRef.current },
-			})
-		}
-	}, [ts, isLast, persisted.startedAt])
-
-	// Tick while active (last row and streaming)
-	useEffect(() => {
-		const active = isLast && isStreaming
-		if (!active) return
-
-		const tick = () => setElapsed(Date.now() - startedAtRef.current)
-		tick()
-		// ensure no duplicate intervals
-		if (intervalRef.current) {
-			clearInterval(intervalRef.current)
-			intervalRef.current = null
-		}
-		intervalRef.current = window.setInterval(tick, 1000)
-		return () => {
-			if (intervalRef.current) {
-				clearInterval(intervalRef.current)
-				intervalRef.current = null
-			}
+		if (isLast && isStreaming) {
+			const tick = () => setElapsed(Date.now() - startTimeRef.current)
+			tick()
+			const id = setInterval(tick, 1000)
+			return () => clearInterval(id)
 		}
 	}, [isLast, isStreaming])
 
-	// Cleanup on unmount (safety net)
-	useEffect(() => {
-		return () => {
-			if (intervalRef.current) {
-				clearInterval(intervalRef.current)
-				intervalRef.current = null
-			}
-		}
-	}, [])
-
-	// Persist final elapsed when streaming stops
-	const wasActiveRef = useRef<boolean>(false)
-	useEffect(() => {
-		const active = isLast && isStreaming
-		if (wasActiveRef.current && !active) {
-			const finalMs = Date.now() - startedAtRef.current
-			setElapsed(finalMs)
-			vscode.postMessage({
-				type: "updateMessageReasoningMeta",
-				messageTs: ts,
-				reasoningMeta: { startedAt: startedAtRef.current, elapsedMs: finalMs },
-			})
-		}
-		wasActiveRef.current = active
-	}, [isLast, isStreaming, ts])
-
-	const displayMs = useMemo(() => {
-		if (isLast && isStreaming) return elapsed
-		return persisted.elapsedMs ?? elapsed
-	}, [elapsed, isLast, isStreaming, persisted.elapsedMs])
-
-	const seconds = Math.max(0, Math.floor((displayMs || 0) / 1000))
+	const seconds = Math.floor(elapsed / 1000)
 	const secondsLabel = t("chat:reasoning.seconds", { count: seconds })
 
 	return (
 		<div className="py-1">
 			<div className="flex items-center justify-between mb-2.5">
 				<div className="flex items-center gap-2">
-					<span className="codicon codicon-light-bulb text-vscode-charts-yellow" />
+					<Lightbulb className="w-4" />
 					<span className="font-bold text-vscode-foreground">{t("chat:reasoning.thinking")}</span>
 				</div>
-				<span className="text-vscode-foreground tabular-nums flex items-center gap-1">
-					<span className="codicon codicon-clock text-base" />
-					{secondsLabel}
-				</span>
+				{elapsed > 0 && (
+					<span className="text-vscode-foreground tabular-nums flex items-center gap-1">
+						<Clock className="w-4" />
+						{secondsLabel}
+					</span>
+				)}
 			</div>
 			{(content?.trim()?.length ?? 0) > 0 && (
 				<div className="px-3 italic text-vscode-descriptionForeground">