Add Retry Request button to 'Insufficient balance' error

Author: saoudrizwan

src/core/webview/ClineProvider.ts

@@ -22,7 +22,7 @@ import { AutoApprovalSettings, DEFAULT_AUTO_APPROVAL_SETTINGS } from "../../shar
 import { BrowserSettings, DEFAULT_BROWSER_SETTINGS } from "../../shared/BrowserSettings"
 import { ChatContent } from "../../shared/ChatContent"
 import { ChatSettings, DEFAULT_CHAT_SETTINGS } from "../../shared/ChatSettings"
-import { ExtensionMessage, ExtensionState, Platform } from "../../shared/ExtensionMessage"
+import { ExtensionMessage, ExtensionState, Invoke, Platform } from "../../shared/ExtensionMessage"
 import { HistoryItem } from "../../shared/HistoryItem"
 import { McpDownloadResponse, McpMarketplaceCatalog, McpServer } from "../../shared/mcp"
 import { ClineCheckpointRestore, WebviewMessage } from "../../shared/WebviewMessage"
@@ -956,6 +956,15 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 						)
 						break
 					}
+					case "invoke": {
+						if (message.text) {
+							await this.postMessageToWebview({
+								type: "invoke",
+								invoke: message.text as Invoke,
+							})
+						}
+						break
+					}
 					// telemetry
 					case "openSettings": {
 						await this.postMessageToWebview({

src/shared/ExtensionMessage.ts

@@ -42,7 +42,7 @@ export interface ExtensionMessage {
 		| "didBecomeVisible"
 		| "accountLoginClicked"
 		| "accountLogoutClicked"
-	invoke?: "sendMessage" | "primaryButtonClick" | "secondaryButtonClick"
+	invoke?: Invoke
 	state?: ExtensionState
 	images?: string[]
 	ollamaModels?: string[]
@@ -70,6 +70,8 @@ export interface ExtensionMessage {
 	isImage?: boolean
 }
 
+export type Invoke = "sendMessage" | "primaryButtonClick" | "secondaryButtonClick"
+
 export type Platform = "aix" | "darwin" | "freebsd" | "linux" | "openbsd" | "sunos" | "win32" | "unknown"
 
 export const DEFAULT_PLATFORM = "unknown"

src/shared/WebviewMessage.ts

@@ -58,6 +58,7 @@ export interface WebviewMessage {
 		| "updateMcpTimeout"
 		| "fetchOpenGraphData"
 		| "checkIsImageUrl"
+		| "invoke"
 	// | "relaunchChromeDebugMode"
 	text?: string
 	disabled?: boolean

webview-ui/src/components/account/AccountView.tsx

@@ -68,9 +68,9 @@ export const ClineAccountView = () => {
 				<div
 					style={{
 						padding: "12px 16px",
-						border: "1px solid var(--vscode-widget-border)",
-						borderRadius: "6px",
-						backgroundColor: "var(--vscode-editor-background)",
+						border: "1px solid var(--vscode-input-border)",
+						borderRadius: "2px",
+						backgroundColor: "var(--vscode-dropdown-background)",
 					}}>
 					<div
 						style={{

webview-ui/src/components/chat/CreditLimitError.tsx

@@ -1,5 +1,8 @@
 import React from "react"
 import VSCodeButtonLink from "../common/VSCodeButtonLink"
+import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"
+import { vscode } from "../../utils/vscode"
+import { Invoke } from "../../../../src/shared/ExtensionMessage"
 
 interface CreditLimitErrorProps {
 	currentBalance: number
@@ -30,10 +33,26 @@ const CreditLimitError: React.FC<CreditLimitErrorProps> = ({ currentBalance, tot
 				href="https://app.cline.bot/credits"
 				style={{
 					width: "100%",
+					marginBottom: "8px",
 				}}>
 				<span className="codicon codicon-credit-card" style={{ fontSize: "14px", marginRight: "6px" }} />
 				Buy Credits
 			</VSCodeButtonLink>
+
+			<VSCodeButton
+				onClick={() => {
+					vscode.postMessage({
+						type: "invoke",
+						text: "primaryButtonClick" satisfies Invoke,
+					})
+				}}
+				appearance="secondary"
+				style={{
+					width: "100%",
+				}}>
+				<span className="codicon codicon-refresh" style={{ fontSize: "14px", marginRight: "6px" }} />
+				Retry Request
+			</VSCodeButton>
 		</div>
 	)
 }