From 809167d7a5cfb104705e229d2b83c30ec69a58da Mon Sep 17 00:00:00 2001
From: Roo Code <roomote@roocode.com>
Date: Tue, 21 Oct 2025 19:01:02 +0000
Subject: [PATCH] fix: add expand/collapse functionality to API Request section

- Replace static double-arrow icon with expandable chevron for completed API requests
- Add click handler to toggle expansion state
- Display API request details in CodeAccordian when expanded
- Maintain consistent UI behavior with other expandable sections

Fixes #8755
---
 webview-ui/src/components/chat/ChatRow.tsx | 86 +++++++++++++++++++++-
 1 file changed, 83 insertions(+), 3 deletions(-)

diff --git a/webview-ui/src/components/chat/ChatRow.tsx b/webview-ui/src/components/chat/ChatRow.tsx
index b0b87e7a2d..b10e5c67d9 100644
--- a/webview-ui/src/components/chat/ChatRow.tsx
+++ b/webview-ui/src/components/chat/ChatRow.tsx
@@ -1032,12 +1032,16 @@ export const ChatRowContent = ({
 					const isApiRequestInProgress =
 						apiReqCancelReason === undefined && apiRequestFailedMessage === undefined && cost === undefined
 
+					// For completed requests (with cost), make them expandable
+					const isCompletedRequest = cost !== null && cost !== undefined
+					const canExpand = isCompletedRequest && message.text !== null && message.text !== undefined
+
 					return (
 						<>
 							<div
 								className={`group text-sm transition-opacity ${
 									isApiRequestInProgress ? "opacity-100" : "opacity-40 hover:opacity-100"
-								}`}
+								} ${canExpand ? "cursor-pointer" : ""}`}
 								style={{
 									...headerStyle,
 									marginBottom:
@@ -1046,9 +1050,74 @@ export const ChatRowContent = ({
 											? 10
 											: 0,
 									justifyContent: "space-between",
-								}}>
+								}}
+								onClick={canExpand ? handleToggleExpand : undefined}>
 								<div style={{ display: "flex", alignItems: "center", gap: "10px", flexGrow: 1 }}>
-									{icon}
+									{apiReqCancelReason !== null && apiReqCancelReason !== undefined ? (
+										apiReqCancelReason === "user_cancelled" ? (
+											<div
+												style={{
+													width: 16,
+													height: 16,
+													display: "flex",
+													alignItems: "center",
+													justifyContent: "center",
+												}}>
+												<span
+													className="codicon codicon-error"
+													style={{
+														color: cancelledColor,
+														fontSize: 16,
+														marginBottom: "-1.5px",
+													}}
+												/>
+											</div>
+										) : (
+											<div
+												style={{
+													width: 16,
+													height: 16,
+													display: "flex",
+													alignItems: "center",
+													justifyContent: "center",
+												}}>
+												<span
+													className="codicon codicon-error"
+													style={{ color: errorColor, fontSize: 16, marginBottom: "-1.5px" }}
+												/>
+											</div>
+										)
+									) : canExpand ? (
+										<div
+											style={{
+												width: 16,
+												height: 16,
+												display: "flex",
+												alignItems: "center",
+												justifyContent: "center",
+											}}>
+											<span
+												className={`codicon codicon-chevron-${isExpanded ? "up" : "down"}`}
+												style={{ color: normalColor, fontSize: 16, marginBottom: "-1.5px" }}
+											/>
+										</div>
+									) : apiRequestFailedMessage ? (
+										<div
+											style={{
+												width: 16,
+												height: 16,
+												display: "flex",
+												alignItems: "center",
+												justifyContent: "center",
+											}}>
+											<span
+												className="codicon codicon-error"
+												style={{ color: errorColor, fontSize: 16, marginBottom: "-1.5px" }}
+											/>
+										</div>
+									) : (
+										<ProgressIndicator />
+									)}
 									{title}
 								</div>
 								<div
@@ -1057,6 +1126,17 @@ export const ChatRowContent = ({
 									${Number(cost || 0)?.toFixed(4)}
 								</div>
 							</div>
+							{/* Show API request details when expanded */}
+							{canExpand && isExpanded && message.text && (
+								<div className="pl-6 mt-2">
+									<CodeAccordian
+										code={message.text}
+										language="json"
+										isExpanded={true}
+										onToggleExpand={() => {}}
+									/>
+								</div>
+							)}
 							{(((cost === null || cost === undefined) && apiRequestFailedMessage) ||
 								apiReqStreamingFailedMessage) && (
 								<ErrorRow