Fix API req error showing when resuming task

src/core/ClaudeDev.ts

@@ -411,28 +411,19 @@ export class ClaudeDev {
 			modifiedClaudeMessages.splice(lastRelevantMessageIndex + 1)
 		}
 
-		// remove the last api_req_started message if it has no cancelReason
+		// since we don't use api_req_finished anymore, we need to check if the last api_req_started has a cost value, if it doesn't and no cancellation reason to present, then we remove it since it indicates an api request without any partial content streamed
-		const lastMessage = modifiedClaudeMessages.at(-1)
+		const lastApiReqStartedIndex = findLastIndex(
-		if (lastMessage?.say === "api_req_started" && lastMessage.text) {
+			modifiedClaudeMessages,
-			const apiReqInfo: ClaudeApiReqInfo = JSON.parse(lastMessage.text)
+			(m) => m.type === "say" && m.say === "api_req_started"
-			if (apiReqInfo.cancelReason === undefined) {
+		)
-				modifiedClaudeMessages.pop()
+		if (lastApiReqStartedIndex !== -1) {
+			const lastApiReqStarted = modifiedClaudeMessages[lastApiReqStartedIndex]
+			const { cost, cancelReason }: ClaudeApiReqInfo = JSON.parse(lastApiReqStarted.text || "{}")
+			if (cost === undefined || cancelReason === undefined) {
+				modifiedClaudeMessages.splice(lastApiReqStartedIndex, 1)
 			}
 		}
 
-		// since we don't use api_req_finished anymore, we need to check if the last api_req_started has a cost value, if it doesn't and it's not cancelled, then we remove it since it indicates an api request without any partial content streamed
-		// const lastApiReqStartedIndex = findLastIndex(
-		// 	modifiedClaudeMessages,
-		// 	(m) => m.type === "say" && m.say === "api_req_started"
-		// )
-		// if (lastApiReqStartedIndex !== -1) {
-		// 	const lastApiReqStarted = modifiedClaudeMessages[lastApiReqStartedIndex]
-		// 	const { cost, cancelled }: ClaudeApiReqInfo = JSON.parse(lastApiReqStarted.text || "{}")
-		// 	if (cost === undefined || cancelled) {
-		// 		modifiedClaudeMessages.splice(lastApiReqStartedIndex, 1)
-		// 	}
-		// }
-
 		await this.overwriteClaudeMessages(modifiedClaudeMessages)
 		this.claudeMessages = await this.getSavedClaudeMessages()
 

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

@@ -68,6 +68,7 @@ const ChatRowContent = ({ message, isExpanded, onToggleExpand, lastModifiedMessa
 		}
 		return [undefined, undefined, undefined]
 	}, [message.text, message.say])
+	// when resuming task, last wont be api_req_failed but a resume_task message, so api_req_started will show loading spinner. that's why we just remove the last api_req_started that failed without streaming anything
 	const apiRequestFailedMessage =
 		isLast && lastModifiedMessage?.ask === "api_req_failed" // if request is retried then the latest message is a api_req_retried
 			? lastModifiedMessage?.text
@@ -137,31 +138,27 @@ const ChatRowContent = ({ message, isExpanded, onToggleExpand, lastModifiedMessa
 					</div>
 				)
 				return [
-					cost != null ? (
 					apiReqCancelReason != null ? (
 						apiReqCancelReason === "user_cancelled" ? (
 							getIconSpan("error", cancelledColor)
 						) : (
 							getIconSpan("error", errorColor)
 						)
-						) : (
+					) : cost != null ? (
 						getIconSpan("check", successColor)
-						)
 					) : apiRequestFailedMessage ? (
 						getIconSpan("error", errorColor)
 					) : (
 						<ProgressIndicator />
 					),
-					cost != null ? (
 					apiReqCancelReason != null ? (
 						apiReqCancelReason === "user_cancelled" ? (
 							<span style={{ color: normalColor, fontWeight: "bold" }}>API Request Cancelled</span>
 						) : (
 							<span style={{ color: errorColor, fontWeight: "bold" }}>API Streaming Failed</span>
 						)
-						) : (
+					) : cost != null ? (
 						<span style={{ color: normalColor, fontWeight: "bold" }}>API Request</span>
-						)
 					) : apiRequestFailedMessage ? (
 						<span style={{ color: errorColor, fontWeight: "bold" }}>API Request Failed</span>
 					) : (