Show progress indicator while command is executing

src/ClaudeDev.ts

@@ -547,7 +547,7 @@ export class ClaudeDev {
 				}
 			} catch (e) {
 				if ((e as ExecaError).signal === "SIGINT") {
-					const line = `\nUser exited command early...`
+					const line = `\nUser exited command...`
 					await this.say("command_output", line)
 					result += line
 				} else {

webview-ui/src/components/ChatRow.tsx

@@ -12,7 +12,8 @@ interface ChatRowProps {
 	syntaxHighlighterStyle: SyntaxHighlighterStyle
 	isExpanded: boolean
 	onToggleExpand: () => void
-	apiRequestFailedMessage?: string
+	lastModifiedMessage?: ClaudeMessage
+	isLast: boolean
 }
 
 const ChatRow: React.FC<ChatRowProps> = ({
@@ -20,15 +21,37 @@ const ChatRow: React.FC<ChatRowProps> = ({
 	syntaxHighlighterStyle,
 	isExpanded,
 	onToggleExpand,
-	apiRequestFailedMessage,
+	lastModifiedMessage,
+	isLast,
 }) => {
 	const cost = message.text != null && message.say === "api_req_started" ? JSON.parse(message.text).cost : undefined
+	const apiRequestFailedMessage =
+		isLast && lastModifiedMessage?.ask === "api_req_failed" // if request is retried then the latest message is a api_req_retried
+			? lastModifiedMessage?.text
+			: undefined
+	const isCommandExecuting =
+		isLast && lastModifiedMessage?.ask === "command" && lastModifiedMessage?.text?.includes(COMMAND_OUTPUT_STRING)
 
 	const getIconAndTitle = (type: ClaudeAsk | ClaudeSay | undefined): [JSX.Element | null, JSX.Element | null] => {
 		const normalColor = "var(--vscode-foreground)"
 		const errorColor = "var(--vscode-errorForeground)"
 		const successColor = "var(--vscode-testing-iconPassed)"
 
+		const ProgressIndicator = (
+			<div
+				style={{
+					width: "16px",
+					height: "16px",
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "center",
+				}}>
+				<div style={{ transform: "scale(0.55)", transformOrigin: "center" }}>
+					<VSCodeProgressRing />
+				</div>
+			</div>
+		)
+
 		switch (type) {
 			case "request_limit_reached":
 				return [
@@ -46,9 +69,13 @@ const ChatRow: React.FC<ChatRowProps> = ({
 				]
 			case "command":
 				return [
-					<span
-						className="codicon codicon-terminal"
-						style={{ color: normalColor, marginBottom: "-1.5px" }}></span>,
+					isCommandExecuting ? (
+						ProgressIndicator
+					) : (
+						<span
+							className="codicon codicon-terminal"
+							style={{ color: normalColor, marginBottom: "-1.5px" }}></span>
+					),
 					<span style={{ color: normalColor, fontWeight: "bold" }}>
 						Claude wants to execute this command:
 					</span>,
@@ -71,18 +98,7 @@ const ChatRow: React.FC<ChatRowProps> = ({
 							className="codicon codicon-error"
 							style={{ color: errorColor, marginBottom: "-1.5px" }}></span>
 					) : (
-						<div
-							style={{
-								width: "16px",
-								height: "16px",
-								display: "flex",
-								alignItems: "center",
-								justifyContent: "center",
-							}}>
-							<div style={{ transform: "scale(0.55)", transformOrigin: "center" }}>
-								<VSCodeProgressRing />
-							</div>
-						</div>
+						ProgressIndicator
 					),
 					cost ? (
 						<span style={{ color: normalColor, fontWeight: "bold" }}>API Request Complete</span>
@@ -92,6 +108,13 @@ const ChatRow: React.FC<ChatRowProps> = ({
 						<span style={{ color: normalColor, fontWeight: "bold" }}>Making API Request...</span>
 					),
 				]
+			case "followup":
+				return [
+					<span
+						className="codicon codicon-question"
+						style={{ color: normalColor, marginBottom: "-1.5px" }}></span>,
+					<span style={{ color: normalColor, fontWeight: "bold" }}>Claude has a question:</span>,
+				]
 			default:
 				return [null, null]
 		}

webview-ui/src/components/ChatView.tsx

@@ -112,7 +112,7 @@ const ChatView = ({ messages, isHidden, vscodeThemeName, showAnnouncement, hideA
 							setTextAreaDisabled(false)
 							setClaudeAsk("command_output")
 							setEnableButtons(true)
-							setPrimaryButtonText("Exit Command Early")
+							setPrimaryButtonText("Exit Command")
 							setSecondaryButtonText(undefined)
 							break
 						case "completion_result":
@@ -394,11 +394,8 @@ const ChatView = ({ messages, isHidden, vscodeThemeName, showAnnouncement, hideA
 						syntaxHighlighterStyle={syntaxHighlighterStyle}
 						isExpanded={expandedRows[message.ts] || false}
 						onToggleExpand={() => toggleRowExpansion(message.ts)}
-						apiRequestFailedMessage={
-							index === visibleMessages.length - 1 && modifiedMessages.at(-1)?.ask === "api_req_failed" // if request is retried then the latest message is a api_req_retried
-								? modifiedMessages.at(-1)?.text
-								: undefined
-						}
+						lastModifiedMessage={modifiedMessages.at(-1)}
+						isLast={index === visibleMessages.length - 1}
 					/>
 				)}
 			/>