From 0c8df6aa614b4ba0f27a876a557db27e8bd84c45 Mon Sep 17 00:00:00 2001
From: Saoud Rizwan <7799382+saoudrizwan@users.noreply.github.com>
Date: Tue, 4 Feb 2025 14:36:16 -0800
Subject: [PATCH] Fix error handling

---
 package.json                                  |  4 +-
 webview-ui/src/components/chat/ChatRow.tsx    | 85 +++++++++----------
 .../src/components/chat/CreditLimitError.tsx  |  7 +-
 3 files changed, 46 insertions(+), 50 deletions(-)

diff --git a/package.json b/package.json
index 367f6944a6..85f3c34b31 100644
--- a/package.json
+++ b/package.json
@@ -124,12 +124,12 @@
 					"when": "view == claude-dev.SidebarProvider"
 				},
 				{
-					"command": "cline.settingsButtonClicked",
+					"command": "cline.accountLoginClicked",
 					"group": "navigation@5",
 					"when": "view == claude-dev.SidebarProvider"
 				},
 				{
-					"command": "cline.accountLoginClicked",
+					"command": "cline.settingsButtonClicked",
 					"group": "navigation@6",
 					"when": "view == claude-dev.SidebarProvider"
 				}
diff --git a/webview-ui/src/components/chat/ChatRow.tsx b/webview-ui/src/components/chat/ChatRow.tsx
index ae38d7ef62..70ab3276ab 100644
--- a/webview-ui/src/components/chat/ChatRow.tsx
+++ b/webview-ui/src/components/chat/ChatRow.tsx
@@ -274,25 +274,12 @@ export const ChatRowContent = ({ message, isExpanded, onToggleExpand, lastModifi
 						}
 
 						if (apiRequestFailedMessage) {
-							try {
-								const startIndex = apiRequestFailedMessage.indexOf("{")
-								const endIndex = apiRequestFailedMessage.lastIndexOf("}")
-								if (startIndex !== -1 && endIndex !== -1) {
-									const jsonStr = apiRequestFailedMessage.substring(startIndex, endIndex + 1)
-									const errorData = JSON.parse(jsonStr)
-									if (
-										errorData.code === "insufficient_credits" &&
-										typeof errorData.current_balance === "number" &&
-										typeof errorData.total_spent === "number" &&
-										typeof errorData.total_promotions === "number" &&
-										typeof errorData.message === "string"
-									) {
-										return <span style={{ color: errorColor, fontWeight: "bold" }}>Credit Limit Reached</span>
-									}
-								}
-							} catch (e) {
-								// Not JSON or missing required fields, fall back to default error display
-							}
+							// const errorData = parseErrorText(apiRequestFailedMessage)
+							// if (errorData) {
+							// 	if (errorData.code === "insufficient_credits") {
+							// 		return <span style={{ color: errorColor, fontWeight: "bold" }}>Credit Limit Reached</span>
+							// 	}
+							// }
 							return <span style={{ color: errorColor, fontWeight: "bold" }}>API Request Failed</span>
 						}
 
@@ -779,32 +766,23 @@ export const ChatRowContent = ({ message, isExpanded, onToggleExpand, lastModifi
 								<>
 									{(() => {
 										// Try to parse the error message as JSON for credit limit error
-										if (apiRequestFailedMessage) {
-											const startIndex = apiRequestFailedMessage.indexOf("{")
-											const endIndex = apiRequestFailedMessage.lastIndexOf("}")
-											if (startIndex !== -1 && endIndex !== -1) {
-												try {
-													const jsonStr = apiRequestFailedMessage.substring(startIndex, endIndex + 1)
-													const errorData = JSON.parse(jsonStr)
-													if (
-														errorData.code === "insufficient_credits" &&
-														typeof errorData.current_balance === "number" &&
-														typeof errorData.total_spent === "number" &&
-														typeof errorData.total_promotions === "number" &&
-														typeof errorData.message === "string"
-													) {
-														return (
-															<CreditLimitError
-																currentBalance={errorData.current_balance}
-																totalSpent={errorData.total_spent}
-																totalPromotions={errorData.total_promotions}
-																message={errorData.message}
-															/>
-														)
-													}
-												} catch (e) {
-													// Not valid JSON or missing required fields, fall back to default error display
-												}
+										const errorData = parseErrorText(apiRequestFailedMessage)
+										if (errorData) {
+											if (
+												errorData.code === "insufficient_credits" &&
+												typeof errorData.current_balance === "number" &&
+												typeof errorData.total_spent === "number" &&
+												typeof errorData.total_promotions === "number" &&
+												typeof errorData.message === "string"
+											) {
+												return (
+													<CreditLimitError
+														currentBalance={errorData.current_balance}
+														totalSpent={errorData.total_spent}
+														totalPromotions={errorData.total_promotions}
+														message={errorData.message}
+													/>
+												)
 											}
 										}
 
@@ -1305,3 +1283,20 @@ const Markdown = memo(({ markdown }: { markdown?: string }) => {
 		</div>
 	)
 })
+
+function parseErrorText(text: string | undefined) {
+	if (!text) {
+		return undefined
+	}
+	try {
+		const startIndex = text.indexOf("{")
+		const endIndex = text.lastIndexOf("}")
+		if (startIndex !== -1 && endIndex !== -1) {
+			const jsonStr = text.substring(startIndex, endIndex + 1)
+			const errorObject = JSON.parse(jsonStr)
+			return errorObject
+		}
+	} catch (e) {
+		// Not JSON or missing required fields
+	}
+}
diff --git a/webview-ui/src/components/chat/CreditLimitError.tsx b/webview-ui/src/components/chat/CreditLimitError.tsx
index 0893ba0282..2881a87bfb 100644
--- a/webview-ui/src/components/chat/CreditLimitError.tsx
+++ b/webview-ui/src/components/chat/CreditLimitError.tsx
@@ -17,21 +17,22 @@ const CreditLimitError: React.FC<CreditLimitErrorProps> = ({ currentBalance, tot
 				borderRadius: "4px",
 				marginBottom: "12px",
 			}}>
-			<div style={{ marginBottom: "8px" }}>
+			<div style={{ color: "var(--vscode-errorForeground)", marginBottom: "8px" }}>{message}</div>
+			<div style={{ marginBottom: "12px" }}>
 				<div style={{ color: "var(--vscode-foreground)" }}>
 					Current Balance: <span style={{ fontWeight: "bold" }}>${currentBalance.toFixed(2)}</span>
 				</div>
 				<div style={{ color: "var(--vscode-foreground)" }}>Total Spent: ${totalSpent.toFixed(2)}</div>
 				<div style={{ color: "var(--vscode-foreground)" }}>Total Promotions: ${totalPromotions.toFixed(2)}</div>
 			</div>
-			<div style={{ color: "var(--vscode-errorForeground)", marginBottom: "12px" }}>{message}</div>
+
 			<VSCodeButtonLink
 				href="https://app.cline.bot/credits"
 				style={{
 					width: "100%",
 				}}>
 				<span className="codicon codicon-credit-card" style={{ fontSize: "14px", marginRight: "6px" }} />
-				Buy Cline Credits
+				Buy Credits
 			</VSCodeButtonLink>
 		</div>
 	)