Add mistake tracking to prevent indefinitely running loops

webview-ui/src/components/ChatRow.tsx

@@ -64,6 +64,13 @@ const ChatRow: React.FC<ChatRowProps> = ({
 						style={{ color: errorColor, marginBottom: "-1.5px" }}></span>,
 					<span style={{ color: errorColor, fontWeight: "bold" }}>Error</span>,
 				]
+			case "mistake_limit_reached":
+				return [
+					<span
+						className="codicon codicon-error"
+						style={{ color: errorColor, marginBottom: "-1.5px" }}></span>,
+					<span style={{ color: errorColor, fontWeight: "bold" }}>Claude is having trouble...</span>,
+				]
 			case "command":
 				return [
 					isCommandExecuting ? (
@@ -403,6 +410,16 @@ const ChatRow: React.FC<ChatRowProps> = ({
 				switch (message.ask) {
 					case "tool":
 						return renderTool(message, headerStyle)
+					case "mistake_limit_reached":
+						return (
+							<>
+								<div style={headerStyle}>
+									{icon}
+									{title}
+								</div>
+								<p style={{ ...pStyle, color: "var(--vscode-errorForeground)" }}>{message.text}</p>
+							</>
+						)
 					case "command":
 						const splitMessage = (text: string) => {
 							const outputIndex = text.indexOf(COMMAND_OUTPUT_STRING)