Clean up the tool progress UX

Author: mrubens

src/core/diff/strategies/multi-search-replace.ts

@@ -368,18 +368,20 @@ Only use a single line of '=======' between search and replacement content, beca
 	getProgressStatus(toolUse: ToolUse, result?: DiffResult): ToolProgressStatus {
 		const diffContent = toolUse.params.diff
 		if (diffContent) {
+			const icon = "diff-multiple"
+			const searchBlockCount = (diffContent.match(/SEARCH/g) || []).length
 			if (toolUse.partial) {
 				if (diffContent.length < 1000 || (diffContent.length / 50) % 10 === 0) {
-					return { text: `progressing ${(diffContent.match(/SEARCH/g) || []).length} blocks...` }
+					return { icon, text: `${searchBlockCount}` }
 				}
 			} else if (result) {
-				const searchBlockCount = (diffContent.match(/SEARCH/g) || []).length
-				if (result.failParts) {
+				if (result.failParts?.length) {
 					return {
-						text: `progressed ${searchBlockCount - result.failParts.length}/${searchBlockCount} blocks.`,
+						icon,
+						text: `${searchBlockCount - result.failParts.length}/${searchBlockCount}`,
 					}
 				} else {
-					return { text: `progressed ${searchBlockCount} blocks.` }
+					return { icon, text: `${searchBlockCount}` }
 				}
 			}
 		}

src/shared/ExtensionMessage.ts

@@ -277,5 +277,6 @@ export interface HumanRelayCancelMessage {
 export type ClineApiReqCancelReason = "streaming_failed" | "user_cancelled"
 
 export type ToolProgressStatus = {
+	icon?: string
 	text?: string
 }

webview-ui/src/components/common/CodeAccordian.tsx

@@ -99,14 +99,12 @@ const CodeAccordian = ({
 					)}
 					<div style={{ flexGrow: 1 }}></div>
 					{progressStatus && progressStatus.text && (
-						<span
-							style={{
-								color: "var(--vscode-descriptionForeground)",
-								borderTop: isExpanded ? "1px solid var(--vscode-editorGroup-border)" : "none",
-								marginLeft: "auto", // Right-align the text
-							}}>
-							{progressStatus.text}
-						</span>
+						<>
+							{progressStatus.icon && <span className={`codicon codicon-${progressStatus.icon} mr-1`} />}
+							<span className="mr-1 ml-auto text-vscode-descriptionForeground">
+								{progressStatus.text}
+							</span>
+						</>
 					)}
 					<span className={`codicon codicon-chevron-${isExpanded ? "up" : "down"}`}></span>
 				</div>