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 1/2] 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 b0b87e7a2dd..b10e5c67d98 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

From daaedc65963f8598dd50def679a4c4a7b60338d8 Mon Sep 17 00:00:00 2001
From: Roo Code <roomote@roocode.com>
Date: Tue, 21 Oct 2025 19:13:06 +0000
Subject: [PATCH 2/2] refactor: address code review feedback

- Remove code duplication in icon rendering logic
- Use existing icon variable for non-expandable states
- Fix CodeAccordion onToggleExpand handler
---
 webview-ui/src/components/chat/ChatRow.tsx | 55 ++--------------------
 1 file changed, 4 insertions(+), 51 deletions(-)

diff --git a/webview-ui/src/components/chat/ChatRow.tsx b/webview-ui/src/components/chat/ChatRow.tsx
index b10e5c67d98..f042f06db39 100644
--- a/webview-ui/src/components/chat/ChatRow.tsx
+++ b/webview-ui/src/components/chat/ChatRow.tsx
@@ -1053,41 +1053,8 @@ export const ChatRowContent = ({
 								}}
 								onClick={canExpand ? handleToggleExpand : undefined}>
 								<div style={{ display: "flex", alignItems: "center", gap: "10px", flexGrow: 1 }}>
-									{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 ? (
+									{/* Use chevron icon for expandable completed requests, otherwise use the computed icon */}
+									{canExpand ? (
 										<div
 											style={{
 												width: 16,
@@ -1101,22 +1068,8 @@ export const ChatRowContent = ({
 												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 />
+										icon
 									)}
 									{title}
 								</div>
@@ -1133,7 +1086,7 @@ export const ChatRowContent = ({
 										code={message.text}
 										language="json"
 										isExpanded={true}
-										onToggleExpand={() => {}}
+										onToggleExpand={handleToggleExpand}
 									/>
 								</div>
 							)}