From 3a4e8b8d9684e8109c3fceebe205736f9c05fdfa Mon Sep 17 00:00:00 2001
From: Saoud Rizwan <7799382+saoudrizwan@users.noreply.github.com>
Date: Tue, 10 Sep 2024 16:25:38 -0400
Subject: [PATCH] Cosmetic updates

---
 icons/icon.png                              | Bin 6128 -> 6760 bytes
 package.json                                |   2 +-
 src/integrations/TerminalManager.ts         |   3 +
 webview-ui/src/components/ChatRow.tsx       |  46 +--
 webview-ui/src/components/ChatView.tsx      |   7 +-
 webview-ui/src/components/CodeAccordian.tsx |  42 ++-
 webview-ui/src/components/TaskHeader.tsx    | 312 ++++++++++++--------
 7 files changed, 238 insertions(+), 174 deletions(-)

diff --git a/icons/icon.png b/icons/icon.png
index f981fe0f699926940e9a880e35defc0647cafc05..c9dc6a8fa41517f3f644913fd49067409d8b99a7 100644
GIT binary patch
delta 6691
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

delta 6054
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

diff --git a/package.json b/package.json
index 2b10aba..3d2b49e 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
   "version": "1.6.2",
   "icon": "icons/icon.png",
   "galleryBanner": {
-    "color": "#C1DCEA",
+    "color": "#C7D1D9",
     "theme": "light"
   },
   "engines": {
diff --git a/src/integrations/TerminalManager.ts b/src/integrations/TerminalManager.ts
index dec8851..cb75979 100644
--- a/src/integrations/TerminalManager.ts
+++ b/src/integrations/TerminalManager.ts
@@ -330,6 +330,9 @@ export class TerminalProcess extends EventEmitter<TerminalProcessEvents> {
 					data = lines.join("\n")
 				}
 
+				// sometimes chunks have leading/trailing commas which we'll remove too
+				data = data.replace(/^,+|,+$/g, "")
+
 				// For non-immediately returning commands we want to show loading spinner right away but this wouldnt happen until it emits a line break, so as soon as we get any output we emit "" to let webview know to show spinner
 				if (!didEmitEmptyLine && !this.fullOutput && data) {
 					this.emit("line", "") // empty line to indicate start of command output stream
diff --git a/webview-ui/src/components/ChatRow.tsx b/webview-ui/src/components/ChatRow.tsx
index 2ca2557..7bad2bf 100644
--- a/webview-ui/src/components/ChatRow.tsx
+++ b/webview-ui/src/components/ChatRow.tsx
@@ -1,4 +1,4 @@
-import { VSCodeBadge, VSCodeButton, VSCodeProgressRing } from "@vscode/webview-ui-toolkit/react"
+import { VSCodeBadge, VSCodeProgressRing } from "@vscode/webview-ui-toolkit/react"
 import deepEqual from "fast-deep-equal"
 import React, { memo, useMemo } from "react"
 import ReactMarkdown from "react-markdown"
@@ -103,11 +103,11 @@ const ChatRowContent = ({ message, isExpanded, onToggleExpand, lastModifiedMessa
 						<ProgressIndicator />
 					),
 					cost != null ? (
-						<span style={{ color: normalColor, fontWeight: "bold" }}>API Request Complete</span>
+						<span style={{ color: normalColor, fontWeight: "bold" }}>API Request</span>
 					) : apiRequestFailedMessage ? (
 						<span style={{ color: errorColor, fontWeight: "bold" }}>API Request Failed</span>
 					) : (
-						<span style={{ color: normalColor, fontWeight: "bold" }}>Making API Request...</span>
+						<span style={{ color: normalColor, fontWeight: "bold" }}>API Request...</span>
 					),
 				]
 			case "followup":
@@ -299,15 +299,19 @@ const ChatRowContent = ({ message, isExpanded, onToggleExpand, lastModifiedMessa
 									...headerStyle,
 									marginBottom: cost == null && apiRequestFailedMessage ? 10 : 0,
 									justifyContent: "space-between",
-								}}>
+									cursor: "pointer",
+									userSelect: "none",
+									WebkitUserSelect: "none",
+									MozUserSelect: "none",
+									msUserSelect: "none",
+								}}
+								onClick={onToggleExpand}>
 								<div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
 									{icon}
 									{title}
 									{cost != null && cost > 0 && <VSCodeBadge>${Number(cost)?.toFixed(4)}</VSCodeBadge>}
 								</div>
-								<VSCodeButton appearance="icon" aria-label="Toggle Details" onClick={onToggleExpand}>
-									<span className={`codicon codicon-chevron-${isExpanded ? "up" : "down"}`}></span>
-								</VSCodeButton>
+								<span className={`codicon codicon-chevron-${isExpanded ? "up" : "down"}`}></span>
 							</div>
 							{cost == null && apiRequestFailedMessage && (
 								<>
@@ -391,24 +395,12 @@ const ChatRowContent = ({ message, isExpanded, onToggleExpand, lastModifiedMessa
 					return (
 						<div
 							style={{
-								backgroundColor: "var(--vscode-editor-inactiveSelectionBackground)",
-								borderRadius: "3px",
-								padding: "8px",
-								whiteSpace: "pre-line",
-								wordWrap: "break-word",
+								marginTop: -10,
+								width: "100%",
 							}}>
-							<span
-								style={{
-									display: "block",
-									fontStyle: "italic",
-									marginBottom: "8px",
-									opacity: 0.8,
-								}}>
-								The user made the following changes:
-							</span>
 							<CodeAccordian
 								diff={tool.diff!}
-								path={tool.path!}
+								isFeedback={true}
 								isExpanded={isExpanded}
 								onToggleExpand={onToggleExpand}
 							/>
@@ -627,7 +619,8 @@ const Markdown = memo(({ markdown }: { markdown?: string }) => {
 	// react-markdown lets us customize elements, so here we're using their example of replacing code blocks with SyntaxHighlighter. However when there are no language matches (` or ``` without a language specifier) then we default to a normal code element for inline code. Code blocks without a language specifier shouldn't be a common occurrence as we prompt Claude to always use a language specifier.
 	// when claude wraps text in thinking tags, he doesnt use line breaks so we need to insert those ourselves to render markdown correctly
 	const parsed = markdown?.replace(/<thinking>([\s\S]*?)<\/thinking>/g, (match, content) => {
-		return `_<thinking>_\n\n${content}\n\n_</thinking>_`
+		return content
+		// return `_<thinking>_\n\n${content}\n\n_</thinking>_`
 	})
 	return (
 		<div style={{ wordBreak: "break-word", overflowWrap: "anywhere" }}>
@@ -704,6 +697,13 @@ const Markdown = memo(({ markdown }: { markdown?: string }) => {
 									whiteSpace: "pre-line",
 									wordBreak: "break-word",
 									overflowWrap: "anywhere",
+									backgroundColor: "var(--vscode-textCodeBlock-background)",
+									color: "var(--vscode-textPreformat-foreground)",
+									fontFamily: "var(--vscode-editor-font-family)",
+									fontSize: "var(--vscode-editor-font-size)",
+									borderRadius: "3px",
+									border: "1px solid var(--vscode-textSeparator-foreground)",
+									// padding: "2px 4px",
 								}}>
 								{children}
 							</code>
diff --git a/webview-ui/src/components/ChatView.tsx b/webview-ui/src/components/ChatView.tsx
index 126bb57..10b7e00 100644
--- a/webview-ui/src/components/ChatView.tsx
+++ b/webview-ui/src/components/ChatView.tsx
@@ -602,11 +602,12 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
 						// Since we have maxRows, when text is long enough it starts to overflow the bottom padding, appearing behind the thumbnails. To fix this, we use a transparent border to push the text up instead. (https://stackoverflow.com/questions/42631947/maintaining-a-padding-inside-of-text-area/52538410#52538410)
 						borderTop: "9px solid transparent",
 						borderBottom: `${thumbnailsHeight + 9}px solid transparent`,
-						borderRight: "54px solid transparent",
-						borderLeft: "9px solid transparent",
+						borderColor: "transparent",
+						// borderRight: "54px solid transparent",
+						// borderLeft: "9px solid transparent", // NOTE: react-textarea-autosize doesn't calculate correct height when using borderLeft/borderRight so we need to use horizontal padding instead
 						// Instead of using boxShadow, we use a div with a border to better replicate the behavior when the textarea is focused
 						// boxShadow: "0px 0px 0px 1px var(--vscode-input-border)",
-						padding: 0,
+						padding: "0 50px 0 9px",
 						cursor: textAreaDisabled ? "not-allowed" : undefined,
 						flex: 1,
 					}}
diff --git a/webview-ui/src/components/CodeAccordian.tsx b/webview-ui/src/components/CodeAccordian.tsx
index d9e2f76..358118c 100644
--- a/webview-ui/src/components/CodeAccordian.tsx
+++ b/webview-ui/src/components/CodeAccordian.tsx
@@ -7,6 +7,7 @@ interface CodeAccordianProps {
 	diff?: string
 	language?: string | undefined
 	path?: string
+	isFeedback?: boolean
 	isExpanded: boolean
 	onToggleExpand: () => void
 }
@@ -19,7 +20,7 @@ The replace method removes these matched characters, effectively trimming the st
 */
 const removeLeadingNonAlphanumeric = (path: string): string => path.replace(/^[^a-zA-Z0-9]+/, "")
 
-const CodeAccordian = ({ code, diff, language, path, isExpanded, onToggleExpand }: CodeAccordianProps) => {
+const CodeAccordian = ({ code, diff, language, path, isFeedback, isExpanded, onToggleExpand }: CodeAccordianProps) => {
 	const inferredLanguage = useMemo(
 		() => code && (language ?? (path ? getLanguageFromPath(path) : undefined)),
 		[path, language, code]
@@ -33,7 +34,7 @@ const CodeAccordian = ({ code, diff, language, path, isExpanded, onToggleExpand
 				overflow: "hidden", // This ensures the inner scrollable area doesn't overflow the rounded corners
 				border: "1px solid var(--vscode-editorGroup-border)",
 			}}>
-			{path && (
+			{(path || isFeedback) && (
 				<div
 					style={{
 						color: "var(--vscode-descriptionForeground)",
@@ -42,25 +43,34 @@ const CodeAccordian = ({ code, diff, language, path, isExpanded, onToggleExpand
 						alignItems: "center",
 						padding: "6px 10px",
 						cursor: "pointer",
+						userSelect: "none",
+						WebkitUserSelect: "none",
+						MozUserSelect: "none",
+						msUserSelect: "none",
 					}}
 					onClick={onToggleExpand}>
-					<span
-						style={{
-							whiteSpace: "nowrap",
-							overflow: "hidden",
-							textOverflow: "ellipsis",
-							marginRight: "8px",
-							fontSize: "11px",
-							// trick to get ellipsis at beginning of string
-							direction: "rtl",
-							textAlign: "left",
-						}}>
-						{removeLeadingNonAlphanumeric(path) + "\u200E"}
-					</span>
+					<div style={{ display: "flex", alignItems: "center" }}>
+						{isFeedback && (
+							<span className="codicon codicon-feedback" style={{ marginRight: "6px" }}></span>
+						)}
+						<span
+							style={{
+								whiteSpace: "nowrap",
+								overflow: "hidden",
+								textOverflow: "ellipsis",
+								marginRight: "8px",
+								fontSize: "11px",
+								// trick to get ellipsis at beginning of string
+								direction: "rtl",
+								textAlign: "left",
+							}}>
+							{isFeedback ? "User Edits" : removeLeadingNonAlphanumeric(path ?? "") + "\u200E"}
+						</span>
+					</div>
 					<span className={`codicon codicon-chevron-${isExpanded ? "up" : "down"}`}></span>
 				</div>
 			)}
-			{(!path || isExpanded) && (
+			{(!(path || isFeedback) || isExpanded) && (
 				<div
 					//className="code-block-scrollable" this doesn't seem to be necessary anymore, on silicon macs it shows the native mac scrollbar instead of the vscode styled one
 					style={{
diff --git a/webview-ui/src/components/TaskHeader.tsx b/webview-ui/src/components/TaskHeader.tsx
index 31e4c39..2bcd82e 100644
--- a/webview-ui/src/components/TaskHeader.tsx
+++ b/webview-ui/src/components/TaskHeader.tsx
@@ -28,7 +28,8 @@ const TaskHeader: React.FC<TaskHeaderProps> = ({
 	onClose,
 }) => {
 	const { apiConfiguration } = useExtensionState()
-	const [isExpanded, setIsExpanded] = useState(false)
+	const [isTaskExpanded, setIsTaskExpanded] = useState(true)
+	const [isTextExpanded, setIsTextExpanded] = useState(false)
 	const [showSeeMore, setShowSeeMore] = useState(false)
 	const textContainerRef = useRef<HTMLDivElement>(null)
 	const textRef = useRef<HTMLDivElement>(null)
@@ -68,11 +69,11 @@ const TaskHeader: React.FC<TaskHeaderProps> = ({
 	const { height: windowHeight, width: windowWidth } = useWindowSize()
 
 	useEffect(() => {
-		if (isExpanded && textContainerRef.current) {
+		if (isTextExpanded && textContainerRef.current) {
 			const maxHeight = windowHeight * (1 / 2)
 			textContainerRef.current.style.maxHeight = `${maxHeight}px`
 		}
-	}, [isExpanded, windowHeight])
+	}, [isTextExpanded, windowHeight])
 
 	useEffect(() => {
 		if (textRef.current && textContainerRef.current) {
@@ -83,7 +84,7 @@ const TaskHeader: React.FC<TaskHeaderProps> = ({
 			const isOverflowing = textRef.current.scrollHeight > textContainerHeight
 			// necessary to show see more button again if user resizes window to expand and then back to collapse
 			if (!isOverflowing) {
-				setIsExpanded(false)
+				setIsTextExpanded(false)
 			}
 			setShowSeeMore(isOverflowing)
 		}
@@ -96,10 +97,10 @@ const TaskHeader: React.FC<TaskHeaderProps> = ({
 					backgroundColor: "var(--vscode-badge-background)",
 					color: "var(--vscode-badge-foreground)",
 					borderRadius: "3px",
-					padding: "12px",
+					padding: "9px 10px 9px 14px",
 					display: "flex",
 					flexDirection: "column",
-					gap: "8px",
+					gap: 6,
 					position: "relative",
 					zIndex: 1,
 				}}>
@@ -109,144 +110,191 @@ const TaskHeader: React.FC<TaskHeaderProps> = ({
 						justifyContent: "space-between",
 						alignItems: "center",
 					}}>
-					<span style={{ fontWeight: "bold" }}>Task</span>
-					<VSCodeButton
-						appearance="icon"
-						onClick={onClose}
-						style={{ marginTop: "-6px", marginRight: "-4px" }}>
+					<div
+						style={{
+							display: "flex",
+							alignItems: "center",
+							cursor: "pointer",
+							marginLeft: -2,
+							userSelect: "none",
+							WebkitUserSelect: "none",
+							MozUserSelect: "none",
+							msUserSelect: "none",
+							flexGrow: 1,
+							minWidth: 0, // This allows the div to shrink below its content size
+						}}
+						onClick={() => setIsTaskExpanded(!isTaskExpanded)}>
+						<div style={{ display: "flex", alignItems: "center", flexShrink: 0 }}>
+							<span className={`codicon codicon-chevron-${isTaskExpanded ? "down" : "right"}`}></span>
+						</div>
+						<div
+							style={{
+								marginLeft: 6,
+								whiteSpace: "nowrap",
+								overflow: "hidden",
+								textOverflow: "ellipsis",
+								flexGrow: 1,
+								minWidth: 0, // This allows the div to shrink below its content size
+							}}>
+							<span style={{ fontWeight: "bold" }}>Task{!isTaskExpanded && ":"}</span>
+							{!isTaskExpanded && <span style={{ marginLeft: 4 }}>{task.text}</span>}
+						</div>
+					</div>
+					{!isTaskExpanded && (
+						<div
+							style={{
+								marginLeft: 10,
+								backgroundColor: "color-mix(in srgb, var(--vscode-badge-foreground) 70%, transparent)",
+								color: "var(--vscode-badge-background)",
+								padding: "2px 4px",
+								borderRadius: "500px",
+								fontSize: "11px",
+								fontWeight: 500,
+								display: "inline-block",
+								flexShrink: 0,
+							}}>
+							${totalCost?.toFixed(4)}
+						</div>
+					)}
+					<VSCodeButton appearance="icon" onClick={onClose} style={{ marginLeft: 10, flexShrink: 0 }}>
 						<span className="codicon codicon-close"></span>
 					</VSCodeButton>
 				</div>
-				<div
-					ref={textContainerRef}
-					style={{
-						fontSize: "var(--vscode-font-size)",
-						overflowY: isExpanded ? "auto" : "hidden",
-						wordBreak: "break-word",
-						overflowWrap: "anywhere",
-						position: "relative",
-					}}>
-					<div
-						ref={textRef}
-						style={{
-							display: "-webkit-box",
-							WebkitLineClamp: isExpanded ? "unset" : 3,
-							WebkitBoxOrient: "vertical",
-							overflow: "hidden",
-							whiteSpace: "pre-wrap",
-							wordBreak: "break-word",
-							overflowWrap: "anywhere",
-						}}>
-						{task.text}
-					</div>
-					{!isExpanded && showSeeMore && (
+				{isTaskExpanded && (
+					<>
 						<div
+							ref={textContainerRef}
 							style={{
-								position: "absolute",
-								right: 0,
-								bottom: 0,
-								display: "flex",
-								alignItems: "center",
+								marginTop: -2,
+								fontSize: "var(--vscode-font-size)",
+								overflowY: isTextExpanded ? "auto" : "hidden",
+								wordBreak: "break-word",
+								overflowWrap: "anywhere",
+								position: "relative",
 							}}>
 							<div
+								ref={textRef}
 								style={{
-									width: 30,
-									height: "1.2em",
-									background:
-										"linear-gradient(to right, transparent, var(--vscode-badge-background))",
-								}}
-							/>
+									display: "-webkit-box",
+									WebkitLineClamp: isTextExpanded ? "unset" : 3,
+									WebkitBoxOrient: "vertical",
+									overflow: "hidden",
+									whiteSpace: "pre-wrap",
+									wordBreak: "break-word",
+									overflowWrap: "anywhere",
+								}}>
+								{task.text}
+							</div>
+							{!isTextExpanded && showSeeMore && (
+								<div
+									style={{
+										position: "absolute",
+										right: 0,
+										bottom: 0,
+										display: "flex",
+										alignItems: "center",
+									}}>
+									<div
+										style={{
+											width: 30,
+											height: "1.2em",
+											background:
+												"linear-gradient(to right, transparent, var(--vscode-badge-background))",
+										}}
+									/>
+									<div
+										style={{
+											cursor: "pointer",
+											color: "var(--vscode-textLink-foreground)",
+											paddingRight: 0,
+											paddingLeft: 3,
+											backgroundColor: "var(--vscode-badge-background)",
+										}}
+										onClick={() => setIsTextExpanded(!isTextExpanded)}>
+										See more
+									</div>
+								</div>
+							)}
+						</div>
+						{isTextExpanded && showSeeMore && (
 							<div
 								style={{
 									cursor: "pointer",
 									color: "var(--vscode-textLink-foreground)",
-									paddingRight: 0,
-									paddingLeft: 3,
-									backgroundColor: "var(--vscode-badge-background)",
+									marginLeft: "auto",
+									textAlign: "right",
+									paddingRight: 2,
 								}}
-								onClick={() => setIsExpanded(!isExpanded)}>
-								See more
+								onClick={() => setIsTextExpanded(!isTextExpanded)}>
+								See less
 							</div>
-						</div>
-					)}
-				</div>
-				{isExpanded && showSeeMore && (
-					<div
-						style={{
-							cursor: "pointer",
-							color: "var(--vscode-textLink-foreground)",
-							marginLeft: "auto",
-							textAlign: "right",
-							paddingRight: 2,
-						}}
-						onClick={() => setIsExpanded(!isExpanded)}>
-						See less
-					</div>
-				)}
-				{task.images && task.images.length > 0 && <Thumbnails images={task.images} />}
-				<div style={{ display: "flex", flexDirection: "column", gap: "4px" }}>
-					<div
-						style={{
-							display: "flex",
-							justifyContent: "space-between",
-							alignItems: "center",
-						}}>
-						<div style={{ display: "flex", alignItems: "center", gap: "4px", flexWrap: "wrap" }}>
-							<span style={{ fontWeight: "bold" }}>Tokens:</span>
-							<span style={{ display: "flex", alignItems: "center", gap: "3px" }}>
-								<i
-									className="codicon codicon-arrow-up"
-									style={{ fontSize: "12px", fontWeight: "bold", marginBottom: "-2px" }}
-								/>
-								{tokensIn?.toLocaleString()}
-							</span>
-							<span style={{ display: "flex", alignItems: "center", gap: "3px" }}>
-								<i
-									className="codicon codicon-arrow-down"
-									style={{ fontSize: "12px", fontWeight: "bold", marginBottom: "-2px" }}
-								/>
-								{tokensOut?.toLocaleString()}
-							</span>
-						</div>
-						{(apiConfiguration?.apiProvider === "openai" || apiConfiguration?.apiProvider === "ollama") && (
-							<ExportButton />
 						)}
-					</div>
-
-					{(doesModelSupportPromptCache || cacheReads !== undefined || cacheWrites !== undefined) && (
-						<div style={{ display: "flex", alignItems: "center", gap: "4px", flexWrap: "wrap" }}>
-							<span style={{ fontWeight: "bold" }}>Cache:</span>
-							<span style={{ display: "flex", alignItems: "center", gap: "3px" }}>
-								<i
-									className="codicon codicon-database"
-									style={{ fontSize: "12px", fontWeight: "bold", marginBottom: "-1px" }}
-								/>
-								+{(cacheWrites || 0)?.toLocaleString()}
-							</span>
-							<span style={{ display: "flex", alignItems: "center", gap: "3px" }}>
-								<i
-									className="codicon codicon-arrow-right"
-									style={{ fontSize: "12px", fontWeight: "bold", marginBottom: 0 }}
-								/>
-								{(cacheReads || 0)?.toLocaleString()}
-							</span>
-						</div>
-					)}
-					{apiConfiguration?.apiProvider !== "openai" && apiConfiguration?.apiProvider !== "ollama" && (
-						<div
-							style={{
-								display: "flex",
-								justifyContent: "space-between",
-								alignItems: "center",
-							}}>
-							<div style={{ display: "flex", alignItems: "center", gap: "4px" }}>
-								<span style={{ fontWeight: "bold" }}>API Cost:</span>
-								<span>${totalCost?.toFixed(4)}</span>
+						{task.images && task.images.length > 0 && <Thumbnails images={task.images} />}
+						<div style={{ display: "flex", flexDirection: "column", gap: "4px" }}>
+							<div
+								style={{
+									display: "flex",
+									justifyContent: "space-between",
+									alignItems: "center",
+								}}>
+								<div style={{ display: "flex", alignItems: "center", gap: "4px", flexWrap: "wrap" }}>
+									<span style={{ fontWeight: "bold" }}>Tokens:</span>
+									<span style={{ display: "flex", alignItems: "center", gap: "3px" }}>
+										<i
+											className="codicon codicon-arrow-up"
+											style={{ fontSize: "12px", fontWeight: "bold", marginBottom: "-2px" }}
+										/>
+										{tokensIn?.toLocaleString()}
+									</span>
+									<span style={{ display: "flex", alignItems: "center", gap: "3px" }}>
+										<i
+											className="codicon codicon-arrow-down"
+											style={{ fontSize: "12px", fontWeight: "bold", marginBottom: "-2px" }}
+										/>
+										{tokensOut?.toLocaleString()}
+									</span>
+								</div>
+								{(apiConfiguration?.apiProvider === "openai" ||
+									apiConfiguration?.apiProvider === "ollama") && <ExportButton />}
 							</div>
-							<ExportButton />
+
+							{(doesModelSupportPromptCache || cacheReads !== undefined || cacheWrites !== undefined) && (
+								<div style={{ display: "flex", alignItems: "center", gap: "4px", flexWrap: "wrap" }}>
+									<span style={{ fontWeight: "bold" }}>Cache:</span>
+									<span style={{ display: "flex", alignItems: "center", gap: "3px" }}>
+										<i
+											className="codicon codicon-database"
+											style={{ fontSize: "12px", fontWeight: "bold", marginBottom: "-1px" }}
+										/>
+										+{(cacheWrites || 0)?.toLocaleString()}
+									</span>
+									<span style={{ display: "flex", alignItems: "center", gap: "3px" }}>
+										<i
+											className="codicon codicon-arrow-right"
+											style={{ fontSize: "12px", fontWeight: "bold", marginBottom: 0 }}
+										/>
+										{(cacheReads || 0)?.toLocaleString()}
+									</span>
+								</div>
+							)}
+							{apiConfiguration?.apiProvider !== "openai" &&
+								apiConfiguration?.apiProvider !== "ollama" && (
+									<div
+										style={{
+											display: "flex",
+											justifyContent: "space-between",
+											alignItems: "center",
+										}}>
+										<div style={{ display: "flex", alignItems: "center", gap: "4px" }}>
+											<span style={{ fontWeight: "bold" }}>API Cost:</span>
+											<span>${totalCost?.toFixed(4)}</span>
+										</div>
+										<ExportButton />
+									</div>
+								)}
 						</div>
-					)}
-				</div>
+					</>
+				)}
 			</div>
 			{/* {apiProvider === "kodu" && (
 				<div
@@ -284,10 +332,12 @@ const ExportButton = () => (
 	<VSCodeButton
 		appearance="icon"
 		onClick={() => vscode.postMessage({ type: "exportCurrentTask" })}
-		style={{
-			marginBottom: "-2px",
-			marginRight: "-2.5px",
-		}}>
+		style={
+			{
+				// marginBottom: "-2px",
+				// marginRight: "-2.5px",
+			}
+		}>
 		<div style={{ fontSize: "10.5px", fontWeight: "bold", opacity: 0.6 }}>EXPORT</div>
 	</VSCodeButton>
 )