ui(reasoning): simplify ReasoningBlock to italic content only; remove timer/header/icons and inline styles; align ChatRow props; type-safe updateMessageReasoningMeta; remove added logging

Author: hannesrudolph

src/core/webview/webviewMessageHandler.ts

@@ -2866,7 +2866,7 @@ export const webviewMessageHandler = async (
 			break
 		}
 		case "updateMessageReasoningMeta": {
-			// Persist reasoning timer metadata on a specific message (by ts)
+			// Persist reasoning metadata on a specific message (by ts)
 			try {
 				const currentCline = provider.getCurrentTask()
 				if (!currentCline || !message.messageTs) {
@@ -2876,21 +2876,28 @@ export const webviewMessageHandler = async (
 				if (messageIndex === -1) {
 					break
 				}
-				const msg = currentCline.clineMessages[messageIndex] as any
-				const existingMeta = (msg.metadata as any) || {}
-				const existingReasoning = existingMeta.reasoning || {}
-				msg.metadata = {
+
+				type ReasoningMeta = { startedAt?: number; elapsedMs?: number }
+				type MetadataWithReasoning = Record<string, unknown> & { reasoning?: ReasoningMeta }
+
+				const msg = currentCline.clineMessages[messageIndex] as ClineMessage
+				const existingMeta = (msg.metadata as MetadataWithReasoning | undefined) ?? {}
+				const existingReasoning = existingMeta.reasoning ?? {}
+
+				const updatedMeta: MetadataWithReasoning = {
 					...existingMeta,
-					reasoning: { ...existingReasoning, ...(message.reasoningMeta || {}) },
+					reasoning: { ...existingReasoning, ...(message.reasoningMeta ?? {}) },
 				}
 
+				;(msg as unknown as { metadata?: MetadataWithReasoning }).metadata = updatedMeta
+
 				await saveTaskMessages({
 					messages: currentCline.clineMessages,
 					taskId: currentCline.taskId,
 					globalStoragePath: provider.contextProxy.globalStorageUri.fsPath,
 				})
-			} catch (error) {
-				console.error("[updateMessageReasoningMeta] Failed to persist reasoning metadata:", error)
+			} catch {
+				/* noop */
 			}
 			break
 		}

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

@@ -1083,15 +1083,7 @@ export const ChatRowContent = ({
 						</div>
 					)
 				case "reasoning":
-					return (
-						<ReasoningBlock
-							content={message.text || ""}
-							ts={message.ts}
-							isStreaming={isStreaming}
-							isLast={isLast}
-							metadata={message.metadata as any}
-						/>
-					)
+					return <ReasoningBlock content={message.text || ""} />
 				case "api_req_started":
 					return (
 						<>

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

@@ -1,93 +1,15 @@
-import React, { useEffect, useMemo, useRef, useState } from "react"
-import { useTranslation } from "react-i18next"
-
+import React from "react"
 import MarkdownBlock from "../common/MarkdownBlock"
-import { vscode } from "@src/utils/vscode"
 
 interface ReasoningBlockProps {
 	content: string
-	ts: number
-	isStreaming: boolean
-	isLast: boolean
-	metadata?: Record<string, any>
 }
 
-/**
- * Render reasoning with a heading and a persistent timer.
- * - Heading uses i18n key chat:reasoning.thinking
- * - Timer shown as "(⟲ 24s)" beside the heading and persists via message.metadata.reasoning { startedAt, elapsedMs }
- */
-export const ReasoningBlock = ({ content, ts, isStreaming, isLast, metadata }: ReasoningBlockProps) => {
-	const { t } = useTranslation()
-
-	const persisted = (metadata?.reasoning as { startedAt?: number; elapsedMs?: number } | undefined) || {}
-	const startedAtRef = useRef<number>(persisted.startedAt ?? Date.now())
-	const [elapsed, setElapsed] = useState<number>(persisted.elapsedMs ?? 0)
-
-	// Initialize startedAt on first mount if missing (persist to task)
-	useEffect(() => {
-		if (!persisted.startedAt && isLast) {
-			vscode.postMessage({
-				type: "updateMessageReasoningMeta",
-				messageTs: ts,
-				reasoningMeta: { startedAt: startedAtRef.current },
-			} as any)
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [ts])
-
-	// Tick while active (last row and streaming)
-	useEffect(() => {
-		const active = isLast && isStreaming
-		if (!active) return
-
-		const tick = () => setElapsed(Date.now() - startedAtRef.current)
-		tick()
-		const id = setInterval(tick, 1000)
-		return () => clearInterval(id)
-	}, [isLast, isStreaming])
-
-	// 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 },
-			} as any)
-		}
-		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 secondsLabel = t("chat:reasoning.seconds", { count: seconds })
-
+export const ReasoningBlock = ({ content }: ReasoningBlockProps) => {
+	if (!content?.trim()) return null
 	return (
-		<div className="py-1">
-			<div className="flex items-center justify-between mb-[10px]">
-				<div className="flex items-center gap-2">
-					<span className="codicon codicon-light-bulb" style={{ color: "var(--vscode-charts-yellow)" }} />
-					<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" style={{ fontSize: "inherit" }} />
-					{secondsLabel}
-				</span>
-			</div>
-			{(content?.trim()?.length ?? 0) > 0 && (
-				<div className="px-3 italic text-vscode-descriptionForeground">
-					<MarkdownBlock markdown={content} />
-				</div>
-			)}
+		<div className="px-3 py-1 italic text-vscode-descriptionForeground">
+			<MarkdownBlock markdown={content} />
 		</div>
 	)
 }